recherche

Maison  >  Article  >  interface Web  >  Comment personnaliser les éléments de la liste à l'aide de CSS à l'aide des règles de style @counter ?

Comment personnaliser les éléments de la liste à l'aide de CSS à l'aide des règles de style @counter ?

PHPz
PHPzavant
2023-09-10 21:25:021468parcourir

如何使用 @counter-style 规则使用 CSS 自定义列表项？

Les listes sont un élément essentiel du développement Web et sont utilisées pour présenter des informations de manière organisée et structurée. En HTML, il existe 3 types de listes : les listes ordonnées, les listes non ordonnées et les listes de définitions. Cependant, le style de ces listes peut être difficile lorsque nous devons concevoir les listes conformément aux exigences. CSS fournit la règle @counter-style, qui nous permet de personnaliser le balisage des éléments de liste de manière plus flexible et créative.

Dans cet article, nous apprendrons comment utiliser les règles de style @counter pour personnaliser les éléments de liste à l'aide de CSS. La règle @counter-style est utilisée pour définir des styles de compteur qui ne font pas partie d'un ensemble de styles prédéfini et définit comment la valeur du compteur est convertie en une représentation sous forme de chaîne.

Qu'est-ce que le @counter-style ?

La règle @counter-style est utilisée pour définir un style de compteur qui peut être utilisé en conjonction avec la propriété CSS counter. Cette règle est utilisée pour définir un style de marqueur d'élément de liste personnalisé. La propriété counter nous permet d'incrémenter ou de décrémenter un compteur. , qui est utilisé pour générer du contenu pour des pseudo-éléments comme :before et :after.

Grammaire

@counter-style name {
   // write all the CSS styles properties and values
}

Le paramètre name est utilisé pour spécifier le nom du style de compteur que nous définissons. Dans les accolades, nous pouvons définir un ensemble de propriétés et de valeurs qui contrôlent l'apparence du compteur. utiliser include −

  • Système - Il spécifie le système de numérotation à utiliser, tel que décimal, lettres minuscules, chiffres romains majuscules, etc.

  • Symbole - Il précise le symbole utilisé pour chaque niveau du compteur.

  • Suffix - Il spécifie le suffixe ajouté après la valeur du compteur.

  • Prefix - Il spécifie le préfixe à ajouter avant la valeur du compteur.

  • Pad - Il spécifie le nombre minimum de chiffres à utiliser lors de l'affichage de la valeur du compteur.

Étapes pour utiliser la règle @counter-styles en CSS

Voici les étapes pour utiliser les règles @counter-styles en CSS -

Étape 1 : Créer une liste ordonnée

La première étape consiste à créer une liste ordonnée et à la personnaliser avec nos propres balises d'éléments de liste. Dans l'exemple ci-dessous, nous souhaitons utiliser des chiffres romains au lieu du système de numérotation par défaut. Vous trouverez ci-dessous le code HTML de notre liste −

<ol>
   <li>Learn to code in python</li>
   <li>Learn to code in java</li>
   <li>Learn to code in c++</li>
</ol>

Étape 2 : Définir le @counter-style

@counter-style my-numerals {
   system: upper-roman;
   symbols: I II III IV V VI VII VIII IX X;
}

Dans le code ci-dessus, nous avons défini un style de compteur nommé my-numerals et défini la propriété système sur upper-roman, ce qui signifie que le compteur sera configuré pour utiliser les chiffres romains majuscules dans la liste. la propriété du symbole à une chaîne de chiffres romains de I à X.

Étape 3 : Styles CSS

ol {
   counter-reset: section;
}
li {
   counter-increment: section;
   list-style: none;
}
li:before {
   content: counter(section, my-numerals) ". ";
   margin-right: 10px;
}

Dans le code ci-dessus, l'attribut counter-reset est défini sur la section de l'élément ol, ce qui signifie que le compteur repartira de 0. Ici, nous définissons également l'attribut de contre-incrément de la section pour chaque élément li.

Exemple 1

se traduit par :

Exemple 1

<html>
<head>
   <title>Example to use @counter-style to customize the List Item Markers using CSS</title>
   <style>
      /* Defining a custom counter style to have the list as upper roman numerals */
      @counter-style roman-numerals {
         system: upper-roman;
         symbols: I II III IV V VI VII VIII IX X;
      }
      /* applying the custom counter style to the ordered list */
      ol {counter-reset: section; }
      /* incrementing the counter for each list item */
      li {counter-increment: section; list-style: none;}
      /* using the counter value to display the custom list item marker */
      li:before {
         content: counter(section, roman-numerals) ". ";
         margin-right: 8px;
         color: green;
         font-size: 15px;
      }
   </style>
</head>
<body>
   <h3>Example to use @counter-style to customize the List Item Markers using CSS</h3>
   <p>In this example, we have used the @counter-style rule to customize the list item markers of an ordered list.</p>
   <ol>
      <li>Learn to code in python</li>
      <li>Learn to code in java</li>
      <li>Learn to code in c++</li>
   </ol>
</body>
</html>

Dans l'exemple ci-dessus, nous avons défini un style de compteur personnalisé nommé my-roman à l'aide de la règle @counter-style. Ici, nous avons défini la propriété système sur upper-roman pour utiliser les chiffres romains majuscules et avons également défini la propriété du symbole sur. une chaîne de chiffres romains de I à X.

Après cela, nous avons appliqué le style de compteur personnalisé à la liste ordonnée à l'aide de l'attribut counter-reset, incrémenté le compteur pour chaque élément de la liste à l'aide de l'attribut counter-increment et supprimé le marqueur d'élément de liste par défaut à l'aide de l'attribut list-style.

Enfin, pour afficher le balisage personnalisé des éléments de liste avec des chiffres romains, on utilise le pseudo-élément :before, via l'attribut content et la fonction counter (qui prend deux arguments : le nom du compteur (section dans ce cas) et le nom du style de compteur (chiffres romains dans ce cas)).

La traduction chinoise de

Exemple 2

est :

Exemple 2

<html>
<head>
   <title>Example to use @counter-style to customize the List Item Markers using CSS</title>
   <style>
      /* removing the default list item markers */
      ul { list-style: none;}
      /* using images as list item markers */
      li:before {
         content: "";
         display: inline-block;
         width: 25px;
         height: 25px;
         background-image: url("yourimage.png");
         background-repeat: no-repeat;
         margin-right: 8px;
      }
   </style>
</head>
<body>
   <h3>Example to use @counter-style to customize the List Item Markers using CSS</h3>
   <p>In this example, we have used the @counter-style rule to customize the list item markers of an ordered list.</p>
   <ol>
      <li>Learn to code in python</li>
      <li>Learn to code in java</li>
      <li>Learn to code in c++</li>
   </ol>
</body>
</html>

Dans l'exemple ci-dessus, nous avons utilisé l'attribut list-style pour supprimer le balisage par défaut de l'élément de liste de l'élément de liste non ordonné. De plus, nous utilisons également le pseudo-élément :before pour afficher les éléments de la liste à l'aide de l'attribut content et de la chaîne vide.

Nous avons défini l'attribut d'affichage sur inline-block pour garantir que l'image s'affiche correctement, et les attributs de largeur et de hauteur sur la taille de l'image du marqueur. Nous utilisons l'attribut background-image pour spécifier l'URL de l'image balisée et l'attribut background-repeat pour empêcher la duplication de l'image. Enfin, nous avons ajouté une marge sur le côté droit de l'image en utilisant la propriété margin-right.

Conclusion

Lorsque vous travaillez avec des listes HTML, vous pouvez utiliser la règle @counter-style en CSS pour personnaliser l'apparence du balisage des éléments de liste. Cette règle offre un moyen simple et flexible de définir des styles personnalisés pour les listes ordonnées. La syntaxe des règles de style @counter comprend plusieurs paramètres, tels que le système, les symboles, le suffixe, le préfixe et le pad. Ces paramètres permettent de modifier l'apparence des marqueurs d'éléments de liste. L’utilisation de la règle @counter-style facilite la création d’un balisage d’élément de liste qui correspond aux besoins actuels de conception de votre projet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css html String define for include 字符串 using Property symbol this display margin 伪元素 background li
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Apprenez CSS3 à partir de zéro : maîtrisez progressivement la technologie de baseArticle suivant：Apprenez CSS3 à partir de zéro : maîtrisez progressivement la technologie de base

Articles Liés

Voir plus