Maison > Article > interface Web > Explication détaillée des propriétés de style de liste CSS : list-style-type et list-style-image
Explication détaillée des propriétés de style de liste CSS : list-style-type et list-style-image
- PHPzoriginal
- 2023-10-26 12:15:502618parcourir
Explication détaillée des attributs de style de liste CSS : list-style-type et list-style-image
Dans la conception Web, la liste est un élément fréquemment utilisé, qui peut présenter clairement une série de contenus associés. Afin de rendre la présentation de la liste plus belle et plus cohérente avec le thème de la page Web, CSS fournit certaines propriétés pour contrôler le style de la liste. Parmi eux, les attributs couramment utilisés incluent list-style-type et list-style-image.
- attribut list-style-type
l'attribut list-style-type est utilisé pour définir le type de balise devant l'élément de liste. Il peut avoir les valeurs suivantes :
- disque : point plein (valeur par défaut)
- cercle : point creux
- carré : carré plein
- aucun : pas de marque
- décimal : nombre (augmentant de 1)
- décimal- zéro non significatif : nombres sans zéro (les nombres inférieurs à 10 commenceront par 0)
- minuscule romain : chiffres romains minuscules (i, ii, iii)
- majuscule romain : chiffres romains majuscules (I, II, III)
- alpha inférieur : lettres minuscules (a, b, c)
- alpha supérieur : lettres majuscules (A, B, C)
- grec inférieur : lettres grecques minuscules
- grec supérieur : lettre grecque majuscule
Par exemple, nous voulons changer la marque devant l'élément de liste d'une liste non ordonnée en un carré plein :
ul {
list-style-type: square;
}- attribut list-style-image
l'attribut list-style-image peut être utilisé pour définir le devant l'élément de liste. La balise est une image personnalisée. Vous pouvez utiliser la fonction URL() pour référencer un fichier image en tant que balisage. L'exemple de code est le suivant :
ul {
list-style-image: url("marker.png");
}Le code ci-dessus changera la marque devant l'élément de la liste non ordonnée en l'image "marker.png".
Il convient de noter que l'attribut list-style-image remplacera le paramètre de l'attribut list-style-type, c'est-à-dire lorsque list-style-type et list-style-image sont définis pour un élément de liste, seule l'image de style liste prend effet.
- Exemple
Voici un exemple complet montrant comment utiliser les attributs list-style-type et list-style-image pour personnaliser le style de la liste :
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url("marker.png");
}
ol {
list-style-type: lower-roman;
}
</style>
</head>
<body>
<h2>无序列表</h2>
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
</ul>
<h2>有序列表</h2>
<ol>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
</ol>
</body>
</html>Dans le code ci-dessus, la balise devant la liste élément de la liste non ordonnée Cette image est définie sur "marker.png" via la propriété list-style-image ; le marqueur devant l'élément de liste dans la liste ordonnée est défini sur des chiffres romains minuscules via la propriété list-style-type .
En résumé, en utilisant les attributs list-style-type et list-style-image, nous pouvons facilement personnaliser le style des éléments de la liste pour rendre la liste plus personnalisée et plus belle sur la page Web. Ce qui précède est une analyse détaillée des propriétés de style de liste CSS. J'espère que cela vous sera utile !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!