[CRON] sync translated content

1 files changed, 127 insertions, 0 deletions

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
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">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.</span> CSS Zähler sind eine Implementierung von <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> in CSS 2.1.</p>
+
+<p>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 <code>counter()</code> oder <code>counters()</code> Funktion der {{cssxref("content")}} Eigenschaft dargestellt werden.</p>
+
+<h2 id="Zähler_verwenden">Zähler verwenden</h2>
+
+<p>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 <code>counter()</code> Funktion verwendet werden. Das folgende CSS fügt am Anfang jedes h3 Elements "Abschnitt &lt;der Wert des Zählers&gt;:" ein.</p>
+
+<pre class="brush: css">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 */
+}
+</pre>
+
+<p>Beispiel:</p>
+
+<pre class="brush: html">&lt;h3&gt;Einführung&lt;/h3&gt;
+&lt;h3&gt;Inhalt&lt;/h3&gt;
+&lt;h3&gt;Zusammenfassung&lt;/h3&gt;</pre>
+
+<p>{{EmbedLiveSample("Zähler_verwenden", 280, 150)}}</p>
+
+<h2 id="Zähler_verschachteln">Zähler verschachteln</h2>
+
+<p>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 <code>counters()</code> Funktion verwendet, kann ein String zwischen verschiedenen Leveln von verschachtelten Zählern eingefügt werden. Beispielsweise dieses CSS:</p>
+
+<pre class="brush: 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 &lt; IE8 unterstützt werden soll,
+                                            sollte sichergestellt werden, dass
+                                            kein Leerzeichen nach dem ',' steht. */
+}
+</pre>
+
+<p>Kombiniert mit dem folgenden HTML:</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li&gt;Eintrag&lt;/li&gt;          &lt;!-- 1     --&gt;
+  &lt;li&gt;Eintrag               &lt;!-- 2     --&gt;
+    &lt;ol&gt;
+      &lt;li&gt;Eintrag&lt;/li&gt;      &lt;!-- 2.1   --&gt;
+      &lt;li&gt;Eintrag&lt;/li&gt;      &lt;!-- 2.2   --&gt;
+      &lt;li&gt;Eintrag           &lt;!-- 2.3   --&gt;
+        &lt;ol&gt;
+          &lt;li&gt;Eintrag&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
+          &lt;li&gt;Eintrag&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
+        &lt;/ol&gt;
+        &lt;ol&gt;
+          &lt;li&gt;Eintrag&lt;/li&gt;  &lt;!-- 2.3.1 --&gt;
+          &lt;li&gt;Eintrag&lt;/li&gt;  &lt;!-- 2.3.2 --&gt;
+          &lt;li&gt;Eintrag&lt;/li&gt;  &lt;!-- 2.3.3 --&gt;
+        &lt;/ol&gt;
+      &lt;/li&gt;
+      &lt;li&gt;Eintrag&lt;/li&gt;      &lt;!-- 2.4   --&gt;
+    &lt;/ol&gt;
+  &lt;/li&gt;
+  &lt;li&gt;Eintrag&lt;/li&gt;          &lt;!-- 3     --&gt;
+  &lt;li&gt;Eintrag&lt;/li&gt;          &lt;!-- 4     --&gt;
+&lt;/ol&gt;
+&lt;ol&gt;
+  &lt;li&gt;Eintrag&lt;/li&gt;          &lt;!-- 1     --&gt;
+  &lt;li&gt;Eintrag&lt;/li&gt;          &lt;!-- 2     --&gt;
+&lt;/ol&gt;</pre>
+
+<p>Erzeugt dieses Ergebnis:</p>
+
+<p>{{EmbedLiveSample("Zähler_verschachteln", 250, 350)}}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spezifikation</th>
+   <th scope="col">Status</th>
+   <th scope="col">Kommentar</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS2.1", "generate.html#generate.html#counters", "counter-reset")}}</td>
+   <td>{{Spec2("CSS2.1")}}</td>
+   <td>Ursprüngliche Definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li>{{cssxref("counter-reset")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+</ul>
+
+<p><em>Es gibt ein zusätzliches Beispiel unter <a class="external" href="http://www.mezzoblue.com/archives/2006/11/01/counter_intu/" rel="freelink">http://www.mezzoblue.com/archives/20.../counter_intu/</a>. Dieser Blogeintrag wurde am 01.11.2006 veröffentlicht, sollte jedoch noch zutreffen.</em></p>