Русский
Русский
English
Свойства CSS
Статистика
Реклама

counter-increment

Браузер
Internet Explorer
Chrome
Opera
Safari
Firefox
Версия
6.0
7.0
8.0
9.0
2.0
3.0
4.0
5.0
9.2
9.6
10
2.0
3.1
4.0
5.0
2.0
3.0
3.6
4.0
Поддержка
Не поддерживается
Не поддерживается
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Не поддерживается
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Краткая информация
CSS CSS2+
Значение по умолчанию none
Наследуется Нет
Применяется Ко всем элементам
Ссылка на спецификацию открыть в новой вкладке
Описание
Стилевое свойство counter-increment предназначено для увеличения значения счетчика приращений, который задается свойством counter-reset. Такой счетчик подсчитывает количество отображений элементов на странице и может выводиться с помощью свойства content и псевдоэлементов after и before. Это позволяет создавать списки (в том числе многоуровневые), в которых нумерация и вид задаются через стили.
Синтаксис
counter-increment: none | inherit | идентификатор | целое число
Аргументы
none - Запрещает увеличение счетчика для текущего селектора.
inherit - Наследует значение родителя.
идентификатор - Задает одну или несколько переменных, для которых требуется изменить значение счетчика. Переменные разделяются между собой пробелом.
целое число - Определяет значение приращения счетчика. По умолчанию оно равно 1. Допускается использовать отрицательные и нулевые значения.
Возможные сочетания значений свойств counter-reset и counter-increment показаны в табл. 1.
Код Результат
LI { list-style-type: none; }
OL { counter-reset: list -1; }
LI:before {
counter-increment: list;
content: counter(list) ". ";
}
Список начинается с нуля.

0, 1, 2
LI { list-style-type: none; }
OL { counter-reset: list; }
LI:before {
counter-increment: list 2;
content: counter(list) ". ";
}
Выводятся все четные числа.

2, 4, 6
LI { list-style-type: none; }
OL { counter-reset: list -1; }
LI:before {
counter-increment: list list;
content: counter(list) ". ";
}
Выводятся все нечетные числа.

1, 3, 5
LI { list-style-type: none; }
OL { counter-reset: list 9; }
LI:before {
counter-increment: list;
content: counter(list) ". ";
}
Список начинается с 10.

10, 11, 12
Табл. 1. Изменение нумерации списка
Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>counter-increment</title>
<style type="text/css">
BODY {
counter-reset: heading; /* Инициируем счетчик */
}
H2:before {
counter-increment: heading; /* Указываем идентификатор счетчика */
content: "Глава " counter(heading) ". "; /* Выводим текст перед содержимым тега <H2> */
}
</style>
</head>
<body>
 <h2>Теория ловли льва в пустыне</h2>
 <h2>Методы инверсной кинематики</h2>
 <h2>Ловля льва численными методами</h2>
</body>
</html>

Демонстрация примера
Браузеры
Для элементов, у которых установлено display: none, значение счетчика не меняется.
Первоисточник - htmlbook.ru Автор - Влад Мержевич
Комментариев (-)
Имя
Электронная почта

Последние комментарии

© 2006-2024, heroes-3.ru