Списки активно используются для автоматической нумерации блоков текста. Однако при использовании вложенных списков нельзя получить нумерацию подпунктов типа 1.1, 1.2, 1.3, поскольку каждый список будет независимым. Но то, что нельзя в HTML, можно возложить на стили. Для начала рассмотрим, как вообще создавать вложенные списки. В качестве основного контейнера выступает тег <OL>, а элементы списка формируются тегами <LI>. Вложенный список также начинается с <OL>, но этот тег должен располагаться внутри контейнера <LI>, именно так соблюдается корректность синтаксиса (пример 1).
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Вложенный список</title>
</head>
<body>
<ol>
<li>Пункт 1
<ol>
<li>Подпункт 1.1</li>
<li>Подпункт 1.2</li>
<li>Подпункт 1.3</li>
</ol>
</li>
<li>Пункт 2
<ol>
<li>Подпункт 2.1</li>
<li>Подпункт 2.2</li>
</ol>
</li>
</ol>
</body>
</html>
Результат данного примера показан на рис. 1. Обратите внимание, что нумерация вложенных списков начинается каждый раз заново.
Теперь уберем встроенную нумерацию списков и создадим ее по новой, но уже в том виде, что нам требуется. Для этого понадобится три стилевых атрибута: counter-reset, counter-increment и content. counter-reset — задает некоторую переменную, которая будет хранить значение счетчика;
counter-increment — увеличивает или уменьшает значение счетчика на указанное число;
content — выводит значение счетчика при использовании аргумента counter(переменная). Работает совместно с псевдоэлементами after или before.
Для списка первого уровня переменную счетчика назовем list1, а для второго уровня — list2. Тогда инициация счетчиков для списков будет следующей.
Code
OL { counter-reset: list1; } /* Список первого уровня */
OL OL { counter-reset: list2; } /* Список второго уровня*/
В данном случае отделить вложенный список от внешнего помогают контекстные селекторы. Конструкция OL OL означает применять стиль только к тегу <OL>, но только когда он располагается внутри другого тега <OL>. Увеличение значения счетчика происходит через селектор OL LI:before, к которому добавляются стилевые атрибуты counter-increment и content. Атрибут counter-increment со значением list1 повышает значение этого счетчика на единицу, а content: counter(list1) ". " выводит значение счетчика перед пунктом списка. Эти атрибуты работают в паре, поэтому включать их надо одновременно.
Code
OL LI:before { /* Список первого уровня */
counter-increment: list1; /* Увеличиваем значение счетчика */
content: counter(list1) ". "; /* Выводим значение в виде 1., 2.*/
}
OL OL LI:before { /* Список второго уровня */
counter-increment: list2; /* Увеличиваем значение счетчика */
content: counter(list1) "." counter(list2) ". "; /* Выводим значение типа 2.1, 2.2,... */
}
Для вложенного списка вновь применяем контекстные селекторы (OL OL) и одновременно используем вывод счетчика list1 и list2, в этом случае мы и получим нумерацию нужного нам вида. Окончательный код приведен в примере 2.
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Вложенный список</title>
<style type="text/css">
LI { list-style-type: none; } /* Убираем исходную нумерацию */
OL { counter-reset: list1; } /* Инициируем счетчик */
OL LI:before {
counter-increment: list1; /* Увеличиваем значение счетчика */
content: counter(list1) ". "; /* Выводим значение */
}
OL OL { counter-reset: list2; } /* Инициируем счетчик вложенного списка */
OL OL LI:before {
counter-increment: list2; /* Увеличиваем значение счетчика */
content: counter(list1) "." counter(list2) ". "; /* Выводим значение типа 2.1, 2.2,... */
}
</style>
</head>
<body>
<ol>
<li>Пункт
<ol>
<li>Подпункт</li>
<li>Подпункт</li>
<li>Подпункт</li>
</ol>
</li>
<li>Пункт
<ol>
<li>Подпункт</li>
<li>Подпункт</li>
</ol>
</li>
</ol>
</body>
</html>
Результат данного примера показан на рис. 2.
Code
[b]Замечание [/b]
Приведенный пример не работает в браузере Internet Explorer до 7 версии включительно, поскольку он не поддерживает ни одно из приведенных стилевых свойств.
Поскольку браузер Internet Explorer не поддерживает множество интересных стилевых атрибутов, специально для него обычную нумерацию в списках следует оставить неизменной. Для этого достаточно убрать list-style-type: none. Но это также затронет и другие браузеры, в которых пример работает корректно, поэтому придется воспользоваться хаком — так называется прием, когда разным браузерам дается разный стилевой код. Например, можно воспользоваться атрибутом !important. При добавлении !important к значению стилевого атрибута его важность повышается. Если переопределить значение того же атрибута без !important, он будет игнорироваться браузерами. Но только не в Intenet Explorer версии 6 и ниже.
Code
LI {
list-style-type: none !important; /* Убираем нумерацию в браузерах Opera, Safari, Firefox */
list-style-type: decimal; /* Оставляем нумерацию в браузере IE6 и ниже */
}
аменяя этим кодом строку с селектором LI в примере 2 получим вложенный список корректно работающий во всех браузерах.
Автор:Влад Мержевич
Источник: www.htmlbook.ru
Главная 
