ИНФОРМАЦИЯ,    ДИЗАЙН,    ПЕРЕВОДЫ,    РЕКЛАМА   .   .   .
w a p - с а й т
Информационный портал
Сегодня:  
admin@aranea.ru
+79068922256

  aranea.ru || Спецификация CSS2 | 12.5. Автоматические счетчики и нумерация.

12.5. Автоматические счетчики и нумерация.

12.5.1. Вложенные счетчики и область действия.
12.5.2. Стили счетчиков.
12.5.3. Счетчики в элементах со свойством 'display: none'.

Автоматическая нумерация в CSS2 контролируется двумя свойствами 'counter-increment' и 'counter-reset'. Счетчики, определенные этими свойствами, используются с функциями counter() и counters() свойства 'content'.

'counter-reset'
Тип значения:       [<identifier><integer>?]+ | none | inherit
Начальная величина: нет
Применяется:        ко всем элементам
Наследование:       нет
Процентная база:    нет
Медиа:              ко всем

'counter-increment'
Тип значения:       [<identifier><integer>?]+ | none | inherit
Начальная величина: нет
Применяется:        ко всем элементам
Наследование:       нет
Процентная база:    нет 
Медиа:              ко всем

Свойство 'counter-increment' допускает одно или более имен счетчиков (идентификаторов), каждый факультативно сопровождается целым числом. Целое число указывает, на сколько прирастает счетчик для каждого положения элемента. Инкремент по умолчанию равен 1. Разрешены отрицательные целые числа и ноль.

Свойство 'counter-reset' тоже содержит перечень одного или более имен счетчиков, каждый факультативно сопровождается целым числом. Целое число предоставляет значение, которое счетчик устанавливает для каждого положения элемента. По умолчанию оно равно 0.

Если 'counter-increment' ссылается на счетчик, который не находится в диапазоне (смотрите ниже) какого-либо 'counter-reset', то допускается, что счетчик установлен на 0 корневым элементом.

Следующий пример показывает способ нумерации глав и разделов в виде "Chapter 1", "1.1", "1.2" и т.д.

H1:before {
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter;  /* Add 1 to chapter */
    counter-reset: section;      /* Set section to 0 */
}
H2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}

Если элемент наращивает или переустанавливает (increments/resets) счетчик и использует его (в свойстве 'content' псевдо-элементов :before :after), то счетчик применяется после изменения или переустановки.

Если элемент одновременно переустанавливает и наращивает счетчик, то счетчик сначала переустанавливается, а затем наращивается.

Свойство 'counter-reset' подчиняется каскадным правилам. Таким образом, из-за каскадирования, следующая стилевая таблица:

H1 { counter-reset: section -1 }
H1 { counter-reset: imagenum 99 }

будет переустанавливать только 'imagenum'. Для переустановки обоих счетчиков, они должны быть определены вместе:

H1 { counter-reset: section -1 imagenum 99 }

12.5.1. Вложенные счетчики и область действия.

Счетчики являются "само-вложенными" ("self-nesting"), в том смысле, что повторное использование счетчика в дочернем элементе автоматически создает новый уровень счетчика. Это важно для ситуаций, подобным спискам в 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' для счетчика Х, создает новый счетчик Х, областью действия которого является элемент, его предшествующий сосед, все потомки элемента и его предшествующие соседи.

В примере выше, OL будет создавать счетчик, и все дочерние элементы OL будут обращаться к такому счетчику.

Если мы определим пунктом [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 }

12.5.2. Стили счетчиков.

По умолчанию счетчики форматируются с десятичными числами, но все стили, доступные для свойства '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) }

12.5.3. Счетчики в элементах со свойством 'display: none'.

Элемент, который не выводится на экран ('display' установлен со значением 'none'), не может приращивать или переустанавливать счетчик.

Например, со следующей стилевой таблицей элементы H2 с классом "secret" не осуществляют приращение 'count2'.

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

С другой стороны, элементы со свойством 'visibility' со значением 'hidden' приращивают счетчики.

← Назад | Вперед →
Copyright © 2006 -  aranea.ru