Основы CSS

CSS модель блока

Основы CSS3

CSS справочник

CSS @правила (RULES)

Макет веб-страниц CSS Автоматическое переносение строк CSS

Счетчики CSS

CSS счетчик счетчика подобен переменной. Эти значения поддерживаются CSS и могут быть увеличены CSS правилами для отслеживания их использования. Основное их использование - это возможность вычислять количество использования узловых элементов по заданным правилам.

CSS счетчик счетчика помогает создавать простые счетчики для отображения чисел на основе CSS.

Свойства CSS счетчиков

Ниже приведен список свойств, используемых вместе с CSS счетчиками:

counter-reset：Используется для создания или сброса счетчика.
counter-increment：Используется для увеличения значения счетчика.
content：Используется для вставки созданного содержимого.
Функция counter() или counters():Используется для добавления значения счетчика к элементу.

Примечание: Перед использованием CSS счетчиков необходимо создать их с помощью counter-reset.

Онлайн пример CSS Counter

Давайте приведем пример: создадим счетчик для страницы и увеличим значение счетчика для каждого следующего элемента.

См. следующий пример:

Пример

<!DOCTYPE　html>　　
<html>　　　　　　
<head>　　
<style>　　
body　{　　
　　　　counter-reset:　section;　　
}　　
h2::before　{　　
　　　　counter-increment:　section;　　
　　　　content:　"Раздел　"　counter(section)　":　";　　
}　　
</style>　　
</head>　　
<body>　　
<h1>Пример CSS Counters счетчика:</h1>　　
<h2>Java　Tutorial</h2>　　
<h2>HTML　Tutorial</h2>　　
<h2>CSS　Tutorial</h2>　　
<h2>Oracle　Tutorial</h2>　　
<p><strong>Примечание:</strong> При использовании в браузере IE8 необходимо声明 !DOCTYPE.</p>　　
</body>　　
</html>

Проверьте, что‹/›

Примечание: В примере выше вы можете увидеть, что в выборе body был создан счетчик, который добавляет значение счетчика к каждому элементу h2 и добавляет «Раздел <значение счетчика>:» в начале каждого элемента h2.

CSS nested counters

Вы также можете создать счетчик в счетчике. Это называется nesting of counters. Давайте рассмотрим пример использования nested counters.

См. следующий пример:

Пример

<!DOCTYPE　html>　　
<html>　　
<head>　　
<style>　　
body　{　　
　　　　counter-reset:　section;　　
}　　
h1　{　　
　　　　counter-reset:　subsection;　　
}　　
h1::before　{　　
　　　　counter-increment:　section;　　
　　　　content:　"Раздел　"　counter(section)　".　";　　
}　　
h2::before　{　　
　　　　counter-increment:　subsection;　　
　　　　content:　counter(section)　"."　counter(subsection)　"　";　　
}　　
</style>　　
</head>　　
<body>　　
<h1>Java　tutorials:</h1>　　
<h2>Core　Java　tutorial</h2>　　
<h2>Servlet　tutorial</h2>　　
<h2>JSP　tutorial</h2>　　
<h2>Spring　tutorial</h2>　　
<h2>Hibernate　tutorial</h2>　　
　　
<h1>Web technology tutorials:</h1>　　
<h2>HTML tutorial</h2>　　
<h2>CSS tutorial</h2>　　
<h2>jQuery tutorial</h2>　　
<h2>Bootstrap tutorial</h2>　　
　　
<h1>Database tutorials:</h1>　　
<h2>SQL tutorial</h2>　　
<h2>MySQL tutorial</h2>　　
<h2>PL/SQL tutorial</h2>　　
<h2>Oracle tutorial</h2>　　
<p><strong>Примечание:</strong>　Эти свойства поддерживаются IE8 только при указании !DOCTYPE.</p>　　
</body>　　
</html>

Проверьте, что‹/›

Примечание:В данном примере вы можете увидеть, что для раздела был создан счетчик, и в этом разделе был создан вложенный счетчик с именем subsection.

Вложенные счетчики различных уровней

Вы можете использовать вложенные счетчики для создания списков с профилями. Это помогает вставлять строки между счетчиками различных уровней вложенности.

См. следующий пример:

Пример

<!DOCTYPE　html>　　
<html>　　
<head>　　
<style>　　
ol　{　　
　　　　counter-reset:　section;　　
　　　　list-style-type:　none;　　
}　　
　　
li::before　{　　
　　　　counter-increment:　section;　　
　　　　content:　counters(section,".")　"　";　　
}　　
</style>　　
</head>　　
<body>　　
<h2>Счетчики различных уровней вложенности</h2>　　
<ol>　　
　　<li>элемент</li>　　
　　<li>элемент　　
　　　　<ol>　　
　　　　　　<li>элемент</li>　　
　　　　　　<li>элемент</li>　　
　　　　　　<li>элемент　　
　　　　　　　　<ol>　　
　　　　　　　　　　<li>элемент</li>　　
　　　　　　　　　　<li>элемент</li>　　
　　　　　　　　　　<li>элемент</li>　　
　　　　　　　　</ol>　　
　　　　　　</li>　　
　　　　　　<li>элемент</li>　　
　　　　</ol>　　
　　</li>　　
　　<li>элемент</li>　　
　　<li>элемент</li>　　
</ol>　　
<p><strong>Примечание:</strong>　Эти свойства поддерживаются IE8 только при указании !DOCTYPE.</p>　　
</body>　　
</html>

Проверьте, что‹/›

Макет веб-страниц CSS Автоматическое переносение строк CSS