Пример
Способ нумирования секций и подсекций с "Раздел 1", "1.1", "1.2", и т.д.:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before
{
counter-increment:section;
content:"Раздел " counter(section) ". ";
}
h2:before
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<p><b>Примечание:</b> Internet Explorer 8 (и выше) поддерживает эти свойства если указан !DOCTYPE.</p>
<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>
Определение и использование
Свойство counter-increment увеличивает одно или несколько значений счетчиков.
Свойство counter-increment обычно используется вместе со свойством counter-reset и свойством content.
| Значение по умолчанию: | none |
|---|---|
| Унаследованный: | нет |
| Версия: | CSS2 |
| Синтакс JavaScript: | object.style.counterIncrement="subsection" |
Поддержка браузеров
Свойство counter-increment поддерживается во всех ведущих браузерах.
Примечание: Internet Explorer 8 (и выше) поддерживает свойство counter-increment если указан !DOCTYPE.
Значения свойства
| Значение | Описание |
|---|---|
| none | Счетчик не увеличивается |
| id number | id указывает, какой счетчик должен быть увеличен. number определяет на сколько каждый счетчик должен быть увеличен при каждом появлении селектора. Значение увеличения по умолчанию 1.0, допускаются отрицательные числа. Если id относится к счетчику, который инициализирован с помощью counter-reset, значение по умолчанию будет 0 |
| inherit | Указывает, что значение свойства counter-increment должно быть унаследовано от родительского элемента |
Связанные страницы
CSS ссылка: :before
CSS ссылка: :after
CSS ссылка: content
CSS ссылка: counter-reset
Была ли эта информация полезной?
