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/de/_redirects.txt | 3 +- files/de/_wikihistory.json | 12 +- .../using_css_counters/index.html | 127 +++++++++++++++ .../using_css_counters/index.html | 127 --------------- files/fr/_redirects.txt | 15 +- files/fr/_wikihistory.json | 22 +-- .../css_counter_styles/using_css_counters/index.md | 134 ++++++++++++++++ .../using_css_counters/index.md | 134 ---------------- files/ja/_redirects.txt | 7 +- files/ja/_wikihistory.json | 20 +-- .../using_css_counters/index.html | 177 +++++++++++++++++++++ .../using_css_counters/index.html | 176 -------------------- files/ko/_redirects.txt | 1 + files/ko/_wikihistory.json | 14 +- .../using_css_counters/index.html | 177 +++++++++++++++++++++ .../using_css_counters/index.html | 176 -------------------- files/pl/_redirects.txt | 5 +- files/pl/_wikihistory.json | 20 +-- .../using_css_counters/index.html | 87 ++++++++++ .../using_css_counters/index.html | 87 ---------- files/pt-br/_redirects.txt | 1 + files/pt-br/_wikihistory.json | 16 +- .../using_css_counters/index.html | 116 ++++++++++++++ .../using_css_counters/index.html | 115 ------------- files/ru/_redirects.txt | 1 + files/ru/_wikihistory.json | 14 +- .../using_css_counters/index.html | 127 +++++++++++++++ .../using_css_counters/index.html | 126 --------------- files/zh-cn/_redirects.txt | 3 +- files/zh-cn/_wikihistory.json | 18 +-- .../using_css_counters/index.html | 121 ++++++++++++++ .../using_css_counters/index.html | 121 -------------- 32 files changed, 1156 insertions(+), 1144 deletions(-) create mode 100644 files/de/web/css/css_counter_styles/using_css_counters/index.html delete mode 100644 files/de/web/css/css_lists_and_counters/using_css_counters/index.html create mode 100644 files/fr/web/css/css_counter_styles/using_css_counters/index.md delete mode 100644 files/fr/web/css/css_lists_and_counters/using_css_counters/index.md create mode 100644 files/ja/web/css/css_counter_styles/using_css_counters/index.html delete mode 100644 files/ja/web/css/css_lists_and_counters/using_css_counters/index.html create mode 100644 files/ko/web/css/css_counter_styles/using_css_counters/index.html delete mode 100644 files/ko/web/css/css_lists_and_counters/using_css_counters/index.html create mode 100644 files/pl/web/css/css_counter_styles/using_css_counters/index.html delete mode 100644 files/pl/web/css/css_lists_and_counters/using_css_counters/index.html create mode 100644 files/pt-br/web/css/css_counter_styles/using_css_counters/index.html delete mode 100644 files/pt-br/web/css/css_lists_and_counters/using_css_counters/index.html 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 create mode 100644 files/zh-cn/web/css/css_counter_styles/using_css_counters/index.html delete mode 100644 files/zh-cn/web/css/css_lists_and_counters/using_css_counters/index.html diff --git a/files/de/_redirects.txt b/files/de/_redirects.txt index 774cfd74b9..65df267510 100644 --- a/files/de/_redirects.txt +++ b/files/de/_redirects.txt @@ -505,8 +505,9 @@ /de/docs/Web/CSS/CSS_Compositing_and_Blending /de/docs/Web/CSS/Compositing_and_Blending /de/docs/Web/CSS/CSS_Flexible_Box_Layout/Flex_Elemente_Sortieren /de/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items /de/docs/Web/CSS/CSS_Flexible_Box_Layout/Grundlegende_Konzepte_der_Flexbox /de/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -/de/docs/Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden /de/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +/de/docs/Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden /de/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /de/docs/Web/CSS/CSS_Lists_and_Counters/Konsistente_Listeneinrückung /de/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +/de/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters /de/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /de/docs/Web/CSS/CSS_Masken /de/docs/Web/CSS/CSS_Masking /de/docs/Web/CSS/CSS_Namensräume /de/docs/Web/CSS/CSS_Namespaces /de/docs/Web/CSS/CSS_Referenz /de/docs/Web/CSS/Reference diff --git a/files/de/_wikihistory.json b/files/de/_wikihistory.json index 8d59c2dc6f..e57923c31e 100644 --- a/files/de/_wikihistory.json +++ b/files/de/_wikihistory.json @@ -5213,6 +5213,12 @@ "Sebastianz" ] }, + "Web/CSS/CSS_Counter_Styles/Using_CSS_counters": { + "modified": "2019-03-23T22:41:18.157Z", + "contributors": [ + "Sebastianz" + ] + }, "Web/CSS/CSS_Device_Adaptation": { "modified": "2019-03-23T22:30:44.810Z", "contributors": [ @@ -5307,12 +5313,6 @@ "Sebastianz" ] }, - "Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters": { - "modified": "2019-03-23T22:41:18.157Z", - "contributors": [ - "Sebastianz" - ] - }, "Web/CSS/CSS_Logical_Properties": { "modified": "2019-03-23T22:42:21.102Z", "contributors": [ diff --git a/files/de/web/css/css_counter_styles/using_css_counters/index.html b/files/de/web/css/css_counter_styles/using_css_counters/index.html new file mode 100644 index 0000000000..7e2f073ae8 --- /dev/null +++ b/files/de/web/css/css_counter_styles/using_css_counters/index.html @@ -0,0 +1,127 @@ +--- +title: CSS Zähler verwenden +slug: Web/CSS/CSS_Counter_Styles/Using_CSS_counters +tags: + - Anleitung + - CSS + - CSS Listen + - CSS Wert + - Fortgeschrittene + - Layout + - Referenz + - Web +translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +original_slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +--- +
{{CSSRef}}
+ +

CSS Zähler sind im Grunde von CSS verwaltete Variablen, deren Werte mittels CSS Regeln inkrementiert werden können, um nachzuvollziehen, wie oft sie verwendet wurden. Dies ermöglicht es, die Darstellung von Inhalten anhand der Positionierung innerhalb des Dokuments anzupassen. CSS Zähler sind eine Implementierung von Automatic counters and numbering in CSS 2.1.

+ +

Der Wert eines Zählers wird durch die Verwendung von {{cssxref("counter-reset")}} geändert. {{cssxref("counter-increment")}} kann auf einer Seite durch verwenden der counter() oder counters() Funktion der {{cssxref("content")}} Eigenschaft dargestellt werden.

+ +

Zähler verwenden

+ +

Um einen CSS Zähler zu verwenden, muss er zunächst auf einen Wert zurückgesetzt werden (standardmäßig 0). Um den Wert eines Zählers zu einem Element hinzuzufügen, kann die counter() Funktion verwendet werden. Das folgende CSS fügt am Anfang jedes h3 Elements "Abschnitt <der Wert des Zählers>:" ein.

+ +
body {
+  counter-reset: section;                      /* Setzt den Abschnittszähler auf 0 */
+}
+
+h3::before {
+  counter-increment: section;                  /* Erhöht den Abschnittszähler */
+  content: "Abschnitt " counter(section) ": "; /* Zeigt den Zähler an */
+}
+
+ +

Beispiel:

+ +
<h3>Einführung</h3>
+<h3>Inhalt</h3>
+<h3>Zusammenfassung</h3>
+ +

{{EmbedLiveSample("Zähler_verwenden", 280, 150)}}

+ +

Zähler verschachteln

+ +

Ein CSS Zähler ist besonders nützlich, um kontinuierte Listen zu erstellen, da in Kindelementen automatisch eine neue Instanz eines CSS Zählers erzeugt wird. Wird die counters() Funktion verwendet, kann ein String zwischen verschiedenen Leveln von verschachtelten Zählern eingefügt werden. Beispielsweise dieses CSS:

+ +
ol {
+  counter-reset: section;                /* Erstellt mit jedem ol Element
+                                            eine neue Instanz des
+                                            Abschnittszählers. */
+  list-style-type: none;
+}
+
+li::before {
+  counter-increment: section;            /* Inkrementiert nur diese Instanz
+                                            des Abschnittszählers. */
+  content: counters(section,".") " ";    /* Fügt den Wert aller Instanzen
+                                            des Abschnittszählers durch "."
+                                            getrennt hinzu. */
+                                         /* Falls < IE8 unterstützt werden soll,
+                                            sollte sichergestellt werden, dass
+                                            kein Leerzeichen nach dem ',' steht. */
+}
+
+ +

Kombiniert mit dem folgenden HTML:

+ +
<ol>
+  <li>Eintrag</li>          <!-- 1     -->
+  <li>Eintrag               <!-- 2     -->
+    <ol>
+      <li>Eintrag</li>      <!-- 2.1   -->
+      <li>Eintrag</li>      <!-- 2.2   -->
+      <li>Eintrag           <!-- 2.3   -->
+        <ol>
+          <li>Eintrag</li>  <!-- 2.3.1 -->
+          <li>Eintrag</li>  <!-- 2.3.2 -->
+        </ol>
+        <ol>
+          <li>Eintrag</li>  <!-- 2.3.1 -->
+          <li>Eintrag</li>  <!-- 2.3.2 -->
+          <li>Eintrag</li>  <!-- 2.3.3 -->
+        </ol>
+      </li>
+      <li>Eintrag</li>      <!-- 2.4   -->
+    </ol>
+  </li>
+  <li>Eintrag</li>          <!-- 3     -->
+  <li>Eintrag</li>          <!-- 4     -->
+</ol>
+<ol>
+  <li>Eintrag</li>          <!-- 1     -->
+  <li>Eintrag</li>          <!-- 2     -->
+</ol>
+ +

Erzeugt dieses Ergebnis:

+ +

{{EmbedLiveSample("Zähler_verschachteln", 250, 350)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("CSS2.1", "generate.html#generate.html#counters", "counter-reset")}}{{Spec2("CSS2.1")}}Ursprüngliche Definition
+ +

Siehe auch

+ + + +

Es gibt ein zusätzliches Beispiel unter http://www.mezzoblue.com/archives/20.../counter_intu/. Dieser Blogeintrag wurde am 01.11.2006 veröffentlicht, sollte jedoch noch zutreffen.

diff --git a/files/de/web/css/css_lists_and_counters/using_css_counters/index.html b/files/de/web/css/css_lists_and_counters/using_css_counters/index.html deleted file mode 100644 index 1539b9490e..0000000000 --- a/files/de/web/css/css_lists_and_counters/using_css_counters/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: CSS Zähler verwenden -slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -tags: - - Anleitung - - CSS - - CSS Listen - - CSS Wert - - Fortgeschrittene - - Layout - - Referenz - - Web -translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -original_slug: Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden ---- -
{{CSSRef}}
- -

CSS Zähler sind im Grunde von CSS verwaltete Variablen, deren Werte mittels CSS Regeln inkrementiert werden können, um nachzuvollziehen, wie oft sie verwendet wurden. Dies ermöglicht es, die Darstellung von Inhalten anhand der Positionierung innerhalb des Dokuments anzupassen. CSS Zähler sind eine Implementierung von Automatic counters and numbering in CSS 2.1.

- -

Der Wert eines Zählers wird durch die Verwendung von {{cssxref("counter-reset")}} geändert. {{cssxref("counter-increment")}} kann auf einer Seite durch verwenden der counter() oder counters() Funktion der {{cssxref("content")}} Eigenschaft dargestellt werden.

- -

Zähler verwenden

- -

Um einen CSS Zähler zu verwenden, muss er zunächst auf einen Wert zurückgesetzt werden (standardmäßig 0). Um den Wert eines Zählers zu einem Element hinzuzufügen, kann die counter() Funktion verwendet werden. Das folgende CSS fügt am Anfang jedes h3 Elements "Abschnitt <der Wert des Zählers>:" ein.

- -
body {
-  counter-reset: section;                      /* Setzt den Abschnittszähler auf 0 */
-}
-
-h3::before {
-  counter-increment: section;                  /* Erhöht den Abschnittszähler */
-  content: "Abschnitt " counter(section) ": "; /* Zeigt den Zähler an */
-}
-
- -

Beispiel:

- -
<h3>Einführung</h3>
-<h3>Inhalt</h3>
-<h3>Zusammenfassung</h3>
- -

{{EmbedLiveSample("Zähler_verwenden", 280, 150)}}

- -

Zähler verschachteln

- -

Ein CSS Zähler ist besonders nützlich, um kontinuierte Listen zu erstellen, da in Kindelementen automatisch eine neue Instanz eines CSS Zählers erzeugt wird. Wird die counters() Funktion verwendet, kann ein String zwischen verschiedenen Leveln von verschachtelten Zählern eingefügt werden. Beispielsweise dieses CSS:

- -
ol {
-  counter-reset: section;                /* Erstellt mit jedem ol Element
-                                            eine neue Instanz des
-                                            Abschnittszählers. */
-  list-style-type: none;
-}
-
-li::before {
-  counter-increment: section;            /* Inkrementiert nur diese Instanz
-                                            des Abschnittszählers. */
-  content: counters(section,".") " ";    /* Fügt den Wert aller Instanzen
-                                            des Abschnittszählers durch "."
-                                            getrennt hinzu. */
-                                         /* Falls < IE8 unterstützt werden soll,
-                                            sollte sichergestellt werden, dass
-                                            kein Leerzeichen nach dem ',' steht. */
-}
-
- -

Kombiniert mit dem folgenden HTML:

- -
<ol>
-  <li>Eintrag</li>          <!-- 1     -->
-  <li>Eintrag               <!-- 2     -->
-    <ol>
-      <li>Eintrag</li>      <!-- 2.1   -->
-      <li>Eintrag</li>      <!-- 2.2   -->
-      <li>Eintrag           <!-- 2.3   -->
-        <ol>
-          <li>Eintrag</li>  <!-- 2.3.1 -->
-          <li>Eintrag</li>  <!-- 2.3.2 -->
-        </ol>
-        <ol>
-          <li>Eintrag</li>  <!-- 2.3.1 -->
-          <li>Eintrag</li>  <!-- 2.3.2 -->
-          <li>Eintrag</li>  <!-- 2.3.3 -->
-        </ol>
-      </li>
-      <li>Eintrag</li>      <!-- 2.4   -->
-    </ol>
-  </li>
-  <li>Eintrag</li>          <!-- 3     -->
-  <li>Eintrag</li>          <!-- 4     -->
-</ol>
-<ol>
-  <li>Eintrag</li>          <!-- 1     -->
-  <li>Eintrag</li>          <!-- 2     -->
-</ol>
- -

Erzeugt dieses Ergebnis:

- -

{{EmbedLiveSample("Zähler_verschachteln", 250, 350)}}

- -

Spezifikationen

- - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName("CSS2.1", "generate.html#generate.html#counters", "counter-reset")}}{{Spec2("CSS2.1")}}Ursprüngliche Definition
- -

Siehe auch

- - - -

Es gibt ein zusätzliches Beispiel unter http://www.mezzoblue.com/archives/20.../counter_intu/. Dieser Blogeintrag wurde am 01.11.2006 veröffentlicht, sollte jedoch noch zutreffen.

diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index 03b0bf4097..0efaac5b88 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -408,7 +408,7 @@ /fr/docs/CSS/Comprendre_z-index/Ajout_de_z-index /fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index /fr/docs/CSS/Comprendre_z-index/Empilement_et_float /fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float /fr/docs/CSS/Comprendre_z-index/Empilement_sans_z-index /fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index -/fr/docs/CSS/Compteurs_CSS /fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +/fr/docs/CSS/Compteurs_CSS /fr/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /fr/docs/CSS/FAQ /fr/docs/Learn/CSS/Howto/CSS_FAQ /fr/docs/CSS/Feuilles_de_style_alternatives /fr/docs/Web/CSS/Alternative_style_sheets /fr/docs/CSS/Fonds_multiples /fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds @@ -545,10 +545,10 @@ /fr/docs/CSS/column-span /fr/docs/Web/CSS/column-span /fr/docs/CSS/column-width /fr/docs/Web/CSS/column-width /fr/docs/CSS/columns /fr/docs/Web/CSS/columns -/fr/docs/CSS/compteur /fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +/fr/docs/CSS/compteur /fr/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /fr/docs/CSS/computed_value /fr/docs/Web/CSS/computed_value /fr/docs/CSS/content /fr/docs/Web/CSS/content -/fr/docs/CSS/counter /fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +/fr/docs/CSS/counter /fr/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /fr/docs/CSS/counter-increment /fr/docs/Web/CSS/counter-increment /fr/docs/CSS/counter-reset /fr/docs/Web/CSS/counter-reset /fr/docs/CSS/cursor /fr/docs/Web/CSS/cursor @@ -849,7 +849,7 @@ /fr/docs/Comprendre_z-index/Ajout_de_z-index /fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index /fr/docs/Comprendre_z-index/Empilement_et_float /fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float /fr/docs/Comprendre_z-index/Empilement_sans_z-index /fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index -/fr/docs/Compteurs_CSS /fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +/fr/docs/Compteurs_CSS /fr/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /fr/docs/Consistent_List_Indentation /fr/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation /fr/docs/Console_JavaScript /fr/docs/Tools/Browser_Console /fr/docs/Construire_une_extension /fr/docs/Mozilla/Add-ons @@ -4011,8 +4011,9 @@ /fr/docs/Web/CSS/CSS_Grid_Layout/Utiliser_des_lignes_nommées_sur_une_grille /fr/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines /fr/docs/Web/CSS/CSS_Images/Sprites_CSS /fr/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS /fr/docs/Web/CSS/CSS_Lists /fr/docs/Web/CSS/CSS_Lists_and_Counters -/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS /fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS /fr/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /fr/docs/Web/CSS/CSS_Lists/Indentation_homogène_des_listes /fr/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters /fr/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /fr/docs/Web/CSS/CSS_Logical_Properties/Concepts_de_base /fr/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts /fr/docs/Web/CSS/CSS_Logical_Properties/Dimensionnement /fr/docs/Web/CSS/CSS_Logical_Properties/Sizing /fr/docs/Web/CSS/CSS_Logical_Properties/Propriétés_logiques_flottements_positionnement /fr/docs/Web/CSS/CSS_Logical_Properties/Floating_and_positioning @@ -4054,7 +4055,7 @@ /fr/docs/Web/CSS/Comprendre_z-index/Exemple_1 /fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 /fr/docs/Web/CSS/Comprendre_z-index/Exemple_2 /fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 /fr/docs/Web/CSS/Comprendre_z-index/Exemple_3 /fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 -/fr/docs/Web/CSS/Compteurs_CSS /fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +/fr/docs/Web/CSS/Compteurs_CSS /fr/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /fr/docs/Web/CSS/Concepts_viewport /fr/docs/Web/CSS/Viewport_concepts /fr/docs/Web/CSS/Contexte_de_formatage_en_ligne /fr/docs/Web/CSS/Inline_formatting_context /fr/docs/Web/CSS/Couleurs_CSS /fr/docs/conflicting/Web/CSS/CSS_Color @@ -4180,7 +4181,7 @@ /fr/docs/Web/CSS/clamp /fr/docs/Web/CSS/clamp() /fr/docs/Web/CSS/conic-gradient /fr/docs/orphaned/Web/CSS/conic-gradient() /fr/docs/Web/CSS/conic-gradient() /fr/docs/orphaned/Web/CSS/conic-gradient() -/fr/docs/Web/CSS/counter /fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +/fr/docs/Web/CSS/counter /fr/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /fr/docs/Web/CSS/counter_fonction /fr/docs/Web/CSS/counter() /fr/docs/Web/CSS/counters /fr/docs/Web/CSS/counters() /fr/docs/Web/CSS/cross-fade /fr/docs/Web/CSS/cross-fade() diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index 32fd0e5e7c..451dbfc483 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -24603,6 +24603,17 @@ "SphinxKnight" ] }, + "Web/CSS/CSS_Counter_Styles/Using_CSS_counters": { + "modified": "2019-07-27T03:11:03.371Z", + "contributors": [ + "SphinxKnight", + "teoli", + "Delapouite", + "FredB", + "Kyodev", + "Fredchat" + ] + }, "Web/CSS/CSS_Device_Adaptation": { "modified": "2020-10-15T21:44:13.646Z", "contributors": [ @@ -24903,17 +24914,6 @@ "Laurent Denis" ] }, - "Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters": { - "modified": "2019-07-27T03:11:03.371Z", - "contributors": [ - "SphinxKnight", - "teoli", - "Delapouite", - "FredB", - "Kyodev", - "Fredchat" - ] - }, "Web/CSS/CSS_Logical_Properties": { "modified": "2019-06-18T19:34:36.043Z", "contributors": [ diff --git a/files/fr/web/css/css_counter_styles/using_css_counters/index.md b/files/fr/web/css/css_counter_styles/using_css_counters/index.md new file mode 100644 index 0000000000..f37a4b8ca4 --- /dev/null +++ b/files/fr/web/css/css_counter_styles/using_css_counters/index.md @@ -0,0 +1,134 @@ +--- +title: Compteurs CSS +slug: Web/CSS/CSS_Counter_Styles/Using_CSS_counters +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +original_slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +--- +{{CSSRef}} + +Les **compteurs CSS** sont des variables dont les valeurs sont incrémentées par les règles CSS et qui permettent de savoir combien de fois elles sont utilisées. Cela permet par exemple d'adapter la mise en forme du contenu en fonction de son emplacement dans le document. + +La valeur d'un compteur peut être manipulée grâce aux propriétés {{cssxref("counter-reset")}}. {{cssxref("counter-increment")}} et on peut les afficher sur la page grâce aux fonctions `counter()` et `counters()` dans la propriété {{cssxref("content")}}. + +## Utiliser les compteurs + +### Manipuler la valeur d'un compteur + +Pour utiliser un compteur CSS, il faut d'abord réinitialiser sa valeur (0 par défaut) à l'aide de {{cssxref("counter-reset")}}. Pour incrémenter un compteur initialisé, on peut utiliser {{cssxref("counter-increment")}}. Attention le nom du compteur ne peut pas être `none`, `inherit` ou `initial`. + +### Afficher un compteur + +Pour ajouter un compteur au contenu d'un élément, il faut utiliser la fonction {{cssxref("counter")}} ou {{cssxref("counters")}} dans une propriété {{cssxref("content")}}. + +La fonction `counter()` prend deux formes : `counter(nom)` ou `counter(nom, style)`. Le texte ainsi généré est celui du compteur le plus proche avec ce nom. Le contenu est mis en forme avec le style indiqué (par défaut, c'est `decimal`). + +La fonction `counters()` prend également deux formes : `counters(nom, chaine)` ou `counters(nom, chaine style)`. Le texte généré aura la valeur de l'ensemble des compteurs présents dans la portée du pseudo-élément (du plus loin au plus proche), séparés par la chaîne de caractères passée en argument. Les compteurs sont mis en forme avec le style indiqué (par défaut, c'est `decimal`). + +### Exemple simple + +Dans l'exemple qui suit, la feuille de style CSS préfixe chaque titre de niveau 3 avec « Section \ : ». + +> **Note :** La fonction {{cssxref("counter()")}} et la fonction {{cssxref("counters()")}} peuvent toutes les deux prendre un dernier argument qui correspond au style de liste utilisé (par défaut, c'est `decimal`). + +#### CSS + +```css +body { + counter-reset: section; /* On initialise le compteur à 0 */ +} + +h3::before { + counter-increment: section; /* On incrémente le compteur section */ + content: "Section " counter(section) " : "; /* On affiche le compteur */ +} +``` + +#### HTML + +```html +

Introduction

+

Corps

+

Conclusion

+``` + +#### Résultat + +{{EmbedLiveSample("Utiliser_les_compteurs", 300, 150)}} + +## Imbriquer des compteurs + +Un compteur CSS est particulièrement utile lorsqu'il s'agit de gérer les listes générées dynamiquement. En utilisant la fonction {{cssxref("counters","counters()")}}, on peut insérer une chaîne de caractères entre les différents niveaux des compteurs imbriqués. + +### CSS + +```css +ol { + counter-reset: section; /* On crée une nouvelle instance du + compteur section avec chaque ol */ + list-style-type: none; +} + +li::before { + counter-increment: section; /* On incrémente uniquement cette + instance du compteur */ + content: counters(section,".") " "; /* On ajoute la valeur de toutes les + instances séparées par ".". */ + /* Si on doit supporter < IE8 il faudra + faire attention à ce qu'il n'y ait + aucun blanc après ',' */ +} +``` + +### HTML + +```html +
    +
  1. item
    2. +
  2. item +
      +
    1. item
      2. +
    2. item
      3. +
    3. item +
        +
      1. item
        2. +
      2. item
        3. +
      +
        +
      1. item
        2. +
      2. item
        3. +
      3. item
        4. +
      +
      4. +
    4. item
      5. +
    +
    3. +
  3. item
    4. +
  4. item
    5. +
+
    +
  1. item
    2. +
  2. item
    3. +
+``` + +### Résultat + +{{EmbedLiveSample("Imbriquer_des_compteurs", 250, 350)}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}} | {{Spec2("CSS3 Lists")}} | Aucune modification. | +| {{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}} | {{Spec2("CSS2.1")}} | Définition initiale. | + +## Voir aussi + +- {{cssxref("counter-reset")}} +- {{cssxref("counter-set")}} +- {{cssxref("counter-increment")}} +- {{cssxref("@counter-style")}} diff --git a/files/fr/web/css/css_lists_and_counters/using_css_counters/index.md b/files/fr/web/css/css_lists_and_counters/using_css_counters/index.md deleted file mode 100644 index 90ad13bca7..0000000000 --- a/files/fr/web/css/css_lists_and_counters/using_css_counters/index.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Compteurs CSS -slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -tags: - - Avancé - - CSS - - Guide -translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -original_slug: Web/CSS/CSS_Lists/Compteurs_CSS ---- -{{CSSRef}} - -Les **compteurs CSS** sont des variables dont les valeurs sont incrémentées par les règles CSS et qui permettent de savoir combien de fois elles sont utilisées. Cela permet par exemple d'adapter la mise en forme du contenu en fonction de son emplacement dans le document. - -La valeur d'un compteur peut être manipulée grâce aux propriétés {{cssxref("counter-reset")}}. {{cssxref("counter-increment")}} et on peut les afficher sur la page grâce aux fonctions `counter()` et `counters()` dans la propriété {{cssxref("content")}}. - -## Utiliser les compteurs - -### Manipuler la valeur d'un compteur - -Pour utiliser un compteur CSS, il faut d'abord réinitialiser sa valeur (0 par défaut) à l'aide de {{cssxref("counter-reset")}}. Pour incrémenter un compteur initialisé, on peut utiliser {{cssxref("counter-increment")}}. Attention le nom du compteur ne peut pas être `none`, `inherit` ou `initial`. - -### Afficher un compteur - -Pour ajouter un compteur au contenu d'un élément, il faut utiliser la fonction {{cssxref("counter")}} ou {{cssxref("counters")}} dans une propriété {{cssxref("content")}}. - -La fonction `counter()` prend deux formes : `counter(nom)` ou `counter(nom, style)`. Le texte ainsi généré est celui du compteur le plus proche avec ce nom. Le contenu est mis en forme avec le style indiqué (par défaut, c'est `decimal`). - -La fonction `counters()` prend également deux formes : `counters(nom, chaine)` ou `counters(nom, chaine style)`. Le texte généré aura la valeur de l'ensemble des compteurs présents dans la portée du pseudo-élément (du plus loin au plus proche), séparés par la chaîne de caractères passée en argument. Les compteurs sont mis en forme avec le style indiqué (par défaut, c'est `decimal`). - -### Exemple simple - -Dans l'exemple qui suit, la feuille de style CSS préfixe chaque titre de niveau 3 avec « Section \ : ». - -> **Note :** La fonction {{cssxref("counter()")}} et la fonction {{cssxref("counters()")}} peuvent toutes les deux prendre un dernier argument qui correspond au style de liste utilisé (par défaut, c'est `decimal`). - -#### CSS - -```css -body { - counter-reset: section; /* On initialise le compteur à 0 */ -} - -h3::before { - counter-increment: section; /* On incrémente le compteur section */ - content: "Section " counter(section) " : "; /* On affiche le compteur */ -} -``` - -#### HTML - -```html -

Introduction

-

Corps

-

Conclusion

-``` - -#### Résultat - -{{EmbedLiveSample("Utiliser_les_compteurs", 300, 150)}} - -## Imbriquer des compteurs - -Un compteur CSS est particulièrement utile lorsqu'il s'agit de gérer les listes générées dynamiquement. En utilisant la fonction {{cssxref("counters","counters()")}}, on peut insérer une chaîne de caractères entre les différents niveaux des compteurs imbriqués. - -### CSS - -```css -ol { - counter-reset: section; /* On crée une nouvelle instance du - compteur section avec chaque ol */ - list-style-type: none; -} - -li::before { - counter-increment: section; /* On incrémente uniquement cette - instance du compteur */ - content: counters(section,".") " "; /* On ajoute la valeur de toutes les - instances séparées par ".". */ - /* Si on doit supporter < IE8 il faudra - faire attention à ce qu'il n'y ait - aucun blanc après ',' */ -} -``` - -### HTML - -```html -
    -
  1. item
    2. -
  2. item -
      -
    1. item
      2. -
    2. item
      3. -
    3. item -
        -
      1. item
        2. -
      2. item
        3. -
      -
        -
      1. item
        2. -
      2. item
        3. -
      3. item
        4. -
      -
      4. -
    4. item
      5. -
    -
    3. -
  3. item
    4. -
  4. item
    5. -
-
    -
  1. item
    2. -
  2. item
    3. -
-``` - -### Résultat - -{{EmbedLiveSample("Imbriquer_des_compteurs", 250, 350)}} - -## Spécifications - -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}} | {{Spec2("CSS3 Lists")}} | Aucune modification. | -| {{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}} | {{Spec2("CSS2.1")}} | Définition initiale. | - -## Voir aussi - -- {{cssxref("counter-reset")}} -- {{cssxref("counter-set")}} -- {{cssxref("counter-increment")}} -- {{cssxref("@counter-style")}} diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index a8c358359f..596532827e 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -251,7 +251,7 @@ /ja/docs/CSS/Class_selectors /ja/docs/Web/CSS/Class_selectors /ja/docs/CSS/Class_selectors-redirect-1 /ja/docs/Web/CSS/Class_selectors /ja/docs/CSS/Comments /ja/docs/Web/CSS/Comments -/ja/docs/CSS/Counters /ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +/ja/docs/CSS/Counters /ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /ja/docs/CSS/Descendant_selectors /ja/docs/Web/CSS/Descendant_combinator /ja/docs/CSS/General_sibling_selectors /ja/docs/Web/CSS/General_sibling_combinator /ja/docs/CSS/Getting_Started /ja/docs/Learn/CSS @@ -3647,6 +3647,7 @@ /ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes /ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox /ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications /ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox /ja/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained /ja/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts +/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters /ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /ja/docs/Web/CSS/CSS_Masks /ja/docs/Web/CSS/CSS_Masking /ja/docs/Web/CSS/CSS_Reference /ja/docs/Web/CSS/Reference /ja/docs/Web/CSS/CSS_Reference/Mozilla_Extensions /ja/docs/Web/CSS/Mozilla_Extensions @@ -3860,7 +3861,7 @@ /ja/docs/Web/Guide/API/Vibration /ja/docs/Web/API/Vibration_API /ja/docs/Web/Guide/Audio_and_video_delivery/H.264_support_in_Firefox /ja/docs/Web/Guide/Audio_and_video_delivery /ja/docs/Web/Guide/CSS /ja/docs/Learn/CSS -/ja/docs/Web/Guide/CSS/Counters /ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +/ja/docs/Web/Guide/CSS/Counters /ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /ja/docs/Web/Guide/CSS/Flexible_boxes /ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox /ja/docs/Web/Guide/CSS/Getting_started /ja/docs/Learn/CSS /ja/docs/Web/Guide/CSS/Getting_started/Boxes /ja/docs/Learn/CSS/Building_blocks/The_box_model @@ -4656,7 +4657,7 @@ /ja/docs/addons.mozilla.org_(AMO)_API_Developers'_Guide /ja/docs/Mozilla/Add-ons /ja/docs/ant_script_to_assemble_an_extension /ja/docs/orphaned/ant_script_to_assemble_an_extension /ja/docs/console /ja/docs/Web/API/console -/ja/docs/counters /ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +/ja/docs/counters /ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /ja/docs/data_URIs /ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs /ja/docs/dummySlug/Reference /ja/docs/Web/JavaScript/Reference /ja/docs/dummySlug/Reference/About /ja/docs/Web/JavaScript/Reference/About diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 4f501cb70e..b69f537f16 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -28287,6 +28287,16 @@ "mfuji09" ] }, + "Web/CSS/CSS_Counter_Styles/Using_CSS_counters": { + "modified": "2020-08-18T01:07:42.151Z", + "contributors": [ + "mfuji09", + "LuckyWind_sck", + "ethertank", + "sosleepy", + "sii" + ] + }, "Web/CSS/CSS_Device_Adaptation": { "modified": "2020-10-15T22:06:16.617Z", "contributors": [ @@ -28540,16 +28550,6 @@ "mfuji09" ] }, - "Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters": { - "modified": "2020-08-18T01:07:42.151Z", - "contributors": [ - "mfuji09", - "LuckyWind_sck", - "ethertank", - "sosleepy", - "sii" - ] - }, "Web/CSS/CSS_Logical_Properties": { "modified": "2020-08-06T03:13:13.668Z", "contributors": [ diff --git a/files/ja/web/css/css_counter_styles/using_css_counters/index.html b/files/ja/web/css/css_counter_styles/using_css_counters/index.html new file mode 100644 index 0000000000..ba1051209e --- /dev/null +++ b/files/ja/web/css/css_counter_styles/using_css_counters/index.html @@ -0,0 +1,177 @@ +--- +title: CSS カウンターの使用 +slug: Web/CSS/CSS_Counter_Styles/Using_CSS_counters +tags: + - Advanced + - CSS + - CSS Counter Styles + - Guide + - Layout + - Reference + - Web +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 の規則によって増加し、何回使用されたかを追跡するものです。

+ +

カウンターの使用

+ +

カウンターの値の操作

+ +

カウンターを使用すると、最初に必ず {{cssxref("counter-reset")}} プロパティで値を初期化する必要があります (既定値は 0)。このプロパティで値を特定の数に変更することができます。いったん初期化されると、カウンターの値は {{cssxref("counter-increment")}} で増加させたり減少させたりすることができます。カウンターの名前を "none", "inherit", "initial" にすることはできません。そうすると宣言が無視されます。

+ +

カウンターの表示

+ +

カウンターの値は、 {{cssxref("content")}} の中で {{cssxref("counter()", "counter()")}} または {{cssxref("counters()", "counters()")}} 関数を使用して表示することができます。

+ +

counter() には 'counter(name)' または 'counter(name, style)' の2つの形があります。生成される文字列は、その擬似要素のスコープにある指定された name の最も内側にあるカウンターの値です。これは指定されたスタイルで整形されます (既定値は decimal です)。

+ +

counters() 関数にも、 'counters(name, string)' または 'counters(name, string, style)' の2つの形があります。生成される文字列は、その擬似要素のスコープにある指定された name のすべてのカウンターの値が、外側から内側に向けて、指定された string で区切られたものになります。カウンターは指定されたスタイルで表示されます (既定値は decimal です)。

+ +

基本的な例

+ +

この例ではそれぞれの見出しの先頭に "Section [カウンターの値]:" を追加します。

+ +

CSS

+ +
body {
+  counter-reset: section;                       /* 'section' という名前のカウンターを設定し、 0 で初期化する。 */
+}
+
+h3::before {
+  counter-increment: section;                   /* section カウンターの値に1を加算 */
+  content: "Section " counter(section) ": ";    /* 'Section ' という語、 section カウンターの値、
+                                                   コロンをそれぞれの h3 の内容の前にを表示 */
+}
+
+ +

HTML

+ +
<h3>Introduction</h3>
+<h3>Body</h3>
+<h3>Conclusion</h3>
+ +

結果

+ +

{{EmbedLiveSample("Basic_example", "100%", 150)}}

+ +

より洗練された例

+ +

カウンターは増加するたびに表示する必要はありません。この例では、すべてのリンクを数えますが、カウンターはリンクにテキストがない場合の便利な代替手段として表示されます。

+ +

CSS

+ +
:root {
+  counter-reset: link;
+}
+
+a[href] {
+  counter-increment: link;
+}
+
+a[href]:empty::after {
+  content: "[" counter(link) "]";
+}
+ +

HTML

+ +
<p>See <a href="https://www.mozilla.org/"></a></p>
+<p>Do not forget to <a href="contact-me.html">leave a message</a>!</p>
+<p>See also <a href="https://developer.mozilla.org/"></a></p>
+ +

結果

+ +

{{EmbedLiveSample("A_more_sophisticated_example", "100%", 150)}}

+ +

カウンターの入れ子

+ +

CSS カウンターはアウトラインのリストを作成するのには特に便利で、子要素でカウンターの新しいインスタンスが自動的に生成されます。 {{cssxref("counters()")}} 関数を使用して、入れ子になったカウンターの階層間に区切り文字列を挿入することができます。

+ +

入れ子になったカウンターの例

+ +

CSS

+ +
ol {
+  counter-reset: section;                /* それぞれの ol 要素に、 section
+                                            カウンターの新しいインスタンスを
+                                            生成 */
+  list-style-type: none;
+}
+
+li::before {
+  counter-increment: section;            /* section カウンターのこのインスタンス
+                                            のみを加算 */
+  content: counters(section, ".") " ";   /* section カウンターのすべての
+                                            インスタンスの値を、ピリオドで区切って
+                                            結合 */
+}
+
+ +

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("Example_of_a_nested_counter", "100%", 350)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}{{Spec2("CSS3 Lists")}}変更なし
{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}{{Spec2("CSS2.1")}}初回定義
+ +

関連情報

+ +
    +
  • {{cssxref("counter-reset")}}
    • +
  • {{cssxref("counter-set")}}
    • +
  • {{cssxref("counter-increment")}}
    • +
  • {{cssxref("@counter-style")}}
    • +
diff --git a/files/ja/web/css/css_lists_and_counters/using_css_counters/index.html b/files/ja/web/css/css_lists_and_counters/using_css_counters/index.html deleted file mode 100644 index dcbbae259b..0000000000 --- a/files/ja/web/css/css_lists_and_counters/using_css_counters/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: CSS カウンターの使用 -slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -tags: - - Advanced - - CSS - - CSS Counter Styles - - Guide - - Layout - - Reference - - Web -translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters ---- -
{{CSSRef}}
- -

CSS カウンターでは、文書内の位置に基づいてコンテンツの表示方法を調整することができます。例えば、ウェブページ内の見出し番号を自動的に振るのに使ったりします。カウンターは本質的に、 CSS が管理する変数であり、 CSS の規則によって増加し、何回使用されたかを追跡するものです。

- -

カウンターの使用

- -

カウンターの値の操作

- -

カウンターを使用すると、最初に必ず {{cssxref("counter-reset")}} プロパティで値を初期化する必要があります (既定値は 0)。このプロパティで値を特定の数に変更することができます。いったん初期化されると、カウンターの値は {{cssxref("counter-increment")}} で増加させたり減少させたりすることができます。カウンターの名前を "none", "inherit", "initial" にすることはできません。そうすると宣言が無視されます。

- -

カウンターの表示

- -

カウンターの値は、 {{cssxref("content")}} の中で {{cssxref("counter()", "counter()")}} または {{cssxref("counters()", "counters()")}} 関数を使用して表示することができます。

- -

counter() には 'counter(name)' または 'counter(name, style)' の2つの形があります。生成される文字列は、その擬似要素のスコープにある指定された name の最も内側にあるカウンターの値です。これは指定されたスタイルで整形されます (既定値は decimal です)。

- -

counters() 関数にも、 'counters(name, string)' または 'counters(name, string, style)' の2つの形があります。生成される文字列は、その擬似要素のスコープにある指定された name のすべてのカウンターの値が、外側から内側に向けて、指定された string で区切られたものになります。カウンターは指定されたスタイルで表示されます (既定値は decimal です)。

- -

基本的な例

- -

この例ではそれぞれの見出しの先頭に "Section [カウンターの値]:" を追加します。

- -

CSS

- -
body {
-  counter-reset: section;                       /* 'section' という名前のカウンターを設定し、 0 で初期化する。 */
-}
-
-h3::before {
-  counter-increment: section;                   /* section カウンターの値に1を加算 */
-  content: "Section " counter(section) ": ";    /* 'Section ' という語、 section カウンターの値、
-                                                   コロンをそれぞれの h3 の内容の前にを表示 */
-}
-
- -

HTML

- -
<h3>Introduction</h3>
-<h3>Body</h3>
-<h3>Conclusion</h3>
- -

結果

- -

{{EmbedLiveSample("Basic_example", "100%", 150)}}

- -

より洗練された例

- -

カウンターは増加するたびに表示する必要はありません。この例では、すべてのリンクを数えますが、カウンターはリンクにテキストがない場合の便利な代替手段として表示されます。

- -

CSS

- -
:root {
-  counter-reset: link;
-}
-
-a[href] {
-  counter-increment: link;
-}
-
-a[href]:empty::after {
-  content: "[" counter(link) "]";
-}
- -

HTML

- -
<p>See <a href="https://www.mozilla.org/"></a></p>
-<p>Do not forget to <a href="contact-me.html">leave a message</a>!</p>
-<p>See also <a href="https://developer.mozilla.org/"></a></p>
- -

結果

- -

{{EmbedLiveSample("A_more_sophisticated_example", "100%", 150)}}

- -

カウンターの入れ子

- -

CSS カウンターはアウトラインのリストを作成するのには特に便利で、子要素でカウンターの新しいインスタンスが自動的に生成されます。 {{cssxref("counters()")}} 関数を使用して、入れ子になったカウンターの階層間に区切り文字列を挿入することができます。

- -

入れ子になったカウンターの例

- -

CSS

- -
ol {
-  counter-reset: section;                /* それぞれの ol 要素に、 section
-                                            カウンターの新しいインスタンスを
-                                            生成 */
-  list-style-type: none;
-}
-
-li::before {
-  counter-increment: section;            /* section カウンターのこのインスタンス
-                                            のみを加算 */
-  content: counters(section, ".") " ";   /* section カウンターのすべての
-                                            インスタンスの値を、ピリオドで区切って
-                                            結合 */
-}
-
- -

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("Example_of_a_nested_counter", "100%", 350)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}{{Spec2("CSS3 Lists")}}変更なし
{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}{{Spec2("CSS2.1")}}初回定義
- -

関連情報

- -
    -
  • {{cssxref("counter-reset")}}
    • -
  • {{cssxref("counter-set")}}
    • -
  • {{cssxref("counter-increment")}}
    • -
  • {{cssxref("@counter-style")}}
    • -
diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt index aed0b20724..385c96130a 100644 --- a/files/ko/_redirects.txt +++ b/files/ko/_redirects.txt @@ -523,6 +523,7 @@ /ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃의_기본_개념 /ko/docs/Web/CSS/CSS_Grid_Layout/Basic_concepts_of_grid_layout /ko/docs/Web/CSS/CSS_Grid_Layout/그리드_템플릿_영역 /ko/docs/Web/CSS/CSS_Grid_Layout/Grid_template_areas /ko/docs/Web/CSS/CSS_Grid_Layout/이름이_주어진_그리드_라인을_이용한_레이아웃 /ko/docs/Web/CSS/CSS_Grid_Layout/Layout_using_named_grid_lines +/ko/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters /ko/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /ko/docs/Web/CSS/CSS_Masks /ko/docs/Web/CSS/CSS_Masking /ko/docs/Web/CSS/CSS_Reference /ko/docs/Web/CSS/Reference /ko/docs/Web/CSS/CSS_User_Interface /ko/docs/Web/CSS/CSS_Basic_User_Interface diff --git a/files/ko/_wikihistory.json b/files/ko/_wikihistory.json index 81711a9810..809e2badd6 100644 --- a/files/ko/_wikihistory.json +++ b/files/ko/_wikihistory.json @@ -8152,6 +8152,13 @@ "DeadIntegral" ] }, + "Web/CSS/CSS_Counter_Styles/Using_CSS_counters": { + "modified": "2020-06-15T04:03:26.893Z", + "contributors": [ + "lee.juyoung.1978", + "citrus.alice" + ] + }, "Web/CSS/CSS_Device_Adaptation": { "modified": "2019-04-26T08:58:25.376Z", "contributors": [ @@ -8332,13 +8339,6 @@ "Ioseph" ] }, - "Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters": { - "modified": "2020-06-15T04:03:26.893Z", - "contributors": [ - "lee.juyoung.1978", - "citrus.alice" - ] - }, "Web/CSS/CSS_Logical_Properties": { "modified": "2019-04-25T12:25:18.617Z", "contributors": [ diff --git a/files/ko/web/css/css_counter_styles/using_css_counters/index.html b/files/ko/web/css/css_counter_styles/using_css_counters/index.html new file mode 100644 index 0000000000..9b116917b2 --- /dev/null +++ b/files/ko/web/css/css_counter_styles/using_css_counters/index.html @@ -0,0 +1,177 @@ +--- +title: CSS 카운터 사용하기 +slug: Web/CSS/CSS_Counter_Styles/Using_CSS_counters +tags: + - CSS + - CSS Counter Styles + - Guide + - Layout + - Reference + - Web + - 번호 + - 카운터 +translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +original_slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +--- +
{{CSSRef}}
+ +

CSS counters를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다. 예를 들어, counters를 사용해 웹페이지의 제목에 자동으로 번호를 매길 수 있습니다. Counters는 요소가 몇 번이나 사용되었는지 추적하여 CSS 규칙에 따라 증가하며, 본질적으로 변수입니다.

+ +

Counters 사용하기

+ +

카운터 값 조작하기

+ +

CSS counter를 사용하려면 먼저 {{cssxref("counter-reset")}} 속성(초깃값  0)을 사용하여 초기화 해야합니다. 동일한 속성으로 값을 특정 값으로 바꿀 수도 있습니다. 초기화 된 counter의 값은 {{cssxref("counter-increment")}}에 따라 증가하거나 감소합니다. counter의 이름으로 "none", "inherit", "initial"은 사용불가합니다. 이런 이름을 사용하면 선언은 무시됩니다.

+ +

카운터 표시하기

+ +

Counter의 값은 {{cssxref("content")}} 속성에서 {{cssxref("counter()")}}나 {{cssxref("counters()")}} 함수를 사용하여 표시할 수 있습니다.

+ +

counter() 함수는 'counter(name)'와 'counter(name, style)' 두 가지 형태로 사용할 수 있습니다. 생성된 텍스트는 가상 요소가 속한 범위에 있는 이름(name)의 가장 안쪽 counter의 값입니다. 텍스트는 지정된 서식(기본값은 십진수decimal)으로 뿌려집니다.

+ +

counters() 함수도 'counters(name, string)'나 'counters(name, string, style)' 두 가지 형태로 사용할 수 있습니다. 생성된 텍스트는 가상 요소가 속한 모든 범위에서 지정된 이름을 가진 counters의 값으로, 바깥 쪽부터 안쪽까지 값이 주어지며 지정된 문자열로 구분됩니다. counters는 지정된 스타일(기본값은 십진수decimal)로 렌더링 됩니다.

+ +

기본 예제

+ +

여기서는 제목 앞에 숫자를 붙여봅니다.

+ +

CSS

+ +
body {
+  counter-reset: section;                       /* counter 이름을 'section'으로 지정합니다.
+                                                   초깃값은 0입니다. */
+}
+
+h3::before {
+  counter-increment: section;                   /* section의 카운터 값을 1씩 증가시킵니다. */
+  content: "Section " counter(section) ": ";    /* section의 카운터 값을 표시합니다. */
+}
+
+ +

HTML

+ +
<h3>Introduction</h3>
+  <h3>Body</h3>
+  <h3>Conclusion</h3>
+ +

결과

+ +

{{EmbedLiveSample("Basic_example", "100%", 150)}}

+ +

더 정교한 예시

+ +

카운터가 증가 할 때마다 반드시 표시되어야 하는 것은 아닙니다. 이 예시는 모든 링크를 계산하지만 카운터는 링크에 텍스트가 없는 경우에만 표시되므로 편리한 대체제입니다.

+ +

CSS

+ +
:root {
+  counter-reset: link;
+}
+
+a[href] {
+  counter-increment: link;
+}
+
+a[href]:empty::after {
+  content: "[" counter(link) "]";
+}
+ +

HTML

+ +
<p>See <a href="https://www.mozilla.org/"></a></p>
+<p>Do not forget to <a href="contact-me.html">leave a message</a>!</p>
+<p>See also <a href="https://developer.mozilla.org/"></a></p>
+ +

Result

+ +

{{EmbedLiveSample("A_more_sophisticated_example", "100%", 150)}}

+ +

중첩 카운터

+ +

CSS 카운터는 자식 요소 안에서 새 인스턴스를 자동으로 만들어주어 목차를 만드는데 유용합니다. {{cssxref("counters()")}} 함수를 사용해 중첩된 다른 레벨의 카운터 사이를 분리하는 글자를 지정할 수 있습니다.

+ +

중첩 카운터 예제

+ +

CSS

+ +
ol {
+  counter-reset: section;                /* ol 요소마다
+                                            이름이 section인
+                                            새 인스턴스를 생성합니다. */
+  list-style-type: none;
+}
+
+li::before {
+  counter-increment: section;            /* 해당 인스턴스 안에서
+                                            section 카운터 값 증가 */
+  content: counters(section, ".") " ";   /* section 카운터 값을
+                                            마침표(.)로 구분해 결합하여
+                                            표시합니다. */
+}
+
+ +

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.4.1 -->
+          <li>item</li>  <!-- 2.4.2 -->
+          <li>item</li>  <!-- 2.4.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("Example_of_a_nested_counter", "100%", 350)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
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
+ +

See also

+ +
    +
  • {{cssxref("counter-reset")}}
    • +
  • {{cssxref("counter-increment")}}
    • +
  • {{cssxref("@counter-style")}}
    • +
diff --git a/files/ko/web/css/css_lists_and_counters/using_css_counters/index.html b/files/ko/web/css/css_lists_and_counters/using_css_counters/index.html deleted file mode 100644 index 00b138b8e8..0000000000 --- a/files/ko/web/css/css_lists_and_counters/using_css_counters/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: CSS 카운터 사용하기 -slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -tags: - - CSS - - CSS Counter Styles - - Guide - - Layout - - Reference - - Web - - 번호 - - 카운터 -translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters ---- -
{{CSSRef}}
- -

CSS counters를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다. 예를 들어, counters를 사용해 웹페이지의 제목에 자동으로 번호를 매길 수 있습니다. Counters는 요소가 몇 번이나 사용되었는지 추적하여 CSS 규칙에 따라 증가하며, 본질적으로 변수입니다.

- -

Counters 사용하기

- -

카운터 값 조작하기

- -

CSS counter를 사용하려면 먼저 {{cssxref("counter-reset")}} 속성(초깃값  0)을 사용하여 초기화 해야합니다. 동일한 속성으로 값을 특정 값으로 바꿀 수도 있습니다. 초기화 된 counter의 값은 {{cssxref("counter-increment")}}에 따라 증가하거나 감소합니다. counter의 이름으로 "none", "inherit", "initial"은 사용불가합니다. 이런 이름을 사용하면 선언은 무시됩니다.

- -

카운터 표시하기

- -

Counter의 값은 {{cssxref("content")}} 속성에서 {{cssxref("counter()")}}나 {{cssxref("counters()")}} 함수를 사용하여 표시할 수 있습니다.

- -

counter() 함수는 'counter(name)'와 'counter(name, style)' 두 가지 형태로 사용할 수 있습니다. 생성된 텍스트는 가상 요소가 속한 범위에 있는 이름(name)의 가장 안쪽 counter의 값입니다. 텍스트는 지정된 서식(기본값은 십진수decimal)으로 뿌려집니다.

- -

counters() 함수도 'counters(name, string)'나 'counters(name, string, style)' 두 가지 형태로 사용할 수 있습니다. 생성된 텍스트는 가상 요소가 속한 모든 범위에서 지정된 이름을 가진 counters의 값으로, 바깥 쪽부터 안쪽까지 값이 주어지며 지정된 문자열로 구분됩니다. counters는 지정된 스타일(기본값은 십진수decimal)로 렌더링 됩니다.

- -

기본 예제

- -

여기서는 제목 앞에 숫자를 붙여봅니다.

- -

CSS

- -
body {
-  counter-reset: section;                       /* counter 이름을 'section'으로 지정합니다.
-                                                   초깃값은 0입니다. */
-}
-
-h3::before {
-  counter-increment: section;                   /* section의 카운터 값을 1씩 증가시킵니다. */
-  content: "Section " counter(section) ": ";    /* section의 카운터 값을 표시합니다. */
-}
-
- -

HTML

- -
<h3>Introduction</h3>
-  <h3>Body</h3>
-  <h3>Conclusion</h3>
- -

결과

- -

{{EmbedLiveSample("Basic_example", "100%", 150)}}

- -

더 정교한 예시

- -

카운터가 증가 할 때마다 반드시 표시되어야 하는 것은 아닙니다. 이 예시는 모든 링크를 계산하지만 카운터는 링크에 텍스트가 없는 경우에만 표시되므로 편리한 대체제입니다.

- -

CSS

- -
:root {
-  counter-reset: link;
-}
-
-a[href] {
-  counter-increment: link;
-}
-
-a[href]:empty::after {
-  content: "[" counter(link) "]";
-}
- -

HTML

- -
<p>See <a href="https://www.mozilla.org/"></a></p>
-<p>Do not forget to <a href="contact-me.html">leave a message</a>!</p>
-<p>See also <a href="https://developer.mozilla.org/"></a></p>
- -

Result

- -

{{EmbedLiveSample("A_more_sophisticated_example", "100%", 150)}}

- -

중첩 카운터

- -

CSS 카운터는 자식 요소 안에서 새 인스턴스를 자동으로 만들어주어 목차를 만드는데 유용합니다. {{cssxref("counters()")}} 함수를 사용해 중첩된 다른 레벨의 카운터 사이를 분리하는 글자를 지정할 수 있습니다.

- -

중첩 카운터 예제

- -

CSS

- -
ol {
-  counter-reset: section;                /* ol 요소마다
-                                            이름이 section인
-                                            새 인스턴스를 생성합니다. */
-  list-style-type: none;
-}
-
-li::before {
-  counter-increment: section;            /* 해당 인스턴스 안에서
-                                            section 카운터 값 증가 */
-  content: counters(section, ".") " ";   /* section 카운터 값을
-                                            마침표(.)로 구분해 결합하여
-                                            표시합니다. */
-}
-
- -

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.4.1 -->
-          <li>item</li>  <!-- 2.4.2 -->
-          <li>item</li>  <!-- 2.4.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("Example_of_a_nested_counter", "100%", 350)}}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
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
- -

See also

- -
    -
  • {{cssxref("counter-reset")}}
    • -
  • {{cssxref("counter-increment")}}
    • -
  • {{cssxref("@counter-style")}}
    • -
diff --git a/files/pl/_redirects.txt b/files/pl/_redirects.txt index 69f793ad43..de5f8fe222 100644 --- a/files/pl/_redirects.txt +++ b/files/pl/_redirects.txt @@ -1348,7 +1348,7 @@ /pl/docs/Learn/JavaScript/Pierwsze_kroki/What_is_JavaScript /pl/docs/Learn/JavaScript/First_steps/What_is_JavaScript /pl/docs/Learn/JavaScript/Pierwsze_kroki/Zmienne /pl/docs/Learn/JavaScript/First_steps/Variables /pl/docs/Learn/Server-side/Express_Nodejs/Szkolenie_aplikacja_biblioteka /pl/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website -/pl/docs/Liczniki_CSS /pl/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +/pl/docs/Liczniki_CSS /pl/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /pl/docs/Lokalizacja /pl/docs/Glossary/Localization /pl/docs/MDN/Contribute/Content /pl/docs/MDN/Guidelines /pl/docs/MDN/Feedback /pl/docs/MDN/Contribute/Feedback @@ -1549,6 +1549,7 @@ /pl/docs/Web/CSS/@-moz-document /pl/docs/Web/CSS/@document /pl/docs/Web/CSS/CSS_Colors /pl/docs/Web/CSS/CSS_Color /pl/docs/Web/CSS/CSS_Colors/Narzedzie_doboru_kolorow /pl/docs/Web/CSS/CSS_Colors/Color_picker_tool +/pl/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters /pl/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /pl/docs/Web/CSS/CSS_Reference /pl/docs/Web/CSS/Reference /pl/docs/Web/CSS/CSS_Reference/Rozszerzenia_Mozilli /pl/docs/Web/CSS/Mozilla_Extensions /pl/docs/Web/CSS/CSS_Selectors/Użycie_pseudoklasy_:target_w_selektorach /pl/docs/Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors @@ -1588,7 +1589,7 @@ /pl/docs/Web/Guide/CSS/Sprawdzanie_media_queries /pl/docs/Web/CSS/Media_Queries/Testing_media_queries /pl/docs/Web/Guide/HTML /pl/docs/Learn/HTML /pl/docs/Web/Guide/HTML/Wprowadzenie /pl/docs/Learn/HTML/Introduction_to_HTML -/pl/docs/Web/Guide/Liczniki_CSS /pl/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +/pl/docs/Web/Guide/Liczniki_CSS /pl/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /pl/docs/Web/HTML(PL)/Tryb_Zgodnosci_oraz_Tryb_Standardow /pl/docs/Web/HTML/Quirks_Mode_and_Standards_Mode /pl/docs/Web/HTML/Canvas /pl/docs/Web/API/Canvas_API /pl/docs/Web/HTML/Elementy /pl/docs/Web/HTML/Element diff --git a/files/pl/_wikihistory.json b/files/pl/_wikihistory.json index 5acd092626..03adc52a6e 100644 --- a/files/pl/_wikihistory.json +++ b/files/pl/_wikihistory.json @@ -4225,6 +4225,16 @@ "gandalf" ] }, + "Web/CSS/CSS_Counter_Styles/Using_CSS_counters": { + "modified": "2019-03-23T23:43:40.448Z", + "contributors": [ + "Kuzirashi", + "teoli", + "Mgjbot", + "Ptak82", + "PablO" + ] + }, "Web/CSS/CSS_Flexible_Box_Layout": { "modified": "2019-03-18T21:39:51.689Z", "contributors": [ @@ -4239,16 +4249,6 @@ "CreateWWW" ] }, - "Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters": { - "modified": "2019-03-23T23:43:40.448Z", - "contributors": [ - "Kuzirashi", - "teoli", - "Mgjbot", - "Ptak82", - "PablO" - ] - }, "Web/CSS/CSS_Selectors": { "modified": "2020-06-02T17:26:22.713Z", "contributors": [ diff --git a/files/pl/web/css/css_counter_styles/using_css_counters/index.html b/files/pl/web/css/css_counter_styles/using_css_counters/index.html new file mode 100644 index 0000000000..9f1025b83e --- /dev/null +++ b/files/pl/web/css/css_counter_styles/using_css_counters/index.html @@ -0,0 +1,87 @@ +--- +title: Liczniki CSS +slug: Web/CSS/CSS_Counter_Styles/Using_CSS_counters +tags: + - CSS + - Wszystkie_kategorie +translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +original_slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +--- +

 

+ +

Podsumowanie

+ +

Liczniki w CSS zostały opisane w sekcji Automatic counters and numbering dokumentacji CSS 2.1. Wartość licznika jest ustawiana poprzez użycie własności counter-reset oraz counter-increment, natomiast wyświetlana jest przy wykorzystaniu funkcji counter() lub counters() należących do własności content.

+ +

Zastosowanie liczników

+ +

Aby użyć licznika CSS, należy najpierw ustawić mu wartość (domyślnie jest to 0) przy pomocy własności reset. Aby wyświetlić wartość licznika w danym elemencie należy skorzystać z funkcji counter(). Poniższy przykład dodaje na początku każdego elementu h1 "Sekcja wartość licznika:".

+ +
  body {
+    counter-reset: sekcja;           /* Ustawienie licznika sekcja na 0 */
+  }
+  h1::before {
+    counter-increment: sekcja;               /* Zwiększa licznik sekcja */
+    content: "Sekcja " counter(sekcja) ": ";       /* Wyświetla licznik */
+  }
+
+ +

Zagnieżdżanie liczników

+ +

Liczniki CSS mogą być szczególnie użyteczne przy listach uporządkowanych (ol), ponieważ nowa instancja licznika CSS jest automatycznie tworzona dla potomków danego elementu. Użycie funkcji counters() pozwala na dodanie ciągu znaków, który będzie oddzielał kolejne poziomy zagnieżdżonych liczników:

+ +
  ol {
+    counter-reset: sekcja;                /* Tworzy nową instancję licznika
+                                             sekcja w każdym elemencie ol */
+    list-style-type: none;                /* Usuwa domyślnie wyświetlany licznik */
+  }
+  li::before {
+    counter-increment: sekcja;            /* Zwiększa tylko tę instancję
+                                             licznika sekcja */
+    content: counters(sekcja, ".") " ";   /* Wyświetla wartości wszystkich
+                                             instancji licznika sekcja,
+                                             oddzielając je ciągiem ".". */
+  }
+
+ +

Przykładowy HTML (w komentarzach podano wartość wygenerowanego licznika):

+ +
<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>
+
+ +

Zobacz także

+ + + +

potrzebna treść do artykułu

+ +

{{ languages( { "en": "en/CSS_Counters", "fr": "fr/Compteurs_CSS" } ) }}

diff --git a/files/pl/web/css/css_lists_and_counters/using_css_counters/index.html b/files/pl/web/css/css_lists_and_counters/using_css_counters/index.html deleted file mode 100644 index 0886615002..0000000000 --- a/files/pl/web/css/css_lists_and_counters/using_css_counters/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Liczniki CSS -slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -tags: - - CSS - - Wszystkie_kategorie -translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -original_slug: Web/Guide/Liczniki_CSS ---- -

 

- -

Podsumowanie

- -

Liczniki w CSS zostały opisane w sekcji Automatic counters and numbering dokumentacji CSS 2.1. Wartość licznika jest ustawiana poprzez użycie własności counter-reset oraz counter-increment, natomiast wyświetlana jest przy wykorzystaniu funkcji counter() lub counters() należących do własności content.

- -

Zastosowanie liczników

- -

Aby użyć licznika CSS, należy najpierw ustawić mu wartość (domyślnie jest to 0) przy pomocy własności reset. Aby wyświetlić wartość licznika w danym elemencie należy skorzystać z funkcji counter(). Poniższy przykład dodaje na początku każdego elementu h1 "Sekcja wartość licznika:".

- -
  body {
-    counter-reset: sekcja;           /* Ustawienie licznika sekcja na 0 */
-  }
-  h1::before {
-    counter-increment: sekcja;               /* Zwiększa licznik sekcja */
-    content: "Sekcja " counter(sekcja) ": ";       /* Wyświetla licznik */
-  }
-
- -

Zagnieżdżanie liczników

- -

Liczniki CSS mogą być szczególnie użyteczne przy listach uporządkowanych (ol), ponieważ nowa instancja licznika CSS jest automatycznie tworzona dla potomków danego elementu. Użycie funkcji counters() pozwala na dodanie ciągu znaków, który będzie oddzielał kolejne poziomy zagnieżdżonych liczników:

- -
  ol {
-    counter-reset: sekcja;                /* Tworzy nową instancję licznika
-                                             sekcja w każdym elemencie ol */
-    list-style-type: none;                /* Usuwa domyślnie wyświetlany licznik */
-  }
-  li::before {
-    counter-increment: sekcja;            /* Zwiększa tylko tę instancję
-                                             licznika sekcja */
-    content: counters(sekcja, ".") " ";   /* Wyświetla wartości wszystkich
-                                             instancji licznika sekcja,
-                                             oddzielając je ciągiem ".". */
-  }
-
- -

Przykładowy HTML (w komentarzach podano wartość wygenerowanego licznika):

- -
<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>
-
- -

Zobacz także

- - - -

potrzebna treść do artykułu

- -

{{ languages( { "en": "en/CSS_Counters", "fr": "fr/Compteurs_CSS" } ) }}

diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt index 2a5b9802a4..4edd09566b 100644 --- a/files/pt-br/_redirects.txt +++ b/files/pt-br/_redirects.txt @@ -580,6 +580,7 @@ /pt-BR/docs/Web/CSS/CSS_Colors/seletor_de_cores /pt-BR/docs/Web/CSS/CSS_Colors/Color_picker_tool /pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox /pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox /pt-BR/docs/Web/CSS/CSS_Images/Implementando_sprites_de_imagens_em_CSS /pt-BR/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS +/pt-BR/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters /pt-BR/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /pt-BR/docs/Web/CSS/CSS_Reference /pt-BR/docs/Web/CSS/Reference /pt-BR/docs/Web/CSS/CSS_Reference/mix-blend-mode /pt-BR/docs/Web/CSS/mix-blend-mode /pt-BR/docs/Web/CSS/CSS_Tipos /pt-BR/docs/Web/CSS/CSS_Types diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json index 8e4eeea8d6..d02843e10d 100644 --- a/files/pt-br/_wikihistory.json +++ b/files/pt-br/_wikihistory.json @@ -7654,6 +7654,14 @@ "Sebastianz" ] }, + "Web/CSS/CSS_Counter_Styles/Using_CSS_counters": { + "modified": "2020-08-20T10:01:26.706Z", + "contributors": [ + "felipecesr", + "cris-luz-07", + "jorgeclesio" + ] + }, "Web/CSS/CSS_Display": { "modified": "2020-10-15T22:22:39.686Z", "contributors": [ @@ -7751,14 +7759,6 @@ "teoli" ] }, - "Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters": { - "modified": "2020-08-20T10:01:26.706Z", - "contributors": [ - "felipecesr", - "cris-luz-07", - "jorgeclesio" - ] - }, "Web/CSS/CSS_Positioning": { "modified": "2019-07-23T07:58:20.044Z", "contributors": [ diff --git a/files/pt-br/web/css/css_counter_styles/using_css_counters/index.html b/files/pt-br/web/css/css_counter_styles/using_css_counters/index.html new file mode 100644 index 0000000000..19ec6b7d79 --- /dev/null +++ b/files/pt-br/web/css/css_counter_styles/using_css_counters/index.html @@ -0,0 +1,116 @@ +--- +title: Using CSS counters +slug: Web/CSS/CSS_Counter_Styles/Using_CSS_counters +translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +original_slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +--- +

{{CSSRef}}

+ +

Contadores CSS são em essência, as variáveis mantidas pelo CSS cujos valores podem ser incrementado por regras do CSS para controlar quantas vezes eles são usados.Isso permite ajustar a aparência do conteúdo com base na sua colocação no documento. contadores CSS são uma implementação de Contadores automáticos e numeração em CSS 2.1.

+ +

O valor de um contador é manipulado através da utilização de  {{cssxref("counter-reset")}}. {{cssxref("counter-increment")}} pode ser exibido em uma página usando o counter() ou counters() função da propriedade de conteúdo.

+ +

Usando contadores

+ +

Para usar um contador, tem quer definir um valor para ele (ele é 0 default). Para adicionar o valor do contador em um elemento, use a função counter(). O CSS abaixo adiciona "Section [o valor do contador]:" no início de cada elemento h3.

+ +
body {
+  counter-reset: section;                   /* Set the section counter to 0 */
+}
+h3::before {
+  counter-increment: section;               /* Increment the section counter*/
+  content: "Section" counter(section) ": "; /* Display the counter */
+}
+
+ +

Exemplo:

+ +
<h3>Introduction</h3>
+<h3>Body</h3>
+<h3>Conclusion</h3>
+ +

{{ EmbedLiveSample('Using_counters', 300,200) }}

+ +

Nesting counters

+ +

Um contador CSS pode ser especialmente útil para fazer listas descritas porque uma nova instância de um contador CSS é criado automaticamente em elementos filho . Usando a função counters(), uma corda pode ser inserido entre diferentes níveis de contadores aninhados. Por exemplo, esta CSS :

+ +
ol {
+  counter-reset: section;                /* Creates a new instance of the
+                                            section counter with each ol
+                                            element */
+  list-style-type: none;
+}
+li::before {
+  counter-increment: section;            /* Increments only this instance
+                                            of the section counter */
+  content: counters(section,".") " ";    /* Adds the value of all instances
+                                            of the section counter separated
+                                            by a ".". */
+                                         /* if you need to support < IE8 then
+                                            make sure there is no space after
+                                            the ',' */
+}
+
+ +

Combinado com o seguinte 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>
+ +

Produz este resultado:

+ +

{{ EmbedLiveSample('Nesting_counters',400,'100%') }}

+ +

Especificações

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS2.1', 'generate.html#generate.html#counters', 'counter-reset')}}{{Spec2('CSS2.1')}}
+ +

Veja mais

+ + + +

There is an additional example available at http://www.mezzoblue.com/archives/20.../counter_intu/. This blog entry was posted on November 01, 2006, but appears to be accurate.

diff --git a/files/pt-br/web/css/css_lists_and_counters/using_css_counters/index.html b/files/pt-br/web/css/css_lists_and_counters/using_css_counters/index.html deleted file mode 100644 index 2fb2dac4bd..0000000000 --- a/files/pt-br/web/css/css_lists_and_counters/using_css_counters/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Using CSS counters -slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters ---- -

{{CSSRef}}

- -

Contadores CSS são em essência, as variáveis mantidas pelo CSS cujos valores podem ser incrementado por regras do CSS para controlar quantas vezes eles são usados.Isso permite ajustar a aparência do conteúdo com base na sua colocação no documento. contadores CSS são uma implementação de Contadores automáticos e numeração em CSS 2.1.

- -

O valor de um contador é manipulado através da utilização de  {{cssxref("counter-reset")}}. {{cssxref("counter-increment")}} pode ser exibido em uma página usando o counter() ou counters() função da propriedade de conteúdo.

- -

Usando contadores

- -

Para usar um contador, tem quer definir um valor para ele (ele é 0 default). Para adicionar o valor do contador em um elemento, use a função counter(). O CSS abaixo adiciona "Section [o valor do contador]:" no início de cada elemento h3.

- -
body {
-  counter-reset: section;                   /* Set the section counter to 0 */
-}
-h3::before {
-  counter-increment: section;               /* Increment the section counter*/
-  content: "Section" counter(section) ": "; /* Display the counter */
-}
-
- -

Exemplo:

- -
<h3>Introduction</h3>
-<h3>Body</h3>
-<h3>Conclusion</h3>
- -

{{ EmbedLiveSample('Using_counters', 300,200) }}

- -

Nesting counters

- -

Um contador CSS pode ser especialmente útil para fazer listas descritas porque uma nova instância de um contador CSS é criado automaticamente em elementos filho . Usando a função counters(), uma corda pode ser inserido entre diferentes níveis de contadores aninhados. Por exemplo, esta CSS :

- -
ol {
-  counter-reset: section;                /* Creates a new instance of the
-                                            section counter with each ol
-                                            element */
-  list-style-type: none;
-}
-li::before {
-  counter-increment: section;            /* Increments only this instance
-                                            of the section counter */
-  content: counters(section,".") " ";    /* Adds the value of all instances
-                                            of the section counter separated
-                                            by a ".". */
-                                         /* if you need to support < IE8 then
-                                            make sure there is no space after
-                                            the ',' */
-}
-
- -

Combinado com o seguinte 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>
- -

Produz este resultado:

- -

{{ EmbedLiveSample('Nesting_counters',400,'100%') }}

- -

Especificações

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS2.1', 'generate.html#generate.html#counters', 'counter-reset')}}{{Spec2('CSS2.1')}}
- -

Veja mais

- - - -

There is an additional example available at http://www.mezzoblue.com/archives/20.../counter_intu/. This blog entry was posted on November 01, 2006, but appears to be accurate.

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
+ +

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

+ +
    +
  • {{cssxref("counter-reset")}}
    • +
  • {{cssxref("counter-increment")}}
    • +
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
- -

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

- -
    -
  • {{cssxref("counter-reset")}}
    • -
  • {{cssxref("counter-increment")}}
    • -
diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index 10b9b036cc..c556ba1986 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -1722,6 +1722,7 @@ /zh-CN/docs/Web/CSS/CSS_Flow_Layout/在Flow中和Flow之外 /zh-CN/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow /zh-CN/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes /zh-CN/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes /zh-CN/docs/Web/CSS/CSS_Grid_Layout/利用CSS网格布局实现常用布局 /zh-CN/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout +/zh-CN/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters /zh-CN/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /zh-CN/docs/Web/CSS/CSS_Logical_Properties/Basic_conceptsjie /zh-CN/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts /zh-CN/docs/Web/CSS/CSS_Logical_Properties/浮动和定位 /zh-CN/docs/Web/CSS/CSS_Logical_Properties/Floating_and_positioning /zh-CN/docs/Web/CSS/CSS_Selectors/Comparison_with_XPath /zh-CN/docs/Web/XPath/Comparison_with_CSS_selectors @@ -1892,7 +1893,7 @@ /zh-CN/docs/Web/Guide/CSS /zh-CN/docs/Learn/CSS /zh-CN/docs/Web/Guide/CSS/CSS_Image_Sprites /zh-CN/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS /zh-CN/docs/Web/Guide/CSS/Consistent_list_indentation /zh-CN/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation -/zh-CN/docs/Web/Guide/CSS/Counters /zh-CN/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +/zh-CN/docs/Web/Guide/CSS/Counters /zh-CN/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters /zh-CN/docs/Web/Guide/CSS/Getting_started/Content /zh-CN/docs/Learn/CSS/Howto/Generated_content /zh-CN/docs/Web/Guide/CSS/Getting_started/Media /zh-CN/docs/conflicting/Web/CSS/Media_Queries/Using_media_queries /zh-CN/docs/Web/Guide/CSS/Getting_started/SVG_and_CSS /zh-CN/docs/Web/SVG/Tutorial/SVG_and_CSS diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index d2967ecaa6..f3ae0618d0 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -26172,6 +26172,15 @@ "ZZES_REN" ] }, + "Web/CSS/CSS_Counter_Styles/Using_CSS_counters": { + "modified": "2019-03-23T23:28:24.261Z", + "contributors": [ + "Ende93", + "Jiang-Xuan", + "Jiasm", + "Nightingale" + ] + }, "Web/CSS/CSS_Flexible_Box_Layout": { "modified": "2019-09-20T14:46:03.892Z", "contributors": [ @@ -26511,15 +26520,6 @@ "Wenbin" ] }, - "Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters": { - "modified": "2019-03-23T23:28:24.261Z", - "contributors": [ - "Ende93", - "Jiang-Xuan", - "Jiasm", - "Nightingale" - ] - }, "Web/CSS/CSS_Logical_Properties": { "modified": "2020-10-12T22:45:52.532Z", "contributors": [ diff --git a/files/zh-cn/web/css/css_counter_styles/using_css_counters/index.html b/files/zh-cn/web/css/css_counter_styles/using_css_counters/index.html new file mode 100644 index 0000000000..6406f44ffd --- /dev/null +++ b/files/zh-cn/web/css/css_counter_styles/using_css_counters/index.html @@ -0,0 +1,121 @@ +--- +title: 使用CSS计数器 +slug: Web/CSS/CSS_Counter_Styles/Using_CSS_counters +tags: + - CSS + - CSS List + - Web + - counter + - 教程 +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计数器是CSS2.1中自动计数编号部分的实现。

+ +

计数器的值通过使用{{cssxref("counter-reset")}} 和 {{cssxref("counter-increment")}} 操作，在 content 上应用 counter() 或 counters()函数来显示在页面上。

+ +

使用计数器

+ +

使用CSS计数器之前，必须重置一个值，默认是0。使用{{cssxref("counter()")}}函数来给元素增加计数器。 下面的CSS给每个h3元素的前面增加了 "Section <计算器值>:"。

+ +
body {
+  counter-reset: section;           /* 重置计数器成0 */
+}
+h3:before {
+  counter-increment: section;      /* 增加计数器值 */
+  content: "Section " counter(section) ": "; /* 显示计数器 */
+}
+
+ +

例如：

+ +
<h3>Introduction</h3>
+<h3>Body</h3>
+<h3>Conclusion</h3>
+ +

{{ EmbedLiveSample('使用计数器', 300,200) }}

+ +

计数器嵌套

+ +

CSS计数器对创建有序列表特别有用，因为在子元素中会自动创建一个CSS计数器的实例。使用 counters() 函数，在不同级别的嵌套计数器之间可以插入字符串。比如这个CSS例子：

+ +
ol {
+  counter-reset: section;                /* 为每个ol元素创建新的计数器实例 */
+  list-style-type: none;
+}
+li:before {
+  counter-increment: section;            /* 只增加计数器的当前实例 */
+  content: counters(section, ".") " ";   /* 为所有计数器实例增加以“.”分隔的值 */
+}
+
+ +

结合下面的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('计数器嵌套') }}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}{{Spec2("CSS3 Lists")}}无变化
{{SpecName('CSS2.1', 'generate.html#generate.html#counters', 'counter-reset')}}{{Spec2('CSS2.1')}}初始定义
+ +

其它

+ + + +

另一个可用的示例在 http://www.mezzoblue.com/archives/20.../counter_intu/。这篇博客 发布于2006年11月1日，但是看上去写得还是准确的。

+ +
 
diff --git a/files/zh-cn/web/css/css_lists_and_counters/using_css_counters/index.html b/files/zh-cn/web/css/css_lists_and_counters/using_css_counters/index.html deleted file mode 100644 index 3ae54b4940..0000000000 --- a/files/zh-cn/web/css/css_lists_and_counters/using_css_counters/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: 使用CSS计数器 -slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -tags: - - CSS - - CSS List - - Web - - counter - - 教程 -translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters -original_slug: Web/Guide/CSS/Counters ---- -
{{CSSRef}}
- -

本质上CSS计数器是由CSS维护的变量，这些变量可能根据CSS规则增加以跟踪使用次数。这允许你根据文档位置来调整内容表现。 CSS计数器是CSS2.1中自动计数编号部分的实现。

- -

计数器的值通过使用{{cssxref("counter-reset")}} 和 {{cssxref("counter-increment")}} 操作，在 content 上应用 counter() 或 counters()函数来显示在页面上。

- -

使用计数器

- -

使用CSS计数器之前，必须重置一个值，默认是0。使用{{cssxref("counter()")}}函数来给元素增加计数器。 下面的CSS给每个h3元素的前面增加了 "Section <计算器值>:"。

- -
body {
-  counter-reset: section;           /* 重置计数器成0 */
-}
-h3:before {
-  counter-increment: section;      /* 增加计数器值 */
-  content: "Section " counter(section) ": "; /* 显示计数器 */
-}
-
- -

例如：

- -
<h3>Introduction</h3>
-<h3>Body</h3>
-<h3>Conclusion</h3>
- -

{{ EmbedLiveSample('使用计数器', 300,200) }}

- -

计数器嵌套

- -

CSS计数器对创建有序列表特别有用，因为在子元素中会自动创建一个CSS计数器的实例。使用 counters() 函数，在不同级别的嵌套计数器之间可以插入字符串。比如这个CSS例子：

- -
ol {
-  counter-reset: section;                /* 为每个ol元素创建新的计数器实例 */
-  list-style-type: none;
-}
-li:before {
-  counter-increment: section;            /* 只增加计数器的当前实例 */
-  content: counters(section, ".") " ";   /* 为所有计数器实例增加以“.”分隔的值 */
-}
-
- -

结合下面的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('计数器嵌套') }}

- -

规范

- - - - - - - - - - - - - - - - - - - - - -
规范状态注释
{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}{{Spec2("CSS3 Lists")}}无变化
{{SpecName('CSS2.1', 'generate.html#generate.html#counters', 'counter-reset')}}{{Spec2('CSS2.1')}}初始定义
- -

其它

- - - -

另一个可用的示例在 http://www.mezzoblue.com/archives/20.../counter_intu/。这篇博客 发布于2006年11月1日，但是看上去写得还是准确的。

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