Articles
Introduction au CSS
Propriétés CSS liées aux listes

Propriétés CSS liées aux listes

Cet article explique les propriétés CSS liées aux listes.

Vous pouvez apprendre à utiliser et écrire la propriété list-style et la fonction counter().

YouTube Video

HTML pour l'aperçu

css-list.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-list.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>List Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>List Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>list-style</h3>
 23            <section>
 24                <header><h4>list-style-type: circle; list-style-position: inside;</h4></header>
 25                <section class="sample-view">
 26                    <h5>Unordered List (ul)</h5>
 27                    <ul>
 28                        <li>Item 1</li>
 29                        <li>Item 2</li>
 30                        <li>Item 3</li>
 31                    </ul>
 32                </section>
 33                <header><h4>list-style: upper-roman outside</h4></header>
 34                <section class="sample-view">
 35                    <h5>Ordered List (ol)</h5>
 36                    <ol>
 37                        <li>First</li>
 38                        <li>Second</li>
 39                        <li>Third</li>
 40                    </ol>
 41                </section>
 42                <header><h4>list-style-image: url('custom-bullet.png')</h4></header>
 43                <section class="sample-view">
 44                    <h5>Custom Bullet List</h5>
 45                    <ul class="custom-list">
 46                        <li>Custom Item 1</li>
 47                        <li>Custom Item 2</li>
 48                        <li>Custom Item 3</li>
 49                    </ul>
 50                </section>
 51            </section>
 52        </article>
 53        <article>
 54            <h3>counter()</h3>
 55            <section>
 56                <header><h4>CSS</h4></header>
 57<pre class="sample">
 58dl {
 59    counter-reset: item;
 60}
 61
 62dl dt::before {
 63    counter-increment: item; /* Increment the counter */
 64    content: counter(item) ". "; /* Display the counter */
 65}
 66</pre>
 67                <header><h4>HTML</h4></header>
 68<pre>
 69&lt;dl&gt;
 70    &lt;dt&gt;Term A&lt;/dt&gt;
 71    &lt;dd&gt;Explication for term A&lt;/dd&gt;
 72    &lt;dt&gt;Term B&lt;/dt&gt;
 73    &lt;dd&gt;Explication for term B&lt;/dd&gt;
 74    &lt;dt&gt;Term C&lt;/dt&gt;
 75    &lt;dd&gt;Explication for term C&lt;/dd&gt;
 76&lt;/dl&gt;
 77</pre>
 78                <header><h4>HTML+CSS</h4></header>
 79                <section class="sample-view">
 80                    <dl>
 81                        <dt>Term A</dt>
 82                        <dd>Explication for term A</dd>
 83                        <dt>Term B</dt>
 84                        <dd>Explication for term B</dd>
 85                        <dt>Term C</dt>
 86                        <dd>Explication for term C</dd>
 87                    </dl>
 88                </section>
 89            </section>
 90        </article>
 91        <article>
 92            <h3>counters()</h3>
 93            <section>
 94                <header><h4>CSS</h4></header>
 95<pre class="sample">
 96ol {
 97    list-style: none;
 98    counter-reset: list-counter;
 99}
100
101li {
102    counter-increment: list-counter;
103}
104
105li::before {
106    content: counters(list-counter, ".") " ";
107}
108</pre>
109                <header><h4>HTML</h4></header>
110<pre>
111&lt;ol&gt;
112    &lt;li&gt;Item A
113        &lt;ol&gt;
114            &lt;li&gt;Subitem A-1&lt;/li&gt;
115            &lt;li&gt;Subitem A-2&lt;/li&gt;
116        &lt;/ol&gt;
117    &lt;/li&gt;
118    &lt;li&gt;Item B
119        &lt;ol&gt;
120            &lt;li&gt;Subitem B-1&lt;/li&gt;
121        &lt;/ol&gt;
122    &lt;/li&gt;
123&lt;/ol&gt;
124</pre>
125                <header><h4>HTML+CSS</h4></header>
126                <section class="sample-view">
127                    <ol>
128                        <li>Item A
129                            <ol>
130                                <li>Subitem A-1</li>
131                                <li>Subitem A-2</li>
132                            </ol>
133                        </li>
134                        <li>Item B
135                            <ol>
136                                <li>Subitem B-1</li>
137                            </ol>
138                        </li>
139                    </ol>
140                </section>
141            </section>
142            <section>
143                <header><h4>CSS</h4></header>
144<pre class="sample">
145article {
146    counter-reset: chapter;
147}
148h1.chapter {
149    counter-increment: chapter;
150    counter-reset: section;
151}
152h1.chapter::before {
153    content: counter(chapter) " ";
154}
155h2.section {
156    counter-increment: section;
157    counter-reset: sub-section;
158}
159h2.section::before {
160    content: counters(chapter, ".") "." counter(section) " ";
161}
162h3.sub-section {
163    counter-increment: sub-section;
164}
165h3.sub-section::before {
166    content: counters(chapter, ".") "." counter(section) "." counter(sub-section) " ";
167}
168</pre>
169                <header><h4>HTML</h4></header>
170<pre>
171&lt;h1 class=&quot;chapter&quot;&gt;Chapter A&lt;/h1&gt;
172&lt;h2 class=&quot;section&quot;&gt;Section A-1&lt;/h2&gt;
173&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-1-1&lt;/h3&gt;
174&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-1-2&lt;/h3&gt;
175
176&lt;h2 class=&quot;section&quot;&gt;Section A-2&lt;/h2&gt;
177&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-2-1&lt;/h3&gt;
178
179&lt;h1 class=&quot;chapter&quot;&gt;Chapter B&lt;/h1&gt;
180&lt;h2 class=&quot;section&quot;&gt;Section B-1&lt;/h2&gt;
181&lt;h3 class=&quot;sub-section&quot;&gt;Subsection B-1-1&lt;/h3&gt;
182</pre>
183                <header><h4>HTML+CSS</h4></header>
184                <section class="sample-view">
185                    <h1 class="chapter">Chapter A</h1>
186                    <h2 class="section">Section A-1</h2>
187                    <h3 class="sub-section">Subsection A-1-1</h3>
188                    <h3 class="sub-section">Subsection A-1-2</h3>
189
190                    <h2 class="section">Section A-2</h2>
191                    <h3 class="sub-section">Subsection A-2-1</h3>
192
193                    <h1 class="chapter">Chapter B</h1>
194                    <h2 class="section">Section B-1</h2>
195                    <h3 class="sub-section">Subsection B-1-1</h3>
196                </section>
197            </section>
198        </article>
199    </main>
200</body>
201</html>

Liées aux listes

Propriété list-style 

 1ul {
 2    list-style-type: circle; /* Empty circle bullets */
 3    list-style-position: inside; /* Position bullets inside the content area */
 4}
 5
 6ol {
 7    /* Uppercase Roman numerals with bullets positioned outside */
 8    list-style: upper-roman outside;
 9}
10
11.custom-list {
12    list-style-image: url('custom-bullet.png'); /* Custom image bullets */
13}

La propriété list-style est une propriété CSS utilisée pour spécifier le style des marqueurs de liste (puces) ou des numéros pour les éléments de listes HTML tels que <ul> et <ol>. Cette propriété vous permet de contrôler le style global de la liste, ce qui est utile pour personnaliser l’apparence des listes.

Dans cet exemple, les styles suivants sont appliqués.

  • ul : Les puces en cercles creux sont affichées à l’intérieur.
  • ol : Numérotation avec des chiffres romains en majuscules et les numéros sont affichés à l’extérieur.
  • Classe custom-list : L'image spécifiée est affichée comme une puce.

Structure de list-style

list-style est un raccourci pour les trois propriétés suivantes :

  • list-style-type : Spécifie le type de marqueur (puce ou numéro) pour les éléments de liste.
  • list-style-position : Spécifie si le marqueur est placé à l’intérieur (inside) ou à l’extérieur (outside) de l’élément de liste.
  • list-style-image : Spécifie une image à utiliser comme marqueur de liste.

Utilisation de base 

1ul {
2    list-style: square inside url('path/to/image.png');
3}

Ce code fonctionne comme suit :

  • list-style-type: square : Définit le type de marqueur sur une forme carrée.
  • list-style-position: inside : Le marqueur est affiché à l’intérieur de l’élément de liste.
  • list-style-image: url('path/to/image.png') : Utilise une image comme marqueur.

Explication des propriétés individuelles

list-style-type

list-style-type spécifie le type de marqueur pour la liste. Les styles disponibles dépendent du type de liste.

Exemple de valeur 
 1ul {
 2    /* Change list bullets to empty circles */
 3    list-style-type: circle;
 4}
 5
 6ol {
 7    /* Number list items with lowercase letters (a, b, c, ...) */
 8    list-style-type: lower-alpha;
 9}
10
11ol.roman-list {
12    /* Number list items with uppercase roman numerals (I, II, III, ...) */
13    list-style-type: upper-roman;
14}
  • none : Aucun marqueur n'est affiché.
  • disc (par défaut) : Un petit cercle noir.
  • circle : Un petit cercle vide (anneau).
  • square : Un petit carré.
  • decimal : Une liste numérotée comme 1, 2, 3, ....
  • lower-alpha : Alphabet en minuscules comme a, b, c, ....
  • upper-alpha : Alphabet en majuscules comme A, B, C, ....
  • lower-roman : Chiffres romains en minuscules comme i, ii, iii, ....
  • upper-roman : Chiffres romains en majuscules comme I, II, III, ....
list-style-position 
1ul {
2    list-style-position: inside;
3}

La propriété list-style-position précise si le marqueur (puce) est placé à l'extérieur ou à l'intérieur de l'élément de liste. list-style-position peut avoir les valeurs suivantes :.

  • outside : Les marqueurs sont placés à l'extérieur de l'élément de liste, et l'élément commence après le marqueur. C'est la valeur par défaut.
  • inside : Les marqueurs sont placés à l'intérieur de l'élément de liste et affichés comme partie du texte.
list-style-image 
1ul {
2    list-style-image: url('bullet.png'); /* Use an image as the list marker */
3}

La propriété list-style-image est utilisée lorsqu'une image est utilisée comme marqueur de liste. L'image est spécifiée en utilisant url(), et si l'image ne peut pas être chargée, le marqueur spécifié par list-style-type est affiché.

Propriété abrégée list-style 

1ul {
2    list-style: square inside url('bullet.png');
3}

La propriété list-style est une propriété abrégée qui permet de définir list-style-type, list-style-position et list-style-image en une seule fois. L'ordre est flexible, mais il est généralement écrit comme dans cet exemple. Dans ce cas, une puce carrée est affichée à l'intérieur de l'élément de liste, et une image est affichée comme marqueur.

Résumé

  • list-style est une propriété abrégée qui permet de spécifier l'apparence de la liste (type de marqueur, position, image personnalisée) en une seule fois.
  • Il est également possible de définir individuellement list-style-type, list-style-position, list-style-image.
  • Vous pouvez personnaliser de manière flexible les marqueurs de liste en fonction de la mise en page et du design.

Compteur CSS (counter()) 

 1/* Reset the counter */
 2dl {
 3    counter-reset: item;
 4}
 5
 6/* Apply the counter to list items */
 7dl dt::before {
 8    counter-increment: item; /* Increment the counter */
 9    content: counter(item) ". "; /* Display the counter */
10}

Vous pouvez utiliser les compteurs CSS pour numéroter automatiquement les éléments de liste ou des éléments spécifiques.

Création et initialisation des compteurs 

1/* Create and initialize the counter */
2ol {
3  counter-reset: section; /* Set the counter name to 'section' */
4}

Vous pouvez créer un compteur et le réinitialiser avec la propriété counter-reset.

Incrémentation des compteurs 

1/* Increment the counter and display it */
2li::before {
3  counter-increment: section; /* Increment the counter by 1 */
4  content: counter(section) ". "; /* Display the counter value */
5}

Vous incrémentez un compteur avec la propriété counter-increment et affichez la valeur du compteur avec la fonction counter.

counters()

La fonction counters en CSS est très utile pour gérer des compteurs personnalisés, comme la numérotation des éléments de liste ou le classement des paragraphes. Cette fonction peut concaténer plusieurs valeurs de compteurs avec une chaîne et les afficher dans le contenu CSS. Ici, nous expliquerons en détail l'utilisation de base de la fonction counters ainsi que des exemples d'application pratique.

Différences entre counter et counters

Les fonctions counter et counters sont utilisées pour afficher des valeurs de compteurs, mais elles présentent les différences suivantes.

  • counter : Récupère la valeur d'un compteur unique.
  • counters : Concatène plusieurs valeurs de compteurs avec un séparateur spécifié et les affiche.

Par exemple, si vous souhaitez utiliser des compteurs avec des éléments de liste imbriqués, vous pouvez utiliser la fonction counters pour les afficher en concaténant les compteurs parent et enfant.

Syntaxe de la fonction counters 

counters(<counter-name>, <string>);

La fonction counters est utilisée avec la syntaxe suivante.

  • <counter-name> : Spécifie le nom du compteur à utiliser.
  • <string> : Spécifie la chaîne à insérer entre chaque compteur (généralement un séparateur comme . ou -).

Exemple d'utilisation de la fonction counters

Ensuite, examinons un exemple d'utilisation de la fonction counters.

 1ol {
 2    list-style: none;
 3    counter-reset: list-counter;
 4}
 5
 6li {
 7    counter-increment: list-counter;
 8}
 9
10li::before {
11    content: counters(list-counter, ".") " ";
12}
  • Dans cet exemple, les compteurs parent et enfant sont concaténés pour une liste imbriquée à deux niveaux.
    • Le compteur list-counter est en cours de définition.
    • La fonction counters est utilisée pour concaténer et afficher le compteur de liste parent et le compteur de liste enfant.

Exemple avancé utilisant des compteurs à plusieurs niveaux

En utilisant la fonction counters, vous pouvez gérer de manière flexible des compteurs à plusieurs niveaux, tels qu'une numérotation personnalisée ou la numérotation des paragraphes. Par exemple, cela est utile lors de la création de documents incluant des chapitres et des sections.

 1article {
 2    counter-reset: chapter;
 3}
 4
 5h1.chapter {
 6    font-size: 1.2rem;
 7    counter-increment: chapter;
 8    counter-reset: section;
 9}
10
11h1.chapter::before {
12    content: counter(chapter) " ";
13}
14
15h2.section {
16    font-size: 1.1rem;
17    counter-increment: section;
18    counter-reset: sub-section;
19}
20
21h2.section::before {
22    content: counters(chapter, ".") "." counter(section) " ";
23}
24
25h3.sub-section {
26    font-size: 1rem;
27    counter-increment: sub-section;
28}
29
30h3.sub-section::before {
31    content: counters(chapter, ".") "." counter(section) "." counter(sub-section) " ";
32}

Dans ce code, les compteurs pour les chapitres (h1), les sections (h2) et les sous-sections (h3) sont chacun réinitialisés, et la fonction counters est utilisée pour concaténer chaque niveau.

Résumé

La fonction counters est très utile lorsque vous souhaitez personnaliser et afficher plusieurs compteurs de manière hiérarchique. En utilisant les compteurs CSS, vous pouvez personnaliser librement la numérotation des listes et des titres, donnant ainsi aux pages web une structure informative avancée.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Propriétés CSS liées à la décoration du modèle de boîtePropriétés CSS liées aux tableaux