Listen
Aufzählungszeichen
Mit der CSS-Eigenschaft „list-style-type“ können die Aufzählungszeichen von Listen definiert werden. Dabei kann die Eigenschaft u. a. folgende Werte annehmen:
Für ungeordnete Listen:
- disc: ausgefüllter Kreis
- circle: unausgefüllter Kreis
- square: ausgefülltes Rechteck
Für geordnete Listen:
-
decimal: Zahlen
-
decimal-leading-zero: Zahlen mit führender Null
-
lower-alpha: kleine Buchstaben
-
lower-greek: kleine griechische Buchstaben
-
lower-roman: kleine römische Zahlen
-
upper-alpha: große Buchstaben
-
upper-roman: große römische Zahlen
Für alle Listentypen:
-
none: keine
Die komplette Liste der möglichen Listensymbole, gibt es auf der Seite „CSS list-style-type Property“, in der CSS-Referenz von w3schools.com.
CSS-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i9970f49dc88770df/version/1481209150/image.png)
HTML-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/dimension=650x10000:format=png/path/s834d64c225dfb243/image/ica6406a79a1d9afc/version/1481209848/image.png)
Ergebnis im Browser:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/ibf0f325c8f6a7554/version/1481209872/image.png)
Bilder als Aufzählungszeichen
Mit der CSS-Eigenschaft „list-style-image“ können Bilder als Aufzählungszeichen verwendet werden. Als Wert wird hier eine URL zu einem Bild angegeben:
CSS-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i40746d73d8b15785/version/1481209304/image.png)
HTML-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i47ad3bb30c5bc18f/version/1481209897/image.png)
Ergebnis im Browser:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i3be7bb5c34c49f2f/version/1481209905/image.png)
Position von Aufzählungszeichen
Mit der CSS-Eigenschaft „list-style-position“ kann definiert werden, ob die Aufzählungszeichen innerhalb oder außerhalb des Textbereichs angezeigt werden sollen. Dabei sind die Werte „inside“ für innerhalb und „outside“ für außerhalb möglich:
CSS-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i81cd7e8e15ec6b67/version/1481210002/image.png)
HTML-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/ia4033ea34070993e/version/1481210039/image.png)
Ergebnis im Browser:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i521e30ff499fa112/version/1481210067/image.png)
Shorthand-Property
Für Listen gibt es die Shorthand-Property „list-style“. Die Reihenfolge in der die Eigenschaftswerte angegeben werden müssen ist dabei:
- list-style-type
- list-style-position
- list-style-image
Dabei können, wie auch bei anderen Shorthand-Properties, einzelne Werte weggelassen werden, solange für die restlichen Werte eindeutig zuordenbar sind!
CSS-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i704911a240abf362/version/1481211065/image.png)
HTML-Datei:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/i6a3ceb33a876a5f9/version/1481211085/image.png)
Ergebnis im Browser:
![](https://image.jimcdn.com/app/cms/image/transf/none/path/s834d64c225dfb243/image/if1a4fed684d89936/version/1481211109/image.png)
Abschlussübung
Als Abschlussübung kannst du folgendes Beispiel erstellen:
![](https://image.jimcdn.com/app/cms/image/transf/dimension=609x10000:format=png/path/s834d64c225dfb243/image/i7142ea5cf5d0924d/version/1493715168/image.png)
Dabei sollen folgende Bedingungen eingehalten werden:
- Für die Browser wird eine „ungeordnete List“ mit „list-style-type: none“ verwendet
- Für die Unterpunkte wird eine „ungeordnete List“ verwendet, bei der als Auflzählungszeichen das entsprechende Browser-Icon verwendet wird
Die Lösung kannst du dir zur Kontrolle hier herunterladen: