Чтобы автоматически пронумеровать или озаглавить абзацы на вашем сайте мы воспользуемся CSS-счетчиком. Он дает возможность пронумеровать элементы на страницы, подсчитывая их количество. При добавлении нового элемента счетчик будет автоматически добавлять к нему нужное значение.
Такая возможность будет полезна, например для сайта с инструкциями или рецептами. Любая инструкция, как правило, состоит из последовательности этапов, которые нужно пронумеровать. CSS-
счетчик позвляет сосчитать и добавить номера к элементам, например к картинкам на странице.
Допустим у нас есть инструкция по сборке воздушного змея:
<body> <p>Возьмите каркас змея, уздечку вставте с лицевой стороны в отверстия на змее.</p> <p>Далее найдите специальные отверстия для рейки у змея.</p> <p>Переворачиваем воздушного змея и привязываем к уздечке нить.</p> <p>Если есть ещё и хвост, снизу у змея найдите отверстие и закрепите хвот.</p> </body>
В этом примере каждый абзац это отдельный этап. Для того чтобы автоматически пронумеровать каждый шаг инструкции мы воспользуемся кодом CSS.
CSS-счетчики основываются на свойстве counter-increment. Прежде чем воспользоваться свойством нужно обнулить значение счетчика, заданное по умолчанию. Лучше будет определить счетчик в стиле элемента body:
body {
counter-reset: geekov;
}
Данная строка сбрасывает счетчик до нулевого значения, а также присваевает ему имя «geekov». Имя счетчика необходимо для последующего обращения к нему, к тому же дает возможность использовать несколько счетчиков на странице, задав им разные имена.
Теперь нам понадобится псевдо-элемент :before, для того чтобы проставить нумерацию в начале каждого абзаца. К числам или вместо них можно добавить какой-нибудь текст. В нашем случае добавим текст «Шаг»:
p:before {
counter-increment: geekov;
content: "Шаг "counter(geekov) ": ";
font-weight: bold; //Выделим нашу нумерацию жирным.
}
Результат:
[tutor-result]
Шаг 1: Возьмите каркас змея, уздечку вставте с лицевой стороны в отверстия на змее.
Шаг 2: Далее найдите специальные отверстия для рейки у змея. Отверстия должны находится сверху-снизу или слева-справа.
Шаг 3: Переворачиваем к себе лицевой стороной воздушного змея и привязываем к уздечке нить.
Шаг 4: Если есть ещё и хвост, снизу у змея найдите отверстие и закрепите хвот.
[/tutor-result]
CSS-счетчики поддерживаются всеми браузерами, кроме IE7.