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


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



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


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

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




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




Дополнительные свойства counter-increment


Свойство
Описание
contentГенерирует контент
counter-resetСбрасывает установленное количество счётчиков


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


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


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


Значение
Описание
noneЗапрещает увеличиватся показаниям счётчика
<Имя>Увеличивает показания счётчика ориентируясь на значения установленные для имени или нескольких имён
<Номер>Увеличивает показания счётчика ориентируясь на значения в числовом эквиваленте,отрицательные значения при этом допускаются если для них применено свойство counter-reset
inheritНаследуется значение родителя


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




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



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство counter-increment</title>
<meta charset="utf-8">
<style type="text/css">
<!--
.zg {
counter-reset:zg;
}
h2:after {
content: "Здесь чётные № " counter(zg);
counter-increment: zg 5;
color:red;
text-decoration:blink;
}
h2:before {
content: "Здесь нечётные № " counter(zg);
counter-increment: zg 1;
color:green;
text-decoration:blink;
}
-->
</style>
</head>
<body>
<div class="zg">
<h2>НОМЕРА</h2>
<h2>НОМЕРА</h2>
<h2>НОМЕРА</h2>
<h2>НОМЕРА</h2>
<h2>НОМЕРА</h2>
<h2>НОМЕРА</h2>
</div>
</body>
</html>

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




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





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






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

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

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