|
Автоматическая нумерация в 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. |