Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

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.

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

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

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

Browser Kompatibilitä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: Guillaume-Heras, Sebastianz, SphinxKnight
 Zuletzt aktualisiert von: Guillaume-Heras,