files/fr/conflicting/learn/css/styling_text/styling_lists/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

---
title: personnaliser une liste
slug: conflicting/Learn/CSS/Styling_text/Styling_lists
translation_of: Learn/CSS/Styling_text/Styling_lists
translation_of_original: Learn/CSS/Howto/customize_a_list
original_slug: Apprendre/CSS/Comment/personnaliser_une_liste
---
<p>{{draft}}</p>

<p class="summary">Les listes sont des structures très répandues en HTML et les CSS apportent un ensemble complet de propriétés pour leur donner l'apparence que vous voulez. Comprendre comment utiliser et modifier les styles par défaut est une compétence ordinaire dont vous aurez besoin dès que vous utiliserez les listes.</p>

<p>Les listes {{Glossary("HTML")}} sont des structures très simples et se trouvent sous deux formes différentes : ordonnée ou non. Elles utilisent les balises {{HTMLElement('ul')}}, {{HTMLElement('ol')}}, et {{HTMLElement('li')}}. Vous trouverez tous les détails dans <a href="/fr/Apprendre/HTML/Comment/Créer_une_liste_d_éléments_avec_HTML">notre article dédié</a>, mais pour le reste de cet article, nous utiliserons le code HTML suivant pour appliquer les styles :</p>

<pre class="brush: html">&lt;ul&gt;
  &lt;li&gt;Je suis un élément de liste&lt;/li&gt;
  &lt;li&gt;Je suis un autre élément de liste&lt;/li&gt;
  &lt;li&gt;
    &lt;ul&gt;
      &lt;li&gt;Je suis un élément de liste imbriqué&lt;/li&gt;
      &lt;li&gt;Je suis un autre élément de liste imbriqué&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;</pre>

<h2 id="Styles_dédiés">Styles dédiés</h2>

<p>Les CSS fournissent un jeu complet de propriétés pour gérer les puces :</p>

<ul>
 <li>{{cssxref('list-style')}}<br>
  Une propriété qui regroupe la gestion de toutes les propriétés suivantes</li>
 <li>{{cssxref('list-style-type')}}<br>
  Le type de puce à afficher au début de chaque élément de liste</li>
 <li>{{cssxref('list-style-position')}}<br>
  Indique si la puce doit être affichée à l'intérieur ou à l'extérieur de la boîte encadrant l'élement de liste.</li>
 <li>{{cssxref('list-style-image')}}<br>
  Permet d'utiliser une image personnalisée au lieu d'un type de puce prédéfini.</li>
</ul>

<p>En complément, les CSS permettent également d'avoir des <a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters">styles de compteurs personnalisés</a> qui vont très bien avec les listes.</p>

<div class="note">
<p>Les styles de compteurs ne seront pas abordés dans cet article. Si vous souhaitez approfondir ce sujet, nous avons à votre disposition <a href="/fr/docs/Web/CSS/Compteurs_CSS">un article dédié</a>.</p>
</div>

<h2 id="Indentation_de_liste">Indentation de liste</h2>

<h2 id="Puces_personnalisées">Puces personnalisées</h2>