Что такое списки и для чего они нужны?
Иногда текстовую информацию редактируют таким образом, чтоб как-то визуально и логически выделить одинаковые составляющие. Например, перечисление каких-то преимуществ.
Преимущества машин BMW:
- надежность систем;
- комфорт водителя и пассажиров;
- качество материалов.
Для подобных случаев в языке html предусмотрено целое семейство элементов, которые позволяют создать нумерованный или маркированный список, а также список определений.
Начнем с маркированного списка.
Маркированные списки создаются с помощью тега ul, который содержит внутри себя теги li, обозначающие «элемент списка».
Т.е. тег ul – это как-бы контейнер для всех элементов списка, а каждый тег li– это отдельный пункт списка.
<ul>Преимущества машин BMW:
<li>- надежность систем; </li>
<li>- комфорт водителя и пассажиров; </li>
<li>- качество материалов. </li>
</ul>
Что можно сделать с внешним видом списка при помощи CSS?
На самом деле очень много, взять хотя бы те же меню на сайтах, которые в большинстве случаев до сих пор делаются при помощи маркированных списков, но это отдельная тема для будущего урока, а сейчас рассмотрим более простые вещи.
В языке CSS есть ряд специфических свойств, которые применяются только для списков. На самом деле их всего 3:
- list-style-position – отвечает за позиция маркеров списка: внутри или снаружи;
- list-style-type – изменяет вид маркера: квадрат, закрашенный или пустой круг;
- list-style-image – позволяет вместо маркера использовать изображение.
Нумерованный список.
Нумерованный список создаётся точно также как и маркированный, только вместо тега ul используется тег ol, который также содержит внутри себя теги li.
Если элементы неупорядоченного списка по умолчанию отмечаются маркерами, то элементы упорядоченного списка - нумеруются. Ну и поскольку есть нумерация, то в данном типе списков можно ею управлять при помощи специальных атрибутов.
С помощью атрибута start можно изменить начало нумерации.
При помощи атрибута reverse изменяется направление отсчета на обратное.
Еще одна разновидность списков - список определений, который создаётся с помощью трёх тегов:
- dl обозначает сам список определений;
- dt обозначает термин;
- dd обозначает определение термина.
Теги dt и dd пишутся парами внутри dl.
Например:
<dl>
<dt>Термин 1</dt>
<dd>Определение 1</dd>
<dt>Термин 2</dt>
<dd>Определение 2</dd>
</dl>
Многоуровневый список.
Создать многоуровневый список достаточно просто.
Сначала нужно создать список первого уровня, а затем внутрь любого элемента этого списка, между тегами <li> и </li>, добавить список второго уровня. При этом необходимо аккуратно и последовательно закрывать все теги.
