В HTML существует 3 вида списков:
- списки определений;
- нумерованные (упорядоченные) списки;
- маркированные (неупорядоченные) списки.
Рассмотрим их подробнее.
Списки определений
Списки определений нужны в тех сайтах, которые посвящены, как правило, обучению. Например, отличный сайт webref.ru использует списки определений для указания атрибутов тегов или вариантов свойств.
Создается список определений с помощью 3-х тегов:
- dl - definition list - основной, или родительский тег;
- dt - definition ternmin - вложенный тег;
- dd - definition description - вложенный тег.
Код списка выглядит так:
| 1 2 3 4 5 6 7 8 | <dl> <dt>Термин 1</dt> <dd>Описание термина 1</dd> <dt>Термин 2</dt> <dd>Описание термина 2</dd> <dt>Термин 3</dt> <dd>Описание термина 3</dd> </dl> |
Для примера используем определения тегов этого списка:
| 1 2 3 4 5 6 7 8 | <dl> <dt>dl - definition list</dt> <dd>- основной, или родительский тег;</dd> <dt>dt - definition ternmin</dt> <dd>- вложенный тег;</dd> <dt>dd - definition description</dt> <dd>вложенный тег.</dd> </dl> |
Что получилось:
Обратите внимание, что элемент dd имеет смещение от левого края окна браузера на 40px вправо. За счет этого определение визуально отличается от термина и привлекает к себе внимание.
Список определений хорошо форматировать с помощью css. Т.к. вряд ли на сайте будет много вариантов таких списков, имеет смысл использовать просто селектор тега, не прибегая ни к использованию классов, ни id. Например, наш список можно отформатировать так:
| 1 2 3 4 5 6 7 8 9 | <style> dt { color: blueviolet; font-weight: bold; } dd { color: #999; } </style> |
Смотрим, что получилось на втором примере:
Нумерованный список
Нумерованный список еще называют упорядоченным от его английского названия - ordered list. Собственно, это словосочетание и дало название тега - <ol>. Внутри тега <ol> может находится произвольное количество тегов <li>с элементами списка</li>:
| 1 2 3 4 5 6 7 | <ol> <li>Элемент списка 1</li> <li>Элемент списка 2</li> <li>Элемент списка 3</li> ... <li>Элемент списка n</li> </ol> |
По умолчанию списки нумеруются арабскими, или десятичными цифрами: 1, 2, 3, 4 и т.д. Но это можно изменить как для всего списка (тег <ol>), так и для отдельного элемента списка (тег <li>), добавив к ним атрибут type="A", например:
| 1 2 3 4 5 | <ol type="A"> <li>Элемент списка 1</li> <li>Элемент списка 2</li> <li>Элемент списка 3</li> </ol> |
Атрибут type может иметь следующие значения:
- type="A" - прописные латинские цифры;
- type="a" - строчные латинские цифры;
- type="I" - прописные римские цифры;
- type="i" - строчные римские цифры;
- type="1" - арабские цифры (значение по умолчанию, можно не указывать).
Попробуем добавить к элементам <li> атрибут type с разными значениями:
| 1 2 3 4 5 6 7 8 9 10 11 | <ol> <li type="A"><b>Пушкин А.С. </b>Дубровский</li> <li type="A"><b>Гоголь Н.В. </b>Майская ночь, или Утопленница</li> <li type="a"><b>Некрасов Н.А.</b> Железная дорога</li> <li type="a"><b>Гарин-Михайловский Н.Г.</b> Детство Темы</li> <li type="I"><b>Тургенев И.С</b>. Рассказы из цикла «Записки охотника»: «Бежин луг»</li> <li type="I"><b>Лесков Н.С. </b>Человек на часах</li> <li><b>Андреев. Л.Н.</b> Петька на даче. Ангелочек</li> <li type="i"><b>Чехов А.П.</b> Толстый и тонкий</li> <li type="i"><b>Платонов А.П.</b> Корова</li> </ol> |
Вот как будет выглядеть:
Не особо красиво, не так ли?
На самом деле сейчас атрибут type устарел, поэтому используют его крайне редко. Вдумайтесь сами, как часто бывает необходимость в создании списков, скажем, с римской нумерацией? Кроме того, есть возможность задать различные виды нумерации в css.
Атрибут reversed позволяет "перевернуть" нумерацию списка:
Для упорядоченного списка можно также добавить атрибут start="число". Под числом подразумевается номер начального элемента списка, с которого нужно начать нумерацию. Может быть использован, например, в описании действий в инструкции или уроке, когда это описание нужно разорвать иллюстрацией (одной или несколькими).
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <h3>ПОРЯДОК СБОРКИ</h3> <ol> <li>Установить в базу подъемно поворотный механизм.</li> <li>Установить в подъемно поворотный механизм сидение согласно указанному рисунку слева.</li> </ol> <h3>УПРАВЛЕНИЕ МЕХАНИЗМОМ КАЧАНИЯ КРЕСЛА</h3> <img src="img/samba2.jpg" alt="Samba2"> <ol start="3"> <li>Регулировка высоты сидения: <ol> <li type="A">Для поднятия сидения - привстать с кресла и потянуть рычаг вверх.</li> <li type="A">Для опускания сидения - сидя в кресле потянуть рычаг вверх, (см. рис 1-3)</li> </ol> </li> <li>Свободное качание кресла.</li> <li>Фиксация в одном положении:</li> <li>Привести спинку кресла в исходное положение (не отклоняться назад).</li> <li>Толкнуть рычаг под себя - качание кресла будет заблокировано.</li> <li>Потянуть рычаг от себя - качание кресла будет разблокировано.</li> </ol> |
Для отдельного элемента <li> можно указать атрибут value="число", чтобы именно с этого номера начиналась нумерация внутри списка.
Маркированный список
Маркированный список еще называется неупорядоченным (unordered list), т.к. строгая нумерация в нем не предусмотрена. Зато есть 3 типа маркеров, определяемых в атрибуте type, хотя он на данный момент уже устарел и заменяется css-стилями:
- disc - темный кружок (значение по умолчанию, можно не указывать);
- circle - пустой кружок;
- square - темный квадрат.
Определяется список родительским элементом <ul> и множеством дочерних элементов <li>. Очень похож в этом на нумерованный список:
| 1 2 3 4 5 6 7 | <ul> <li>Элемент списка 1</li> <li>Элемент списка 2</li> <li>Элемент списка 3</li> ... <li>Элемент списка n</li> </ul> |
По умолчанию выводится с черными кружочками и сдвигом вправо на 40px.
Для того чтобы вывести списки разных типов, пока что используем атрибут type:
В этом примере заголовки сдвинуты на 40px вправо за счет margin-left, поэтому находятся на одном уровне с текстом в пунктах списка по отношению к левому краю браузера.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <h1>Вакансия</h1> <h2>HTML/Javascript developer</h2> <h3>Требования к кандидату:</h3> <ul> <li>активное участие в разработке интернет-проектов от 2 лет;</li> <li>отличное знание спецификаций HTML, XHTML, CSS;</li> <li>знание особенностей браузеров;</li> <li>понимание DOM-модели;</li> <li>знание библиотеки Prototype;</li> <li>навыки объектно-ориентированного программирования;</li> <li>опыт работы с cvs/svn;</li> <li>знание английского языка на уровне чтения технической документации.</li> </ul> <h3>Плюсом будут:</h3> <ul type="circle"> <li>опыт разработки ajax приложений.</li> </ul> <h3>Личные качества:</h3> <ul type="square"> <li>адекватность и ответственность;</li> <li>умение работать в рамках жестко заданных сроков.</li> </ul> |
CSS:
| 1 2 3 4 5 6 7 8 9 10 11 | h1 { font-size: 1.5em; color: brown; } h3 { color: brown; margin-left: 40px; } h2 { color: orange; } |
Маркированный список в качестве ... слайдера
CSS-правила позволяет нам использовать списки не по прямому их назначению - исключительно для отображения текста. На самом деле структура вложенных друг в друга подчиненных элементов уже давно используется в меню. С ее помощью выводят перечень товаров в магазине и даже элементы слайдера.
Ниже вы найдете пример, в котором свойство flex позволяет нам сделать слайдер только на основе свойств Flexbox-модели. Изначально мы задаем flex-basis как 25%, при наведении меняем его на 75%. А свойство flex-growпозволяет нам изменять размер слайда при наведении для небольших экранов в директиве @media. Переключитесь на вкладку CSS, чтобы увидеть все свойства и разобраться с ними.
See the Pen CSS Strip Flexbox Slider by Elen (@ambassador) on CodePen.
Часто ли используется форматирование списков? Это вроде не такая уж важная часть страницы?
Спасибо за публикацию, очень правильно все написано!
Не подскажете, как в дважды или трижды вложенном ul-списке раскрасить самый внутренний одними css-стилями, не редактируя исходный html-документ?
Используйте контекстные селекторы:
ul ul ul {
color: black;
padding-left: 10px;
list-style-type: disk;
}
Эти правила будут применены к самому вложенному ul, т.к. контекстный селектор читается справа налево.