CSS geordnete Aufzählungslisten formatieren

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, abhängig vom Thema und Bedarf bei der Anzeige.

So kann man etwa römische Zahlen als Zählweise heranziehen, es gibt aber noch viele weitere Optionen für die Darstellung der Liste, die mit CSS gewählt werden können.

Mit CSS die geordnete Liste ändern

ergibt:

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:

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

Lesen Sie auch

Mit CSS lassen sich die Texte sehr schön formatieren und man kann die gesamte Seite mit den Abständen und den Textfluss aufbauen, aber es geht noch mehr. Eine wichtige Thematik ist die Absatzformatierung, bei der vertikale und horizontale Ausrichtung ebenso möglich ist wie auch der Zeilenumbruch und damit bewusst kürzere Zeilenlängen oder die Zeilenhöhe.

Das nächste Thema bei den Formatierungen mit CSS betrifft den Rahmen. Der Rahmen ist häufig ein optisches Werkzeug, um Inhalt hervorzuheben oder zu strukturieren und man kann in CSS viele Formatierungen wählen wie der Typ der Linie, die Farbe oder auch die Rahmenstärke.

Ebenfalls interessant sind die Gestaltungsmöglichkeiten bei den Listen. Sie können bei den Abständen individuell eingestellt werden und man kann bei der ungeordneten Liste sogar ein eigenes Bild als Aufzählungszeichen wählen.

Diesen Artikel teilen

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel