www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > FAQ CSS (ЦСС) > Вложенные списки с автоматической нумерацией

Вложенные списки с автоматической нумерацией

контентовая версия  

Списки активно используются для автоматической нумерации блоков контента. Однако при использовании вложенных списков нельзя получить нумерацию подпунктов типа 1.1, 1.2, 1.3, поскольку каждый список будет независимым. Но то, что нельзя в ШТМЛ, можно возложить на стили.

Для начала просмотрим, как вообще создавать вложенные списки. В качестве основного контейнера выступает тег <OL>, а элементы списка формируются тегами <LI>. Вложенный список также начинается с <OL>, но этот тег должен располагаться внутри контейнера <LI>, именно так соблюдается корректность синтаксиса (пример 1).

Пример 1. Обычный вложенный список

<!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. Обратите внимание, что нумерация вложенных списков начинается каждый раз заново.

Рис. 1

Рис. 1. Вид вложенного списка

Теперь уберем встроенную нумерацию списков и создадим ее по новой, но уже в том виде, что нам требуется. Для этого понадобится три стилевых атрибута: counter-reset, counter-increment и content.

counter-reset — задает некоторую переменную, которая будет хранить значение счетчика;

counter-increment — увеличивает или уменьшает значение счетчика на указанное число;

content — выводит значение счетчика при использовании аргумента counter(переменная). Работает совместно с псевдоэлементами after или before.

Для списка первого уровня переменную счетчика назовем list1, а для второго уровня — list2. Тогда инициация счетчиков для списков будет следующей.

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) ". " выводит значение счетчика перед пунктом списка. Эти атрибуты работают в паре, поэтому включать их надо одновременно.

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.

Пример 2. Вложенные списки с автонумерацией

<!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.

Рис. 2

Рис. 2. Вид автонумерации списка в браузере Опера

Замечание

Приведенный пример не работает в браузере Internet Эксплорер до 7 версии включительно, поскольку он не поддерживает ни одно из приведенных стилевых свойств.

Поскольку браузер Internet Эксплорер не поддерживает множество интересных стилевых атрибутов, специально для него обычную нумерацию в списках следует оставить нетронутой. Для этого дастаткова убрать list-style-type: none. Но это также затронет и другие браузеры, в которых пример работает корректно, поэтому придется применить хаком — так имеется ввиду прием, когда разным браузерам дается разный стилевой код. Например, можно применить тегом !important. При добавлении !important к значению стилевого атрибута его важность повышается. Если заново определить значение того же атрибута без !important, он будет игнорироваться браузерами. Но только не в Intenet Explorer версии 6 и ниже.

LI {
 list-style-type: none !important; /* Убираем нумерацию в браузерах Опера, Safari, Файер фох */
 list-style-type: decimal; /* Оставляем нумерацию в браузере ИЕ6 и ниже */
}

Заменяя этим кoдам строку с селектором LI в примере 2 получим вложенный список корректно работающий во всех браузерах.

Статья опубликована: 04.09.2009 Последнее обновление: 04.09.2009
Поиск по сайту
FAQ CSS (ЦСС)
Разделы

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект