2.2. Нумерованный список
Нумерованный список строится аналогично маркированному. Его особенность состоит в том, что он определяется тегом <ol>, а маркеры его элементов по умолчанию имеют вид десятичных чисел.
С помощью параметра list-style-type можно выбрать и другие маркеры, в том числе и такие, которые применяются для маркированных списков, задаваемых тегом <ul> (например, disc, circle и т. п.). Вот несколько возможных значений, специфических для нумерованных списков:
decimal - десятичные числа (1, 2, 3, ...);
d
ecimal-leading-zero
-
десятичные числа с ведущими нулями
(01/02, 03, ...);
lower-roman - маленькие римские числа (i, ii, iii, iv, ...);
upper-roman - большие римские числа (I, II, III, IV, ...);
lower-alpha - строчные латинские буквы (а, b, с, ...);
upper-alpha - прописные латинские буквы (А, В, С, ...).
Перечисленные значения можно применять и для списков, заданных посредством тега <ul>.
На рис. приведен пример различных маркеров для трехуровневого нумерованного списка.
Итак, для создания списка предназначены два тега: <ul> и <ol>. Различие между ними проявляется только тогда, когда вы применяете их без указания вида маркеров с помощью CSS. В этом случае маркеры в виде кружков и квадратов или десятичных номеров отображаются автоматически (по умолчанию) в зависимости от тега- <ul> или <ol>. Если вы решили отформатировать списки с помощью CSS, то уже не важно, какой именно тег будет применен.
2.3. Автоматическая нумерация элементов списка
П
ри
создании сложного и длинного списка
нередко возникает желание автоматически
пронумеровать элементы так, чтобы
отразить их иерархию. Это делается с
помощью
стилевых параметров content,
counter-increment
и counter-reset
для организации счетчика элементов
списка.
Оказывается, что правильность результата автоматической нумерации существенно зависит от разметки списка. На рис. слева показан пример трехуровневого списка с автоматической нумерацией элементов в двух вариантах разметки. В одном варианте теги <li> применялись в неконтейнерной нотации, а в другом - в контейнерной. Во втором варианте пришлось включить подсписок третьего уровня в контейнер <li>. Если этого не сделать, то нумерация будет неправильной, как показано на рис. справа.
Пример №2 для самостоятельной реализации:
Рассмотрим правила CSS, обеспечивающие автоматическую нумерацию. Для элементов списка использован псевдокласс li:before, задающий предшествующие им элементы (в нашем случае- номера). Конкретно в li:before определены два параметра:
content-
вычислить содержимое элемента функцией
counters
(item,
"."), где i
tem-
идентификатор счетчика (задается
произвольно), а "." – разделитель
компонентов номера; кроме того, в
конце номера следует поставить точку
и пробел (". ");
counter-increment:item - увеличить содержимое счетчика item на единицу.
Для списка в целом (элемент <ol>) определены такие параметры:
list-style-type:none - не выводить маркеры элементов списка;
counter-reset:item –обнулить содержимое счетчика item.
Параметр content позволяет не только вычислить номер элемента в списке, но и добавить к нему строки (декорировать номера генерируемым содержимым). В листинге 2 приведен пример двухуровневого списка, в котором, маркеры элементов первого уровня отображаются в виде "Глава 1", "Глава 2" и т. д., а маркеры элементов второго уровня - номером, перед которым стоит символ параграфа (§). Специальные символы в CSS представляются шестнадцатеричным кодом Unicode с обратным слэшем в качестве префикса. Так, символ § следует представить как \А7. Внешний вид данного документа показан на рис.
Листинг 2. Список с автоматической нумерацией и декорацией номеров
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN"
"http://www.w3.org/TR/HTML4.01/loose.dtd">
<html>
<head>
<title>Список</title>
<style type="text/сss">
ol {
list-style-type:none,
counter-reset:item
}
ol li:before { /* перед элементами 1-го уровня */
content:"Глава " counters(item,".") ". ";
counter-increment:item
}
ol ol li:before { /* перед элементами 2-го уровня */
content: "\A7" counters (item, ".") ". ";
counter-increment:item
}
</style>
</head>
<body>
<ol>
<li>Что такое HTML и CSS
<ol>
< li>Языки разметки документа</ li>
< li>Таблицы стилей</ li>
</ol>
</li>
< li>Структура HTML-документа
< li>0сновы CSS
<ol>
<li>Присоединение таблиц стилей</li>
< li>Правила форматирования</li>
< li>Приоритеты определений</li>
< li>Размерность и цвета</li>
< li>Блоки</li>
</ol>
</li>
</ol>
</body>
</html>