counter-increment
Поддержка браузерами
12.0+ | 8.0+ | 2.0+ | 4.0+ | 9.6+ | 3.1+ |
Описание
CSS свойство counter-increment используется для установки и увеличения значения счётчика или для увеличения значения счётчика, который задан свойством counter-reset. Счётчик увеличивается каждый раз, когда HTML-элемент, для которого применялось свойство, повторно появляется на странице.
Способ нумерации (тип маркера) и вывод счётчика осуществляется с помощью свойства content.
Свойство counter-increment обычно используется совместно со свойствами counter-reset и content.
Значение по умолчанию: | none |
---|---|
Применяется: | ко всем элементам |
Анимируется: | нет |
Наследуется: | нет |
Версия: | CSS2 |
Синтаксис JavaScript: | object.style.counterIncrement="subsection" |
Синтаксис
counter-increment: none | имя [число];
Значения свойства
Значение | Описание |
---|---|
none | Указывает, что счётчик для выбранного элемента не установлен. |
имя [число] | Имя счётчика, в котором будет храниться значение счётчика. После имени счётчика через пробел можно указать целое число, которое определяет на сколько будет увеличиваться значение счётчика каждый раз, когда HTML-элемент, для которого применялось свойство, повторно появляется на странице. По умолчанию счётчик инициализируется 0 (нулём) и каждый раз увеличивается на 1 (единицу). |
Пример
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Пример</title> <style> body { counter-reset: section; } /*инициализируем два счетчика*/ h1 { counter-reset: subsection; } h1:before { counter-increment: section 1; /*определяем инкремент для разделов*/ content: "Раздел " counter(section) ". "; } h2:before { counter-increment: subsection 1; /*определяем инкремент для подразделов*/ content: counter(section) "." counter(subsection) " "; } </style> </head> <body> <h1>Самоучитель HTML</h1> <h2>Справочник HTML</h2> <h2>Самоучитель XHTML</h2> <h2>Самоучитель CSS</h2> <h1>Программирование</h1> <h2>JavaScript</h2> <h2>VBScript</h2> <h1>Самоучитель XML</h1> <h2>XML</h2> <h2>XSL</h2> </body> </html>
Результат данного примера в окне браузера: