CSS, HTML und Javascript mit {stil}

CSS list-style-type • Listensymbole

Zeichen und Listensymbole für Aufzählungen: Kugel, Quadrat, gefüllter Kreis oder römische Ziffern, lateinische Zahlen

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 seit ewig und drei Jahren 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)

  • Montag
  • Dienstag
  • Mittwoch

list-style-type: decimal 1, 2, 3 etc.

  1. Montag
  2. Dienstag
  3. Mittwoch

list-style-type: disc Standardsymbol

  • Montag
  • Dienstag
  • Mittwoch

list-style-type: none
Kein Listensmbol

  • Montag
  • Dienstag
  • Mittwoch

list-style-type: lower-roman
Lateinische Kleinbuchstaben

  1. Montag
  2. Dienstag
  3. Mittwoch

list-style-type: upper-roman
Lateinische Großbuchstaben

  1. Montag
  2. Dienstag
  3. Mittwoch

list-style-type: square
Vierecke

  • Montag
  • Dienstag
  • Mittwoch

list-style-type: lower-latin
lateinische Kleinbuchstaben

  1. Montag
  2. Dienstag
  3. Mittwoch

list-style-type: decimal-leading-zero
Dezimal mit führenden Nullen

  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.

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