html.okpython.net
Основы создания сайтов
CSS :: Свойство counter-increment
css-свойство counter-increment (от англ. counter increment – увеличение показания счетчика) увеличивает одно или несколько значений указанного в качестве значения счетчика, задаваемого при помощи свойства counter-reset.
Характеристики
- Значение по умолчанию: none.
- Применяется: ко всем элементам.
- Наследуется: нет.
- Анимируется: нет.
- JavaScript: object.style.counterIncrement="value".
Синтаксис
counter-increment: [<переменная> | <число>?]+ | none
Значения
- id_счетчика число – задается имя счетчика, значение которого будет увеличиваться, а также через пробел указывается необязательное значение приращения счетчика (целые числа). Если значение приращения счетчика не будет указано, браузер применит значение по умолчанию, равное 1.
- none – значения счетчиков для текущего селектора не будут изменяться, т.е. увеличиваться или уменьшаться в зависимости от значения приращения.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css2/generate.html#propdef-counter-increment
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/counter-increment
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> /* Создаем счетчик для тела документа */ body{counter-reset: parag_1;} /* Создаем счетчик для заголовка «h2» */ h2{counter-reset: parag_2;} h2:before{ /* Считаем в элементе «body» все «h2» */ counter-increment: parag_1 1; /* Вставляем перед каждым «h2» контент: строка+текущее значение счетчика+строка */ content: "§" counter(parag_1) ". "; } h3:before{ /* Считаем в элементе «h2» все «h3» */ counter-increment: parag_2 1; /* Вставляем перед каждым «h3» контент: текущее значение счетчика parag_1+строка+ текущее значение счетчика parag_2+строка */ content: counter(parag_1) "." counter(parag_2) ". "; } </style> </head> <body> <h2>Введение в CSS</h2> <h3>Для чего нужен CSS?</h3> <h3>Синтаксис CSS.</h3> <h3>Подключение CSS к html-документу.</h3><br> <h2>Свойства CSS для текста и шрифта</h2> <h3>Оформление внешнего вида текста.</h3> <h3>Определение характеристик шрифтов.</h3> </body> </html>
Пример №1