0Pricing
HTML Academy · Урок

Вложенные списки и стилизация списков

Вкладывайте списки друг в друга и управляйте их внешним видом

«Вложенные списки и стилизация списков» — бесплатный урок HTML Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Вложенные списки

Списки можно вкладывать в элементы <li>:

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

Правильное вложение

Вложенный список должен находиться inside элемента <li>, а не быть непосредственным дочерним элементом <ul> или <ol>:

<!-- WRONG: nested ul as direct child of outer ul -->
<ul>
  <ul>   <!-- INVALID -->
    <li>Item</li>
  </ul>
</ul>

<!-- CORRECT: nested ul inside li -->
<ul>
  <li>
    Parent item
    <ul>
      <li>Child item</li>
    </ul>
  </li>
</ul>

Стили маркеров на разных уровнях

Браузеры применяют разные маркеры по умолчанию на каждом уровне вложенности:

<ul>
  <li>Level 1 — disc (filled circle)</li>  <!--  • -->
  <ul>
    <li>Level 2 — circle (open circle)</li>  <!--  ○ -->
    <ul>
      <li>Level 3 — square</li>             <!--  ▪ -->
    </ul>
  </ul>
</ul>

Сброс с помощью CSS

Переопределяйте стили вложенных списков с помощью CSS:

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Style each level explicitly */
.nav > li > ul {
  padding-left: 1rem;
  list-style: disc;
}

Вложенные нумерованные списки

Вложенные упорядоченные списки с разными типами:

<ol type="1">
  <li>Introduction
    <ol type="a">
      <li>Background</li>
      <li>Motivation</li>
    </ol>
  </li>
  <li>Methods
    <ol type="a">
      <li>Data collection</li>
    </ol>
  </li>
</ol>

Счётчики CSS для пользовательской нумерации

Пользовательская иерархическая нумерация с помощью счётчиков CSS:

ol {
  list-style: none;
  counter-reset: level1;
}
ol > li { counter-increment: level1; }
ol > li::before { content: counter(level1) '. '; }

ol ol {
  counter-reset: level2;
}
ol ol > li { counter-increment: level2; }
ol ol > li::before {
  content: counter(level1) '.' counter(level2) ' ';
}

Шаблон навигации-аккордеона

Вложенный список может стать раскрывающейся боковой навигацией:

<ul class="tree-nav">
  <li>
    <details>
      <summary>Frontend</summary>
      <ul>
        <li><a href="/html">HTML</a></li>
        <li><a href="/css">CSS</a></li>
      </ul>
    </details>
  </li>
  <li><a href="/backend">Backend</a></li>
</ul>

Интервалы во вложенных списках

Управляйте визуальным отступом с помощью CSS:

ul {
  padding-left: 1.5rem;  /* Controls indent at each level */
  margin: 0.5rem 0;
}

/* Tighter nested spacing */
ul ul {
  margin: 0.25rem 0;
  padding-left: 1.25rem;
}

Повторение сокращённой записи list-style

Все свойства стиля списка, объединённые вместе:

/* Shorthand: type position image */
ul {
  list-style: square inside;
}

/* Longhand equivalents: */
ul {
  list-style-type: square;
  list-style-position: inside;   /* inside or outside */
  list-style-image: none;
}

Пользовательские значки в качестве маркеров списка

Используйте SVG или эмодзи в качестве маркеров списка:

ul.checklist {
  list-style: none;
  padding: 0;
}

ul.checklist li::before {
  content: '✓ ';
  color: #22c55e;
  font-weight: bold;
}

/* Or with a background SVG */
ul.icon-list li {
  padding-left: 2rem;
  background: url('/icons/arrow.svg') no-repeat 0 0.2em;
  background-size: 1rem 1rem;
  list-style: none;
}

Доступность вложенных списков

Вложенные списки и средства чтения с экрана:

  • Средства чтения с экрана объявляют уровень вложенности и количество элементов
  • Глубокая вложенность (4 и более уровней) сбивает с толку — ограничивайтесь максимум 2–3 уровнями
  • Если для внешнего списка используется list-style: none, добавьте role="list"

Быстрая проверка

Где должен находиться вложенный список внутри внешнего списка?

Повторение: вложенные списки

Основные сведения о вложенных списках:

  • Вкладывайте списки внутрь <li> — никогда не помещайте их непосредственно в <ul>
  • По умолчанию браузеры используют на уровнях последовательность: disc → circle → square
  • Счётчики CSS позволяют создавать собственную иерархическую нумерацию
  • Для удобства использования ограничивайте вложенность 2–3 уровнями
  • Используйте <details>+<summary> для раскрывающейся вложенной навигации

Часто задаваемые вопросы

Урок «Вложенные списки и стилизация списков» бесплатный?

Да — полный текст урока «Вложенные списки и стилизация списков» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Вложенные списки и стилизация списков»?

Вкладывайте списки друг в друга и управляйте их внешним видом Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Вложенные списки и стилизация списков»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Неупорядоченные списки: ul и li
  2. Упорядоченные списки: ol, start, reversed и type
  3. Списки описаний: dl, dt и dd
  4. Вложенные списки и стилизация списков
← Назад к HTML Academy