Style de liste CSS
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 y en a deux types de listes :
Liste non ordonnée - les éléments de la liste sont marqués par des 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 par des chiffres ou des les lettres
peuvent être stylisées davantage à l'aide de CSS et peuvent être marquées avec des images en tant qu'éléments de liste.
1． Symboles de liste
Les symboles de liste font référence aux symboles affichés devant chaque élément de la liste.
Le format de base est le suivant :
list-style-type : paramètre
Plage de valeurs du paramètre :
·disque : cercle
·cercle : cercle creux
·carré : carré
·décimal : nombre décimal
·minus-romain : chiffre romain minuscule
·supérieur - roman : chiffres romains majuscules
·alpha inférieur : lettres grecques minuscules
·alpha supérieur : lettres grecques majuscules
·aucun : aucun affichage de symbole
disque dans le paramètre est l'option par défaut.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>2． Symboles graphiques
Les symboles graphiques signifient que les puces de la liste originale peuvent être remplacées par des graphiques.
Le format de base est le suivant :
list-style-image : URL
URL est l'adresse du fichier graphique utilisé pour remplacer la puce, et vous pouvez utiliser une adresse relative ou une adresse absolue.
3． Position de la liste
Position de la liste décrit l'endroit où la liste est affichée.
Le format de base est le suivant :
list-style-position : paramètre
Plage de valeurs du paramètre :
·inside : affiché à l'intérieur du modèle BOX
·extérieur : affiché à l'extérieur du modèle BOX
Un nouveau concept apparaît ici : le modèle BOX. BOX fait référence à un conteneur qui contient des objets auxquels des règles de style sont appliquées. L'introduction détaillée sera donnée plus tard.
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 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul
{
list-style-image:url('../style/images/sqpurple.gif');
}
</style>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>南京</li>
</ul>
</body>
</html>L'exemple ci-dessus fonctionne L'affichage dans les navigateurs n'est pas du tout le même, 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 une solution de compatibilité des navigateurs. Le processus est le suivant
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li
{
background-image:url(../style/images/sqpurple.gif);
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
}
</style>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>南京</li>
</ul>
</body>
</html>Exemple d'explication :
ul:
Définissez le type de style de liste sur aucune balise d'élément de liste supprimée
Définissez le remplissage et la marge sur 0px (compatibilité du navigateur)
Tous les li dans ul :
Définissez l'URL de l'image, et configurez-le pour qu'il ne soit affiché qu'une seule fois (pas de répétitions)
Positionnez l'image là où vous en avez besoin (0px à gauche et 5px en haut et en bas)
Placez le texte dans la liste avec le remplissage- Attribut gauche
Attribut abrégé 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.
Si des valeurs de propriété abrégées sont utilisé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é.
Toutes les propriétés de la liste CSS
Propriétés 🎜>
attribut raccourci de style liste. Définissez tous les attributs utilisés pour les listes dans une instruction
List-Style-IMAGE pour définir l'image comme logo d'élément de liste.
list-style-position Définit la position de la marque de l'élément de liste dans la liste. .
section suivante