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
  1. Élément A
  2. Élément B
  3. É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

Vous avez raté! Essayer à nouveau.

Image de l'article Tableaux de style en CSS

Page suivante de lebook gratuit :

14Tableaux de style en CSS

2 minutes

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 !

Get it on Google Play Get it on App Store

+ 6,5 millions
d'étudiants

Certificat gratuit et
valide avec QR Code

48 mille exercices
gratuits

Note de 4,8/5 dans les
magasins d'applications

Cours gratuits en
vidéo, audio et texte