Mozilla's getting a new look. What do you think? http://www.surveygizmo.com/s3/3076876/Mozilla-Brand-Identity-Survey-MDN

personnaliser une liste

Brouillon
Cette page n'est pas terminée.

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.

Les listes HTML sont des structures très simples et se trouvent sous deux formes différentes : ordonnée ou non. Elles utilisent les balises <ul>, <ol>, et <li>. Vous trouverez tous les détails dans notre article dédié, mais pour le reste de cet article, nous utiliserons le code HTML suivant pour appliquer les styles :

<ul>
  <li>Je suis un élément de liste</li>
  <li>Je suis un autre élément de liste</li>
  <li>
    <ul>
      <li>Je suis un élément de liste imbriqué</li>
      <li>Je suis un autre élément de liste imbriqué</li>
    </ul>
  </li>
</ul>

Styles dédiés

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

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

En complément, les CSS permettent également d'avoir des styles de compteurs personnalisés qui vont très bien avec les listes.

Les styles de compteurs ne seront pas abordés dans cet article. Si vous souhaitez approfondir ce sujet, nous avons à votre disposition un article dédié.

Indentation de liste

Puces personnalisées

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : xdelatour
 Dernière mise à jour par : xdelatour,