list-style-type

Übersicht

Die list-style-type CSS Eigenschaft bestimmt die Anzeige eines Listeneintrags. Da es das einzige Element ist, das standardmäßig als display:list-item definiert wird, entspricht dies normalerweise einem <li> Element, kann jedoch jedes Element mit diesem display Wert sein.

Die Farbe des Aufzählungspunkts entspricht der berechneten Farbe des Elements, dem er zugewiesen ist.

Syntax

/* Partielle Liste von Typen */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: cjk-ideographic;
list-style-type: kannada;

/* Ein <string> */
list-style-type: '-';

/* Bezeichner, der einer @counter-style Regel entspricht */
list-style-type: custom-counter-style;

list-style-type: none;

/* Globale Werte */
list-style-type: inherit;
list-style-type: initial;
list-style-type: unset;

Werte

symbols()

Definiert einen anonymen Stil der Liste.

none

Es wird kein Aufzählungszeichen angezeigt.

<string>

Der angegebene String wird als Aufzählungszeichen des Listeneintrags verwendet.

<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

• Han Dezimalzahlen
• Beginnend mit 1.

cjk-decimal

• 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

• Kleingeschriebenes Griechisch
• Alpha, Beta, Gamma…
• z. B. α, β, γ…

lower-alpha

lower-latin

• Kleingeschriebene ASCII-Zeichen
• 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 ASCII-Zeichen
• 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. 壱萬壱阡壱百壱拾壱
• Die Kanji-Schriftzeichen wurden so gestaltet, dass sie nicht so verändert werden können, dass sie wie ein anderes korrektes Zeichen aussehen

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

• Symbol, das angibt, dass ein Aufklappwidget wie <details> geöffnet ist.

disclosure-closed

• Symbol, das angibt, dass ein Aufklappwidget wie <details> geschlossen ist.

Nicht standardisierte Erweiterungen

Erweiterer Satz von Werten, der von Gecko (Firefox), Blink (Chrome und Opera) und WebKit (Safari) unterstützt wird, um Listenarten in anderen Sprachen anzubieten. Siehe die Kompatibilitätstabelle, um zu sehen, welche Browser welche Erweiterung unterstützen.

-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 wegen Altlasten.

Spezifikationen

Browser Kompatibilitä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