| Главная » Статьи » CSS » Рецепты CSS |
Списки активно используются для автоматической нумерации блоков текста. Однако при использовании вложенных списков нельзя получить нумерацию подпунктов типа 1.1, 1.2, 1.3, поскольку каждый список будет независимым. Но то, что нельзя в HTML, можно возложить на стили. Для начала рассмотрим, как вообще создавать вложенные списки. В качестве основного контейнера выступает тег <OL>, а элементы списка формируются тегами <LI>. Вложенный список также начинается с <OL>, но этот тег должен располагаться внутри контейнера <LI>, именно так соблюдается корректность синтаксиса (пример 1). Пример 1. Обычный вложенный список <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Результат данного примера показан на рис. 1. Обратите внимание, что нумерация вложенных списков начинается каждый раз заново.
Рис. 1. Вид вложенного списка Теперь уберем встроенную нумерацию списков и создадим ее по новой, но уже в том виде, что нам требуется. Для этого понадобится три стилевых атрибута: counter-reset, counter-increment и content. counter-reset — задает некоторую переменную, которая будет хранить значение счетчика; counter-increment — увеличивает или уменьшает значение счетчика на указанное число; content — выводит значение счетчика при использовании аргумента counter(переменная). Работает совместно с псевдоэлементами after или before. Для списка первого уровня переменную счетчика назовем list1, а для второго уровня — list2. Тогда инициация счетчиков для списков будет следующей. OL { counter-reset: list1; } /* Список первого уровня */ В данном случае отделить вложенный список от внешнего помогают контекстные селекторы. Конструкция OL OL означает применять стиль только к тегу <OL>, но только когда он располагается внутри другого тега <OL>. Увеличение значения счетчика происходит через селектор OL LI:before, к которому добавляются стилевые атрибуты counter-increment и content. Атрибут counter-increment со значением list1 повышает значение этого счетчика на единицу, а content: counter(list1) ". " выводит значение счетчика перед пунктом списка. Эти атрибуты работают в паре, поэтому включать их надо одновременно. OL LI:before { /* Список первого уровня */ Для вложенного списка вновь применяем контекстные селекторы (OL OL) и одновременно используем вывод счетчика list1 и list2, в этом случае мы и получим нумерацию нужного нам вида. Окончательный код приведен в примере 2. Пример 2. Вложенные списки с автонумерацией <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Результат данного примера показан на рис. 2.
Рис. 2. Вид автонумерации списка в браузере Opera Замечание Приведенный пример не работает в браузере Internet Explorer до 7 версии включительно, поскольку он не поддерживает ни одно из приведенных стилевых свойств. Поскольку браузер Internet Explorer не поддерживает множество интересных стилевых атрибутов, специально для него обычную нумерацию в списках следует оставить неизменной. Для этого достаточно убрать list-style-type: none. Но это также затронет и другие браузеры, в которых пример работает корректно, поэтому придется воспользоваться хаком — так называется прием, когда разным браузерам дается разный стилевой код. Например, можно воспользоваться атрибутом !important. При добавлении !important к значению стилевого атрибута его важность повышается. Если переопределить значение того же атрибута без !important, он будет игнорироваться браузерами. Но только не в Intenet Explorer версии 6 и ниже. LI { Заменяя этим кодом строку с селектором LI в примере 2 получим вложенный список корректно работающий во всех браузерах. | |
| Просмотров: 2598 | Комментарии: 2 | |
| Всего комментариев: 1 | ||
| ||
