Style de liste CSS (ul)
Liste CSS
Les propriétés de la liste CSS fonctionnent comme suit :
Définir différents éléments de liste à marquer comme listes ordonnées
Définir différents éléments de liste marqués comme liste non ordonnée
Définir les éléments de liste marqués comme images
Liste
En HTML, il existe deux types de listes :
Liste non ordonnée - les éléments de la liste sont marqués par des graphiques spéciaux (tels que de petits points noirs, de petits boîtes, etc.)
Listes ordonnées - les éléments de la liste sont étiquetés avec des chiffres ou des lettres
En utilisant CSS, un style supplémentaire de la liste peut être terminé, et vous pouvez utiliser des images comme marqueurs d’éléments de liste.
Différentes balises d'élément de liste
L'attribut list-style-type spécifie le type de balise d'élément de liste :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
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;}
</style>
</head>
<body>
<p>无序列表实例:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>有序列表实例:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Certaines valeurs sont des listes non ordonnées, et d'autres sont des listes ordonnées.
Image comme marqueur d'élément de liste
Pour spécifier une image comme marqueur d'élément de liste, utilisez l'attribut d'image de style de liste :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
ul
{
list-style-image:url('http://img.php.cn/upload/article/000/000/015/5c67daf64b661194.gif');
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
L'exemple ci-dessus n'affiche pas la même chose dans tous les navigateurs, IE et Opera affichent des balises d'image un peu plus hautes que Firefox, Chrome et Safari.
Si vous souhaitez placer le même logo d'image dans tous les navigateurs, vous devez utiliser la solution de compatibilité des navigateurs. Le processus est le suivant
Solution de compatibilité des navigateurs
Également dans tous. navigateurs, l'exemple suivant affichera le balisage de l'image :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li
{
background-image:url("http://img.php.cn/upload/article/000/000/015/5c67daf64b661194.gif");
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>Exécution de l'instance»
Cliquez sur "Exécuter Bouton "Instance" pour afficher l'instance en ligne
Exemple d'explication :
ul :
Définir type de style de liste pour ne pas supprimer la balise d'élément de liste
Définir le remplissage et la marge sur 0px (compatibilité du navigateur)
Tous les li dans ul :
Définissez l'URL de l'image et configurez-la pour qu'elle soit affichée une seule fois (pas de duplication)
ce dont vous avez besoin Position l'image (0px à gauche et 5px en haut et en bas)
Utilisez l'attribut padding-left pour placer le texte dans la liste
Attributs abrégés de liste
Tous les attributs de liste peuvent être spécifiés dans un seul attribut. C'est ce qu'on appelle un attribut d'abréviation.
Utilisez l'attribut d'abréviation pour la liste, et l'attribut de style de liste est défini comme suit :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
ul
{
list-style:square url("http://img.php.cn/upload/article/000/000/015/5c67daf64b661194.gif");
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Si vous utilisez des valeurs d'attribut abrégées, l'ordre est :
list-style-type
list-style-position (voir le tableau des propriétés CSS ci-dessous pour les instructions)
list-style-image
Peu importe si l'une des valeurs ci-dessus est manquante et que les autres sont toujours dans l'ordre spécifié.
Plus d'instances
Instances : tous les marqueurs d'éléments de liste différents
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:disc;}
ul.c {list-style-type:square;}
ol.d {list-style-type:armenian;}
ol.e {list-style-type:cjk-ideographic;}
ol.f {list-style-type:decimal;}
ol.g {list-style-type:decimal-leading-zero;}
ol.h {list-style-type:georgian;}
ol.i {list-style-type:hebrew;}
ol.j {list-style-type:hiragana;}
ol.k {list-style-type:hiragana-iroha;}
ol.l {list-style-type:katakana;}
ol.m {list-style-type:katakana-iroha;}
ol.n {list-style-type:lower-alpha;}
ol.o {list-style-type:lower-greek;}
ol.p {list-style-type:lower-latin;}
ol.q {list-style-type:lower-roman;}
ol.r {list-style-type:upper-alpha;}
ol.s {list-style-type:upper-latin;}
ol.t {list-style-type:upper-roman;}
ol.u {list-style-type:none;}
ol.v {list-style-type:inherit;}
</style>
</head>
<body>
<ul class="a">
<li>Circle type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Disc type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="c">
<li>Square type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ol class="d">
<li>Armenian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="e">
<li>Cjk-ideographic type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="f">
<li>Decimal type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="g">
<li>Decimal-leading-zero type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="h">
<li>Georgian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="i">
<li>Hebrew type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="j">
<li>Hiragana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="k">
<li>Hiragana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="l">
<li>Katakana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="m">
<li>Katakana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="n">
<li>Lower-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="o">
<li>Lower-greek type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="p">
<li>Lower-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="q">
<li>Lower-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="r">
<li>Upper-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="s">
<li>Upper-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="t">
<li>Upper-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="u">
<li>None type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="v">
<li>inherit type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>Exécuter Exemple ?
Cliquez sur le bouton « Exécuter l'exemple » pour afficher un exemple en ligne
Cet exemple montre tous les différents balisages d'éléments de liste CSS.
Toutes les propriétés de la liste CSS
| Propriété | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
list-style
| Attribut d'abréviation. Utilisé pour définir toutes les propriétés d'une liste dans une seule instruction | ||||||||||
| list-style-image<🎜> | Définit l'image comme indicateur d'élément de liste. | ||||||||||
| list-style-position<🎜> | Définissez la position de la marque de l'élément de liste dans la liste. | ||||||||||
| list-style-type<🎜> | Définissez le type d'indicateur d'élément de liste. |
