Heim >Web-Frontend >CSS-Tutorial >Ausführliche Erläuterung der CSS-Listenstileigenschaften: list-style-type und list-style-image
Ausführliche Erläuterung der CSS-Listenstileigenschaften: list-style-type und list-style-image
- PHPzOriginal
- 2023-10-26 12:15:502824Durchsuche
Detaillierte Erläuterung der CSS-Attribute für den Listenstil: list-style-type und list-style-image
Im Webdesign ist die Liste ein häufig verwendetes Element, das eine Reihe verwandter Inhalte klar darstellen kann. Um die Listendarstellung schöner zu gestalten und mit dem Webseitenthema in Einklang zu bringen, stellt CSS einige Eigenschaften zur Verfügung, um den Stil der Liste zu steuern. Zu den häufig verwendeten Attributen gehören unter anderem „list-style-type“ und „list-style-image“.
- list-style-type-Attribut
list-style-type-Attribut wird verwendet, um den Tag-Typ vor dem Listenelement zu definieren. Es kann die folgenden Werte haben:
- Disc: Vollpunkt (Standardwert)
- Kreis: Hohlpunkt
- Quadrat: Vollquadrat
- Keine: keine Markierung
- Dezimal: Zahl (von 1 ansteigend)
- Dezimal- führende Null: mit Nullen aufgefüllte Zahlen (Zahlen unter 10 beginnen mit 0)
- lower-roman: römische Kleinbuchstaben (i, ii, iii)
- upper-roman: römische Großbuchstaben (I, II, III)
- Kleinbuchstaben: Kleinbuchstaben (a, b, c)
- Großbuchstaben: Großbuchstaben (A, B, C)
- Kleingriechisch: Griechische Kleinbuchstaben
- Obergriechisch: Griechische Großbuchstaben
Zum Beispiel möchten wir die Markierung vor dem Listenelement einer ungeordneten Liste in ein ausgefülltes Quadrat ändern:
ul {
list-style-type: square;
}- list-style-image-Attribut
list-style-image-Attribut kann verwendet werden, um das zu definieren vor dem Listenelement Das Tag ist ein benutzerdefiniertes Bild. Sie können die Funktion URL() verwenden, um als Markup auf eine Bilddatei zu verweisen. Der Beispielcode lautet wie folgt:
ul {
list-style-image: url("marker.png");
}Der obige Code ändert die Markierung vor dem Listenelement der ungeordneten Liste in das Bild „marker.png“.
Es ist zu beachten, dass das Attribut „list-style-image“ die Einstellung des Attributs „list-style-type“ überschreibt, d. h. wenn sowohl „list-style-type“ als auch „list-style-image“ für ein Listenelement festgelegt sind, Es ist nur das Bild im Listenstil wirksam.
- Beispiel
Hier ist ein vollständiges Beispiel, das zeigt, wie die Attribute „list-style-type“ und „list-style-image“ verwendet werden, um den Listenstil anzupassen:
<!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>Im obigen Code das Tag vor der Liste Element der ungeordneten Liste Dieses Bild wird über die Eigenschaft list-style-image auf „marker.png“ gesetzt; die Markierung vor dem Listenelement in der geordneten Liste wird über die Eigenschaft list-style-type auf römische Kleinbuchstaben gesetzt .
Zusammenfassend lässt sich sagen, dass wir durch die Verwendung der Attribute „list-style-type“ und „list-style-image“ den Stil von Listenelementen einfach anpassen können, um die Liste auf der Webseite personalisierter und schöner zu gestalten. Das Obige ist eine detaillierte Analyse der Eigenschaften des CSS-Listenstils.
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der CSS-Listenstileigenschaften: list-style-type und list-style-image. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!