Счетчики и автоматическая нумерация данных

Автоматическая нумерация данных в CSS управляется с помощью свойств counter-increment и counter-reset. Определяемые этими свойствами счетчики можно вывести в Web-странице с помощью функций counter() и counters() в свойстве content.

Свойство counter-increment содержит имя или имена счетчиков, которые изменяются этим свойством. Имена счетчиков задаются по тем же правилом, что и имена элементов и атрибутов HTML. За каждым именем может следовать величина изменения – целое число. Число может быть как положительным (или без знака), так и отрицательным. В первом случае текущее значение счетчика увеличивается на заданное число, во втором – уменьшается. Если величина изменения после имени счетчика не задана, значение этого счетчика увеличивается на 1. Элементы свойства counter-increment отделяются друг от друга одним или несколькими пробельными элементами.

Свойство counter-reset содержит имя или имена счетчиков, которым присваиваются начальные значения. Начальные значения могут быть как положительными, так и отрицательными. Если начальное значение после имени счетчика не задано, для этого счетчика устанавливается начальное значение 0. Элементы свойства counter-reset отделяются друг от друга одним или несколькими пробельными элементами.

Функция

counter(имя-счетчика [, стиль-счетчика ])

выводит текущее значение самого внутреннего счетчика с заданным именем в области действия псевдоэлементов:before и:after. Второй, необязательный, параметр функции задает стиль вывода счетчика. Допустимые значения этого параметра те же, что и свойства list-style-type (см. 4.3.18.4.1). Если второй параметр не задан, счетчик выводится как десятичная цифра, т.е. значение второго параметра по умолчанию равно decimal.

Функция

counters(имя-счетчика, строка [, стиль-счетчика ])

выводит текущие значения всех счетчиков – от самого внешнего счетчика до самого внутреннего счетчика с заданным именем в области действия псевдоэлементов:before и:after. Значения этих счетчиков отделяются друг от друга символом или символами, заданными в параметре строка. Третий, необязательный, параметр функции имеет тот же смысл, что и для функции counter.

Пример 4.3.76. Вставка счетчиков номера раздела (part) и подраздела (section):

body {counter-reset: part}

h2:before {content: "Раздел " counter(part) ". ";

counter-increment: part}

h2 {counter-reset: section}

h3:before {content: "Подраздел " counter(part)

". " counter(section) ". "; counter-increment: section}

…

<h1>Сеть Internet</h1>

<h2>Основные сведения</h2>

<h3>Структура сети</h3>

<p>Содержание подраздела</p>

<h3>Пользователи сети</h3>

<p>Содержание подраздела</p>

<h2>Основные технологии Internet</h2>

<h3>Электронная почта</h3>

<p>Содержание подраздела</p>

<h3>Передача файлов</h3>

<p>Содержание подраздела</p>

<h3>Web-технологии</h3>

<p>Содержание подраздела</p>

В результате действия правил с использованием псевдоэлемента:before фрагмент Web-страницы будет иметь следующий вид:

Пример 4.3.77. Использование стиля счетчика:

body {counter-reset: addon}

h4:before {content: "Приложение "

counter(addon,upper-alpha) ". ";

counter-increment: addon}

…

<h4>Пример таблицы стилей для HTML 4.01</h4>

<p>Содержание приложения</p>

<h4>Отличия от CSS1</h4>

<p>Содержание приложения</p>

<h4>Замечания по реализации и использованию шрифтов</h4>

<p>Содержание приложения</p>

<h4>Грамматика CSS2</h4>

<p>Содержание приложения</p>

В результате действия правила с использованием псевдоэлемента:before фрагмент Web-страницы будет иметь следующий вид:

Установленный с помощью свойства counter-reset счетчик обладает следующими особенностями:

· для родственных элементов счетчик изменяется в соответствии с заданным в свойстве counter-increment значением;

· если у какого-либо из родственных элементов, для которых определен счетчик, есть дочерние элементы или элементы-потомки с тем же именем, для них создается новый, вложенный, экземпляр счетчика, который считает родственные дочерние элементы своего уровня, начиная с начального значения;

· как только дочерние элементы заканчиваются, экземпляр связанного с ними счетчика уничтожается, и начинают обрабатываться элементы вышележащего уровня, для них продолжает действовать тот счетчик, который использовался для этого уровня.

Пример 4.3.78. Использование вложенных счетчиков при создании вложенных списков:

ol {counter-reset: listCount; list-style-type: none}

li:before {content: counters(listCount, ".") ". ";

counter-increment: listCount}

…

<ol>

<li>Пункт 1

<ol>

<li>Пункт 1.1</li>

<li>Пункт 1.2</li>

</ol>

</li>