Listes CSS
Listes non ordonnées :
- Café
- Thé
- du Coca
- Café
- Thé
- du Coca
Listes ordonnées :
- Café
- Thé
- du Coca
- Café
- Thé
- du Coca
Listes HTML et propriétés de liste CSS
En HTML, il existe deux principaux types de listes :
- listes non ordonnées (<ul>) - les éléments de la liste sont marqués par des puces
- listes ordonnées (<ol>) - les éléments de la liste sont marqués par des chiffres ou des lettres
Les propriétés de la liste CSS vous permettent de :
- Définir différents marqueurs d'élément de liste pour les listes ordonnées
- Définir différents marqueurs d'élément de liste pour les listes non ordonnées
- Définir une image comme marqueur d'élément de liste
- Ajouter des couleurs d'arrière-plan aux listes et aux éléments de liste
Différents marqueurs d'éléments de liste
La list-style-typepropriété spécifie le type de marqueur d'élément de liste.
L'exemple suivant montre certains des marqueurs d'élément de liste disponibles :
Exemple
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
Remarque : Certaines des valeurs sont pour des listes non ordonnées et d'autres pour des listes ordonnées.
Une image comme marqueur d'élément de liste
La list-style-imagepropriété spécifie une image comme marqueur d'élément de liste :
Exemple
ul
{
list-style-image: url('sqpurple.gif');
}
Positionner les marqueurs d'éléments de la liste
La list-style-positionpropriété spécifie la position des marqueurs d'éléments de liste (puces).
"position de style de liste : extérieur ;" signifie que les puces seront en dehors de l'élément de liste. Le début de chaque ligne d'un élément de liste sera aligné verticalement. C'est par défaut :
- Café - Une boisson infusée préparée à partir de grains de café torréfiés...
- Thé
- du Coca
"position de style de liste : à l'intérieur ;" signifie que les puces seront à l'intérieur de l'élément de liste. Comme il fait partie de l'élément de liste, il fera partie du texte et poussera le texte au début :
- Café - Une boisson infusée préparée à partir de grains de café torréfiés...
- Thé
- du Coca
Exemple
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
Supprimer les paramètres par défaut
La list-style-type:nonepropriété peut également être utilisée pour supprimer les marqueurs/puces. Notez que la liste a également une marge et un remplissage par défaut. Pour le supprimer, ajoutez margin:0et padding:0à <ul> ou <ol> :
Exemple
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Liste - Propriété abrégée
La list-stylepropriété est une propriété abrégée. Il est utilisé pour définir toutes les propriétés de la liste dans une seule déclaration :
Exemple
ul
{
list-style: square inside url("sqpurple.gif");
}
Lors de l'utilisation de la propriété abrégée, l'ordre des valeurs de propriété est :
list-style-type(si une image de style de liste est spécifiée, la valeur de cette propriété sera affichée si l'image ne peut pas être affichée pour une raison quelconque)list-style-position(spécifie si les marqueurs d'élément de liste doivent apparaître à l'intérieur ou à l'extérieur du flux de contenu)list-style-image(spécifie une image comme marqueur d'élément de liste)
Si l'une des valeurs de propriété ci-dessus est manquante, la valeur par défaut de la propriété manquante sera insérée, le cas échéant.
Liste de style avec des couleurs
Nous pouvons également styliser les listes avec des couleurs, pour les rendre un peu plus intéressantes.
Tout ce qui est ajouté à la balise <ol> ou <ul> affecte la liste entière, tandis que les propriétés ajoutées à la balise <li> affecteront les éléments individuels de la liste :
Exemple
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background:
#ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background:
#cce5ff;
margin: 5px;
}
Résultat:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
Plus d'exemples
Cet exemple montre comment créer une liste avec une bordure gauche rouge.
Cet exemple montre comment créer une liste bordée sans puces.
Cet exemple illustre tous les différents marqueurs d'élément de liste en CSS.
Toutes les propriétés de la liste CSS
| Property | Description |
|---|---|
| list-style | Sets all the properties for a list in one declaration |
| list-style-image | Specifies an image as the list-item marker |
| list-style-position | Specifies the position of the list-item markers (bullet points) |
| list-style-type | Specifies the type of list-item marker |