Comment définir le style de Li avec CSS

Comment définir le style li en CSS : 1. Définissez les puces de la liste li via l'attribut list-style-type ; 2. Utilisez des images pour remplacer les puces via l'attribut list-style-image ; .Utilisez la liste- L'attribut style peut définir de manière complète le style li.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version css3, ordinateur Dell G3.

Recommandé : Tutoriel vidéo CSS

Le style par défaut de la balise li est un petit point ou un chiffre devant elle. Alors, comment changer le style par défaut de. la balise Li ?

Comment définir le style de la balise li avec CSS ?

Les listes ul et li sont des éléments couramment utilisés lors de la mise en page de pages à l'aide de CSS. 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 la puce de la liste li, c'est-à-dire la modification dans devant la liste. L'attribut list-style-type est un attribut héritable. Sa structure grammaticale est la suivante : (Énumérez 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'attribut​​pour l'attribut list-style-type. Nous n'énumérons ici que quelques-unes des plus courantes. ceux d'occasion.

aucun : n'utilisez pas de puces.

disque : cercle plein.

cercle : cercle creux.

carré : carré plein.

démique : chiffres arabes.

alpha inférieur : lettres anglaises minuscules.

alpha majuscule : lettres anglaises majuscules.

minuscule-romain : chiffres romains minuscules.

majuscule-romain : chiffres romains majuscules.

L'exemple de code pour utiliser l'attribut list-style-type est le suivant :

li{
    list-style-type:square;
}
<ul>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
</ul>

2. attribut list-style-image

list -style-image Propriété utilisée 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 remplacée.

url : Le chemin de l'image à remplacer.

Regardez un morceau de code :

li{
    list-style-image:url(images/bg03.gif);
}
<ul>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
</ul>

3. L'attribut List-style-position

l'attribut list-style-position est utilisé pour définir items Propriétés de la position d'affichage du symbole dans la liste. C'est également un attribut héritable, et la structure syntaxique est la suivante :

list-style-position : inside/outside

inside : les puces sont placées à l'intérieur du texte.

à l'extérieur : Les puces sont placées à l'extérieur du texte.

Un exemple d'utilisation de l'attribut list-style-position est le suivant :

li{
    list-style-type:square;
    list-style-position:outside;
}
<ul>
    <li>这里是使用list-style-position属性值为outside的示例。请注意换行以后项目符号的位置。</li>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
</ul>

Regardons le style avec la valeur de l'attribut à l'intérieur.

li{
    list-style-type:square;
    list-style-position:inside;
}
<ul>
    <li>这里是使用list-style-position属性值为inside的示例。请注意换行以后项目符号的位置。</li>
    <li>这里是列表内容</li>
    <li>这里是列表内容</li>
</ul>

4. Attribut de style de liste

L'attribut de style de liste est un attribut qui définit de manière exhaustive le style li. C'est également un attribut héritable. 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 :

li{
    list-style:url(images/bg03.gif) inside;
}
<ul>
    <li>这里是使用list-style属性的示例。请注意换行以后项目符号的位置。</li>
    <li>这里是列表内容</li>
</ul>

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!