Списки являются одной из основных форм представления контента на странице. Они позволяют группировать связанные между собой фрагменты, объединяя их по смыслу. В HTML представлены три вида списков:
- Маркированные;
- Нумерованные;
- Списки определений.
В предложении выше виды списков были сгруппированы с помощью маркированного списка. Он имеет небольшой отступ слева и обозначается маркером у каждого отдельного пункта. Каждый вид списка имеет такие черты, что позволяет быстро определить их на странице.
Помимо этого все списки имеют контейнеры — теги, внутри которых располагается информация. Эти контейнеры помогают странице определить, в каком месте начинается список и где он заканчивается.
В своем представлении каждый элемент списка является блочным элементом. Это означает, что он будет занимать всю доступную ему ширину и каждый новый элемент будет начинаться с новой строки.
Маркированные списки
Маркированный список — популярный инструмент для группировки фрагментов. Его преимущество состоит в отсутствии порядка, в котором размещаются элементы. Таким образом не вводится шкала «важнее — неважно» или «шаг 1 — шаг 2». Вы просто перечисляете контент, который пользователь должен увидеть.
Как и другие списки, создание маркированного списка начинается с указания контейнера. В роли контейнера выступает тег <ul></ul> — сокращение от Unordered List. Каждый элемент вкладывается внутрь этого контейнера и вкладывается в тег <li></li> — сокращение от List Item. Так браузер отделяет списки друг от друга.
Представим список из начала урока в виде 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>. Тег <ol> — сокращение от Ordered List. Примером такого списка может служить список дел на день.
<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> от английского Definition List, внутри которого не привычная схема <li></li>, а система из двух тегов:
<dt></dt>— термин. От английского Definition Term;<dd></dd>— определение. От английского Definition Description.
Каждая новая пара повторяет схему из двух тегов. Список из нескольких терминов размечается следующим образом:
<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");
}
Важно: вы не можете контролировать размеры такого маркера. Это значит, что изображение нужно подстраивать по размерам заранее. Для стилизации списков с возможностью изменения размеров маркера используются псевдоэлементы, которые будут изучены в следующих уроках.
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
