Die list-style-type-Eigenschaft

(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)

Mit der Eigenschaft list-style-type wird festgelegt, welche Art von Aufzählungszeichen für die Listeneinträge benutzt wird. Alle verfügbaren Werte finden Sie in den folgenden beiden Tabellen:

Tabelle: Werte für die Eigenschaft list-style-type in nicht nummerierten Listen

Eigentlich gibt es noch viele weitere Werte für list-style-type, unter anderem für Sprachen wie Hebräisch, Armenisch, Japanisch und Chinesisch. Doch nur die wenigsten Leser dieses Buches werden diese Sprachen einsetzen, geschweige denn sprechen können. Von daher können wir sie an dieser Stelle vernachlässigen.

Tabelle: Werte für die Eigenschaft list-style-type in nummerierten Listen

Tabelle: Werte für die Eigenschaft list-style-type in nummerierten Listen

Standardmäßig benutzen Listen als Aufzählungszeichen einen gefüllten Kreis. Für verschachtelte Listen wird auf der ersten Einzugsebene ein ausgefülltes Quadrat eingesetzt, wie wir in der folgenden Abbildung sehen können.

Abbildung: Verschachtelte Aufzählungslisten ohne CSS.

So weit, so gut. Mit CSS können Sie die Aufzählungszeichen auf jeder Ebene aber auch anders festlegen. Die folgenden Stilregeln etwa erzeugen für die oberste Listenebene ein ausgefülltes Quadrat, für die zweite einen ausgefüllten Kreis und für die dritte einen leeren Kreis:

Bitte beachten Sie, dass wir hier für die drei verschachtelten Listenebenen und ihre zugehörigen Stilmerkmale Selektoren für Nachfahren einsetzen. Es ist in diesem Fall die einfachste und effizienteste Art, Stilregeln zuzuweisen. Das Ergebnis sehen Sie in der nächsten Abbildung.

Abbildung: Definition verschachtelter Aufzählungslisten mit list-style-type.

Die Gestaltung nummerierter Listen wirkt auf den ersten Blick komplizierter als die reiner Aufzählungslisten, sie funktioniert aber im Prinzip genauso. Wenn Sie für die oberste Ebene eine bestimmte Art von Aufzählungszeichen festlegen, werden diese an die untergeordneten Listen weitervererbt. Die folgende Abbildung veranschaulicht, was zum Beispiel passiert, wenn der übergeordneten Liste mit dem Wert upper-roman groß geschriebene römische Zahlen zugewiesen werden. Die Aufzählungszeichen werden auch für die verschachtelten Listen verwendet.

Abbildung: Verschachtelte, nummerierte Liste mit list-style-type-Wert upper-roman.

Das Ergebnis wirkt trotzdem nicht besonders ansprechend und übersichtlich. Weisen wir aber jeder einzelnen Liste ein anderes Aufzählungszeichen zu, sieht die verschachtelte Liste schon deutlich besser aus. Das Ergebnis der folgenden Stilregel sehen Sie in der Abbildung darunter.

Abbildung: Verbesserte Darstellung verschachtelter nummerierter Listen mit list-style-type.