Вольный перевод статьи . Автор:
Введение
Очень часто в различных документах нам приходиться использовать нумерацию, например, для оформления оглавления. Нумеровать можно и вручную, но такой способ доставит немало хлопот, если понадобиться удалить или добавить новый пункт. В CSS2.1 существует способ, который позволяет автоматизировать этот процесс - это использование CSS counters. Стоит уточнить, что CSS counters не поддерживаются браузером IE, однако в 8й версии это обещают исправить.
Нестандартные тексты, броские заголовки и душещипательные рассказы. Все это на .ру
- мероприятие ответственное, оно должно учитывать специфику самой компании, возрастные группы и социальные статусы приглашенных. Обратитесь к профессионалам!
- уникальная программа, позволяющая увеличить и сохранить высокий ratio на приватных торрентах
CSS counter шаг за шагом
Первым делом необходимо обнулить счетчик и дать ему название, используя свойство counter-reset:
body { counter-reset: section; } Таким образом, для элемента body счетчик имеет значение 0, а название счетчика - section. Название может быть любым, какое вы пожелаете. Свойство counter-reset может иметь также еще одно дополнительное значение, обозначающее, с какого числа начнется нумерация. Например, если вы хотите, чтобы нумерация начиналась с 5, то необходимо прописать следующее:
body { counter-reset: section 4; } Цифру 4 мы пишем потому, что счетчик всегда начинается с цифры на единицу больше установленной.
Следующий шаг - определение элемента, который будет нумероваться. Для этого используется свойство counter-increment:
body { counter-reset: section 4; } h2 { counter-increment: section; } Дополнительно, можно установить значение, на которое будет увеличиваться счетчик, например:
h2 { counter-increment: section 2; } Т.е. счетчик будет каждый раз увеличиваться не на 1, а на 2. (Пример: 5, 7, 9, 11 …)
Свойство также может принимать отрицательные значения и 0. Если счетчик устанавливается и инкриминируется (растет) в одном и том же элементе, тогда его значение будет постоянно сбрасываться. В следующем примере значение счетчика всегда будет равно 2м:
h2 { counter-reset: section; counter-increment: section; } Отображение счетчика
Как только все необходимые параметры для счетчика установлены, необходимо прописать правила для его отображения. Это можно сделать с помощью функции counter() и псевдо-класса before:
body { counter-reset: section 4; } h2 { counter-increment: section; } h2:before{ counter(section) " "; } Если вы используете один и тот же элемент ( как было в примере выше), тогда счетчик увеличится до момента отображения.
Взгляните на рабочий .
Сложная нумерация (2 счетчика и более)
Функция counter() может быть использована более 1 раза. В следующем примере я использую 2 счетчика для нумерации разделов и подразделов.
Счетчик для подразделов обнуляется для каждого нового раздела:
body { counter-reset: section; } h2 { counter-increment: section; counter-reset: sub-section; } h2:before h3:before{ content: counter(section) "." counter(sub-section) " "; } h3:before{ counter-increment: sub-section; } Использование вложенных счетчиков
Существует также функция counters() для вложенных счетчиков. Это хорошо подходит для работы с элементами списков (ol), где каждый список может иметь многоуровневую структуру. Но данный способ не будет работать для примера выше, .т.к. подразделы не вложены в элемент раздела.
Для вложенных счетчиков можно прописать следующие правила:
ol { counter-reset: section; list-style-type: none; } ol li { counter-increment: section; } ol li:before{ content: counters(section, ".") ". "; } Данный код будет увеличивать счетчик для каждого элемента списка, и не имеет значения насколько сложна структура списка. Но очень важно, чтобы счетчик сбрасывался в нужном месте, т.е. в начале каждого нового вложенного элемента. В нашем случаем, необходимо обнулять счетчик на каждом вложенном элементе ol.
В нашем примере первый вложенный список начинается с пункта 1.1, затем 1.2, 1.3 и так далее. Вложенный список третьего уровня начинается с t 1.1.1 и далее идут 1.1.2, 1.1.3 и т.д.
<ol> <li>item 1 <ol> <li>sub item 1 <ol> <li>sub-sub item 1</li> <li>sub-sub item 2</li> <li>sub-sub item 3</li> </ol> </li> <li>Sub item 2</li> </ol> </li> <li>item 2</li> </ol>
Взгляните на использования вложенных счетчиков.
Стилизация счетчика
Существует возможность задать стиль маркера для счетчика, передавая второй параметр в функциях counter() и counters(). Значения передаются те же, что и для свойства list-style-type. Хотя все они валидны, для счетчика имеет значение передавать только подмножества, а такие значения как disc, square и circle не изменятся, независимо от сложности структуры счетчика. Например, можно задать следующий стиль:
ol li:before{ counter(answer, lower-alpha) ") "; } Посмотрите , где функция counter используется для передачи параметра для стилизации счетчика.
Использование счетчиков для замены начального значения нумерованного списка
Если вам необходимо установить начальное значение для элемента ol, отличное от 1 и вы используете “strict” доктайп, то в процессе валидации, вы получите предупреждение о том, что такой код не валиден. Существуют доводы относительно того, является ли начальное значение настолько показательным, кроме того в текущей спецификации HTML5 о нем не заявлено . Даже если стартовое значение будет разрешено в HTML5, это не поможет в случае, когда страница имеет доктайп HTML4. Если вам необходимо, чтобы страница была валидна, используйте transitional доктайп или CSS counters.
Например, если вам нужно, чтобы счетчик начинался не с 1 по умолчанию, а с 4х, то используйте следующий код:
body { counter-reset: list-order 3; } ol li { counter-increment: list-order; list-style-type: none; } ol li:before{ content: counter(list-order) " "; } Важно также убрать маркеры, чтобы избежать двойной нумерации.
Посмотрите замены начального значения для нумерованного списка
Заключение
В приведенной статье, я рассказывал как обозначить и присвоить стили счетчикам в CSS, вместо добавления нумерации вручную. Это удобно, если вам необходимо пронумеровать разделы в статьях или оглавление. Использование приведенных примеров сэкономит массу времени на верстку таких структур. Кроме того, это более гибкий способ указать тип маркера в CSS, вместо того чтобы использовать дополнительные скрипты. Также я описал способ того, как переопределить стартовое значение для нумерованного списка. CSS counters очень просты в использовании, если разобраться, но подводным камнем здесь является отсутствие поддержки данной техники в браузере IE.
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
