- café
- thé
- Coca Cola
- café
- thé
- Coca Cola
Listes de HTML et des propriétés de liste CSS
En HTML, il existe deux principaux types de listes:
- listes à puces (<ul>) - éléments de la liste sont marqués par balles
- listes ordonnées (<ol>) - éléments de la liste sont marqués par des chiffres ou des lettres
Les propriétés de liste de CSS vous permettent de:
- Définissez différents marqueurs d'élément de liste pour les listes ordonnées
- Définissez différents marqueurs d'élément de liste pour les listes à puces
- Définir une image comme marqueur d'élément de liste
- Ajouter les couleurs de fond sur les listes et les éléments de liste
Différents marqueurs Liste de l'article
La list-style-type propriété spécifie le type de marqueur d'élément de liste.
L'exemple suivant montre une partie de la liste disponible marqueurs:
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;
} Essayez - le vous - même » Remarque: Certaines valeurs sont pour les listes à puces, et d'autres pour les listes ordonnées.
Une image comme The Marker Liste des objets
La list-style-image propriété spécifie une image comme marqueur d'élément de liste:
Placez les marqueurs Liste de l'article
La list-style-position propriété spécifie si les marqueurs list-item devraient apparaître à l' intérieur ou à l' extérieur du flux de contenu:
Liste - propriété Shorthand
La list-style propriété est une propriété raccourcie. Il est utilisé pour définir toutes les propriétés de la liste dans une déclaration:
Lorsque vous utilisez la propriété raccourcie, l'ordre des valeurs de propriété sont:
-
list-style-type(si une liste-style-image est spécifiée, la valeur de cette propriété sera affiché si l'image pour une raison quelconque ne peut pas être affiché) -
list-style-position(spécifie si les marqueurs list-item devraient 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 sont manquantes, la valeur par défaut pour la propriété manquante sera insérée, le cas échéant.
Styling Liste Avec Couleurs
Nous pouvons également des listes de style avec des couleurs, pour les rendre un peu plus intéressant.
Tout ajouté à la <ol> ou <ul> tag, affecte la totalité de la liste, tandis que les propriétés ajoutées à la <li> tag aura une incidence sur 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
Autres exemples
Pleine largeur liste bordée
Cet exemple montre comment créer une liste bordée sans balles.
Tous les différents marqueurs list-item pour les listes
Cet exemple montre tous les différents marqueurs list-item en CSS.
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 »
Tous Liste des Propriétés CSS
| Propriété | La description |
|---|---|
| list-style | Définit toutes les propriétés pour une liste dans une déclaration |
| list-style-image | Indique une image comme marqueur list-item |
| list-style-position | Indique si les marqueurs list-item devraient apparaître à l'intérieur ou à l'extérieur du flux de contenu |
| list-style-type | Indique le type de marqueur list-item |