Свойство CSS counter-increment
Свойство CSS counter-increment увеличивает или уменьшает значения счётчиков. Примеры со значениями свойства.
Свойство counter-increment определяет, насколько должны увеличиваться или уменьшаться значения счётчиков. Это свойство используется совместно со свойствами content и counter-reset.
Свойство counter-increment задаётся двумя значениями: none и id-числом. «None» — значение по умолчанию. В случае значения «id number» допускается использование отрицательных чисел. Шаг приращения по умолчанию равен 1. Если счётчик с заданным id не инициализирован с помощью counter-reset, его значение по умолчанию равно 0. Значение счётчика можно задать произвольным числом с помощью свойства counter-reset.
| Начальное значение | none |
|---|---|
| Применяется к | Ко всем элементам. |
| Наследуется | Нет. |
| Анимируется | Дискретно. |
| Версия | CSS2 |
| DOM-синтаксис | object.style.counterIncrement = "subsection"; |
Синтаксис
Синтаксис свойства CSS counter-increment
counter-increment: none | id number | initial | inherit;Пример свойства counter-increment:
Пример свойства CSS counter-increment
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
/* "my-counter" to 0 */
counter-reset: my-counter;
}
h2::before {
/* "my-counter" by 1 */
counter-increment: my-counter;
content: "Section " counter(my-counter) ". ";
}
</style>
</head>
<body>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>PHP Tutorial</h2>
</body>
</html>Результат
Пример свойства counter-increment с нумерованными разделами и подразделами:
Свойство CSS counter-increment со значением subsection
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
/* Set "section" to 0 */
counter-reset: section;
}
h2 {
/* Set "subsection" to 0 */
counter-reset: subsection;
}
h2::before {
counter-increment: section;
content: "Book " counter(section) ": ";
}
h3::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h2>HTML</h2>
<h3>HTML Basics</h3>
<h3>HTML Templates</h3>
<h3>HTML References</h3>
<h3>HTML Tags</h3>
<h2>CSS</h2>
<h3>CSS Basics</h3>
<h3>CSS References</h3>
<h3>CSS Advanced</h3>
<h3>CSS Guides</h3>
<h3>CSS Selectors</h3>
<h3>CSS Properties</h3>
</body>
</html>Пример свойства counter-increment с римскими цифрами:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
/* "my-counter" to 0 */
counter-reset: my-counter;
}
h2::before {
/* "my-counter" by 1 */
counter-increment: my-counter;
content: counter(my-counter, upper-roman) ". ";
}
</style>
</head>
<body>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>PHP Tutorial</h2>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| none | Счётчики не увеличиваются. Это значение по умолчанию. |
| id number | Id определяет, какой счётчик увеличивать. Number определяет, на сколько увеличивается счётчик. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |