Спецификация CSS2

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

Элемент, который не отображается ('display' установлено в 'none'), не может установить или сбросить счётчик.

С помощью следующей таблицы стилей элементы H2 с классом "secret" не увеличивают 'count2'.

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

В то же время, элементы с 'visibility', установленной в 'hidden', увеличивают счётчики.

Большинство элементов уровня блока в CSS генерируют один основной бокс блока.

В этом разделе мы обсуждаем два механизма CSS, которые заставляют элемент генерировать два бокса: один основной бокс блока (для содержимого элемента) и отдельный бокс маркёра (для элемента оформления, такого как кружок, изображение или номер). Бокс маркёра может быть позиционирован внутри или вне основного бокса. В отличие от содержимого :before и :after, бокс маркёра не влияет на позицию основного бокса, какой бы ни была схема позиционирования.

Самым общим из этих двух механизмов является новый для CSS2 механизм, называемый маркёры. Механизм с более ограниченными возможностями привлекает свойства списков CSS1. Свойства списков дают авторам быстрый результат для многих сценариев упорядоченных и неупорядоченных списков. Однако маркёры дают авторам точный контроль над содержимым и позицией маркёров. Маркёры можно использовать вместе со счётчиками для создания новых стилей списков, нумерации примечаний на полях и многого другого.

Например, следующий пример иллюстрирует, как маркёры могут использоваться для того, чтобы добавлять точку после каждого элемента нумерованного списка.

Эта программа HTML и таблица стилей:

Создание списка с маркёрами

1. Это первый элемент списка.
2. Это второй элемент списка.
3. Это третий элемент списка.

должны дать на выходе примерно следующее:

i. Это первый элемент списка. ii. Это второй элемент списка. iii. Это третий элемент списка.

С помощью селекторов потомков и дочерних селекторов можно специфицировать маркёры различных типов в зависимости от глубины вложения списков.

Маркёры создаются путём установки свойства 'display' в 'marker' внутри псевдоэлементов :before или :after. Поскольку содержимое 'block' и 'inline' в :before и :after является частью основного бокса, генерируемого элементом, содержимое 'marker' форматируется в независимом боксе маркёра вне основного бокса. Боксы маркёра форматируются как единая строка (т.е. один бокс строки (строчный бокс)), поэтому они не обладают такой гибкостью, как поплавки. Боксы маркёра создаются только тогда, когда свойство 'content' псевдоэлементов действительно генерирует содержимое.

Боксы маркёра имеют заполнение и рамку, но не имеют полей.

Для псевдоэлемента :before базовая линия текста в боксе маркёра будет выровнена вертикально относительно базовой линии текста первой строки содержимого основного бокса. Если основной бокс не содержит текста, верхний внешний край бокса маркёра будет выровнен с верхним внешним краем основного бокса. Для псевдоэлемента :after базовая линия текста в боксе маркёра будет выровнена вертикально относительно базовой линии текста последней строки содержимого основного бокса. Если основной бокс не содержит текста, нижний внешний край бокса маркёра будет выровнен с нижним внешним краем основного бокса.

Высота бокса маркёра задаётся в свойстве 'line-height'. Бокс маркёра :before (:after) участвует в подсчёте высоты первого (последнего) строчного бокса основного бокса. Таким образом, маркёры выравниваются по первой и последней строке содержимого элемента, даже если боксы маркёра находятся в разных строчных боксах. Если в основном боксе отсутствует первый или последний строчный бокс, то бокс маркёра сам устанавливает свой первый строчный бокс.

Вертикальное выравнивание бокса маркёра внутри его строчного бокса специфицируется свойством 'vertical-align'.