list-style-type

Ü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.

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

Browserkompatibilität

[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

• list-style, list-style-image, list-style-position