CSS, HTML und Javascript mit {stil}

CSS list-style-type • Listensymbole und Zeichen für Listen und Aufzählungen

CSS list-style-type

CSS list-style-type legt das Aufzählungssymbol in ungeordneten Listen (ul) und geordneten Aufzählungen (ol) fest. Für ungeordnete Listen können Punkte, Kreise und Vierecke verwendet werden, für geordnete Aufzählungen stehen alphanumerische Zeichen und Glyphen zur Verfügung.

Die CSS-Eigenschaft list-style-type wirkt nur bei Elementen, die Listenelemente darstellen können – das sind ul- und ol-Elemente.

list-style-type

Erblich: Ja

list-style-type
bestimmt das Aufzählungssymbol in einer Liste: gefüllte oder ungefüllte Kreise in ungeordneten Listen, alphabetische und numerische Werte in geordneten Aufzählungen. Sowohl in geordneten als auch in ungeordneten Listen kann das Listensymbol durch die Angabe von none unterdrückt werden.
Werte
disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none

disc, circle, square, decimal sowie lateinische und romanische Symbole stellen alle Browser ab Version 5 korrekt dar. decimal-leading-zero, die Darstellung führender Nullen, wird von IE 6 und 7 nicht unterstützt. Erst Internet Explorer 8 kann führende Nullen im Index von geordneten Listen darstellen.

list-style-type: circle
Gefüllte Kreise (bullets)
list-style-type: decimal
1, 2, 3 etc.
list-style-type: disc
Standardsymbol
  • Montag
  • Dienstag
  • Mittwoch
  1. Montag
  2. Dienstag
  3. Mittwoch
  • Montag
  • Dienstag
  • Mittwoch
list-style-type: none
Kein Listensmbol
list-style-type: lower-roman
Lateinische Kleinbuchstaben
list-style-type: upper-roman
Lateinische Großbuchstaben
  • Montag
  • Dienstag
  • Mittwoch
  1. Montag
  2. Dienstag
  3. Mittwoch
  1. Montag
  2. Dienstag
  3. Mittwoch
list-style-type: square
Vierecke
list-style-type: lower-latin
lateinische Kleinbuchstaben
list-style-type: decimal-leading-zero
Dezimal mit führenden Nullen
  • Montag
  • Dienstag
  • Mittwoch
  1. Montag
  2. Dienstag
  3. Mittwoch
  1. Montag
  2. Dienstag
  3. Mittwoch

Darüber hinaus gibt es noch

armenian
traditionelle armenische Symbole
georgian
traditionelle georgische Symbole
lower-greek
klassische kleine griechische Zeichen als Symbole

CSS-Listen mit Sonderzeichen

CSS content:before kann die Listenzeichen um Sonderzeichen ergänzen und erspart die kleinen Bilder, die mit list-style-image vor Listeneinträge gesetzt werden. Das normale Listensymbol wird mit list-style-type:none entfernt und anstelle dessen mit content:before ein Sonderzeichen wie ein Dreieck vor die Liste gesetzt. content:before wird nicht von Internet Explorer vor IE8 unterstützt.

  • Montag
  • Dienstag
  • Mittwoch
ul.char { list-style-type:none;}
ul.char li:before { content: "\25BA" " "; }