Listen

Der Darstellung von Listen mit CSS gegenüber HTML kann durchaus der Vorzug gegeben werden, immerhin ist auch etwas mehr Fein-Tuning möglich. Während in HTML lediglich verschiedene Aufzählungszeichen zur Verfügung stehen, wird die Darstellung von Listen in CSS um das Einbinden von Grafiken erweitert.
Im Prinzip unterscheidet sich die Definition einer liste nicht sehr von der Definition in HTML. Einleitend ist mit <ul> oder <ol> die Angabe der Listenart erforderlich. Dabei entspricht <ul> einer Aufzählungsliste und <ol> einer nummerierten Liste.
Anschließend erfolgt die Angabe der verwendeten Nummerierungs- oder Aufzählungszeichen durch das Attribut list-style sowie evtl. weiterer Formatierungen. Sie können für das Attribut list-style auch sofort den Wert none angeben.
 

Listentyp	Wert	Beschreibung
ol	alpha	alphabetische Nummerierung
ol	decimal	dezimale Nummerierung
ol	roman	römische Nummerierung
ul	circle	Kreis als Aufzählungszeichen
ul	disc	Scheibe als Aufzählungszeichen
ul	square	Quadrat als Aufzählungszeichen

Beispiel:

<ul style="list-style:circle: color:blue">
<li>Frühstück
<li>Mittagessen
<li>Abendbrot
</ul>

Das Beispiel hat im Browser folgendes Aussehen.

Als besonderes Highlight bei der Gestaltung von Listen mit CSS ist das Einbinden eigener Grafiken als Aufzählungszeichen zu erwähnen. Dazu geben Sie lediglich zusammen mit der Adresse der zu verwendeten Grafik das Argument list-style-image an.

Beispiel:

<ul style="list-style-image:url(dot.jpg)">
<li>Frühstück
<li>Mittagessen
<li>Abendbrot
</ul>

Das Beispiel hat im Browser folgendes Aussehen.