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
>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).
list-style-type: none;
}
ul ul {
list-style-type: circle;
}
ul ul ul {
list-style-type: disc;
}