Styles de liste CSS
Nous avons appris précédemment dans le chapitre HTML :
1. 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 petites cases, etc.)
2. Oui Liste de séquence - Les éléments de la liste sont marqués par des chiffres ou des lettres
Jetons un coup d'œil aux listes en CSS.
Explication détaillée des styles ul et li en CSS
Les listes ul et li sont présentées en utilisant CSS Éléments couramment utilisés. En CSS, certains attributs contrôlent spécifiquement les performances de la liste. Les attributs couramment utilisés incluent les attributs de type de style de liste, les attributs d'image de style de liste, les attributs de position de style de liste et les attributs de style de liste.
1. attribut list-style-type
L'attribut list-style-type est utilisé pour définir les puces de la liste li, c'est la décoration en tête de la liste. L'attribut list-style-type est un attribut héritable. Sa structure syntaxique est la suivante : (Liste quelques valeurs d'attribut couramment utilisées)
list-style-type : none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper -roman
Il existe de nombreuses valeurs d'attributpour l'attribut list-style-type. Nous ne listons ici que quelques-unes des plus couramment utilisées.
aucun : n'utilisez pas de puces. disque : cercle plein. cercle : cercle creux. carré : carré plein. démique : chiffres arabes. alphabétique inférieur : lettres anglaises minuscules. alphabétique supérieur : lettres anglaises majuscules. inférieur-romain : chiffres romains minuscules. supérieur-romain : chiffres romains majuscules.
L'exemple de code pour utiliser l'attribut list-style-type est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
li{list-style-type:square;}
</style>
</head>
<body>
<ul>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>
</body>
</html>2. 🎜> L'attribut list-style-image est utilisé pour définir l'utilisation d'images au lieu de puces. C'est également un attribut héritable, et sa structure syntaxique est la suivante :
List-style-image:none/url
L'attribut list-style-image peut prendre deux valeurs :
aucun : aucune image de remplacement. url : Le chemin de l’image à remplacer.
Regardons un morceau de code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
li{list-style-image:url(http://php.cn/style/images/sqpurple.gif);}
</style>
</head>
<body>
<ul>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>
</body>
</html>
3. attribut list-style-position list-style L'attribut -position est un attribut utilisé pour définir la position d'affichage des puces dans la liste. C'est également un attribut héritable avec la structure syntaxique suivante :
list-style-position : inside/outside
inside : les puces sont placées dans le texte. outside : La puce est placée à l’extérieur du texte.
Exemples d'utilisation de l'attribut list-style-position sont les suivants :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
li{list-style-type:square;list-style-position:outside;}
</style>
</head>
<body>
<ul>
<li>这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。
这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。
这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
<li>这里是列表内容</li>
</ul>
</body>
</html>4. attribut list-style list- L'attribut style est un attribut qui définit de manière exhaustive le style li. C'est également un attribut héritable. La structure syntaxique est la suivante :
li-style:list-style-type/list-style-. image/list-style-position
Les positions de chaque valeur peuvent être échangées. Par exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
li{list-style:url( inside;}
</style>
</head>
<body>
<ul>
<li>这里是使用list-style属性的示例。请注意换行以后项目符号的位置。
这里是使用list-style属性的示例。请注意换行以后项目符号的位置。
这里是使用list-style属性的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
</ul>
</body>
</html>Solution de compatibilité des navigateurs
Également dans tous les navigateurs, l'exemple suivant affichera la balise d'image :
ul
{
list-style-type : aucun ;
padding : 0px;
marge : 0px;
}
ul li
{
image d'arrière-plan : url(sqpurple.gif);
répétition d'arrière-plan : non-répétition;
position d'arrière-plan : 0px 5px
padding -gauche : 14px ;
}
Explication de l'exemple :
ul:
Définissez le type de style de liste pour ne pas supprimer la balise d'élément de liste
définissez le remplissage et la marge sur 0px (compatibilité avec les navigateurs)
tous les li dans ul :
définissez l'URL de l'image et configurez-la pour qu'elle ne soit affichée qu'une seule fois (pas de doublons )
La position de l'image de positionnement dont vous avez besoin (0px à gauche et 5px en haut et en bas)
Utilisez l'attribut padding-left pour placer le texte dans la liste
