English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Les compteurs CSS counter sont similaires aux variables. Ils sont maintenus par CSS et leurs valeurs peuvent être incrémentées par les règles CSS pour suivre leur utilisation. Leur principal usage est de calculer le nombre d'utilisation des éléments de noeud via des règles spécifiées.
Les compteurs CSS counter aident à incrémenter et afficher numériquement le contenu généré basé sur CSS.
Voici une liste des attributs utilisés avec les compteurs CSS :
counter-reset :pour créer ou réinitialiser le compteur.
counter-increment :pour augmenter la valeur du compteur.
content :pour insérer le contenu généré.
fonction counter() ou counters() :pour ajouter la valeur du compteur à l'élément.
Laissons-nous prendre un exemple pour créer un compteur de page et augmenter la valeur du compteur pour chaque élément suivant.
Veuillez consulter les exemples suivants :
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>Exemple de compteur CSS Counters</h1>
<h2>Java Tutorial</h2>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>Oracle Tutorial</h2>
<p><strong>Remarque:</strong> IE8 doit être déclaré !DOCTYPE.</p>
</body>
</html>Essayons de voir‹/›Vous pouvez également créer un compteur dans un compteur. Cela s'appelle un compteur imbriqué. Laissons-nous démontrer un compteur imbriqué à l'aide d'un exemple.
Veuillez consulter les exemples suivants :
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1>Java tutorials:</h1>
<h2>Core Java tutorial</h2>
<h2>Servlet tutorial</h2>
<h2>Tutoriel JSP</h2>
<h2>Tutoriel Spring</h2>
<h2>Tutoriel Hibernate</h2>
<h1>Tutoriels de technologie Web :/h1>
<h2>Tutoriel HTML</h2>
<h2>Tutoriel CSS</h2>
<h2>Tutoriel jQuery</h2>
<h2>Tutoriel Bootstrap</h2>
<h1>Tutoriels de bases de données SQL :/h1>
<h2>SQL tutorial</h2>
<h2>MySQL tutorial</h2>
<h2>PL/SQL tutorial</h2>
<h2>Oracle tutorial</h2>
<p><strong>Remarque:</strong> Seulement si !DOCTYPE est spécifié, IE8seulement ces attributs.</p>
</body>
</html>Essayons de voir‹/›Remarque :Dans l'exemple ci-dessus, vous pouvez voir qu'un compteur a été créé pour cette section et qu'un autre compteur imbriqué nommé subsection a été créé dans cette section.
Vous pouvez utiliser des compteurs imbriqués pour créer des listes en relief. Cela aide à insérer des chaînes entre des compteurs imbriqués de niveaux différents.
Veuillez consulter les exemples suivants :
<!DOCTYPE html>
<html>
<head>
<style>
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
</style>
</head>
<body>
<h2>Compteurs de niveaux d'encapsulation différents</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><strong>Remarque:</strong> Seulement si !DOCTYPE est spécifié, IE8seulement ces attributs.</p>
</body>
</html>Essayons de voir‹/›