Styler les listes
Type de marqueur
Le marqueur est la puce ou le nombre qui est utilisé pour identifier chaque élément dans une liste ordonnée ou non ordonnée. Pour chaque type de liste, on peut changer ce marqueur pour y mettre autre chose. On pourrait effectivement changer la puce pour y mettre un carré au lieu d'un cercle ou encore numéroté une liste ordonnée avec des lettres au lieu des chiffres.
Pour y arriver, nous utiliserons la propriété CSS list-style-type.
Pour voir la liste complète des valeurs disponibles, vous pouvez consulter le site web suivant:
Image comme marqueur
Pour les balises <ul>, il est parfois voulu de mettre une image au lieu de mettre l'une des puces typiques du navigateur. Pour ce faire, nous utiliserons la propriété CSS list-style-image.
Position du marqueur
Par défaut, les marqueurs dans une liste se retrouve à l'extérieur de la balise <li>. Il sont par défaut placé dans le padding de la balise <ul> ou <ol>. Nous pouvons toutefois changer ce comportement par défaut avec le propriété list‑style‑position.
Les 2 valeurs acceptées sont outside (valeur par défaut) ou inside. La valeur inside rend le marqueur plus facile à déplacer, mais complique l'alignement du texte si celui-ci s'étire sur plusieurs lignes.
Propriété tout-en-un
En général, en CSS, il existe une propriété tout-en-un pour configurer différents types d'élément. C'est le cas des listes. Il existe donc une propriété nous permettant de spécifier le type, l'image et la position du marqueur dans une seule et même ligne de CSS. Cette propriété est list-style.
Voici comment l'utiliser:
Vous pouvez avoir plus d'information sur cette propriété ici: