Liste CSS
Liste CSS
Les propriétés de la liste CSS fonctionnent comme suit :
Définir les différents éléments de la liste à marquer comme liste ordonnée
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 de graphiques spéciaux (tels que des petits points noirs, des petites cases, etc.)
Liste ordonnée : les éléments de la liste sont marqués de chiffres ou de lettres
En utilisant CSS, vous pouvez répertorier d'autres styles et 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 :
Exemple
<!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>香蕉</li>
<li>苹果</li>
<li>橙子</li>
</ul>
<ul class="b">
<li>香蕉</li>
<li>苹果</li>
<li>橙子</li>
</ul>
<p>有序列表实例:</p>
<ol class="c">
<li>香蕉</li>
<li>苹果</li>
<li>橙子</li>
</ol>
<ol class="d">
<li>香蕉</li>
<li>苹果</li>
<li>橙子</li>
</ol>
</body>
</html>Exécutez le programme pour l'essayer
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('/upload/course/000/000/006/580870246427d963.jpg');
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>Exécutez le programme et essayez-le
Instance
Toutes les différentes balises d'éléments de liste
<!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: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:katagana-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>
<p>不同的列表项标记</p>
<ul class="a">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ul>
<ul class="b">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ul>
<ul class="c">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ul>
<ol class="d">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="e">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="f">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="g">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="h">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="i">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="j">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="k">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="l">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="m">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="n">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="o">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="p">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="q">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="r">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="s">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="t">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="u">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
<ol class="v">
<li>香蕉</li>
<li>苹果</li>
<li>梨子</li>
</ol>
</body>
</html>Exécutez le programme pour l'essayer
Propriétés de la liste CSS
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中 |
| list-style-image | 将图象设置为列表项标志。 |
| list-style-position | 设置列表中列表项标志的位置。 |
| list-style-type | 设置列表项标志的类型。 |
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
