9.3. Автоматическая нумерация и списки

9.3. Автоматическая нумерация и списки

В CSS существует два свойства для управления нумерацией: counter-increment и counter-reset. Счетчики, которые определены данными свойствами, используются функциями counter() и counters() свойства content. Рассмотрим подробно свойства для управления нумерацией.

• counter-increment – с помощью этого свойства вы можете задать одно или несколько имен счетчиков, после каждого из которых может быть указано целое число. Оно определяет величину, на которую увеличивается содержимое счетчика при каждом его использовании. По умолчанию значение счетчика увеличивается на единицу. Вы также можете использовать отрицательные целые числа.

• counter-reset – также содержит список из одного или нескольких имен счетчиков, после каждого из которых может быть указано целое число. Оно задает значение, которое сначала присваивается счетчику. По умолчанию значение равно 0.

Для примера рассмотрим таблицу стилей, которая нумерует главы и разделы таким образом:

• Глава 1:

? 1.1;

? 1.2.

• Глава 2:

? 2.1;

? 2.2 и т. д.

Код таблицы следующий:

h1:before {

content: "Глава " counter(chapter) ". ";

counter-increment: chapter; /* Добавление 1 к номеру главы */

counter-reset: section; /* Установка значения 0 для раздела */

}

h2:before {

content: counter(chapter) "." counter(section) " ";

counter-increment: section;

}

В примере не указана цифра, с которой начинать нумерацию, так как по умолчанию она начинается с единицы. Однако, как отмечалось выше, это возможно.

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

Важно помнить, что свойство counter-reset поддерживает правила каскада. По этим правилам в следующей таблице стилей сбрасывается только счетчик imagenum:

h1 { counter-reset: section -1 }

h1 { counter-reset: imagenum 99 }

Чтобы выполнить сброс обоих счетчиков, необходимо задать их вместе:

h1 { counter-reset: section -1 imagenum 99 }

Данный текст является ознакомительным фрагментом.