Slyweb
На разработку сайта! Скидки 50%!
Поиск CSS свойств и HTML элементов:
поиск



Все CSS свойства и HTML элементы справочника
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 для создания подразделов
Свойство counter-reset для создания подразделов


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

  • Получить свойство counterIncrement: val = $("div").css("counterIncrement");
  • Установить свойство counterIncrement: $("div").css({"counterIncrement":"..."});
  • Установить свойство counterIncrement: $("div").css("counterIncrement","...");
  • Как использовать популярный jQuery для свойств CSS, - читайте статью "jQuery для начинающих".
Александр Ермаков. Хостинг - www.pwstudio.org