Евгений Резниченко - Спецификация CSS2
Если 'counter-increment' относится к счётчику, который не находится в области видимости (см. ниже) какого-либо 'counter-reset, то принимается, что счётчик установлен в 0 корневым элементом.
Здесь показан способ нумерации глав и разделов: "Chapter 1", "1.1", "1.2" и т.д.:
H1:before { content: "Chapter " counter(chapter) ". "; counter-increment: chapter; /* Добавляет 1 к главе */ counter-reset: section; /* Устанавливает раздел в 0 */ } H2:before { content: counter(chapter) "." counter(section) " "; counter-increment: section; }
Если элемент увеличивает/сбрасывает счётчик и использует его (в свойстве 'content' в псевдоэлементах :before или :after), то счётчик используется после того, как увеличен/сброшен.
Если элемент и увеличивает, и сбрасывает счётчик, то счётчик сначала сбрасывается, а затем увеличивается.
Свойство 'counter-reset следует правилам каскадирования. Таким образом, в соответствии с каскадированием, следующая таблица стилей:
H1 { counter-reset: section -1 } H1 { counter-reset: imagenum 99 }
сбросит только 'imagenum'. Чтобы сбросить оба счётчика, их нужно специфицировать вместе:
H1 { counter-reset: section -1 imagenum 99 }
Счётчики являются "самовкладывающимися", т.е. повторное использование счётчика в элементах-потомках автоматически создаёт новый объект счётчика. Это важно, например, для таких случаев, как списки в HTML, где элементы могут вкладываться внутри себя на произвольную глубину, и может оказаться невозможным определить уникально именованный счётчик для каждого уровня.
Так, следующего достаточно для нумерации вложенных элементов списка. Результат очень похож на применение установки 'display:list-item' и 'list-style: inside' в элементе LI:
OL { counter-reset: item } LI { display: block } LI:before { content: counter(item) ". "; counter-increment: item }
Самовложение базируется на том принципе, что каждый элемент, имеющий 'counter-reset для счётчика X, создаёт новый счётчик X, область видимости которого - элемент, его предшествующие родственники и все потомки элемента и его предшествующих родственников.
В предыдущем примере OL создаст счётчик, и все потомки OL будут ссылаться на этот счётчик.
Если мы обозначим с помощью item[n] nый экземпляр счётчика "item" и "(" и ")" - начало и конец области видимости, то следующий фрагмент HTML будет использовать указанные счётчики. (Мы используем ту же таблицу стилей, что и в предыдущем примере).
<OL> <!-- (set item[0] to 0 --> <LI>item <!-- increment item[0] (= 1) --> <LI>item <!-- increment item[0] (= 2) --> <OL> <!-- (set item[1] to 0 --> <LI>item <!-- increment item[1] (= 1) --> <LI>item <!-- increment item[1] (= 2) --> <LI>item <!-- increment item[1] (= 3) --> <OL> <!-- (set item[2] to 0 --> <LI>item <!-- increment item[2] (= 1) --> </OL> <!-- ) --> <OL> <!-- (set item[3] to 0 --> <LI> <!-- increment item[3] (= 1) --> </OL> <!-- ) --> <LI>item <!-- increment item[1] (= 4) --> </OL> <!-- ) --> <LI>item <!-- increment item[0] (= 3) --> <LI>item <!-- increment item[0] (= 4) --> </OL> <!-- ) --> <OL> <!-- (reset item[4] to 0 --> <LI>item <!-- increment item[4] (= 1) --> <LI>item <!-- increment item[4] (= 2) --> </OL> <!-- ) -->
Функция 'counters()' генерирует строку, составленную из значений всех счётчиков с тем же самым именем, разделённых заданной строкой.
Следующая таблица стилей нумерует вложенные элементы списка как "1", "1.1", "1.1.1" и т.д.
OL { counter-reset: item } LI { display: block } LI:before { content: counters(item, "."); counter-increment: item }
По умолчанию счётчики форматируются десятичными числами, а все стили, доступные для свойства 'list-style-type', доступны также для счётчиков. Обозначение будет такое:
counter(name)
для таблицы стилей по умолчанию, или:
counter(name, 'list-style-type')
Допустимы все стили, включая 'disc', 'circle', 'square' и 'none'.
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 и таблица стилей:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Создание списка с маркёрами</TITLE> <STYLE type="text/css"> LI:before { display: marker; content: counter(mycounter, lower-roman) "."; counter-increment: mycounter; } </STYLE> </HEAD> <BODY> <OL> <LI> Это первый элемент списка. <LI> Это второй элемент списка. <LI> Это третий элемент списка. </OL> </BODY> </HTML>
должны дать на выходе примерно следующее:
i. Это первый элемент списка. ii. Это второй элемент списка. iii. Это третий элемент списка.
С помощью селекторов потомков и дочерних селекторов можно специфицировать маркёры различных типов в зависимости от глубины вложения списков.
Маркёры создаются путём установки свойства 'display' в 'marker' внутри псевдоэлементов :before или :after. Поскольку содержимое 'block' и 'inline' в :before и :after является частью основного бокса, генерируемого элементом, содержимое 'marker' форматируется в независимом боксе маркёра вне основного бокса. Боксы маркёра форматируются как единая строка (т.е. один бокс строки (строчный бокс)), поэтому они не обладают такой гибкостью, как поплавки. Боксы маркёра создаются только тогда, когда свойство 'content' псевдоэлементов действительно генерирует содержимое.
Боксы маркёра имеют заполнение и рамку, но не имеют полей.
Для псевдоэлемента :before базовая линия текста в боксе маркёра будет выровнена вертикально относительно базовой линии текста первой строки содержимого основного бокса. Если основной бокс не содержит текста, верхний внешний край бокса маркёра будет выровнен с верхним внешним краем основного бокса. Для псевдоэлемента :after базовая линия текста в боксе маркёра будет выровнена вертикально относительно базовой линии текста последней строки содержимого основного бокса. Если основной бокс не содержит текста, нижний внешний край бокса маркёра будет выровнен с нижним внешним краем основного бокса.
Высота бокса маркёра задаётся в свойстве 'line-height'. Бокс маркёра :before (:after) участвует в подсчёте высоты первого (последнего) строчного бокса основного бокса. Таким образом, маркёры выравниваются по первой и последней строке содержимого элемента, даже если боксы маркёра находятся в разных строчных боксах. Если в основном боксе отсутствует первый или последний строчный бокс, то бокс маркёра сам устанавливает свой первый строчный бокс.
Вертикальное выравнивание бокса маркёра внутри его строчного бокса специфицируется свойством 'vertical-align'.
Если значение свойства 'width' - 'auto', то ширина содержимого бокса маркёра является шириной содержимого, иначе - это значение 'width'. Для значений 'width' меньших, чем ширина содержимого, свойство 'overflow' специфицирует поведение при переполнении. Боксы маркёра могут перекрывать основные боксы. Для значений 'width' больших, чем ширина содержимого, свойство 'text-align' определяет горизонтальное выравнивание содержимого в боксе маркёра.
