counter-reset
Поддержка браузерами
12.0+ | 8.0+ | 2.0+ | 4.0+ | 9.6+ | 3.1+ |
Описание
Свойство counter-reset используется для сброса счётчика и установки ему начального значения. Счётчик сбрасывается и устанавливается в начальное значение каждый раз, когда HTML-элемент, для которого применялось свойство, повторно появляется на странице.
Изменение значения счетчика осуществляется с помощью свойства counter-increment, а способ нумерации (тип маркера) и вывод счётчика осуществляется свойством content.
Свойство counter-reset используется совместно со свойствами counter-increment и content.
Значение по умолчанию: | none |
---|---|
Применяется: | ко всем элементам |
Анимируется: | нет |
Наследуется: | нет |
Версия: | CSS2 |
Синтаксис JavaScript: | object.style.counterReset="subsection" |
Синтаксис
counter-reset: none | имя [число];
Значения свойства
Значение | Описание |
---|---|
none | Указывает, что счётчик для выбранного элемента не установлен. |
имя [число] | Имя счётчика, в котором будет храниться значение счётчика. После имени счётчика через пробел можно указать целое число, определяющее начальное значение счётчика, которое будет присваиваться счётчику при его сбросе. По умолчанию счётчик инициализируется 0 (нулём). |
Пример
<!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>
Результат данного примера в окне браузера: