Квинт Игорь
Шрифт:
• 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 }
Стили счетчиков
По умолчанию браузер отображает значение счетчика как число в десятичном формате, но вы можете использовать и другие стили отображения счетчика, доступные через свойство list-style-type. Тогда описание счетчика будет выглядеть так:
counter(«название счетчика», list-style-type)
Чтобы задать стиль, используемый по умолчанию, можно использовать следующую запись:
counter(«название счетчика»)
Иными словами, просто не задавать значение list-style-type.
Вы можете использовать любые стили, в том числе disc (круг), circle (окружность), square (квадрат) и none (ничего). Например:
h1:before { content: counter(chno, upper-latin) ". " }
h2:before { content: counter(section, upper-roman) " – " }
blockquote:after { content: " [" counter(bq, hebrew) "]" }
div.note:before { content: counter(notecntr, disc) " " }
p:before { content: counter(p, none) }
Попробуйте создать простую HTML-страницу, используя элементы, которые записаны в данном CSS-коде, и применить к ней только что созданную таблицу стилей.
Счетчики со свойством display: none
Неотображаемые элементы, то есть элементы, для свойства display которых установлено значение none, не могут увеличивать или уменьшать значение счетчика.
Например, в таблице стилей, представленной ниже, элементы H2 класса do_not_ display не увеличивают значение счетчика count_h2:
H2. do_not_display {counter-increment: count_h2; display: none}
Следует отметить, что элементы, для которых свойство visibility задано как hidden, увеличивают значения счетчиков.
Списки
Рассмотрим все возможности задания спискам различного визуального форматирования.
Кстати, если вы с помощью display: marker укажете маркер вместе с элементом списка, созданным с помощью свойств списка, то маркер просто-напросто заменит стандартный элемент списка. Подробно про маркеры будет рассказано дальше.
Для списков также нельзя задать фон. Чтобы использовать в документе список с фоном, нужно задать список как маркер, то есть использовать display: marker, но про это также будет рассказано дальше.