Il existe trois types de liste différents en HTML :
Consultez le tutoriel sur les listes HTML pour en savoir plus sur les listes et comment les créer.
CSS fournit plusieurs propriétés pour styliser et formater les listes non ordonnées et ordonnées les plus couramment utilisées. Ces propriétés de liste CSS vous permettent généralement de :
Dans la section suivante, nous discuterons des propriétés qui peuvent être utilisées pour styliser les listes HTML.
Par défaut, les éléments d'une liste ordonnée sont numérotés avec des chiffres arabes (1, 2, 3, 5, etc.), tandis que dans une liste non ordonnée , les éléments sont marqués de puces rondes (•).
Mais, vous pouvez changer ce type de marqueur de liste par défaut en n'importe quel autre type tel que des chiffres romains, des lettres latines, un cercle, un carré, etc. en utilisant la propriété list-style-type.
Essayons l'exemple suivant pour comprendre comment cette propriété fonctionne réellement :
ul {
list-style-type: square;
}
ol {
list-style-type: upper-roman;
}
Par défaut, les marqueurs de chaque élément de la liste sont positionnés en dehors (outside) de leurs boîtes d'affichage.
Cependant, vous pouvez également positionner ces marqueurs ou puces à l'intérieur des zones d'affichage de l'élément de liste en utilisant la propriété list-style-position avec la valeur inside. Dans ce cas, les lignes s'enrouleront sous le marqueur au lieu d'être en retrait. Voici un exemple :
ol.in li {
list-style-position: inside;
}
ol.out li {
list-style-position: outside;
}
Examinons l'illustration suivante pour comprendre comment les marqueurs ou les puces sont positionnés.
Vous pouvez également définir une image comme marqueur de liste à l'aide de la propriété list-style-image.
La règle de style dans l'exemple suivant affecte une image PNG transparente "arrow.png" comme marqueur de liste pour tous les éléments de la liste non triée. Essayons-le et voyons comment cela fonctionne :
ul li {
list-style-image: url("images/arrow.png");
}
Parfois, la propriété list-style-image peut ne pas produire la sortie attendue. Alternativement, vous pouvez utiliser la solution suivante pour un meilleur contrôle du positionnement des marqueurs d'image.
Pour contourner le problème, vous pouvez également définir des puces d'image via la propriété CSS background-image. Tout d'abord, définissez la liste pour qu'elle n'ait pas de puces. Ensuite, définissez une image d'arrière-plan non répétitive pour l'élément de liste.
L'exemple suivant affiche les marqueurs d'image de la même manière dans tous les navigateurs :
ul {
list-style-type: none;
}
ul li {
background-image: url("images/arrow.png");
background-position: 0px 5px; /* X-pos Y-pos (from top-left) */
background-repeat: no-repeat;
padding-left: 20px;
}
La propriété list-style est une propriété abrégée permettant de définir les trois propriétés list-style-type, list-style-image et list-style-position d'une liste en un seul endroit.
La règle de style suivante définit toutes les propriétés de la liste dans une seule déclaration.
ul {
list-style: square inside url("images/arrow.png");
}
Remarque : Lors de l'utilisation de la propriété abrégée list-style, les ordres des valeurs sont : list-style-type| list-style-position| list-style-image. Peu importe si l'une des valeurs ci-dessus est manquante tant que les autres sont dans l'ordre spécifié.
Les listes HTML sont fréquemment utilisées pour créer une barre de navigation horizontale ou un menu qui apparaît généralement en haut d'un site Web. Mais comme les éléments de la liste sont des éléments de bloc, pour les afficher en ligne, nous devons utiliser la propriété CSS display. Essayons un exemple pour voir comment cela fonctionne vraiment :
ul {
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li {
display: inline-block;
}
ul li a {
display: block;
padding: 10px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #939393;
}
Vous en apprendrez plus sur la propriété display CSS et les propriétés padding dans les prochains chapitres.