Compteurs CSS

Cet article se concentrera sur la propriété CSS Counter, qui nous aide à ajuster l'apparence du contenu en fonction de son emplacement sur une page Web. Par exemple, nous pouvons utiliser un compteur pour automatiser le nombre de titres sur la page Web. Nous pouvons créer nos propres compteurs nommés et modifier l'élément de liste par défaut en utilisant la propriété Counter et ses fonctions et propriétés connexes, qui sont contre-réinitialisation, contre-incrément, contenu et compteur.

Exemple 01: Utilisation de la propriété CSS Counter pour la numérotation automatique dans un fichier HTML

Dans cet exemple, nous discutons de la propriété Counter, qui attribue automatiquement un nombre à n'importe quel élément du langage de balisage hypertexte. Nous aborderons nos titres dans cet exemple en utilisant différentes fonctions de la propriété Counter:

Nous commencerons par l'en-tête du fichier, où nous attribuerons des propriétés de style au corps et à la balise H2 du fichier. Pour l'étiquette corporelle, nous utiliserons la fonction de réinitialisation de la contre-réinitialisation. Pour la balise H2, nous utiliserons la propriété de contre-incrément et la propriété de contenu, qui attribuera les nombres à contre-courant à la balise H2 dans le corps.

Après cela, nous ouvrirons la balise corporelle dans laquelle nous fournirons un titre à la page en utilisant la balise H1. Ensuite, nous ajouterons plusieurs balises H2 avec les propriétés de style définies dans la balise de style. Nous avons une liste des noms des personnes et des identifiants de leurs employés, qui doivent être augmentés automatiquement lorsqu'un nouveau nom est ajouté à la liste. Nous avons ajouté un prétexte en utilisant la propriété de contenu, je.e., «ID de l'employé:» puis utilisez le compteur pour incrémenter la valeur. Ensuite, nous fermerons toutes les balises restantes pour terminer le fichier et l'ouvrirons sur notre navigateur pour afficher les propriétés de style.

Dans l'extrait précédent, nous pouvons voir l'ID de l'employé, qui était le contenu que nous avons défini. Les valeurs sont auto-incrément à travers le comptoir, je.e., 1, 2, 3, 4, etc.

Exemple 02: Utilisation de la propriété CSS Counter pour créer plusieurs titres et sous-titres avec des nombres hiérarchiques

Dans cet exemple, nous compternerons nos titres et sous-titres en utilisant diverses fonctionnalités de la propriété Counter. Dans cet exemple, nous examinerons la propriété Counter, qui attribue un nombre à n'importe quel élément de la langue de balisage hypertexte.

Dans ce script, nous implémenterons le concept du compteur imbriqué. Tout d'abord, nous définirons le comptoir dans la classe de style corporel, nommé «Section."Ici, nous avons défini deux noms de contre-noms, section et sous-section, respectivement. Comme nous avons une liste de titres et de sous-titres, nous réinitialisons les deux compteurs pour les éléments spécifiques. Maintenant, nous allons prolonger la classe de style H1 et H2 avec l'état avant. Dans cette partie de la classe, nous définirons le réglage du contenu pour l'en-tête et la sous-tête en utilisant l'incrément de comptoir et les propriétés du contenu. Ensuite, nous ajouterons respectivement l'en-tête et la sous-tête à l'aide des balises H1 et H2,. Nous créerons deux sections avec des titres et des sous-titres séparés. Ensuite, nous fermerons les balises et terminerons le fichier pour l'enregistrer dans le «.format html ”afin que nous puissions l'ouvrir dans notre navigateur.

Dans la sortie précédente, nous pouvons voir que les deux sections ont une numérotation différente telle que définie dans la classe de style du fichier. Le numéro de cap augmente ainsi que le numéro des sous-titres, qui est réinitialisé à celui lorsqu'ils sont appelés à une autre section.

Exemple 03: Création d'une liste commandée par nombre à l'aide de la propriété CSS Counter dans un fichier HTML

Dans cet exemple, nous créerons une liste ordonnée qui sera numérotée à l'aide de la propriété Counter et de ses fonctions connexes, divisant la liste en différentes sections avec des nombres prédéfinis par le changement de section.

Dans ce script, nous ajouterons les classes de style initialement pendant que nous optons pour la méthode de style tag de style CSS. La balise de style aura d'abord la balise «OL» pour fournir des propriétés de style. Dans cette classe, nous commencerons par la fonction de réinitialisation de la contre-réinitialisation, qui sera définie sur la fonction de section. Ensuite, nous ajouterons la propriété de type de style de liste, qui peut être utilisée pour ajouter tout style prédéfini ou la vue par défaut de la liste. Nous allons seulement ajouter des propriétés de style à l'état «avant» de cette balise. Dans cette section, nous ajouterons la propriété de contre-incrément, qui sera définie sur la fonction de section, et définirons la propriété de contenu avec la fonction de compteur ayant le contenu ajouté comme paramètre du soudings. Cette partie de la balise de style attribuera l'ensemble correct de nombres avec plusieurs sous-titres et sous-repliants. Ensuite, nous créerons une liste commandée avec cinq sections différentes en utilisant les balises OL et Li.

Comme nous pouvons le voir dans l'extrait précédent, les titres, les sous-titres et les sous-titres sont parfaitement organisés avec un ensemble distinct de nombres concernant leur section respective et sont distincts des autres sections.

Exemple 04: Création d'un Liste des pages dynamiques à l'aide de la propriété CSS Counter dans un fichier HTML

Nous créerons une liste de pages dynamiques à l'aide de la propriété CSS Counter dans cet exemple. Nous attribuerons les numéros de liste de pages, adaptés au changement de flux sur la traversée de la page sur notre page Web. L'approche de la balise de style pour CSS sera utilisée dans cet exemple:

Le script précédent est un exemple de liste avec une pagination dynamique à travers des compteurs. Dans l'étiquette UL de la classe de style, nous réinitialiserons le compteur pour le compteur de paginas. Ensuite, nous créerons une classe de style collectivement pour les étiquettes UL et Li où nous lui donnerons des propriétés de conception en ajoutant un rembourrage, une couleur et une marge, lui donnant une bordure solide, un pointeur de curseur et la propriété flottante. Après cela, nous passerons à l'état suivant et précédent des étiquettes UL et Li dans la même classe, où nous ajouterons la propriété de contre-incrément, qui sera définie sur le compteur Paginate. Nous définirons également la propriété de contenu avec la fonction Paginate Counter ayant le contenu à ajouter comme paramètre. Après cela, nous créerons une liste dans le corps du fichier à l'aide des balises Li et UL. La première étiquette Li aura la classe précédente comme guide des propriétés de style, tandis que la dernière étiquette Li aura la classe suivante comme guide des propriétés de style, et le reste sera vide.

Nous pouvons voir que la liste est créée dans une série de nombres ordonnés avec un état incrémentiel ainsi que les boutons suivants et précédents et les styles tels que définis dans la balise de style.

Conclusion

Dans cet article, nous avons discuté des différentes fonctions de la propriété CSS Counter dans le langage de balisage hypertexte. La propriété CSS Counter est utilisée pour attribuer des numéros à n'importe quel élément dynamiquement. À l'aide de ses fonctions connexes, nous pouvons tourbillonner autour des changements d'étiquetage dans la rubrique en fonction de la section. L'incrément de comptoir et la réinitialisation sont les fonctions les plus courantes lors de l'attribution des nombres à un élément. Nous avons mis en œuvre la propriété CSS Counter et ses fonctions connexes dans différents scénarios dans l'environnement du bloc-notes ++.