diff options
Diffstat (limited to 'files/ru/web/css/css_lists_and_counters')
| -rw-r--r-- | files/ru/web/css/css_lists_and_counters/using_css_counters/index.html | 126 |
1 files changed, 0 insertions, 126 deletions
diff --git a/files/ru/web/css/css_lists_and_counters/using_css_counters/index.html b/files/ru/web/css/css_lists_and_counters/using_css_counters/index.html deleted file mode 100644 index e8792fded7..0000000000 --- a/files/ru/web/css/css_lists_and_counters/using_css_counters/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: CSS счётчики -slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -tags: - - CSS - - CSS счётчики - - вложенные счётчики -translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters ---- -<div>{{CSSRef}}</div> - -<p>CSS счётчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы при помощи CSS для отслеживания количества их использования. Они позволяют регулировать внешний вид контента, основываясь на его местоположении в документе. CSS счётчики реализованы в CSS 2.1 (<a href="https://www.w3.org/TR/CSS21/generate.html#counters">ссылка на спецификацию</a>).</p> - -<p>Значение счётчика сбрасывается (инициализируется) при помощи {{cssxref("counter-reset")}}. </p> - -<p>{{cssxref("counter-increment")}} может быть отображён на странице, используя функцию <code>counter() или counters() в свойстве </code>{{cssxref("content")}}.</p> - -<h2 id="Использование_счётчиков">Использование счётчиков</h2> - -<p>Для того, чтобы использовать CSS счётчики, сначала необходимо сбросить их значение (0 по умолчанию). Для того, чтобы отобразить значение счётчика - используйте функцию <code>counter(). Следующий пример прибавляет в начале каждого h3 элемента </code>"Section <<em>значение счётчика</em>>:".</p> - -<pre class="brush: css">body { - counter-reset: section; /* Устанавливает значение - счётчика, равным 0 */ -} - -h3::before { - counter-increment: section; /* Инкрементирует счётчик*/ - content: "Секция " counter(section) ": "; /* Отображает текущее - значение счётчика */ -} -</pre> - -<p>Пример:</p> - -<pre class="brush: html"><h3>Вступление</h3> -<h3>Основная часть</h3> -<h3>Заключение</h3></pre> - -<p>{{EmbedLiveSample("Использование_счётчиков", 200, 150)}}</p> - -<h2 id="Вложенные_счётчики">Вложенные счётчики</h2> - -<p>CSS счётчики могут быть очень полезны для создания нумерованных списков, потому что новая сущность CSS счётчика автоматически создаётся в дочерних элементах. Используя функцию <code>counters(), можно вставить строку между разными уровнями вложенных счётчиков. Пример:</code></p> - -<pre class="brush: css">ol { - counter-reset: section; /*Создаёт новый счётчик для каждого - тега <ol>*/ - list-style-type: none; -} - -li::before { - counter-increment: section; /*Инкрементируется только счётчик - текущего уровня вложенности*/ - content: counters(section,".") " ";/*Добавляем значения всех уровней - вложенности, используя разделитель '.'*/ - /*Если необходима поддержка < IE8, - необходимо убедиться, что после - разделителя ('.') не стоит пробел*/ -} -</pre> - -<p>Объединим с данным HTML:</p> - -<pre class="brush: html"><ol> - <li>item</li> <!-- 1 --> - <li>item <!-- 2 --> - <ol> - <li>item</li> <!-- 2.1 --> - <li>item</li> <!-- 2.2 --> - <li>item <!-- 2.3 --> - <ol> - <li>item</li> <!-- 2.3.1 --> - <li>item</li> <!-- 2.3.2 --> - </ol> - <ol> - <li>item</li> <!-- 2.3.1 --> - <li>item</li> <!-- 2.3.2 --> - <li>item</li> <!-- 2.3.3 --> - </ol> - </li> - <li>item</li> <!-- 2.4 --> - </ol> - </li> - <li>item</li> <!-- 3 --> - <li>item</li> <!-- 4 --> -</ol> -<ol> - <li>item</li> <!-- 1 --> - <li>item</li> <!-- 2 --> -</ol></pre> - -<p>Результат:</p> - -<p>{{EmbedLiveSample("Вложенные_счётчики", 250, 350)}}</p> - -<h2 id="Спецификации">Спецификации</h2> - -<table> - <thead> - <tr> - <th>Specification</th> - <th>Status</th> - <th>Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}</td> - <td>{{Spec2("CSS3 Lists")}}</td> - <td>No change</td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Смотрите_также">Смотрите также</h2> - -<ul> - <li>{{cssxref("counter-reset")}}</li> - <li>{{cssxref("counter-increment")}}</li> -</ul> |