English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Il counter counter CSS è simile a una variabile. Queste sono mantenute dal CSS e i loro valori possono essere incrementati dalle regole CSS per tracciare il loro utilizzo. Il loro principale uso è quello di calcolare il numero di volte che un elemento nodo viene utilizzato attraverso regole specifiche.
Il counter counter CSS aiuta a generare numeri semplici e visibili basati su CSS per la creazione di contenuti.
Ecco l'elenco delle proprietà utilizzate insieme ai contatori CSS:
counter-reset:Usato per creare o reimpostare il contatore.
counter-increment:Usato per aumentare il valore del contatore.
content:Usato per inserire il contenuto generato.
funzione counter() o counters():Usato per aggiungere il valore del contatore all'elemento.
Facciamo un esempio, crea un contatore per la pagina e aumenta il valore del contatore per ogni elemento successivo.
Vedere l'esempio seguente:
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Sezione " counter(section) ": ";
}
</style>
</head>
<body>
<h1>Esempio di Contatore Counters CSS:</h1>
<h2>Tutorial Java</h2>
<h2>Tutorial HTML</h2>
<h2>Tutorial CSS</h2>
<h2>Tutorial Oracle</h2>
<p><strong>Nota:</strong> è necessario dichiarare !DOCTYPE per IE8.</p>
</body>
</html>Prova a vedere‹/›Puoi anche creare un contatore all'interno di un contatore. Questo si chiama contatore annidato. Facciamo un esempio per dimostrare il contatore annidato.
Vedere l'esempio seguente:
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: "Sezione " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1>Tutorial Java:</h1>
<h2>Tutorial Core Java</h2>
<h2>Tutorial Servlet</h2>
<h2>Tutorial JSP</h2>
<h2>Tutorial Spring</h2>
<h2>Tutorial Hibernate</h2>
<h1> Tutorial di tecnologia web: </h1>
<h2> Tutorial HTML </h2>
<h2> Tutorial CSS </h2>
<h2> Tutorial jQuery </h2>
<h2> Tutorial Bootstrap </h2>
<h1> Tutorial di database: </h1>
<h2> Tutorial SQL </h2>
<h2> Tutorial MySQL </h2>
<h2> Tutorial PL/SQL </h2>
<h2> Tutorial Oracle </h2>
<p><strongNota:</strong> Solo quando è specificato !DOCTYPE, IE8 supporta queste proprietà.</p>
</body>
</html>Prova a vedere‹/›Attenzione:Nell'esempio sopra, puoi vedere che è stato creato un contatore per questa sezione e un contatore annidato chiamato subsection in questa sezione.
Puoi utilizzare contatori annidati per creare elenchi di profilo. Aiuta a inserire stringhe tra contatori a diversi livelli di nesting.
Vedere l'esempio seguente:
<!DOCTYPE html>
<html>
<head>
<style>
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: contatori(section,".") " ";
}
</style>
</head>
<body>
<h2>Contatori a diversi livelli di nesting</h2>
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
<p><strongNota:</strong> Solo quando è specificato !DOCTYPE, IE8 supporta queste proprietà.</p>
</body>
</html>Prova a vedere‹/›