HTML hat als Auflistungstyp nur eine Variante. Mit CSS 1 und CSS 2 werden jedoch weitere Listentypen, und Gestaltungsmöglichkeiten eröffnet.
Um einfache Auflistungen zu erzeugen gibt es in HTML zwei Tags.
<ol> wird für numerische Listen verwendet, <ul>
dagegen für Listen mit "Punkten" oder "Bullets"
als Auflistungssymbol.
Zunächst die <li> Listen
- Erstes…
- Zweites…
- Drittes…
Wie Sie sehen sollten, hat diese Liste, im Vergleich zu "normalen"
vordefinierten Listen einen Bullet, welches nicht ausgefüllt
ist.
<ul style="list-style-type:circle">
<li> Erstes...</li>
<li> Zweites...</li>
<li> Drittes...</li>
</ul>
Der CSS Befehl list-style-type definiert den Typ der Liste.
In diesem Fall ist circle als Attribut gewählt.
Weitere Elemete:
list-style-type:square
- Erstes…
- Zweites…
- Drittes…
list-style-type:disc
- Erstes…
- Zweites…
- Drittes…
Eine eigene Listengrafik, oder Bullet können Sie ebenfalls
mit CSS einsetzen. Hierzu wird das CSS Sprachelement list-style-image
in Anspruch genommen.
- Erstes…
- Zweites…
- Drittes…
<ul style="list-style-image:url(../images/biggrin.gif)">
<li>Erstes...</li>
<li>Zweites...</li>
<li>Drittes...</li>
</ul>
Der Pfad zum Bullet-Bild wird mit url() angegeben.
Nun die <ol> Aufzählungen:
- Erstens…
- Zweitens…
- Drittens…
<ol style="list-style-type:decimal">
<li>Erstens...</li>
<li>Zweitens...</li>
<li>Drittens...</li>
</ol>
Die Angabe, wie die Liste aussehen soll erfolgt über list-style-type,
und dem Wert. Im folgenden werden ihnen einige dieser Typen vorgestellt.
- Erstens…
- Zweitens…
- Drittens…
<ol style="list-style-type:lower-roman"></ol>
Mit upper-roman ist die gleiche
Aufzählung nur groß geschrieben.
- Erstens…
- Zweitens…
- Drittens…
<ol style="list-style-type:lower-alpha"></ol>
Mit upper-alpha ist die gleiche
Aufzählung nur groß geschrieben.
Es gibt weitere Typen für Listen, diese werden bisher jedoch
nur vom Netscape 6.1 interpretiert.