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
|
|
|
|
|---|---|---|---|
| 1.0+ | 1.0+ | 1.0+ | 3.5+ |
Übe dein Wissen
Welche Art von Listentypen gibt es in CSS?
Richtig!
Falsch!