So legen Sie den Stil von Li mit CSS fest

So legen Sie den Li-Stil in CSS fest: 1. Definieren Sie die Aufzählungszeichen der Li-Liste über das Attribut list-style-type. 2. Verwenden Sie Bilder, um Aufzählungszeichen über das Attribut list-style-image zu ersetzen Das Listenstilattribut li style reicht aus.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.

Empfohlen: CSS-Video-Tutorial

Der Standardstil des li-Tags ist ein kleiner Punkt oder eine Zahl davor. Wie kann man also den Standardstil des li-Tags ändern?

Wie lege ich den Stil des Li-Tags in CSS fest?

ul- und li-Listen sind häufig verwendete Elemente bei der Verwendung von CSS zum Layouten von Seiten. In CSS gibt es Attribute, die speziell die Listenleistung steuern. Zu den häufig verwendeten Attributen gehören List-Style-Type-Attribute, List-Style-Image-Attribute, List-Style-Position-Attribute und List-Style-Attribute.

1. Das Attribut „list-style-type“

Das Attribut „list-style-type“ wird verwendet, um das Aufzählungszeichen der li-Liste zu definieren, dh die Änderung vor der Liste. Das Attribut list-style-type ist ein vererbbares Attribut. Seine grammatikalische Struktur ist wie folgt: (Listen Sie einige häufig verwendete Attributwerte auf)

list-style-type: none/disc/circle/square/demical/lower-alpha/upper-alpha/lower-roman/upper-roman

Es gibt viele Attributwerte für das Attribut vom Typ „Listenstil“. Hier listen wir nur einige der am häufigsten verwendeten auf.

keine: Verwenden Sie keine Aufzählungspunkte.

Scheibe: Vollkreis.

Kreis: Hohlkreis.

Quadrat: Vollquadrat.

demisch: Arabische Ziffern.

lower-alpha: Englische Kleinbuchstaben.

upper-alpha: Englische Großbuchstaben.

lower-roman: römische Kleinbuchstaben.

upper-roman: Römische Ziffern in Großbuchstaben.

Der Beispielcode für die Verwendung des Attributs „list-style-type“ lautet wie folgt:

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

2. Das Attribut „list-style-image“

Das Attribut „list-style-image“ wird verwendet, um stattdessen die Verwendung von Bildern zu definieren von Kugeln. Es ist auch ein vererbbares Attribut und seine Syntaxstruktur ist wie folgt: Das Attribut

list-style-image:none/url

list-style-image kann zwei Werte annehmen:

none: kein ersetztes Bild.

url: Der Pfad des Bildes, das ersetzt werden soll.

Schauen wir uns einen Code an:

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

3. List-style-position-Attribut

Das list-style-position-Attribut ist ein Attribut, das zum Definieren der Anzeigeposition von Aufzählungszeichen in der Liste verwendet wird. Es ist auch ein vererbbares Attribut und die Syntaxstruktur ist wie folgt:

list-style-position: inside/outside

inside: Das Aufzählungszeichen wird innerhalb des Textes platziert.

außen: Aufzählungszeichen werden außerhalb des Textes platziert.

Ein Beispiel für die Verwendung des List-Style-Position-Attributs ist wie folgt:

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

Sehen wir uns den Stil mit dem darin enthaltenen Attributwert an.

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

4. Listenstil-Attribut

Das Listenstil-Attribut ist ein Attribut, das den Li-Stil umfassend festlegt. Es ist auch ein vererbbares Attribut:

li-style:list-style-type/list-style-image/list-style-position

Die Positionen jedes Werts können ausgetauscht werden. Zum Beispiel:

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

Das obige ist der detaillierte Inhalt vonSo legen Sie den Stil von Li mit CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!