Ausführliche Erläuterung der CSS-Listenstileigenschaften: list-style-type und list-style-image-CSS-Tutorial-php.cn

Ausführliche Erläuterung der CSS-Listenstileigenschaften: list-style-type und list-style-image

PHPz

Freigeben： 2023-10-26 12:15:50

Original

2761 Leute haben es durchsucht

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!