Résumé des connaissances communes sur la mise en page CSS (style de liste)

Il y a beaucoup de connaissances en CSS, et il nous est impossible de tout retenir. Pendant mon temps libre, j'ai compilé quelques connaissances communes sur la mise en page CSS. Cet article partagera avec vous les connaissances communes sur le style de liste CSS. Les amis dans le besoin peuvent s'y référer, j'espère que cela pourra vous aider.

1. Liste non ordonnée

Une liste non ordonnée signifie que les symboles de colonne sont des points ou d'autres graphiques au lieu de chiffres. La syntaxe de la liste non ordonnée est :

<ul>
    <li>**</li>
    <li>**</li>
    ......
</ul>

La fonction de ul est d'indiquer que la liste qu'il contient est une liste non ordonnée, et chaque groupe de li est utilisé pour contenir un élément de liste.

2. Liste ordonnée

Le symbole de la liste ordonnée est un nombre. La syntaxe d'une liste ordonnée est :

<ol>
    <li>**</li>
    <li>**</li>
    ......
</ol>

La fonction de ol est d'indiquer que la liste qu'elle contient est une liste ordonnée, et chaque groupe de li est utilisé pour contenir un élément de liste.

3. Liste de définitions

La liste de définitions apparaît rarement utilisée. Sa syntaxe est :

<dl>
   <dt>
      <dd>**</dd>
   </dt>
   ......
</dl>

La fonction de dl est d'expliquer. La liste qu'il contient est une liste de définitions. Généralement, dt définit un concept et dd est l'explication du concept.

4. Changer le style des symboles de liste

CSS fournit les attributs list-style-type, list-style-image, list-style-position pour changer le style. du style des symboles de liste.

Utilisez le symbole de liste intégré

Syntaxe :

list-style-type：type;

Si type=none, la liste n'a pas le symbole de liste. Les types couramment utilisés sont :

carré (carré plein)

disque (cercle plein)

cicle (cercle creux)

décimal (chiffres arabes)

minuscule romain (lettres romaines minuscules)

majuscule romain (lettres romaines majuscules)

Utiliser des images d'arrière-plan comme symboles de liste

Comme nécessaire, parfois Le symbole de liste peut être remplacé par une image plus petite. La syntaxe est la suivante :

list-style-image：url(picture.png);

Changer la position du symbole de liste

Le symbole de liste peut être intégré dans le texte ou en dehors du contenu du texte. La syntaxe est : est :

list-style-position：inside/outside;

L'abréviation de l'attribut de liste

Le code suivant :

list-style-image：url(picture.png);
list-style-position：inside/outside;

peut être abrégé comme :

list-style: url(picture.png) inside/outside;

Remarque : Général Dans ce cas, list-style-type et list-style-image ne seront pas utilisés en même temps, car ce dernier remplacera le premier.

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!