Создание сайтов с нуля - урок 9 - Списки html, теги ul, ol, dl, li, работа со списками

Что такое списки и для чего они нужны?

Иногда текстовую информацию редактируют таким образом, чтоб как-то визуально и логически выделить одинаковые составляющие. Например, перечисление каких-то преимуществ.

Преимущества машин 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>, добавить список второго уровня. При этом необходимо аккуратно и последовательно закрывать все теги.