CSS list-style-type Eigenschaft

Die CSS-Eigenschaft list-style-type legt den Marker eines Listenelements fest — den Aufzählungspunkt, die Zahl oder den Buchstaben, der vor jedem Element angezeigt wird. Damit kann man eine ungeordnete Liste vom standardmäßigen ausgefüllten Aufzählungspunkt auf einen hohlen Kreis oder ein Quadrat umstellen, eine geordnete Liste von 1, 2, 3 auf römische Ziffern oder Buchstaben ändern oder den Marker ganz entfernen.

Was diese Eigenschaft abdeckt

Ein Listenmarker kann einer von drei Typen sein:

Glyphen — eine einfache Form: disc (der standardmäßige ausgefüllte Aufzählungspunkt), circle (ein hohler Ring) oder square.
Nummerierungssysteme — Zähler wie decimal, decimal-leading-zero, lower-roman, upper-roman, armenian, georgian, cjk-ideographic, hebrew, hiragana und katakana.
Alphabetische Systeme — Buchstabenfolgen wie lower-alpha/lower-latin (a, b, c) und upper-alpha/upper-latin (A, B, C) sowie lower-greek (α, β, γ).

Die Farbe des Markers entspricht der berechneten color des Elements, auf das sie angewendet wird — das Styling der Textfarbe ändert also auch die Farbe des Markers. Eine Farbe kann aus der HTML-Farbreferenz ausgewählt werden.

Wann und wo sie verwendet wird

Nur Elemente, deren display-Wert list-item ist, zeigen einen Marker. Standardmäßig sind das die Elemente <li> und <summary>, aber das Verhalten kann durch Setzen von display: list-item auf jedes beliebige Element angewendet werden. In der Praxis wird list-style-type auf dem übergeordneten <ul> oder <ol> gesetzt und erbt dann auf jedes <li> — die Eigenschaft erbt, sodass die untergeordneten Elemente sie nicht selbst benötigen.

list-style-type: none wird verwendet, wenn ein sauberes Navigationsmenü oder ein benutzerdefiniertes Layout ohne Aufzählungspunkte gewünscht wird. Die Nummerierungs- und Buchstabenwerte funktionieren sowohl bei <ul> als auch bei <ol>, sind aber am sinnvollsten bei <ol>, wo jedes Element einen Schritt oder eine Rangposition darstellt.

list-style-type ist eine von drei Listen-Eigenschaften, die die Kurzschreibweise list-style zusammenfasst — die anderen beiden sind list-style-position (Marker innerhalb oder außerhalb der Content-Box) und list-style-image (ein benutzerdefinierter Bildmarker, der den Typ überschreibt, wenn er gesetzt ist).

Anfangswert	disc
Gilt für	Listenelemente.
Vererbt	Ja.
Animierbar	Nein.
Version	CSS1
DOM-Syntax	object.style.listStyleType = "armenian";

Syntax

Syntax der CSS list-style-type Eigenschaft

list-style-type: disc | armenian | circle | cjk-ideographic | decimal | decimal-leading-zero | georgian | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-alpha | lower-greek | lower-latin | lower-roman | none | square | upper-alpha | upper-latin | upper-roman | initial | inherit;

Beispiel der list-style-type Eigenschaft:

Beispiel der CSS list-style-type Eigenschaft mit den Werten square und hebrew

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul.list-styles {
        list-style-type: square;
      }
      ul.list-styles2 {
        list-style-type: hebrew;
      }
    </style>
  </head>
  <body>
    <h2>List-style-type property example</h2>
    <ul class="list-styles">
      <li>Appetizers</li>
      <li>Main Course</li>
      <li>Salads</li>
    </ul>
    <ul class="list-styles2">
      <li>Cold Drinks</li>
      <li>Hot Drinks</li>
      <li>Ice-Creams</li>
    </ul>
  </body>
</html>

Probier es selbst »

Ergebnis

Beispiel der list-style-type Eigenschaft mit dem Wert "disc":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text {
        list-style-type: disc;
      }
    </style>
  </head>
  <body>
    <h1> 
      Example of the list-style-type property with "disc" value.
    </h1>
    <ul class="text">
      <li>Barcelona</li>
      <li>Madrid</li>
      <li>London</li>
    </ul>
  </body>
</html>

Probier es selbst »

Beispiel der list-style-type Eigenschaft mit dem Wert "decimal":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text {
        list-style-type: decimal;
      }
    </style>
  </head>
  <body>
    <h1> 
      Example of the list-style-type property 
    </h1>
    <ul class="text">
      <li>Barcelona</li>
      <li>Madrid</li>
      <li>London</li>
    </ul>
  </body>
</html>

Probier es selbst »

Beispiel der list-style-type Eigenschaft mit geordneten Listen:

Beispiel der CSS list-style-type Eigenschaft mit den Werten circle, square, upper-roman, lower-alpha, armenian, decimal, cjk-ideographic, georgian, upper-alpha und weiteren

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul.a {
        list-style-type: circle;
      }
      ul.b {
        list-style-type: square;
      }
      ol.c {
        list-style-type: upper-roman;
      }
      ol.d {
        list-style-type: lower-alpha;
      }
      ol.e {
        list-style-type: armenian;
      }
      ol.f {
        list-style-type: decimal;
      }
      ol.g {
        list-style-type: cjk-ideographic;
      }
      ol.h {
        list-style-type: decimal-leading-zero;
      }
      ol.i {
        list-style-type: georgian;
      }
      ol.j {
        list-style-type: hebrew;
      }
      ol.k {
        list-style-type: hiragana;
      }
      ol.l {
        list-style-type: hiragana-iroha;
      }
      ol.m {
        list-style-type: katakana;
      }
      ol.n {
        list-style-type: katakana-iroha;
      }
      ol.o {
        list-style-type: lower-greek;
      }
      ol.p {
        list-style-type: lower-latin;
      }
      ol.q {
        list-style-type: lower-roman;
      }
      ol.r {
        list-style-type: none;
      }
      ol.s {
        list-style-type: upper-alpha;
      }
      ol.t {
        list-style-type: upper-latin;
      }
    </style>
  </head>
  <body>
    <h2>List-style-type property example</h2>
    <p>Examples of unordered lists:</p>
    <h3>Circle</h3>
    <ul class="a">
      <li>New York</li>
      <li>Las Vegas</li>
      <li>Washington</li>
    </ul>
    <h3>Square</h3>
    <ul class="b">
      <li>San Francisco</li>
      <li>Los Angeles</li>
      <li>Miami</li>
    </ul>
    <p>Examples of ordered lists:</p>
    <h3>Upper-roman</h3>
    <ol class="c">
      <li>Barcelona</li>
      <li>Madrid</li>
      <li>London</li>
    </ol>
    <h3>Lower-alpha</h3>
    <ol class="d">
      <li>Dubai</li>
      <li>Anu Dhabi</li>
      <li>Qatar</li>
    </ol>
    <h3>Armenian</h3>
    <ol class="e">
      <li>Yerevan</li>
      <li>Paris</li>
      <li>Rome</li>
    </ol>
    <h3>Decimal</h3>
    <ol class="f">
      <li>Sydney</li>
      <li>Honk Kong</li>
      <li>Moscow</li>
    </ol>
    <h3>Cjk-ideographic</h3>
    <ol class="g">
      <li>Kiev</li>
      <li>Saint-Petersburg</li>
      <li>Tula</li>
    </ol>
    <h3>Decimal-leading-zero</h3>
    <ol class="h">
      <li>Bangkok</li>
      <li>Gyumri</li>
      <li>Valencia</li>
    </ol>
    <h3>Georgian</h3>
    <ol class="i">
      <li>Madrid</li>
      <li>Barcelona</li>
      <li>Prague</li>
    </ol>
    <h3>Hebrew</h3>
    <ol class="j">
      <li>Jerusalem</li>
      <li>Toronto</li>
      <li>Prague</li>
    </ol>
    <h3>Hiragana</h3>
    <ol class="k">
      <li>Cairo</li>
      <li>Tokyo</li>
      <li>Athens</li>
    </ol>
    <h3>Hiragana-iroha</h3>
    <ol class="l">
      <li>Tehran</li>
      <li>Tavriz</li>
      <li>Tel Aviv</li>
    </ol>
    <h3>Katakana</h3>
    <ol class="m">
      <li>Munich</li>
      <li>Berlin</li>
      <li>Bavaria</li>
    </ol>
    <h3>Katakana-iroha</h3>
    <ol class="n">
      <li>Brussels</li>
      <li>Istanbul</li>
      <li>Sydney</li>
    </ol>
    <h3>Lower-greek</h3>
    <ol class="o">
      <li>Seville</li>
      <li>Granada</li>
      <li>Venice</li>
    </ol>
    <h3>Lower-latin</h3>
    <ol class="p">
      <li>Budapest</li>
      <li>Vienna</li>
      <li>Amsterdam</li>
    </ol>
    <h3>Lower-roman</h3>
    <ol class="q">
      <li>Buenos Aires</li>
      <li>Rio de Janeiro</li>
      <li>San Paolo</li>
    </ol>
    <h3>None</h3>
    <ol class="r">
      <li>Vilnius</li>
      <li>Tallin</li>
      <li>Riga</li>
    </ol>
    <h3>Upper-alpha</h3>
    <ol class="s">
      <li>Montreal</li>
      <li>Melbourne</li>
      <li>Edinburgh</li>
    </ol>
    <h3>Upper-latin</h3>
    <ol class="t">
      <li>Dublin</li>
      <li>Mexico</li>
      <li>Florence</li>
    </ol>
  </body>
</html>

Probier es selbst »

Wichtige Hinweise

Die Marker-Farbe folgt der Textfarbe. Es gibt keine separate Eigenschaft für die Farbe des Aufzählungspunkts; der color-Wert des <li> (oder seines übergeordneten Elements) wird gesetzt und der Marker ändert sich entsprechend. Um den Marker unabhängig einzufärben, wird das ::marker-Pseudoelement verwendet.
list-style-image hat Vorrang vor list-style-type. Wenn eine Liste auch ein list-style-image hat, wird das Bild angezeigt und der Typ dient nur als Fallback, wenn das Bild nicht geladen werden kann.
Das Entfernen des Markers entfernt nicht den Einzug. list-style-type: none blendet den Aufzählungspunkt aus, aber die Liste hat weiterhin den standardmäßigen linken Innenabstand des Browsers. Um eine Liste vollständig zu vereinfachen, sollte padding-left: 0 (und oft margin: 0) hinzugefügt werden — ein üblicher Schritt beim Erstellen von Navigationsmenüs.
Das richtige Listenelement für geordnete Werte verwenden. Nummerierungs- und Buchstabenwerte werden auch bei <ul> gerendert, aber für Barrierefreiheit und Semantik gehören gerankte oder sequentielle Inhalte in ein <ol>.

Werte

Wert	Beschreibung	Ausprobieren
disc	Erstellt einen Marker als ausgefüllten Kreis. Dies ist der Standardwert dieser Eigenschaft.	Ausprobieren »
armenian	Erstellt einen Marker als traditionelle armenische Nummerierung.	Ausprobieren »
circle	Erstellt einen Marker als Kreis.	Ausprobieren »
cjk-ideographic	Erstellt einen Marker als einfache ideografische Zahlen.	Ausprobieren »
decimal	Erstellt einen Marker als Zahl.	Ausprobieren »
decimal-leading-zero	Erstellt einen Marker als Zahl mit führender Null, z. B. 01, 02, 05 ...	Ausprobieren »
georgian	Erstellt einen Marker als traditionelle georgische Nummerierung.	Ausprobieren »
hebrew	Erstellt einen Marker als traditionelle hebräische Nummerierung.	Ausprobieren »
hiragana	Erstellt einen Marker als traditionelle Hiragana-Nummerierung.	Ausprobieren »
hiragana-iroha	Erstellt einen Marker als traditionelle Hiragana-Iroha-Nummerierung.	Ausprobieren »
katakana	Erstellt einen Marker als traditionelle Katakana-Nummerierung.	Ausprobieren »
katakana-iroha	Erstellt einen Marker als traditionelle Katakana-Iroha-Nummerierung.	Ausprobieren »
lower-alpha	Erstellt einen Marker als Kleinbuchstaben, z. B. a, b, c, d ...	Ausprobieren »
lower-greek	Erstellt einen Marker als griechische Kleinbuchstaben.	Ausprobieren »
lower-latin	Erstellt einen Marker als lateinische Kleinbuchstaben, z. B. a, b, c, d ...	Ausprobieren »
lower-roman	Erstellt einen Marker als kleine römische Ziffern, z. B. i, ii, iii, iv ...	Ausprobieren »
none	Bedeutet, dass kein Marker angezeigt wird.	Ausprobieren »
square	Erstellt einen Marker als Quadrat.	Ausprobieren »
upper-alpha	Erstellt einen Marker als Großbuchstaben, z. B. A, B, C, D ...	Ausprobieren »
upper-latin	Erstellt einen Marker als lateinische Großbuchstaben, z. B. A, B, C, D ...	Ausprobieren »
upper-roman	Erstellt einen Marker als große römische Ziffern, z. B. I, II, III, IV, V ...	Ausprobieren »
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.	Ausprobieren »
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übung

Was legt die list-style-type Eigenschaft in CSS fest?

Den Marker, der in einer Liste verwendet wird.Die Farbe des Listenelements.Den Stil der Aufzählungspunkte oder Nummerierung in einer Liste.Die Textgröße in einer Liste.