La propriété list-style
est une propriété raccourcie qui définit en une seule déclaration les valeurs de trois propriétés liées aux listes :
//CSS
ul {
list-style: <list-style-type> || <list-style-position> || <list-style-image>;
}
Voici un exemple de syntaxe :
//CSS
ul {
list-style: square outside none;
}
Cette syntaxe est équivalente à la version “longue” :
//CSS
ul {
list-style-type: square;
list-style-position: outside;
list-style-image: none;
}
Dans la version raccourcie, si une valeur est omise elle revient à son état initial.
Valeurs de list-style-type
La propriété list-style-type
définit le type de liste c'est à dire le marqueur figurant devant la liste (point, nombre, etc.). Les mots-clés acceptés sont :
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-greek
lower-latin
upper-latin
armenian
georgian
lower-alpha
upper-alpha
none
Des valeurs nouvelles sont introduites dans CSS3, mais il n'y a pour l'instant aucune compatibilité.
La démo suivante présente un groupe de listes non ordonnées montrant le résultat de chaque mot-clé :
See the Pen list-style-type examples by Louis Lazaris (@impressivewebs) on CodePen.
La propriété list-style-type
s'applique à toutes les listes, et à tout élément défini avec display: list-item
.
La couleur du marqueur de liste sera la couleur de l'élément, définie via la propriété color
.
Valeurs de list-style-position
La propriété list-style-position
définit où positionner le marqueur de liste, elle accepte l'une des deux valeurs suivantes : “inside” ou “outside” (à l'intérieur/à l'extérieur). “Inside” indique que le marqueur est à l'intérieur du bloc (la “boîte”) contenant la liste, tandis que “outside” signifie que le marqueur n'est pas contenu dans le bloc contenant la liste. Ces deux valeurs sont montrées ci-dessous, avec une liste sans padding et une bordure rouge ajoutée :
See the Pen list-style-position examples by Louis Lazaris (@impressivewebs) on CodePen.
Valeurs de list-style-image
La propriété list-style-image
détermine si le marqueur de liste est une image et accepte une valeur de none
ou une URL pointant vers une image.
//CSS
ul {
list-style-image: url(images/bullet.png);
}
Autres démos
See the Pen HTML List Demos by Matt West (@matt-west) on CodePen.
(publicité)
Autres ressources à consulter sur ce sujet :
- MDN : list-style
- Codrops CSS Reference (en anglais)
- Spécification W3C (en anglais)
- Autres entrées du Dico CSS :
- display
Cet article est pour l'essentiel tiré de l'almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.
Sur l'auteur : Chris Coyier est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l'auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.
NdT : CSS-Tricks est un site ressource d'une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d'articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.
CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C'est aussi une source d'inspiration pour vos propres designs.