counter-reset
Свойство counter-reset используется для сброса счётчика и установки ему начального значения. Счётчик сбрасывается и устанавливается в начальное значение каждый раз, когда HTML-элемент, для которого применялось свойство, повторно появляется на странице.
Изменение значения счетчика осуществляется с помощью свойства counter-increment, а способ нумерации (тип маркера) и вывод счётчика осуществляется свойством content.
Свойство counter-reset используется совместно со свойствами counter-increment и content.
| Значение по умолчанию: | none |
|---|---|
| Применяется: | ко всем элементам |
| Анимируется: | нет |
| Наследуется: | нет |
| Версия: | CSS2 |
| Синтаксис JavaScript: | object.style.counterReset=»subsection» |
Синтаксис
counter-reset: none | имя [число];
Значения свойства
| Значение | Описание |
|---|---|
| none | Указывает, что счётчик для выбранного элемента не установлен. |
| имя [число] | Имя счётчика, в котором будет храниться значение счётчика. После имени счётчика через пробел можно указать целое число, определяющее начальное значение счётчика, которое будет присваиваться счётчику при его сбросе. По умолчанию счётчик инициализируется 0 (нулём). |
Пример
Пример Самоучитель HTML
Справочник HTML
Самоучитель XHTML
Самоучитель CSS
Программирование
JavaScript
VBScript
Самоучитель XML
XML
XSL
Результат данного примера в окне браузера:
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru
CSS свойство counter-reset
Это свойство определяет идентификатор, в котором будет храниться счётчик отображений определенного элемента, а также его начальное значение. Такой счётчик может выводиться с помощью свойства content.
CSS синтаксис
counter-reset: none | идентификатор | целое число | initial | inherit;
Возможные значения
| Значение | Описание |
|---|---|
| none | Значение по умолчанию. Запрещает создание или сброс счетчика. |
| идентификатор | Определяет одну или несколько переменных, в которых будет храниться значение счетчика. Переменные разделяются пробелом. |
| целое число | Определяет начальное значение счетчика. По умолчанию равно 0. |
| inherit | Значение наследуется от родительского элемента. |
| initial | Устанавливает значение по умолчанию. |
Пример использования
Способ пронумировать главы и подглавы в виде «Глава 1», «1.1», «1.2» и т.д.
body < counter-reset: section; >h1 < counter-reset: subsection; >h1:before < counter-increment: section; content: "Глава " counter(section) ". "; >h2:before
counter-reset¶
Свойство counter-reset устанавливает переменную, в которой будет храниться счётчик отображений определенного элемента, а также начальное значение счётчика.
Такой счётчик может выводиться с помощью свойства content и псевдоэлементов ::after и ::before .
Демо¶
Списки, счетчики, генерируемый контент
- counter-increment
- counter-reset
- counter-set
- list-style-image
- list-style-type
- list-style-position
- list-style
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
/* Set "my-counter" to 0 */ counter-reset: my-counter; /* Set "my-counter" to -1 */ counter-reset: my-counter -1; /* Set "counter1" to 1, and "counter2" to 4 */ counter-reset: counter1 1 counter2 4; /* Cancel any reset that could have been set in less specific rules */ counter-reset: none; /* Global values */ counter-reset: inherit; counter-reset: initial; counter-reset: unset; Значения¶
Запрещает инициацию счётчика для текущего селектора.
Наследует значение родителя.
Задаёт одну или несколько переменных, в которых будет храниться значение счётчика. Значения разделяются между собой пробелом.
Начальное значение каждого идентификатора. По умолчанию равно 0 .
Примечания¶
Для элементов, у которых установлено display: none , значение счётчика не меняется.
counter-reset: none; Применяется ко всем элементам
Спецификации¶
- CSS Lists and Counters Module Level 3 Рабочий проект
- CSS Level 2 (Revision 1)
Поддержка браузерами¶
Can I Use css-counters? Data on support for the css-counters feature across the major browsers from caniuse.com.
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
html> head> meta charset="utf-8" /> title>counter-resettitle> style> li list-style-type: none; > /* Убираем исходную нумерацию у списка */ ol counter-reset: list1; > /* Инициируем счетчик */ ol li:before counter-increment: list1; /* Увеличиваем значение счетчика */ content: counter(list1) '. '; /* Выводим число */ > ol ol counter-reset: list2; > /* Инициируем счетчик вложенного списка */ ol ol li:before counter-increment: list2; /* Увеличиваем значение счетчика вложенного списка */ content: counter(list1) '.' counter(list2) '. '; /* Выводим число */ > style> head> body> ol> li> Пункт ol> li>Подпунктli> li>Подпунктli> li>Подпунктli> ol> li> li> Пункт ol> li>Подпунктli> li>Подпунктli> ol> li> ol> body> html> counter — reset
С помощью свойства counter — reset создаются новые счётчики на элементе.
Пример
Скопировать ссылку «Пример» Скопировано
Создаём счётчик с именем example и начальным значением 1 на элементе :
li counter-reset: example 1;>li counter-reset: example 1; >
Как понять
Скопировать ссылку «Как понять» Скопировано
Перед тем как использовать значение счётчика в функциях counter ( ) и counters ( ) , этот счётчик нужно создать. Именно для этого существует свойство counter — reset .
Каждый элемент имеет коллекцию из нуля или более счётчиков, которые наследуются через дерево документа подобно наследуемым значениям свойств.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Чтобы создать новый счётчик на элементе, в значении свойства нужно указать имя счётчика и число, с которого начнётся отсчёт.
По умолчанию начальное значение равно 0, если не указано иное.
Здесь создаётся новый счётчик с именем chapter и начальным значением 0:
li counter-reset: chapter;>li counter-reset: chapter; >
Чтобы не создавать новый счётчик, можно указать ключевое слово none — это значение по умолчанию.
li counter-reset: none;>li counter-reset: none; >
Аргументы
Скопировать ссылку «Аргументы» Скопировано
Имена счётчиков чувствительны к регистру. Например, значения example и EXAMPLE — это два разных, не связанных между собой счётчика.
Нельзя использовать ключевые слова: none , initial , inherit , unset , default в качестве названий счётчиков.
В значении свойства можно указать 1 или более счётчиков. Указываются они по порядку через пробел.
li counter-reset: count1 -1 count2 99;>li counter-reset: count1 -1 count2 99; >