CSS counter-increment-Eigenschaft
Die counter-increment-Eigenschaft definiert, um wie viel sich die Werte von Zählern erhöhen oder verringern sollen. Diese Eigenschaft wird zusammen mit den content und counter-reset Eigenschaften verwendet.
Die counter-increment-Eigenschaft wird durch zwei Werte angegeben: none und id-Zahlen. „None“ ist der Standardwert dieser Eigenschaft. Sie ermöglicht die Verwendung negativer Werte im Fall des Werts „id number“. Der Standard-Inkrement beträgt 1. Wenn die Zähler-ID nicht durch counter-reset initialisiert wird, beträgt der Standardwert 0. Der Wert des Zählers kann mit der counter-reset-Eigenschaft auf eine beliebige Zahl festgelegt werden.
| Anfangswert | none |
|---|---|
| Anwendbar auf | Alle Elemente. |
| Vererbbar | Nein. |
| Animierbar | Diskret. |
| Version | CSS2 |
| DOM-Syntax | object.style.counterIncrement = "subsection"; |
Syntax
Syntax der CSS counter-increment-Eigenschaft
counter-increment: none | id number | initial | inherit;Beispiel für die counter-increment-Eigenschaft:
Beispiel der CSS counter-increment-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
/* "my-counter" to 0 */
counter-reset: my-counter;
}
h2::before {
/* "my-counter" by 1 */
counter-increment: my-counter;
content: "Section " counter(my-counter) ". ";
}
</style>
</head>
<body>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>PHP Tutorial</h2>
</body>
</html>Ergebnis
Beispiel für die counter-increment-Eigenschaft mit nummerierten Abschnitten und Unterabschnitten:
CSS counter-increment-Eigenschaft mit Unterabschnittswert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
/* Set "section" to 0 */
counter-reset: section;
}
h2 {
/* Set "subsection" to 0 */
counter-reset: subsection;
}
h2::before {
counter-increment: section;
content: "Book " counter(section) ": ";
}
h3::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h2>HTML</h2>
<h3>HTML Basics</h3>
<h3>HTML Templates</h3>
<h3>HTML References</h3>
<h3>HTML Tags</h3>
<h2>CSS</h2>
<h3>CSS Basics</h3>
<h3>CSS References</h3>
<h3>CSS Advanced</h3>
<h3>CSS Guides</h3>
<h3>CSS Selectors</h3>
<h3>CSS Properties</h3>
</body>
</html>Beispiel für die counter-increment-Eigenschaft mit römischen Ziffern:
Beispiel der counter-increment-Eigenschaft mit römischen Ziffern:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
/* "my-counter" to 0 */
counter-reset: my-counter;
}
h2::before {
/* "my-counter" by 1 */
counter-increment: my-counter;
content: counter(my-counter, upper-roman) ". ";
}
</style>
</head>
<body>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>PHP Tutorial</h2>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| none | Zähler werden nicht erhöht. Dies ist der Standardwert. |
| id number | Id definiert, welcher Zähler erhöht werden soll. Number definiert, um wie viel der Zähler erhöht wird. |
| initial | Legt die Eigenschaft auf ihren Standardwert fest. |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Praxis
Welche Rolle spielt die 'counter-increment'-Eigenschaft in CSS?