Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30


Чувашия-это моя Россия

Ссылки на каскадные стили CSS - counter-increment.

Поддержка Браузеров

Internet Explorer Интернет эксплорер Google Chrome Google Chrome Opera Опера Firefox Firefox Safari Сафари, то есть поддерживается во всех основных браузерах.

Внимание!!! IE8 поддерживает свойство против приращение только если DOCTYPE указанный.

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

Самое мощное и интересное здесь не в том, что производится какое-то изменение какого-то участка( элемента) страницы сайта. Вся интересная и необходимая информация в том, что свойство counter-increment, которое действует через стили CSS3 автономно работает даже при отключения JavaScripta в браузере Вашего компьютера. Всегда и при любых обстоятельствах.


Синтаксис:

        counter-increment: none|id|initial|inherit;

Описание и Использование

Значение по умолчанию: none
наследует: нет
анимируемых: нет
Версия: CSS2
JavaScript синтаксис: object.style.counterIncrement = "subsection";


Свойства Значения

Значение Описание
none Значение по умолчанию. Нет счетчиков будут увеличиваться
id number определяет, сколько счетчик будет увеличиваться на каждое появление селектора. По умолчанию приращение равно 1. 0 или отрицательные значения, разрешено. Если id означает, что счетчик не был инициализирован по counter-reset, начальное значение по умолчанию-0
initial Это свойство задает значение по умолчанию.
inherit Наследует это свойство от своего родительского элемента.


Изменение нумерации списка

Код Результат
LI { list-style-type: none; }
OL { counter-reset: list -1; }
LI:before {
counter-increment: list;
content: counter(list) ". ";
}

Список начинается с нуля.

0, 1, 2

LI { list-style-type: none; }
OL { counter-reset: list; }
LI:before {
counter-increment: list 2;
content: counter(list) ". ";
}

Выводятся все четные числа.

2, 4, 6

LI { list-style-type: none; }
OL { counter-reset: list -1; }
LI:before {
counter-increment: list list;
content: counter(list) ". ";
}

Выводятся все нечетные числа.

1, 3, 5

LI { list-style-type: none; }
OL { counter-reset: list 9; }
LI:before {
counter-increment: list;
content: counter(list) ". ";
}

Список начинается с 10.

10, 11, 12



Пишем программу:

< !DOCTYPE>
< html>
< head>
< style>
h1 {counter-reset:subsection;}
h1:before
{
counter-increment:section;
content:"Section " counter(section) ". ";
}
h2:before 
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}
< /style>
< /head>
< body>

< h1>HTML учебник< /h1>
< h2>HTML учебник< /h2>
< h2>XHTML учебник< /h2>
< h2>CSS учебник< /h2>

< h1>Script учебник< /h1>
< h2>JavaScript< /h2>
< h2>VBScript< /h2>

< h1>XML учебник< /h1>
< h2>XML< /h2>
< h2>XSL< /h2>

< /body>
< /html>                     

Результат программы:

HTML учебник

HTML учебник

XHTML учебник

CSS учебник

Script учебник

JavaScript

VBScript

XML учебник

XML

XSL




seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную     назад    дальше     вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: