From 497f01fc724eb5849dc8d304c0355e30ce68a68d Mon Sep 17 00:00:00 2001 From: MDN Date: Mon, 8 Nov 2021 00:49:15 +0000 Subject: [CRON] sync translated content --- files/ru/_redirects.txt | 1 + files/ru/_wikihistory.json | 14 +-- .../using_css_counters/index.html | 127 +++++++++++++++++++++ .../using_css_counters/index.html | 126 -------------------- 4 files changed, 135 insertions(+), 133 deletions(-) create mode 100644 files/ru/web/css/css_counter_styles/using_css_counters/index.html delete mode 100644 files/ru/web/css/css_lists_and_counters/using_css_counters/index.html (limited to 'files/ru') diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt index 08bcfe3b5c..f2af85fdb6 100644 --- a/files/ru/_redirects.txt +++ b/files/ru/_redirects.txt @@ -413,6 +413,7 @@ /ru/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes /ru/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes /ru/docs/Web/CSS/CSS_Grid_Layout/Грид-области /ru/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas /ru/docs/Web/CSS/CSS_Grid_Layout/Расположение_элементов_по_грид-линиям_с_помощью_CSS_Grid /ru/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid +/ru/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters /ru/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /ru/docs/Web/CSS/CSS_User_Interface/Использование_URL_значений_для_свойства_cursor /ru/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property /ru/docs/Web/CSS/CSS_animated_properties /ru/docs/Web/CSS /ru/docs/Web/CSS/CSS_Селекторы /ru/docs/Web/CSS/CSS_Selectors diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json index 6110d11a22..03b992c4e3 100644 --- a/files/ru/_wikihistory.json +++ b/files/ru/_wikihistory.json @@ -12831,6 +12831,13 @@ "ldone" ] }, + "Web/CSS/CSS_Counter_Styles/Using_CSS_counters": { + "modified": "2020-04-28T15:39:35.383Z", + "contributors": [ + "arnoldovich", + "moshenskyDV" + ] + }, "Web/CSS/CSS_Flexible_Box_Layout": { "modified": "2020-10-19T05:53:46.314Z", "contributors": [ @@ -13014,13 +13021,6 @@ "TylerH" ] }, - "Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters": { - "modified": "2020-04-28T15:39:35.383Z", - "contributors": [ - "arnoldovich", - "moshenskyDV" - ] - }, "Web/CSS/CSS_Positioning": { "modified": "2019-03-23T22:44:29.790Z", "contributors": [ diff --git a/files/ru/web/css/css_counter_styles/using_css_counters/index.html b/files/ru/web/css/css_counter_styles/using_css_counters/index.html new file mode 100644 index 0000000000..b01278038b --- /dev/null +++ b/files/ru/web/css/css_counter_styles/using_css_counters/index.html @@ -0,0 +1,127 @@ +--- +title: CSS счётчики +slug: Web/CSS/CSS_Counter_Styles/Using_CSS_counters +tags: + - CSS + - CSS счётчики + - вложенные счётчики +translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +original_slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +--- +
{{CSSRef}}
+ +

CSS счётчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы при помощи CSS для отслеживания количества их использования. Они позволяют регулировать внешний вид контента, основываясь на его местоположении в документе. CSS счётчики реализованы в CSS 2.1 (ссылка на спецификацию).

+ +

Значение счётчика сбрасывается (инициализируется) при помощи {{cssxref("counter-reset")}}. 

+ +

{{cssxref("counter-increment")}} может быть отображён на странице, используя функцию counter() или counters() в свойстве {{cssxref("content")}}.

+ +

Использование счётчиков

+ +

Для того, чтобы использовать CSS счётчики, сначала необходимо сбросить их значение (0 по умолчанию). Для того, чтобы отобразить значение счётчика - используйте функцию counter(). Следующий пример прибавляет в начале каждого h3 элемента "Section <значение счётчика>:".

+ +
body {
+  counter-reset: section;                     /* Устанавливает значение
+                                                 счётчика, равным 0 */
+}
+
+h3::before {
+  counter-increment: section;                 /* Инкрементирует счётчик*/
+  content: "Секция " counter(section) ": ";   /* Отображает текущее
+                                                 значение счётчика */
+}
+
+ +

Пример:

+ +
<h3>Вступление</h3>
+<h3>Основная часть</h3>
+<h3>Заключение</h3>
+ +

{{EmbedLiveSample("Использование_счётчиков", 200, 150)}}

+ +

Вложенные счётчики

+ +

CSS счётчики могут быть очень полезны для создания нумерованных списков, потому что новая сущность CSS счётчика автоматически создаётся в дочерних элементах. Используя функцию counters(), можно вставить строку между разными уровнями вложенных счётчиков. Пример:

+ +
ol {
+  counter-reset: section;           /*Создаёт новый счётчик для каждого
+                                      тега <ol>*/
+  list-style-type: none;
+}
+
+li::before {
+  counter-increment: section;      /*Инкрементируется только счётчик
+                                     текущего уровня вложенности*/
+  content: counters(section,".") " ";/*Добавляем значения всех уровней
+                                    вложенности, используя разделитель '.'*/
+                                   /*Если необходима поддержка < IE8,
+                                      необходимо убедиться, что после
+                                      разделителя ('.') не стоит пробел*/
+}
+
+ +

Объединим с данным 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>
+ +

Результат:

+ +

{{EmbedLiveSample("Вложенные_счётчики", 250, 350)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}{{Spec2("CSS3 Lists")}}No change
{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}{{Spec2("CSS2.1")}}Initial definition
+ +

Смотрите также

+ + 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 ---- -
{{CSSRef}}
- -

CSS счётчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы при помощи CSS для отслеживания количества их использования. Они позволяют регулировать внешний вид контента, основываясь на его местоположении в документе. CSS счётчики реализованы в CSS 2.1 (ссылка на спецификацию).

- -

Значение счётчика сбрасывается (инициализируется) при помощи {{cssxref("counter-reset")}}. 

- -

{{cssxref("counter-increment")}} может быть отображён на странице, используя функцию counter() или counters() в свойстве {{cssxref("content")}}.

- -

Использование счётчиков

- -

Для того, чтобы использовать CSS счётчики, сначала необходимо сбросить их значение (0 по умолчанию). Для того, чтобы отобразить значение счётчика - используйте функцию counter(). Следующий пример прибавляет в начале каждого h3 элемента "Section <значение счётчика>:".

- -
body {
-  counter-reset: section;                     /* Устанавливает значение
-                                                 счётчика, равным 0 */
-}
-
-h3::before {
-  counter-increment: section;                 /* Инкрементирует счётчик*/
-  content: "Секция " counter(section) ": ";   /* Отображает текущее
-                                                 значение счётчика */
-}
-
- -

Пример:

- -
<h3>Вступление</h3>
-<h3>Основная часть</h3>
-<h3>Заключение</h3>
- -

{{EmbedLiveSample("Использование_счётчиков", 200, 150)}}

- -

Вложенные счётчики

- -

CSS счётчики могут быть очень полезны для создания нумерованных списков, потому что новая сущность CSS счётчика автоматически создаётся в дочерних элементах. Используя функцию counters(), можно вставить строку между разными уровнями вложенных счётчиков. Пример:

- -
ol {
-  counter-reset: section;           /*Создаёт новый счётчик для каждого
-                                      тега <ol>*/
-  list-style-type: none;
-}
-
-li::before {
-  counter-increment: section;      /*Инкрементируется только счётчик
-                                     текущего уровня вложенности*/
-  content: counters(section,".") " ";/*Добавляем значения всех уровней
-                                    вложенности, используя разделитель '.'*/
-                                   /*Если необходима поддержка < IE8,
-                                      необходимо убедиться, что после
-                                      разделителя ('.') не стоит пробел*/
-}
-
- -

Объединим с данным 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>
- -

Результат:

- -

{{EmbedLiveSample("Вложенные_счётчики", 250, 350)}}

- -

Спецификации

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}{{Spec2("CSS3 Lists")}}No change
{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}{{Spec2("CSS2.1")}}Initial definition
- -

Смотрите также

- - -- cgit v1.2.3-54-g00ecf