Sie sind hier: Startseite -> CSS-Grundlagen -> Listen -> Bullettzeichen (ol)

CSS-Grundlagen: Bulletzeichen bei ol-Listen

Aufzählungszeichen bei geordneten Listen

Im Gegensatz zu ungeordneten Listen, die einzig über ein Aufzählungssymbol verfügen, erhält die geordnete Liste durch den ol-Tag von HTML eine Reihenfolge übermittelt. Aber auch diese Reihenfolge kann durch CSS neu gestaltet werden.



zuerst die Standardliste

  1. Erster Eintrag
  2. Zweiter Eintrag

und nun die CSS-Variante

  1. Erster Eintrag
  2. Zweiter Eintrag

Die geordnete Aufzählungsliste wird in HTML automatisch mit der dezimalen Zählweise dargestellt. CSS bietet aber neue Möglichkeiten, um diese Aufzählung mit anderen Varianten auszustatten. Als Beispiel ist die zweite Aufzählungsliste, die vom Prinzip her gleich programmiert ist, mit den großen römischen Zahlen ausgestattet worden.

Mögliche Optionen für die geordnete Liste sind:

  • none -> kein Aufzählungszeichen darstellen
  • decimal -> 1, 2, 3, 4
  • decimal-leading-zero -> 01, 02, 03
  • lower-roman -> i, ii, iii
  • upper-roman -> I, II, III

Es gibt noch weitere Möglichkeiten, die aber oftmals vom Browser nicht richtig dargestellt werden

  • lower-alpha
  • lower-latin
  • upper-alpha
  • upper-latin
  • hebrew
  • armenian
  • georgian
  • cjk-ideographic
  • hiragana
  • katakana
  • hiragana-iroha
  • katakana-iroha

 

Ebenfalls interessant:

Bulletzeichen (ul)

Informationen über die Möglichkeit, mit CSS die Aufzählungszeichen der Listen zu verändern.

[aktuelle Seite]

Bullettzeichen (ol)

Informationen über die Möglichkeit, die Aufzählungszeichen bei geordneten Listen mit CSS zu verändern.

list-style-image

Informationen über den CSS-Befehl list-style-image, mit dem bei einer ungeordneten Aufzählungsliste ein eigenes Zeichen eingebaut werden kann.

Listen formatieren

Informationen über die Möglichkeiten, mit CSS Aufzählungslisten zu formatieren.

Soziale Medien

Wenn der Artikel gefallen und/oder geholfen hat, bitte teilen:

Zurück zum Hauptthema

Übersicht Listen

Startseite CSS-Grundlagen