CSS counter-increment

Slyweb

Поиск CSS свойств и HTML элементов:

Все CSS свойства и HTML элементы справочника

[Свойство] counter-increment

Раздел "Списки, нумерация, автоматическое содержимое"

Число, на которое происходит увеличение автоматической нумерации счетчика

Значения

Значения:	[идентификатор целое число? ]+ \| none \| inherit
Исходное значение:	отсутствует
Применяется:	ко всем элементам
Наследование:	не наследуется
Процентное соотношение:	нет
Источник отображения:	визуальный

Синтаксис

counter-increment

Браузеры:

Описание

Автоматическая нумерация в CSS2 создаётся с помощью автоматического содержимого (свойство content) в дополнении со свойствами counter-reset и counter-increment.

Изначально должно быть указано название счетчика со вторым необязательным параметром, определяющим стиль автоматической нумерации, например:

  1. h2:after { 
  2. content:" " counter(chapter,upper-roman);
  3. }

После этого вы должны определить инкремент – единица, на которую происходит увеличение в автоматической нумерации, к примеру, следующим образом:

  1. h2{
  2. counter-increment: chapter 1;
  3. }
  4. 
  5. }

Свойство counter-increment увеличивает значение счетчика, который определен в идентификаторе (identifier), на определенное количество единиц (integer).

Свойство counter-increment в качестве своего значения допускает имя (identifier) счетчика и инкремент(integer -число с которого начинается отсчет счетчика и на которое происходит увеличение счетчика). Инкремент можно не указывать, в этом будет использован инкремент по умолчанию 1. Ноль и отрицательные значения так же допустимы.

По умолчанию счетчики отображаются десятичными знаками. Однако, в автоматической нумерации допустимо использовать несколько типов стилей для стилизации маркеров, например, ими могут быть кружки, как закрашенные так и нет, закрашенные прямоугольники, римские цифры в верхнем и нижнем регистре и тд. Стиль маркеров определяется согласно свойству list-style-type.

Примеры стилизации маркеров:

  1. H1:before        { content: counter(chno, upper-latin) ". " }
  2. H2:before        { content: counter(section, upper-roman) " - " }
  3. BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }
  4. DIV.note:before  { content: counter(notecntr, disc) " " }
  5. P:before         { content: counter(p, none) }
  6.  
  7.

Правило счетчиков: скрытые счетчики (со свойством display:none) не увеличивают нумерацию. Поэтому в следующем правиле не произойдёт увеличение счетчика:

  1. H2.none {counter-increment: count2; display: none}
  2.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2. <HTML>
  3.    <HEAD>
  4.       <TITLE>Свойство counter-reset для создания подразделов </TITLE>
  5. <STYLE type="text/css">
  6. h2:after { 
  7. content:" " counter(chapter,upper-roman);
  8. }
  9. h2{
10. counter-increment: chapter ;
11. counter-reset: section;  
12. }
13. H2.none { counter-increment: chapter ; display: none}
14. 
15. H3:before {
16.     content: counter(chapter) "." counter(section) " ";
17. 	counter-increment: section 1;
18. 	}
19. 
20. </STYLE>
21. </HEAD>
22. <BODY>
23. <h2>Глава</h2>
24. <h3> Подраздел </h3>
25.     <P><Q>Наш характер есть результат нашего поведения.</q></Q>
26. <h2 class="none">Глава</h2>
27. <h3> Подраздел </h3>
28. <P>
29. <Q>Ничего нет более жалкого и более великолепного, чем человек.</Q>
30. <h3> Подраздел </h3>
31. <P>
32. <Q>Меж всевозможных существ, которые дышат и ходят,
33.  Здесь, на нашей земле, человек наиболее жалок.</Q>
34. <h3> Подраздел </h3>
35. <P>
36. <Q>Везде, где есть человек, там есть место для хорошего поступка.</Q>
37. </BODY>
38. </HTML>
39.

Свойство counter-reset для создания подразделов

Возможно, Вам будет интересно прочитать статьи о jQuery:

Доступ и установка с jQuery

Получить свойство counterIncrement: val = $("div").css("counterIncrement");
Установить свойство counterIncrement: $("div").css({"counterIncrement":"..."});
Установить свойство counterIncrement: $("div").css("counterIncrement","...");

"jQuery для начинающих"

CSS свойство появилось в CSS 2.0 (CSS свойства counter-increment - www.w3.org/counter-increment)

Форма для комментариев

Версия справочника CSS 1.0 Справочник CSS создан 2010-12-01

Ошибки и опечатки
Предложения и жалобы
Поддержка сайта

Александр Ермаков. Хостинг - www.pwstudio.org

1.	H1:before { content: counter(chno, upper-latin) ". " }
2.	H2:before { content: counter(section, upper-roman) " - " }
3.	BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }
4.	DIV.note:before { content: counter(notecntr, disc) " " }
5.	P:before { content: counter(p, none) }
6.
7.

1.	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
2.	<HTML>
3.	<HEAD>
4.	<TITLE>Свойство counter-reset для создания подразделов </TITLE>
5.	<STYLE type="text/css">
6.	h2:after {
7.	content:" " counter(chapter,upper-roman);
8.	}
9.	h2{
10.	counter-increment: chapter ;
11.	counter-reset: section;
12.	}
13.	H2.none { counter-increment: chapter ; display: none}
14.
15.	H3:before {
16.	content: counter(chapter) "." counter(section) " ";
17.	counter-increment: section 1;
18.	}
19.
20.	</STYLE>
21.	</HEAD>
22.	<BODY>
23.	<h2>Глава</h2>
24.	<h3> Подраздел </h3>
25.	<P><Q>Наш характер есть результат нашего поведения.</q></Q>
26.	<h2 class="none">Глава</h2>
27.	<h3> Подраздел </h3>
28.	<P>
29.	<Q>Ничего нет более жалкого и более великолепного, чем человек.</Q>
30.	<h3> Подраздел </h3>
31.	<P>
32.	<Q>Меж всевозможных существ, которые дышат и ходят,
33.	Здесь, на нашей земле, человек наиболее жалок.</Q>
34.	<h3> Подраздел </h3>
35.	<P>
36.	<Q>Везде, где есть человек, там есть место для хорошего поступка.</Q>
37.	</BODY>
38.	</HTML>
39.

Подробный справочник CSS и HTML

Возможно, Вам будет интересно прочитать статьи о jQuery:

Доступ и установка с jQuery