CSS Schnellstart – Listen
Die Elemente ul und ol sind dafür da, Listen in HTML bereitzustellen. Eine der häufigsten Fragen ist, wie man diese Listen mit CSS gestalten kann.
Es gibt 3 Eigenschaften, die für die Gestaltung interessant sind.
Listentyp:
Der Listentyp list-style-type bestimmt welches Zeichen bzw. Symbol als Aufzählungszeichen verwendet wird. Hier gibt es eine große Auswahl, denn jede Aufzählung vom Punkt bis hin zur japanischen Zählung ist möglich.
list-style-type: square;
Hier sind die wichtigsten Werte für diese Eigenschaft:
| Name | Beschreibung |
| none | Kein Aufzählungszeichen |
| square | Quadrat als Aufzählungszeichen |
| disc | Scheibe als Aufzählungszeichen (Standard) |
| circle | Kreis als Aufzählungszeichen |
| decimal | Zahlen: 1,2,3 |
| decimal-leading-zero | Zahlen mit führender null: 01, 02, 03 |
| lower-alpha | Alphabetisch klein: a, b, c |
| upper-alpha | Alphabetisch groß: A, B, C |
| lower-roman | Römische Zählung klein: i, ii, iii |
| upper-roman | Römische Zählung groß: I, II, III |
Bild als Aufzählungszeichen:
Anstatt einem Zeichen, kann mit list-style-image auch ein Bild als Aufzählungszeichen verwendet werden:
list-style-image: url('ok.gif');
Voraussetzung ist natürlich, dass das Bild an der URL auffindbar ist.
Position des Aufzählungszeichens:
Mit der list-style-position Eigenschaft kann die Position des Aufzählungszeichens geändert werden:
list-style-position: outside;
Der Wert outside bedeutet, dass das Aufzählungszeichen außerhalb des Elementinhaltes gezeigt wird. Der Wert inside würde das Aufzählungszeichen innerhalb des Elementinhalts positionieren.
Lass uns ein paar Listen stylen!