w3docs logo

CSS-Eigenschaft list-style-type

Die CSS-Eigenschaft list-style-type definiert den Typ eines Listenelementes.

Eine Listenmarkierung kann drei Typen haben: Glyphen (Kreis, Scheibe, Quadrat), Nummerierungssysteme und alphabetische Systeme.

Die Farbe des Markers entspricht der berechneten Farbe des Elements, für das er gilt. Sie können die Farben hier auswählen.

Anfangswert disc
Geerbt Listenelemente
Geerbt Ja
Animierbar Nein
Version CSS1
DOM Syntax object.style.listStyleType = "armenian";

Syntax

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

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      ul.list-styles{ 
      list-style-type: square;
      }
      ul.list-styles2 {
      list-style-type: hebrew;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für die Eigenschaft list-style-type</h2>
    <ul class="list-styles">
      <li>Appetitanreger</li>
      <li>Hauptgericht</li>
      <li>Salate</li>
    </ul>
    <ul class="list-styles2">
      <li>Kalte Getränke</li>
      <li>Heiße Getränke</li>
      <li>Eis</li>
    </ul>
  </body>
</html>

Ein weiteres Beispiel mit geordneten Listen:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>

Werte

Wert Beschreibung
disc Erstellt die Markierung als gefüllten Kreis. Es ist der Standardwert dieser Eigenschaft.
armenian Erstellt Marker als traditionelle armenische Nummerierung.
circle Erstellt Marker als Kreis.
cjk-ideographic Erstellt Marker, der eine einfache ideographische Zahl ist.
decimal Erstellt den Marker als Zahl.
decimal-leading-zero Erstellt die Marker als Zahl mit führender Null, z. B. 01,02,05...
georgian Erstellt die Marker als traditionelle georgische Nummerierung.
hebrew Erstellt die Marker als traditionelle hebräische Nummerierung.
hiragana Erstellt Marker als traditionelle Hiragana-Nummerierung.
hiragana-iroha Erstellt Marker als traditionelle Hiragana-Iroha-Nummerierung.
katakana Erstellt Marker als traditionelle Katakana-Nummerierung.
katakana-iroha Erstellt Marker als traditionelle Katakana-Iroha-Nummerierung.
lower-alpha Erstellt Marker als Lower-Alpha, wie z. B. a,b,c,d...
lower-greek Erstellt Marker als lower-greek.
lower-latin Erstellt Marker als lower-latin wie z. B. a,b,c,d...
lower-roman Erstellt Marker als lower-roman wie z. B. i,ii,iii,iv...
none Bedeutet, dass der Marker nicht angezeigt wird.
square Erstellt Marker als Quadrat.
upper-alpha Creates marker as upper-alpha such as A,B,C,D...
upper-latin Erstellt Marker als Upper-Alpha, wie z. B. A,B,C,D...
upper-roman Erstellt Marker als wie z. B. I,II,III,IV,V...
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Übe dein Wissen

Welche Art von Listentypen gibt es in CSS?
Finden Sie das nützlich?