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;
}
Verschaff Dir einen Überblick
Wissenswertes, Hilfestellung und Lösungen rund um das Thema CSS:A
Absolute und relative MaßeAbgerundete Ecken
Anordnung
B
background-attachmentbackground-position
C
cm (Zentimeter)Color
Contextual Selectors
CSS Formatierungen
CSS-Sprites
D
Definition mehrerer TagsE
Ebenen / LayerEcke / Eckenrundung
Einbindung CSS
em
ex
Externe CSS-Datei
F
FarbenFarbcodes
Farbnamen
Farbverlauf
Fixierter, fester Hintergrund
G
GradientGrundlagen
H
HintergrundbildHintergrundbild Positionierung
Hover-Effekt über Hintergrundbild
I
IDsin (Inch)
Interne CSS-Datei
K
KlassenKlassifizierung
L
Layer / EbenenListen
P
pcPosition
Positionierung Hintergrundbild
pt (Pica)
px (Pixel)
R
Rahmen FormatierungReihenfolge von Elementen
Relative und absolute Maße
repeat Möglichkeiten
Runde Ecken
S
SchriftformatierungScrollbarer Hintergrund
Sichtbarkeit
Sprites
Stylesheet
T
TextflussTextgestaltung
U
Überhängende InhalteÜbereinander liegende Elemente
V
VererbungVerlauf / Verläufe
