Listes en CSS
HTML vous donne ul et ol. CSS décide comment ces listes paraissent — puces rondes, carrés, chiffres, lettres, ou aucun marqueur quand vous construisez un menu de navigation.
Une boîte à outils list-style
📊 Styles de liste en un coup d’œil
| Propriété | Rôle au quotidien |
|---|---|
list-style-type |
Forme du marqueur ou style de numérotation (disc, square, decimal…) |
list-style-position |
Marqueur à l’intérieur ou à l’extérieur de la boîte de contenu |
list-style-image |
Utiliser une image comme marqueur |
list-style |
Raccourci pour type, position et image |
list-style: none |
Retirer les marqueurs (courant pour les menus de nav) |
Les marqueurs appartiennent à l’élément de liste, mais vous posez souvent les styles sur ul ou ol pour que chaque li hérite du même aspect.
Types de puces
Les listes non ordonnées commencent souvent par disc. Passez à circle ou square quand le design veut une marque plus calme ou plus nette.
Types de marqueurs de puce
cssul.features {
list-style-type: square;
}
ul.notes {
list-style-type: circle;
}Listes numérotées et lettrées
Les listes ordonnées utilisent des styles de numérotation. decimal est le choix du quotidien ; lower-alpha ou upper-roman conviennent aux plans et étapes formelles.
Types de liste ordonnée
cssol.steps {
list-style-type: decimal;
}
ol.outline {
list-style-type: lower-alpha;
}Position du marqueur — dedans ou dehors
list-style-position: outside (valeur habituelle) place le marqueur dans la marge. inside le glisse dans le flux du texte — utile dans les cartes étroites.
Marqueurs dans le flux
cssul.card-list {
list-style-position: inside;
padding-left: 0;
}Retirer les marqueurs pour les menus
Les listes de navigation veulent rarement des puces. list-style: none les efface — puis ajoutez votre espacement avec padding/margin.
Liste de nav propre
cssnav ul {
list-style: none;
margin: 0;
padding: 0;
}Marqueurs image et raccourci
Une petite image peut remplacer la puce. Préférez des assets minuscules. Le raccourci list-style peut fixer type, position et image en une ligne.
Marqueur image + raccourci
cssul.custom {
list-style: square outside none;
}
ul.icons {
list-style-image: url("/icons/check.svg");
}Une habitude calme pour les listes
Choisissez un style de marqueur clair par liste, gardez les images petites, et après none pour les menus, réinitialisez le padding pour un alignement propre.
Liste d’article lisible
cssarticle ul {
list-style-type: disc;
list-style-position: outside;
padding-left: 1.25rem;
line-height: 1.6;
}À vous de jouer
- Passez un
ulenlist-style-type: square. - Stylez un
olaveclower-alpha. - Mettez
list-style-position: insidesur une courte liste de carte. - Enlevez les puces d’un
nav ulaveclist-style: noneet padding zéro. - Essayez un petit
list-style-image, puis revenez à un type si l’image échoue.
Erreurs fréquentes
- S’attendre que
colorsurliseul restylise partout les marqueurs personnalisés - Utiliser
list-style: nonemais laisser un grand padding par défaut cassé - Fichiers
list-style-imageénormes qui dominent la ligne - Numéroter un
ulen CSS au lieu d’unolsémantique quand l’ordre compte - Mélanger cette leçon avec les états hover/visited des liens (session précédente)
Résumé
list-style-typechoisit puces ou styles de numérotationlist-style-positionplace les marqueurs dedans ou dehorslist-style: noneefface les marqueurs pour les menuslist-style-imageet le raccourcilist-styleajoutent des options- Gardez des marqueurs calmes et un padding intentionnel après suppression des puces
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut