Comment styliser des listes en utilisant CSS

Styliser les listes avec CSS

Les listes sont une partie très importante de nombreuses pages Web.

CSS peut les styliser en utilisant plusieurs propriétés.

list-style-typeest utilisé pour définir un marqueur prédéfini à utiliser par la liste:

li {
  list-style-type: square;
}

Nous avons beaucoup de valeurs possibles, que vous pouvez voir icihttps://developer.mozilla.org/en-US/docs/Web/CSS/list-style-typeavec des exemples de leur apparence. Certains des plus populaires sontdisc,circle,squareetnone.

list-style-imageest utilisé pour utiliser une image personnalisée comme marqueur, lorsqu'un marqueur prédéfini n'est pas approprié:

li {
  list-style-image: url(list-image.png);
}

list-style-positionvous permet d'ajouter le marqueuroutside(la valeur par défaut) ouinsidedu contenu de la liste, dans le flux de la page plutôt qu'en dehors de celle-ci

li {
  list-style-position: inside;
}

Lelist-styleLa propriété shorthand nous permet de spécifier toutes ces propriétés dans la même ligne:

li {
  list-style: url(list-image.png) inside;
}

Téléchargez mon gratuitManuel CSS


Plus de didacticiels CSS: