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



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

Счетчики обозначаются через идентификаторы (более подробно об этом смотрите в разделах о счетчиках, в которых содержится информация о свойствах counter-increment и counter-reset). В качестве значения счетчика выступает идентификатор, по умолчанию значением является число.

Последовательность вложенных счетчиков обозначаются следующим образом: "counters(<identifier>, <string>)" или "counters(<identifier>, <string>, <list-style-type>)".

В CSS2 значение счетчиков может быть установлено через свойство "content". Допустимо использовать none в качестве значения свойства "content", что равноценно пустому списку.

В следующем примере создан стиль, в котором пронумерованы элементы "P" для каждого элемента "H1", каждый параграф пронумерован римскими цифрами, сопровождаемыми точкой и пробелом.

  1.P {counter-increment: par-num}
  2.H1 {counter-reset: par-num}
  3.P:before {content: counter(par-num, upper-roman) ". "}
  4.

Счетчик выходящий за пределы границ, установленных для него параметром "counter-reset" сбрасывается и приобретает значение равно 0

Счетчики создаются с помощью следующих дополнительных функций counter(name) или counter(name, style). Name – означает название счетчика, style – тип нумерации (все типы установлены согласно свойству list-style-type)

  1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
  2.<HTML>
  3. <HEAD>
  4.<TITLE>Значения list-style-type допустимы в качестве значения счетчика</TITLE>
  5.<STYLE type="text/css">
  6./*Стиль маркера счетчика - circle*/
  7.P:before {content: counter(par-num, circle) " "}
  8.P {counter-increment: par-num}
  9.</STYLE>
10.</HEAD>
11.<BODY>
12.<DIV>
13.<P>Первая глава</P>
14.<P>Вторая глава</P>
15.<P>Третья глава</P>
16.<P>Четвертая глава</P>
17.</DIV>
18.</BODY>
19.</HTML>
20.
Разделы и подразделы в CSS2 с использованием счетчиков
Разделы и подразделы в CSS2 с использованием счетчиков

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

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

  1.h2:after {
  2.content:" " counter(chapter, upper-roman);
  3.}
  4.
  5.
После этого вы должны определить инкремент – единицу, на которую происходит увеличение в автоматической нумерации, к примеру, следующим образом:
  1.h2{
  2.counter-increment: chapter 1;
  3.}
  4.
  5.

Автоматическая нумерация в CSS2 контролируется двумя свойствами counter-reset и counter-increment. Counter-reset создаёт подразделы, при использовании автоматической нумерации. Данное свойство, так же как и свойство counter-increment в качестве значения может содержать имя счетчика и необязательный инкремент.

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


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