Die Nachricht für Listen klingt zunächst betrüblich. Abgesehen von den Möglichkeiten der Textformatierung, der Hintergrund- und Rahmengestaltung, die es in HTML oder XHTML nicht gibt, zur Verfügung stehen, gibt es speziell für Listen wenig, was nicht auch in HTML machbar wäre, dort allerdings in anderer Syntax.
Neu dagegen ist die Möglichkeit, Listen herzustellen, welche wie Listen aussehen, wie sie funktionieren, aber ohne die Listentags auskommen. Das Kunststück, wenn es denn funktioniert, funktioniert mit vielen (allen?) tags mittels "display:list-style" sowie mit Zählern. Um letztere vorzustellen, ist auf dieser Seite einer installiert, dessen Funktion man, mit Glück, nun studieren kann.
Dazu wurde aus der CSS2-Spezifikation ein Beispiele direkt übernommen. Im Head dieser Seite stehen u.A. Style-Definitionen wie folgt: h1{ counter-reset: kapnum 5 } p{ counter-increment: num 2 } p:before{ content:counter( num, upper-roman) ". "}</style>
Damit wurde das H1-Tag zum Startpunkt der Zählung gemacht, danach werden die p-Tags gezählt, egal wo und wie sie verschachtelt wurden. Also: Auch innerhalb von Div's und Tabellen wird unverdrossen weitergezählt. Man beachte insbesondere die Zählung auch der beiden Prüflinks am Seitenende, die zusammen innerhalb einer p-Klammer stehen.
neuer Absatz: diesmal mit Hilfe des div-Tags "gemittet".
Zur Übersicht nun die Tabelle.
| CSS-Attribut | Anwendung und Bedeutung | Codebeispiel |
|---|---|---|
| counter () | Zugriff auf Werte (Identifizierer, gesammelte Angaben zur Formatierung) eines Counters nach dem Muster: counter( <ident>, <list-style-type> ). Die Werte können nur über die Eigenschaft " content" eingestellt werden | hier gilt: p:before{ content:counter( num, upper-roman ) ". "} |
| counter-reset | der Anfangswert des Counters (Zählers) wird festgelegt. Identifiziere und ggf. Zahl Weil hier im Beispiel h1 ein Nachfolger von td ist, bleibt die Zählung diesmal auf die Zelle beschränkt. In der nächsten Zelle gilt wieder die "große" Zählung. | Hier gilt: h1{counter-reset: kapnum 5} <h1>NEU</h1> NEUHund Katze |
| counter-increment | Zählerschritt, zum Zählernamen zu vergeben, sonst =1 Das Beispiel rechts ist mit p-Tags geordnet und wird mit 2er-Schritten durchgezählt: p{counter-increment: num 2 } | Elefant Elefant Elefant Elefant Elefant Elefant Elefant Elefant Löwe Löwe Löwe Löwe Löwe Löwe Löwe Löwe Löwe Löwe Löwe Mücke Mücke |
| list-style | gesammelte Angabe, aus den folgenden Attributen: Typ, Position, Bild | <ul style="list-style:circle inside">
|
| list-style-type | Einstellung der Aufzählungszeichen, erkannt werden: decimal (1, 2, 3,..), decimal-leading-zero (01, 02, ... 11, 12), lower-roman (i, ii, iii, ...), upper-roman (I, II, III, ...), lower-greek(α, β, γ, ...), lower-latin(a, b, c, ...), upper-latin(A B, C, ...), lower-alpha(a, b, c, ...), upper-alpha(A, B, C, ...), eine größere Zahl ausländischer Zählungen, wie hebrew, georgian, armenian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha (nicht mehr alle inder CSS2.1-Spezifikation genannt, werden aber offenbar angezeigt) sowie disc, circle, none, square, rechts im Beispielfeld zu sehen. Den Browsern ist weitgehend egal, ob es eine geordnete oder ungeordnete Liste ist. Die mit list-style-type festgelegten Zeichen werden jeweils sinngemäß angezeigt. | Beispiel zur geordneten liste (<ol>) list-style-type:upper-roman
list-style-type:
Beispiel zur ungeordneten Liste (<ul>), die <li>-Tags haben unterschiedliche Werte des list-style-type.
|
| list-style-image | Ein Aufzählungszeichen kann als Datei geladen und eingefügt werden. Mögliche Werte sind die URL der Bilddatei und none. Wichtig: Die Datei kann absolut adressiert werden oder relativ zum Speicherort der Style-Definition. | ul{list-style-image:url(grafik.gif)}
|
| list-style-position | Das Aufzählungszeichen kann vor dem Text oder in den Textblock eingeordnet dargestellt werde. Mögliche Werte demnach: outside und inside. Fehlt die Angabe, dann wird outside angenommen. | ul{list-style-position:outside;}
ul{list-style-position:inside;}
|
| marker | Was Listen schon in CSS1 konnten, die Anzeige unterschiedlicher Aufzählungszeichen oder -nummern, ist seit CSS2 mit erweiterten Formatierungsmöglichkeiten mit "marker" möglich. | |
| marker-offset | Es geht um den Einschub von Listen- oder Aufzählungselemnten. Mögliche Werte sind eine Längenangabe, auto oder inherit. |