Proprietà CSS counter-increment
La proprietà CSS counter-increment aumenta o diminuisce i valori dei contatori. Esempi con i valori della proprietà.
La proprietà counter-increment definisce di quanto i valori dei contatori devono aumentare o diminuire. Questa proprietà viene utilizzata insieme alle proprietà content e counter-reset.
La proprietà counter-increment è specificata da due valori: none e numeri id. "None" è il valore predefinito di questa proprietà. Consente di utilizzare valori negativi nel caso del valore "id number". L'incremento predefinito è 1. Se l'id del contatore non è inizializzato da counter-reset, il valore predefinito è 0. Il valore del contatore può essere impostato su un numero arbitrario con la proprietà counter-reset.
| Valore iniziale | none |
|---|---|
| Si applica a | Tutti gli elementi. |
| Ereditato | No. |
| Animabile | Discreto. |
| Versione | CSS2 |
| Sintassi DOM | object.style.counterIncrement = "subsection"; |
Sintassi
Sintassi della proprietà CSS counter-increment
counter-increment: none | id number | initial | inherit;Esempio della proprietà counter-increment:
Esempio della proprietà CSS counter-increment
<!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>Risultato
Esempio della proprietà counter-increment con sezioni e sottosezioni numerate:
Proprietà CSS counter-increment con il valore subsection
<!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>Esempio della proprietà counter-increment con numeri romani:
<!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>Valori
| Valore | Descrizione |
|---|---|
| none | I contatori non vengono incrementati. Questo è il valore predefinito. |
| id number | Id definisce quale contatore incrementare. Number definisce di quanto il contatore verrà incrementato. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |