Übersicht

Die CSS-Eigenschaft list-style-type bestimmt, wie die Einträge einer Liste ausgezeichnet werden. Übliche Arten sind etwa Punkte oder eine Nummerierung vor jedem Eintrag:

  • Erster Eintrag
  • Zweiter Eintrag
  1. Numerierte Einträge
  2. Numerierte Einträge

Meist wird diese Eigenschaft mit dem <li>-Element in Verbindung gebracht. Tatsächlich kann es sich jedoch um jedes beliebige Element handeln, dessen display-Eigenschaft list-item ist.

Hinweis:  list-style-type ist eine Eigenschaft von Listenelementen, nicht von Listen. Da sie vererbt wird, kann sie jedoch statt beim Listenelement selbst auch bei seinem Elternelement gesetzt werden (in der Regel <ol> or <ul>).

Initialwertdisc
Anwendbar aufListenelemente
VererbtJa
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

Werte

none
Es wird kein Aufzählungszeichen angezeigt.
<string>
Der gebene, in Anführungszeichen gesetzte Text wird vor jedem Listeneintrag angezeigt. Beispiel: list-style-type: '-'
symbols()
Statt über @counter-style eine Aufzählungsweise zu definieren, kann dies mit der Funktion symbols() auch direkt in der Eigenschaft list-style-type geschehen.
Da diese Aufzählungsweise im Gegensatz zu per @counter-style definierten keinen Namen hat, wird sie auch als "anonym" bezeichnet.
<custom-ident>
Ein Bezeichner, der dem Wert einer @counter-style-Regel entspricht oder einem der folgenden Stile:
disc
  • Ein gefüllter Kreis (Standardwert)
circle
  • Ein leerer Kreis
square
  • Ein gefülltes Quadrat
decimal
  • Dezimalzahlen
  • Beginnend bei 1
cjk-decimal
  • Han-Dezimalzahlen
  • z. B. 一, 二, 三, ..., 九八, 九九, 一〇〇
decimal-leading-zero
  • Dezimalzahlen
  • Aufgefüllt mit vorangestellten Nullen
  • z. B. 01, 02, 03, … 98, 99
lower-roman
  • Kleingeschriebene römische Zahlen
  • E.g. i, ii, iii, iv, v…
upper-roman
  • Großgeschriebene römische Zahlen
  • E.g. I, II, III, IV, V…
lower-greek
  • Kleingeschriebene griechische Zahlworte
  • Alpha, Beta, Gamma…
  • z. B. α, β, γ…
lower-alpha
lower-latin
  • Kleingeschriebene lateinische Buchstaben
  • z. B. a, b, c, … z
  • lower-latin wird nicht von IE7 und früher unterstützt
  • Siehe den Unterpunkt Browser-Kompatibilität.
upper-alpha
upper-latin
  • Großgeschriebene lateinische Buchstaben
  • z. B. A, B, C, … Z
  • upper-latin wird nicht von IE7 und früher unterstützt
arabic-indic
-moz-arabic-indic
  • Beispiel
armenian
  • Traditionelle armenische Nummerierung
  • z. B. ayb/ayp, ben/pen, gim/keem…
bengali
-moz-bengali
  • Beispiel
cambodian *
  • Beispiel
  • Ist ein Synonym für Khmer
cjk-earthly-branch
-moz-cjk-earthly-branch
  • Beispiel
cjk-heavenly-stem
-moz-cjk-heavenly-stem
  • Beispiel
cjk-ideographic
  • Identisch zu trad-chinese-informal
  • Z. B. 一萬一千一百一十一
devanagari
-moz-devanagari
  • Beispiel
ethiopic-numeric
  • Beispiel
georgian
  • Traditionelle georgische Nummerierung
  • z. B. an, ban, gan, … he, tan, in…
gujarati
-moz-gujarati
  • Beispiel
gurmukhi
-moz-gurmukhi
  • Beispiel
hebrew
  • Traditionelle hebräische Nummerierung
hiragana
  • a, i, u, e, o, ka, ki, …
  • (Japanisch)
hiragana-iroha
  • i, ro, ha, ni, ho, he, to, …
  • Iroha ist die alte japanische Silbenreihenfolge.
japanese-formal
  • Formelle japanische Nummerierung, wie sie in juristischen oder Wirtschaftsdokumenten verwendet wird.
  • z. B. 壱萬壱阡壱百壱拾壱
  • Änderungen an der Gestaltung der Kanji-Schriftzeichen, die zu Verwechslungen mit anderen führen könnten, werden unterdrückt.
japanese-informal
  • Formlose japanische Nummerierung
kannada
-moz-kannada
  • Beispiel
katakana
  • A, I, U, E, O, KA, KI, …
  • (Japanisch)
katakana-iroha
  • I, RO, HA, NI, HO, HE, TO, …
  • Iroha ist die alte japanische Silbenreihenfolge.
khmer
-moz-khmer
  • Beispiel
korean-hangul-formal
  • Koreanische Hangul-Nummerierung
  • z. B. 일만 일천일백일십일
korean-hanja-formal
  • Formelle koreanische Han-Nummerierung
  • z. B. 壹萬 壹仟壹百壹拾壹
korean-hanja-informal
  • Koreanische Hanja-Nummerierung
  • z. B. 萬 一千百十一
lao
-moz-lao
  • Beispiel
lower-armenian *
  • Beispiel
malayalam
-moz-malayalam
  • Beispiel
mongolian
  • Beispiel
myanmar
-moz-myanmar
  • Beispiel
oriya
-moz-oriya
  • Beispiel
persian
-moz-persian
  • Beispiel
simp-chinese-formal
  • Formelle Nummerierung in vereinfachtem Chinesisch
  • z. B. 壹万壹仟壹佰壹拾壹
simp-chinese-informal
  • Formlose Nummerierung in vereinfachtem Chinesisch
  • z. B. 一万一千一百一十一
tamil
-moz-tamil
  • Beispiel
telugu
-moz-telugu
  • Beispiel
thai
-moz-thai
  • Beispiel
tibetan *
  • Beispiel
trad-chinese-formal
  • Formelle Nummerierung in traditionellem Chinesisch
  • z. B. 壹萬壹仟壹佰壹拾壹
trad-chinese-informal
  • Formlose Nummerierung in traditionellem Chinesisch
  • z. B. 一萬一千一百一十一
upper-armenian *
  • Beispiel
disclosure-open
  • Zeigt an, dass der zugehörige Seitenbereich (etwa <details>) sichtbar ist.
disclosure-closed
  • Zeigt an, dass der zugehörige Seitenbereich (etwa <details>) versteckt ist.

Nicht standardisierte Erweiterungen

Zusätzliche Werte, die von Gecko (Firefox), Blink (Chrome und Opera) und WebKit (Safari) unterstützt werden, um Listenarten in anderen Sprachen anzubieten. Die Kompatibilitätstabelle weiter unten gibt nähere Auskunft zu den einzelnen Browsern.

-moz-ethiopic-halehame
  • Beispiel
-moz-ethiopic-halehame-am
  • Beispiel
ethiopic-halehame-ti-er
-moz-ethiopic-halehame-ti-er
  • Beispiel
ethiopic-halehame-ti-et
-moz-ethiopic-halehame-ti-et
  • Beispiel
hangul
-moz-hangul
  • Beispiel
  • Beispiel
  • Beispiel
hangul-consonant
-moz-hangul-consonant
  • Beispiel
  • Beispiel
  • Beispiel
urdu
-moz-urdu
  • Beispiel

Formale Syntax

<counter-style> | <string> | none

wobei
<counter-style> = <counter-style-name> | symbols()

wobei
<counter-style-name> = <custom-ident>

Beispiele

CSS

ol.normal {
  list-style-type: upper-alpha;
}

/* Es kann auch die Kurzschreibweise "list-style" verwendet werden: */
ol.shortcut {
  list-style: upper-alpha;
}

HTML

<ol class="normal">Liste 1
  <li>Hallo</li>
  <li>Welt</li>
  <li>Was gibt's?</li>
</ol>

<ol class="shortcut">Liste 2
  <li>Schaut</li>
  <li>Gleich</li>
  <li>aus</li>
</ol>

Ergebnis

Hinweise

  • Manche Listenarten setzen für die korrekte Darstellung voraus, dass eine passende Schriftart installiert ist.
  • cjk-ideographic ist identisch zu trad-chinese-informal; es existiert lediglich aus Gründen der Rückwärtskompatibilität.

Spezifikationen

Spezifikation Status Kommentar
CSS Lists and Counters Module Level 3
Die Definition von 'list-style-type' in dieser Spezifikation.
Arbeitsentwurf Definiert CSS2.1-Zähler neu.
Erweitert die Syntax um Unterstützung für @counter-style-Regeln.
Definiert unter Verwendung von @counter-style die üblichen Stiltypen: hebrew, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha, japanese-formal, japanese-informal, simp-chinese-formal, trad-chinese-formal, simp-chinese-formal, trad-chinese-formal,korean-hangul-formal, korean-hanja-informal, korean-hanja-formal, cjk-decimal, ethiopic-numeric, disclosure-open und disclosure-closed.
Erweitert <counter-style> um die Funktion symbols().
CSS Level 2 (Revision 1)
Die Definition von 'list-style-type' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition

Browserkompatibilität

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Grundlegende Unterstützung, die folgende Werte beinhaltet:
none, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman
1.0 1.0 (1.0) 4.0 3.5 1.0 (85)
lower-latin, upper-latin, lower-greek, armenian, georgian 1.0 1.0 (1.0) 8.0 6.0 1.0 (85)
decimal-leading-zero 1.0 1.0 (1.0) 8.0 8.0 1.0 (85)
hebrew, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha 1.0 1.0 (1.0) Nicht unterstützt 7.0 (aber zeigt nur Dezimalzahlen an)
15.0
1.0-1.2 (85-125)
japanese-formal, japanese-informal, simp-chinese-formal, trad-chinese-formal, simp-chinese-informal, trad-chinese-informal Nicht unterstützt 1.0 (1.7 oder früher) -moz
28.0 (28.0)
Nicht unterstützt Nicht unterstützt Nicht unterstützt
korean-hangul-formal, korean-hanja-informal, korean-hanja-formal, cjk-decimal Nicht unterstützt 28.0 (28.0) Nicht unterstützt Nicht unterstützt Nicht unterstützt
ethiopic-numeric, persian, arabic-indic, devanagari, bengali, gurmukhi, gujarati, oriya, tamil, telugu, kannada, malayalam, thai, lao, myanmar, khmer, cjk-heavenly-stem, cjk-earthly-branch Nicht unterstützt 1.0 (1.7 oder früher) -moz
33.0 (33.0) [1]
Nicht unterstützt Nicht unterstützt Nicht unterstützt
disclosure-open, disclosure-closed, mongolian Nicht unterstützt 33.0 (33.0) Nicht unterstützt Nicht unterstützt Nicht unterstützt
<string> Nicht unterstützt 39.0 (39.0) Nicht unterstützt Nicht unterstützt Nicht unterstützt
Merkmal Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Grundlegende Unterstützung ? ? ? ? ?

[1] Vor Firefox 38 hat Gecko einen Punkt als Suffix der Zahl für ethiopic-numeric angehängt(፫. anstatt ፫). Spätere Spezifikationen definieren, dass kein Suffix angehängt wird, und Gecko wurde dahingehend angepasst.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: mdnde, Guillaume-Heras, Sebastianz, SphinxKnight
 Zuletzt aktualisiert von: mdnde,