counter-reset | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Понедельник, 05.12.2016
Главная » Справочник CSS3 » Свойства контента


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


counter-reset | Свойство CSS

Свойство counter-reset задаёт начальное значение идентификатору счётчика.




Свойство counter-reset помогает установить одну или несколько переменных для которых будут вестись показания счётчика.Допонительно,каждый создаваймый идентификатор должен быть укамплектован начальным числовым значением,а если значений несколько их следует разделять пробелом.Все добавленные значения для идентификаторов счётчиков должны передаваться свойством content.Обязательно следует применять псевдоэлементы :after и :before по сути именно с их помощью и происходит генерация значений,в начало или конец контента.Свойство применимо к псевдоэлементам :after и :before,создано в версии CSS2 но проходит валидацию согласно версии CSS3.




Дополнительные свойства ccounter-reset


Свойство
Описание
contentГенерирует контент
counter-incrementСоздаёт интервал показаний счётчика


Дополнительные псевдоэлементы counter-reset


:afterГенерирует значения content в конец существующего контента
:beforeГенерирует значения content в начало существующего контента


Дополнительные значения counter-reset


Значение
Описание
noneСчётчик не инициализируется
<Имя>Устанавливает имя идентификатору,может быть несколько
<Номер>Начальное значение для счётчика,если несколько - через пробел
inheritНаследуется значение родителя


Свойство работает в браузерах




Пример применения свойства



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство counter-reset</title>
<meta charset="utf-8">
<style type="text/css">
<!--
body {
counter-reset:st;
}
h1 {
counter-reset:pr;
}
h1:after {
counter-increment:st;
content:" № "counter(st);
color:red;
}
h2:after {
counter-increment:pr;
content:counter(st) "." counter(pr) " ";
color:green;
}
-->
</style>
</head>
<body>
<h1>Раздел</h1>
<h2>Параграф № </h2>
<h2>Параграф № </h2>
<h2>Параграф № </h2>
<h2>Параграф № </h2>
<h1>Раздел</h1>
<h2>Параграф № </h2>
<h2>Параграф № </h2>
<h2>Параграф № </h2>
<h2>Параграф № </h2>
</body>
</html>

Пример в действии




Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/CSS21/generate.html#propdef-counter-reset
Категория: Свойства контента | Добавил: IZOTOP (09.04.2012) | Автор: Меренков Михаил E W
Просмотров: 423 | Теги: начальное, css, counter-reset, свойство, значение, style, счётчика | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]