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
- Numerierte Einträge
- 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>
).
Initialwert | disc |
---|---|
Anwendbar auf | Listenelemente |
Vererbt | Ja |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
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()
(en-US)- Statt über
@counter-style
(en-US) eine Aufzählungsweise zu definieren, kann dies mit der Funktion symbols() auch direkt in der Eigenschaftlist-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
(en-US)-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
Experimental-
- 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
Experimental *-
- 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
Experimental-
- Identisch zu
trad-chinese-informal
- Z. B. 一萬一千一百一十一
- Identisch zu
devanagari
-moz-devanagari
-
- Beispiel
ethiopic-numeric
Experimental-
- Beispiel
georgian
-
- Traditionelle georgische Nummerierung
- z. B. an, ban, gan, … he, tan, in…
gujarati
-moz-gujarati
-
- Beispiel
gurmukhi
-moz-gurmukhi
-
- Beispiel
hebrew
Experimental-
- Traditionelle hebräische Nummerierung
hiragana
Experimental-
- a, i, u, e, o, ka, ki, …
- (Japanisch)
hiragana-iroha
Experimental-
- i, ro, ha, ni, ho, he, to, …
- Iroha ist die alte japanische Silbenreihenfolge.
japanese-formal
Experimental-
- 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
Experimental-
- Formlose japanische Nummerierung
kannada
-moz-kannada
-
- Beispiel
katakana
Experimental-
- A, I, U, E, O, KA, KI, …
- (Japanisch)
katakana-iroha
Experimental-
- I, RO, HA, NI, HO, HE, TO, …
- Iroha ist die alte japanische Silbenreihenfolge.
khmer
-moz-khmer
-
- Beispiel
korean-hangul-formal
Experimental-
- Koreanische Hangul-Nummerierung
- z. B. 일만 일천일백일십일
korean-hanja-formal
Experimental-
- Formelle koreanische Han-Nummerierung
- z. B. 壹萬 壹仟壹百壹拾壹
korean-hanja-informal
Experimental-
- Koreanische Hanja-Nummerierung
- z. B. 萬 一千百十一
lao
-moz-lao
-
- Beispiel
lower-armenian
Experimental *-
- Beispiel
malayalam
-moz-malayalam
-
- Beispiel
mongolian
Experimental-
- Beispiel
myanmar
-moz-myanmar
-
- Beispiel
oriya
-moz-oriya
-
- Beispiel
persian
Experimental-moz-persian
-
- Beispiel
simp-chinese-formal
Experimental-
- Formelle Nummerierung in vereinfachtem Chinesisch
- z. B. 壹万壹仟壹佰壹拾壹
simp-chinese-informal
Experimental-
- Formlose Nummerierung in vereinfachtem Chinesisch
- z. B. 一万一千一百一十一
tamil
Experimental-moz-tamil
-
- Beispiel
telugu
-moz-telugu
-
- Beispiel
thai
-moz-thai
-
- Beispiel
tibetan
Experimental *-
- Beispiel
trad-chinese-formal
Experimental-
- Formelle Nummerierung in traditionellem Chinesisch
- z. B. 壹萬壹仟壹佰壹拾壹
trad-chinese-informal
Experimental-
- Formlose Nummerierung in traditionellem Chinesisch
- z. B. 一萬一千一百一十一
upper-armenian
Experimental *-
- Beispiel
disclosure-open
Experimental-
- Zeigt an, dass der zugehörige Seitenbereich (etwa
<details>
) sichtbar ist.
- Zeigt an, dass der zugehörige Seitenbereich (etwa
disclosure-closed
Experimental-
- Zeigt an, dass der zugehörige Seitenbereich (etwa
<details>
) versteckt ist.
- Zeigt an, dass der zugehörige Seitenbereich (etwa
-
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
list-style-type =
<counter-style> |
<string> |
none
<counter-style> =
<counter-style-name> |
<symbols()>
<symbols()> =
symbols( <symbols-type>? [ <string> | <image> ]+ )
<symbols-type> =
cyclic |
numeric |
alphabetic |
symbolic |
fixed
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<gradient> =
<linear-gradient()> |
<repeating-linear-gradient()> (en-US) |
<radial-gradient()> |
<repeating-radial-gradient()> (en-US)
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<color> =
<absolute-color-base> |
currentcolor |
<system-color> |
<device-cmyk()>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]
<cf-image> =
<percentage>? &&
[ <image> | <color> ]
<id-selector> =
<hash-token>
<linear-gradient()> =
linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> =
radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<absolute-color-base> =
<hex-color> (en-US) |
<named-color> |
transparent |
<rgb()> |
<rgba()> |
<hsl()> |
<hsla()> |
<hwb()> |
<lab()> |
<lch()> |
<oklab()> |
<oklch()> |
<color()>
<device-cmyk()> =
device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? )
<side-or-corner> =
[ left | right ] ||
[ top | bottom ]
<color-stop-list> =
<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<position> =
[ left | center | right | top | bottom | start | end | <length-percentage> ] |
[ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] |
[ center | [ left | right | x-start | x-end ] <length-percentage>? ] && [ center | [ top | bottom | y-start | y-end ] <length-percentage>? ] |
[ center | [ start | end ] <length-percentage>? ] [ center | [ start | end ] <length-percentage>? ]
<rgb()> =
rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? ) |
rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )
<hsl()> =
hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<hwb()> =
hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )
<lab()> =
lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<lch()> =
lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<oklab()> =
oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )
<oklch()> =
oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )
<color()> =
color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )
<cmyk-component> =
<number> |
<percentage>
<alpha-value> =
<number> |
<percentage>
<linear-color-stop> =
<color> &&
<length-percentage>?
<linear-color-hint> =
<length-percentage>
<length-percentage> =
<length> |
<percentage>
<hue> =
<number> |
<angle> |
none
<colorspace-params> =
<predefined-rgb-params> |
<xyz-params>
<predefined-rgb-params> =
<predefined-rgb> [ <number> | <percentage> | none ]{3}
<xyz-params> =
<xyz-space> [ <number> | none ]{3}
<predefined-rgb> =
srgb |
srgb-linear |
display-p3 |
a98-rgb |
prophoto-rgb |
rec2020
<xyz-space> =
xyz |
xyz-d50 |
xyz-d65
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 zutrad-chinese-informal
; es existiert lediglich aus Gründen der Rückwärtskompatibilität.
Spezifikationen
Spezifikation | Status | Kommentar |
---|---|---|
CSS Lists 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
BCD tables only load in the browser