Aufzählungslisten
So genannte Aufzählungslisten sind schon seit langem in HTML fest verankert.
Typen (list-style-type)
Mit Hilfe des folgenden Befehls können Sie nun einfach das Erscheinungsbild der Listen auf Ihrer Webseite verändern.
| list-style-type | |
|---|---|
| Werte | disc | circle | square | decimal | upper-alpha | lower-alpha | upper-roman | lower-roman | none |
| Standardwert | disc |
| Vererbung | ja |
| Anwendbar auf | List-item Elemente |
Um Listen mit kleinen Quadraten statt runden Kreisen beginnen zu lassen, reicht folgender Befehl:
UL { list-style-type: square; }
Was die anderen Werte bedeuten, erklärt die folgende Tabelle:
| Wert | Ergebnis |
|---|---|
disc |
kleine gefüllte Kreise |
circle |
kleine nicht-gefüllte Kreise |
square |
kleine Quadrate |
decimal |
1, 2, 3, 4, 5… |
upper-alpha |
A, B, C, D, E… |
lower-alpha |
a, b, c, d, e… |
upper-roman |
I, II, III, IV, V… |
lower-roman |
i, ii, iii, iv, v… |
none |
kein Aufzählungszeichen |
Die meisten Browser haben eine bestimmte Voreinstellung, wie verschachtelte Aufzählungslisten dargestellt werden sollen, z.B. zuerst kleine gefüllte Kreise, dann nicht-gefüllte Kreise und danach Quadrate.
Um dieses Verhalten zu ändern, können Sie folgende Befehle notieren. Der Browser fängt dann zuerst mit den Quadraten an, dann mit den nicht-gefüllten Kreisen und danach mit den gefüllten Kreisen.
UL { list-style-type: square; }
UL UL { list-style-type: circle; }
UL UL UL { list-style-type: disc; }
Aufzählungslisten mit Grafiken (list-style-image)
Als Aufzählungszeichen lässt sich statt der oben angegebenen Typen auch eine Grafik verwenden.
| list-style-image | |
|---|---|
| Werte | <URL> | none |
| Standardwert | none |
| Vererbung | ja |
| Anwendbar auf | List-item Elemente |
Kurzdefinition zu Auszählungslisten (list-style)
Wie bereits bei einigen anderen Befehlen möglich, lassen sich die obigen Befehle auch kurzerhand in einem einzigen zusammenfassen:
| list-style | |
|---|---|
| Werte | <list-style-type> || <list-style-image> || <list-style-position> |
| Standardwert | der jeweilige Standardwert |
| Vererbung | ja |
| Anwendbar auf | List-item Elemente |
Folgender Befehl benutzt als Aufzählungszeichen eine Grafik (wenn diese fehlt kleine Quadrate) sowie als Position des Aufzählungszeichen den Wert inside:
LI { list-style: url(smiley.gif) square inside; }
Fehlende Werte, z.B. für list-style-position werden durch die jeweiligen Standardwerte ersetzt.