Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете
Основы вёрстки контента

Списки

Списки являются одной из основных форм представления контента на странице. Они позволяют группировать связанные между собой фрагменты, объединяя их по смыслу. В HTML представлены три вида списков:

  • Маркированные;
  • Нумерованные;
  • Списки определений.

В предложении выше виды списков были сгруппированы с помощью маркированного списка. Он имеет небольшой отступ слева и обозначается маркером у каждого отдельного пункта. Каждый вид списка имеет такие черты, что позволяет быстро определить их на странице.

Помимо этого все списки имеют контейнеры — теги, внутри которых располагается информация. Эти контейнеры помогают странице определить, в каком месте начинается список и где он заканчивается.

В своём представлении каждый элемент списка является блочным элементом. Это означает, что он будет занимать всю доступную ему ширину и каждый новый элемент будет начинаться с новой строки.

Маркированные списки

Маркированный список — популярный инструмент для группировки фрагментов. Его преимущество состоит в отсутствии порядка, в котором размещаются элементы. Таким образом не вводится шкала «важнее — неважно» или «шаг 1 — шаг 2». Вы просто перечисляете контент, который пользователь должен увидеть.

Как и другие списки, создание маркированного списка начинается с указания контейнера. В роли контейнера выступает тег <ul></ul>. Каждый элемент вкладывается внутрь этого контейнера и вкладывается в тег <li></li>. Так браузер отделяет списки друг от друга.

Представим список из начала урока в виде HTML разметки. Для этого указывается контейнер и три тега <li></li>. Внутри каждого из этих тегов помещается один пункт списка.

<ul>
  <li>Маркированные;</li>
  <li>Нумерованные;</li>
  <li>Списки определений.</li>
</ul>

Списки в HTML возможно вкладывать друг в друга. Это позволяет глубже структурировать информацию. Для создания вложенного списка новый контейнер вкладывается внутрь тега <li><li>. Как вы увидите, списки можно комбинировать. Маркированные вкладывать внутрь нумерованных. Нумерованные внутрь маркированных. В общем виде вложенность может быть описана так:

<h1>Теги в HTML</h1>
<ul>
  <li>Параграфы</li>
  <li>Списки
    <ul>
      <li>Маркированные;</li>
      <li>Нумерованные;</li>
      <li>Списки определений.</li>
    </ul>
  </li>
</ul>

У вложенного списка изменился маркер. Это позволяет даже при отсутствии отступов разделить вложенные списки от основного уровня. CSS позволяет управлять маркерами и настраивать их внешний вид. В конце урока будет изучено свойство, которое позволяет стилизовать маркеры и даже использовать свои изображения для этого.

Нумерованные списки

Структура нумерованных списков повторяет маркированные списки. Имея свою специальную обёртку возможно вкладывать пункты списка. Семантическое отличие нумерованных списков заключается в последовательности. Такие списки идут строго по порядку и обозначают последовательность какой-либо информации.

Нумерованный список использует контейнер <ol></ol>, в качестве пунктов списков используется тег <li></li>. Примером такого списка может служить список дел на день.

<h1>Список дел на вторник</h1>
<ol>
  <li>Позавтракать</li>
  <li>Оплатить билет на метро</li>
  <li>Съездить к бабушке</li>
  <li>Лечь спать</li>
</ol>

Нумерованные списки возможно вкладывать друг в друга. Внутри нумерованных списков могут лежать маркированные.

<h1>Список дел на вторник</h1>
<ol>
  <li>Позавтракать</li>
  <li>Оплатить билет на метро</li>
  <li>Съездить к бабушке
    <ul>
      <li>Купить цветы</li>
      <li>Купить конфеты</li>
    </ul>
  </li>
  <li>Лечь спать</li>
</ol>

Списки определений

С точки зрения HTML списки определения являются самыми сложными для вёрстки. Они включают в себя больше тегов для разметки и позволяют создавать семантическую структуру вида «термин — определение». Такие списки удобны при составлении словарей или глоссариев.

В качестве контейнера для списков определений используется тег <dl></dl>, внутри которого не привычная схема <li></li>, а система из двух тегов:

  1. <dt></dt> — термин;
  2. <dd></dd> — определение.

Каждая новая пара повторяет схему из двух тегов. Список из нескольких терминов размечается следующим образом:

<dl>
  <dt>HTML</dt>
    <dd>Язык гипертекстовой разметки</dd>
  <dt>CSS</dt>
    <dd>Каскадные таблицы стилей</dd>
</dl>

Стилизация списков

Основным способом стилизацией списков является изменение маркера, который появляется в левой части пункта списка. В маркированных и нумерованных списках его можно изменить с помощью свойства list-style-type. Оно принимает множество различных значений. Все их вы можете увидеть с помощью веб-инспекторов. Для создания маркера в виде квадрата используется значение square.

Свойство list-style-type позволяет скрыть маркер списка. Это частая практика при создании меню через списки, где нет необходимости в выделении пунктах маркерами. Для скрытия маркера используется значение none.

Изменять маркер можно одним из двух способов:

  • Установка свойства на контейнер. В этом случае все элементы списка получат тот маркер, который был указан в свойстве.
  • Установка свойства на элемент списка. Маркер изменится только у одного пункта списка, другие получат маркер по умолчанию.

В качестве примера установим квадратный маркер для маркированного списка, а у второго элемента удалим маркер.

Картинка в качестве маркера списка

Помимо встроенных в браузер значений маркеров списка, CSS даёт возможность устанавливать пользовательские маркеры в виде картинок. Это позволяет сделать уникальную стилизацию списков для проекта, как для всего, так и для отдельных списков.

Чтобы установить маркер в виде своего изображения используется свойство list-style-image, значением которого является ссылка на изображение. Оно указывается внутри url(), например:

.list-image {
  list-style-image: url('./good.png');
}

Важно: вы не можете контролировать размеры такого маркера. Это значит, что изображение нужно подстраивать по размерам заранее. Для стилизации списков с возможностью изменения размеров маркера используются псевдоэлементы, которые будут изучены в следующих уроках.


<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Зарегистрироваться

или войти в аккаунт

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».