Вы можете создавать простейшие нумерованные списки в HTML и XHTML с помощью элемента <ol>. Однако чуть более сложные списки, например, вложенные нумерованные, создать в языках разметки уже нельзя. Зато стандарт CSS2 вводит понятие счетчика, значение которого может быть установлено и изменено, когда броузер выводит ваш документ. Вставьте значение счетчика с помощью специальных функций, известных свойству content, и измените формат и внешний вид счетчика с помощью других CSS2-свойств.
Согласно стандарту CSS2 каждый счетчик обладает именем. Чтобы создать счетчик, просто упомяните его имя в свойстве counter-reset или counter-increment, ассоциированном с соответствующим элементом. Если экземпляр счетчика с таким именем еще не существует на текущем уровне вложенности документа, броузер, поддерживающий стандарт CSS2, создаст его автоматически. С этого момента вы можете
сбрасывать и устанавливать значение счетчика, как вам угодно. Например, предположим, что вы хотите обозначать элементом <h1> названия глав, а элементом <h2> – названия разделов. Главы и разделы пронумерованы, причем в каждой главе нумерация разделов начинается заново. Желаемый результат достигается таким способом:
h1:before { counter-increment : chapter; counter-reset : section }
h2:before { counter-increment : section }
Когда броузер, поддерживающий стандарт CSS2, встречает первый элемент <h1> в документе, он создает счетчики chapter и section и сбрасывает их значения в 0. Одновременно (и при каждом следующем обнаружении этого элемента) такой броузер активизирует свойство counter-increment, чтобы увеличить счетчик chapter на единицу и получить номер главы 1, 2, 3 и т. д. По мере того, как внутри главы встречаются элементы <h2>, счетчик section увеличивается в соответствии со стилевым правилом «h2», которое предписывает последовательную нумерацию разделов. Обратите внимание, что счетчик section сбрасывается в стилевом правиле «h1» и нумерация разделов внутри каждой главы начинается заново.
Как свойство counter-reset, так и counter-increment принимают списки имен счетчиков, позволяя вам сбрасывать или увеличивать значения нескольких счетчиков в одном свойстве. Кроме того, вы можете указать число после имени счетчика, в результате чего свойство counter-reset проинициализирует счетчик указанным значением, а свойство
Counter-increment увеличит счетчик на указанное числовое значение. Отрицательные числа допускаются, так что вы можете нумеровать пункты в обратном порядке, если пожелаете.
Например, если мы хотим, чтобы документ начинался с главы 7, а номера разделов увеличивались на 2, мы можем переписать предыдущий пример таким образом:
body { counter-reset : chapter 6 }
h1:before { counter-increment : chapter; counter-reset : section }
h2:before { counter-increment : section 2 }
Обратите внимание, что мы создали счетчик chapter как можно раньше и проинициализировали его значением, на единицу меньшим, чем нужное нам начальное значение. Когда броузер встретит первый элемент <h1>, он создаст счетчик chapter, установит его в значение 6, а затем увеличит это значение на единицу.
Областью действия имени счетчика является уровень вложенности, на котором оно было определено. Совсем не обязательно, чтобы эта область охватывала весь документ. Если вы используете такое же имя счетчика в элементе потоке, броузер создаст на этом уровне новый счетчик. В нашем примере все элементы <h1> и <h2> находятся на одном уровне вложенности, так что единственные экземпляры счетчиков chapter и section обслуживают весь уровень. Если бы вы вложили в этот элемент тег <div>, который бы, в свою очередь, содержал элементы <h1> и <h2>, то на этом новом уровне появились бы новые экземпляры обоих счетчиков.
Такое поведение распространяется на вложенные нумерованные списки. Если вы ассоциируете счетчик с элементом <li>, а затем вложите друг в друга несколько нумерованных списков, то на каждом уровне будет создан отдельный экземпляр счетчика со своей нумерационной последовательностью.
Любите играть в MMORPG ? Тогда узнайте как создать сервер и играть на нем с друзьями.