Les listes sont des éléments très courants sur les pages Web et nous devons souvent les styliser pour qu'ils correspondent à la conception du site. Heureusement, CSS nous offre de nombreuses options pour personnaliser l'apparence de nos listes.
La première chose que nous pouvons faire est de changer le style des puces dans les listes. Par défaut, les listes non ordonnées utilisent une puce circulaire et les listes ordonnées utilisent des nombres. Mais nous pouvons changer cela en utilisant la propriété "list-style-type". Par exemple, pour utiliser une puce carrée dans une liste non ordonnée, nous pouvons procéder comme suit :
```html
Élément 1
Point 2
Point 3
```
Pour utiliser des majuscules au lieu de chiffres dans une liste triée, nous pouvons utiliser la valeur "alpha supérieur":
```html
Élément A
Élément B
Élément C
```
De plus, nous pouvons supprimer complètement les puces des listes en utilisant la valeur "none":
```html
Élément 1
Point 2
Point 3
```
Une autre propriété utile pour styliser les listes est "list-style-position". Par défaut, les puces sont à gauche du texte de l'élément de la liste, mais nous pouvons les déplacer vers la droite en utilisant la valeur "inside". Cela peut être utile, par exemple, si nous voulons créer une liste de liens qui est alignée à droite de la page :
```html
```
Enfin, nous pouvons également styliser les éléments de la liste eux-mêmes, en utilisant les propriétés CSS que nous connaissons déjà, telles que "color", "font-size", "background-color", etc. Par exemple, pour créer une liste avec un fond gris et du texte blanc, nous pouvons procéder comme suit :
```html
Élément 1
Point 2
Point 3
```
En résumé, le style de liste CSS est assez polyvalent et nous permet de créer des listes avec différents styles et mises en page. Cela vaut la peine d'explorer les options disponibles et d'expérimenter différentes combinaisons pour trouver celle qui convient le mieux à notre projet.
Répondez maintenant à l’exercice sur le contenu :
_Quelle propriété CSS pouvons-nous utiliser pour changer le style des puces dans les listes ?
Tu as raison! Félicitations, passez maintenant à la page suivante
Obtenez votre certificat pour ce cours gratuitement ! en téléchargeant lapplication Cursa et en lisant lebook qui sy trouve. Disponible sur Google Play ou App Store !
