Listen und Aufzählungen

Das aus HTML bekannte Layout von Aufzählungen und Listen kann mit CSS einfach verändert werden. Hierfür dient die Anweisung list-style-type: xxx, die aber nur auf list-item Elemente angewendet werden kann. Hierbei können folgende Werte angenommen werden:

 

 

CSS Wertebereich für list-style-type:

disc | die bekannten ausgefüllten Kreise
circle | nicht ausgefüllte Kreise
square | Quadrate
decimal | Ziffer: 1, 2, 3,...
upper-alpha | Großbuchstaben: A, B, C,...
lower-alpha | Kleinbuchstaben: a, b, c,...
upper-roman | große römische Ziffern: I, II, III,...
lower-roman | kleine römische Ziffern: i, ii, iii,...
none | kein Zeichen

Um in CSS die Aufzählungszeichen bei mehrstufige Aufzählungen und Listen je nach Ebene anders zu gestalten, werden die Definitionen in den verschiedenen Ebenen der Liste festgelegt. 

 

 

Beispiel - Mehrstufige Listen und Aufzählungen in CSS:

ul {
list-style-type: none;
}

ul ul {
list-style-type: circle;
}

ul ul ul {
list-style-type: disc;
}

Die Position des Aufzählungszeichens im Verhältnis zu dem aufzuzählenden Text wird durch list-style-position: inside | outside festgelegt. Ist der Wert inside gesetzt, liegt das Aufzählungszeichen auf gleicher Höhe wie der Text (ab der zweiten Zeile). Bei outside dagegen sind die Aufzählungszeichen vorangestellt und der Text auf einer Höhe (erste und darauf folgende Zeilen).