Letzte Änderung am 21.01.2005
Cascading Style Sheets - ein Tutorial
Vorbemerkung: Die Kapiteleinteilung hält sich an das Buch von Eric A. Meyer: Cascading Style Sheets, The Definitive Guide, O'REILLY, 2004.
Es soll eine sinnvolle Adaptation der W3C-Regeln zu CSS1, 2 und 2.1.aus der Perspektive von Lernenden sein. Die eingefügten Demos lassen sich-fast ohne Ausnahme-im Quelltext editieren und ansehen. Der Code ist so einfach wie möglich gehalten und das Tutorial kann auch offline benutzt werden. CSS-Bereiche, die in den gängigen Browsern bisher nicht implementiert wurden, werden nicht dokumentiert.
Andreas Lutz MatteDesign, Bern

Kapitelübersicht

Kap 12: Listen und generierte Inhalte

• Listen
• Typen von Listen-Markierungen (list-style-type)
• Bilder als Listentypen (list-style-image)
• Positionierung von Listen-Markierungen (list-style-position)
• Listen Layout
• CSS generierte Inhalte (wird hier vorläufig, wegen mangelnder Browserunterstützung nicht behandelt)

Listen
Listen sind einfache Blockboxen bei denen die Anfangselemente (list-style) in CSS fast beliebig gesetzt werden können. In HTML werden die Listen vom Browser dargestellt und die Möglichkeiten sind klein.

Typen von Listen-Markierungen

Demo 1

Welche der Angaben von neueren Browsern unterstützt wird, muss ausprobiert werden.
CSS unterscheidet nicht zwischen UL und OL, dies entscheidet einzig der Browser.
Die Reduktion der Typen in CSS 2.1. ist das Eregebnis schlechter Umsetzung der zusätzlichen Marker-Typen in CSS 2.
list-style-type:none kann in einzelnen Listenelementen eingesetzt werden. Die Vererbung führt dazu, dass in verschachtelten Listen besondere Definitionen notwendig sind:
Beispiel: ul {list-style-type:disc}
ul ul{list -style-type:circle}
ul ul ul{list-style-type}

Bilder als Listen-Element Markierungen

Demo 2

Beispiel: ul li{list-style-image: url(ohio.gif)}
Ersatz-Angaben für nicht verfügbare Elemente:
Beispiel: ul{list-style-image:url(ohio.png);list-style-type:square
Wegen der Vererbung sind verschachtelte list-style-image allenfalls auf 'none' zu setzen, damit die Backup-Angabe eingelesen werden kann.

Position des Element-Markers

Demo 3

Inside setzt das Marker-Element in den Text hinein.

List Zusammenfassung (shorthand Property)

Beispiel: li {list-style: url(ohio.gif) square inside}

Listen Layout
List-Items (li) können problemlos ohne zugehöriges ul oder ol verwendet werden. Sie bilden ein Block-Element, welches eine gewisse Distanz zwischen dem Marker und dem Inhalt beinhaltet, der in CSS nicht weiter definiert ist.
MSIE dehnt die Blockgrenzen auf die Marker-Elemente aus, während Gecko-Browser dies ohne UL oder OL nicht tun. Dem ist beim Design Beachtung zu schenken. Wegen der Browserdifferenzen empfehlen sich Angaben wie:
Beispiel: ul{margin-left: 1em;padding-left:0}

Generated Content (vom Browser eingefügter Content) Wird von IE und andern Browsern nicht verstanden und hier vorläufig nicht weiter ausgeführt.

Weiter zu Kapitel 13: User-Interface Stile