Какие бывают списки
- 29 марта 2014
Список является простейшим способом группирования однородных элементов.
Списки бывают:
- нумерованные
- маркированные
- списки определений
Нумерованные списки
Заключаются в теги <ol></ol>
.
Сторки списка выводятся в теге <li>
(как в нумерованных, так и маркированных)
<!--- маркированный список ---> <ol> <li>Нумерованный</li> <li>Маркированный</li> <li>Списки определений</li> </ol>
Тег ol
может применяться с атрибутом start="значение"
, тогда нумерация списка будет начинаться с заданного значения.
Если необходимо изменить номер определенного элемента списка и следующих за ним элементов, то тег li
применяют с атрибутом value="значение"
.
Можно задавать стиль отображения упорядоченного списка, задавая средствами CSS то или иное значение свойству list-style-type
Его можно применять как ко всему списку, так и к отдельным пунктам li
. На практике допускается использование вместо него универсального свойства list-style
.
<!--- атрибуты start, value и стиль отображения списка ---> <ol start="4" style="list-style-type: upper-roman;"> <li>Нумерация начинается с 4</li> <li value="8">Меняем номер на 8</li> <li>Последующие номера меняются автоматически</li> </ol>
- Нумерация начинается с 4
- Меняем номер на 8
- Последующие номера меняются автоматически
Наиболее часто используемые значения свойства list-style-type
:
decimal - обычные числа (по умолчанию)
upper-alpha - заглавные латинские буквы
lower-alpha - строчные латинские буквы
upper-roman - римские числа
Внимание!
Маркеры нумерованных списков выравниваются по правому краю! Поэтому, при достаточно больших числах (например 1802 или XXVII) маркер смещается влево и может выйти за пределы родительского блока!
Это решается установкой большего левого отступа для тега ol
.
Маркированные списки
Заключаются между тегами <ul></ul>
<!--- неупорядоченный список ---> <ul> <li>пункт 1</li> <li>пункт 2</li> <li>пункт 3</li> </ul>
Обычный маркированный список, внешний вид которого определяется значениями по умолчанию Вашего браузера
- пункт 1
- пункт 2
- пункт 3
Вы можете изменить вид маркеров как всего списка, так и отдельных пунктов с помощью свойства list-style-type
:
circle - кружок
disc - жирная точка
square - квадрат
none - без маркера
Интересная особенность
Точно так-же значение none можно присвоить свойству list-style-type: none
тега ol
Более того! Нумерованный и маркированный списки отличаются только значением этого свойства!
ul {list-sytle-type: decimal;} = ol
Результат будет идентичным!
Для добавления своих маркеров используют свойство , но пользуются им редко, потому что сложно позиционировать изображение маркера. Легче в качестве маркера использовать фоновое изображение для тегов
.
Списки определений
Заключаются между тегами
и . Применяются для создания словарей, списков терминов и т.п.<!--- список определений ---> <dl> <dt>Термин</dt> <dd>Описание...</dd> <dt>Термин</dt> <dd>Описание...</dd> </dl>
- Термин
- Описание...
- Термин
- Описание...