Применение счетчиков

Однако для действительного отображения счетчиков надо задать свойство content в сочетании с одним из определяющих счетчики значением. Чтобы увидеть принцип работы, рассмотрим нумерованный список в стиле XML:

First item
Item two
The third item


Применяя приведенные ниже правила к этой разметке XML, вы получили бы результат:

list[type="ordered"] {counter-reset: ordered;} /* по умолчанию – 0 */
list[type="ordered"] item {display: block;}
list[type="ordered"] item:before {counter-: ordered;
content: counter(ordered) ". "; margin: 0.25em 0;}

Обратите внимание, что генерируемое содержимое, как обычно, размещается как строковое содержимое в начале ассоциированного с ним элемента. Таким образом, эффект аналогичен HTML-списку, для которого объявлено list-style-position: inside;. Также заметьте, что элементы item – это обычные элементы, генерирующие наборы блочных элементов, т. е. счетчики не ограничены лишь элементами, свойство display которых имеет значение list-item. Кстати, счетчик может использовать любой элемент. Рассмотрим следующие правила:

h1:before {counter-reset: section subsec;
counter-increment: chapter;
content: counter(chapter) ".


";}
h2:before {counter-reset: subsec;
counter-increment: section;
content: counter(chapter )"." counter(section) ". ";}
h3:before {counter-increment: subsec;
content: counter(chapter) "." counter(section) "." counter(subsec) ". ";}

Обратите внимание, как элемент h1 применяет счетчик chapter, который по умолчанию начинает нумерацию с нуля и перед текстом элемента вставляет «1.». Если счетчик используется тем же элементом, который обеспечивает и его приращение, приращение происходит до выведения значения счетчика на экран. Аналогичным образом, если сброс и отображение счетчика происходят в одном элементе, сброс имеет место перед выведением значения счетчика на экран. Рассмотрим:

h1:before, h2:before, h3:before {
content: counter(chapter) "." counter(section) "." counter(subsec) ". ";}
h1 {counter-reset: section subsec;
counter-increment: chapter;}

Первому элементу h1 документа предшествовал бы номер «1.0.0. », потому что счетчики section и subsec были заданы свойством counter-reset, а не counter-increment. Это значит, что если вы хотите, чтобы первый отображаемый номер счетчика, заданного свойством counter-increment, был равен 0, то должны задать его начальное значение равным –1, как здесь:

body {counter-reset: chapter -1;}
h1:before {counter-increment: chapter; content: counter(chapter) ".


";}

Счетчики позволяют реализовать некоторые интересные идеи. Рассмотрим следующий XML:

PRINT "Здравствуй, Мир!"
REM Это то, что детишки называют "комментарием"
GOTO 10


Приведенные ниже правила позволяют воссоздать традиционный формат листинга программы на BASIC:

code[type="BASIC"] {counter-reset: linenum; font-family: monospace;}
code[type="BASIC"] line {display: block;}
code[type="BASIC"] line:before {counter-increment: linenum;
content: counter(linenum 10) ": ";}

Также в формате counter() есть возможность определить стиль списка для каждого счетчика. Это можно сделать, добавляя отделенное запятой ключевое слово list-style-type после идентификатора счетчика:

h1:before {counter-reset: section subsec;
counter-increment: chapter;
content: counter(chapter,upper-alpha) ". ";}
h2:before {counter-reset: subsec;
counter-increment: section;
content: counter(chapter,upper-alpha)"." counter(section) ". ";}
h3:before {counter-increment: subsec;
content: counter(chapter,upper-alpha) "." counter(section) "."
counter(subsec,lower-roman) ".


";}

Обратите внимание, что для счетчика section не было задано ключевое слово, определяющее стиль, поэтому по умолчанию для него выбрана десятичная нумерация. При желании для счетчиков можно даже задать стили disc, circle, square и none. Еще интересно отметить, что элементы, свойство display которых имеет значение none, не обеспечивают приращения счетчиков, даже если кажется, что правила оговаривают обратное. В то же время элементы, свойство visibility которых имеет значение hidden, обеспечивают приращение счетчиков:

.suppress {counter-increment: cntr; display: none;}
/* 'cntr' НЕ ПОЛУЧАЕТ приращения */
.invisible {counter-increment: cntr; visibility: hidden;}
/* 'cntr' ПОЛУЧАЕТ приращение */

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Вставка генерируемого содержимого
Вставка значений атрибутов
Генерируемое содержимое
Генерируемые кавычки
Изображения для элементов списка