Снимок экрана 2014-08-30 в 17.02.07

Реклама

Чтобы автоматически пронумеровать или озаглавить абзацы на вашем сайте мы воспользуемся 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.