Explication détaillée des propriétés de style de liste CSS : list-style-type et list-style-image-tutoriel CSS-php.cn

Explication détaillée des propriétés de style de liste CSS : list-style-type et list-style-image

PHPz

Libérer： 2023-10-26 12:15:50

original

2866 Les gens l'ont consulté

CSS 列表样式属性详解：list-style-type 和 list-style-image

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;
}

Copier après la connexion

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");
}

Copier après la connexion

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>

Copier après la connexion

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!