CSS kurz & gut

Cascading Style Sheets sind für viele Designer und Webentwickler zu einem unersetzlichen Mittel für effizientes, standardkonformes und browserübergreifendes Webdesign geworden. Initiativen wie der CSS Zen Garden beweisen, dass man mit trockenen CSS-Codezeilen erstaunlich frische und kreative Lösungen zaubern kann.

Der Spaß wird allerdings getrübt, wenn man sich gerade mal wieder nicht erinnern kann, welche Werte man für eine bestimmte CSS-Eigenschaft verwenden kann. Auf was bezieht sich der Prozentwert im Stylesheet eines Kollegen? Auf welche Elemente kann die Eigenschaft list-style angewendet werden? Da muss eine kompakte und übersichtliche Referenz wie CSS -- kurz & gut her.

Kern dieser Ausgabe ist eine vollständige Referenz aller CSS-Eigenschaften, Pseudoklassen und -elemente, die in den Standards CSS2 und CSS 2.1 definiert sind. Eric Meyer, ein international anerkannter Webstandards- und CSS-Experte, gibt darüber hinaus eine kurze Einführung in die Funktionsweise und grundlegenden Konzepte von Cascading Style Sheets.

Darstellungsrollen von Elementen (S. 14-15)

Zusätzlich unterscheidet man in CSS2 Elemente noch anhand ihrer Darstellungsrolle. Die zwei möglichen Darstellungsrollen sind Block-Level und Inline-Level.

Block-Elemente

Block-Level-Elemente erzeugen standardmäßig eine Elementbox, die den Inhaltsbereich ihres Elternelements ausfüllt. Links und rechts neben einem Block-Element können keine anderen Elemente stehen. Block-Level-Elemente erzeugen dadurch eine Art »Zeilenumbruch « vor und nach dem Element. Die bekanntesten Block-Elemente in HTML sind p und div. Es gibt in der Regel keine ersetzten Block-Elemente.

Einen Sonderfall der Block-Elemente stellen die Listeneinträge dar. Abgesehen davon, dass sie ein Aufzählungszeichen (einen so genannten »Marker«) erzeugen, verhalten sie sich aber wie ganz normale Block-Elemente. Bei ungeordneten Listen ist der Marker meist ein kleiner Kreis; bei geordneten Listen meist eine Ziffer. Diese Zeichen werden in der Regel dem Listeneintrag vorangestellt.

Inline-Elemente

Die von Inline-Level-Elementen erzeugte Box wird innerhalb einer Zeile dargestellt und unterbricht den Textfluss nicht. Ein gutes Beispiel für ein Inline-Element in XHTML ist das Element a. Weitere Kandidaten sind strong und em. Bei diesen Elementen wird weder vorher noch nachher ein Umbruch erzeugt, der die Darstellung unterbricht.

Auch wenn die Block- und Inline-Elemente in CSS sehr viel mit ihren Pendants in HTML und XHTML gemeinsam haben, gibt es einen wichtigen Unterschied: In HTML und XHTML können Block- Elemente nicht von Inline-Elementen abstammen. In CSS gibt es dagegen keinerlei Einschränkungen, wie die Darstellungsrollen ineinander verschachtelt werden dürfen.

Grundlagen der visuellen Darstellung

CSS definiert eine Reihe von Algorithmen, nach denen die Elemente eines Dokuments dargestellt werden. Diese bilden die Grundlagen der visuellen Präsentation in CSS. Entsprechend den zwei Arten von HTML-Inhaltsmodellen existieren zwei sehr unterschiedliche Darstellungsformen: Block-Level und Inline-Level.

Darstellung von Block-Level-Elementen
Ein Block-Level-Element erzeugt eine rechteckige, so genannte Elementbox. Diese gibt an, wie viel Platz ein bestimmtes Element einnimmt. Die verschiedenen Teile einer Elementbox sehen Sie in Abbildung 2. Für eine Elementbox gelten folgende Regeln:

• Der Hintergrundbereich erstreckt sich über den Inhaltsbereich, die Innenabstände und Rahmen bis zu den Außenkanten das Rahmens. Besitzt der Rahmen transparente Bereiche (z.B. wenn dieser gepunktet oder gestrichelt ist), so ist an diesen Stellen der Hintergrund zu sehen.
• Nur die Außenabstände (margins) sowie die Eigenschaften height und width können den Wert auto annehmen.
• Negative Werte können nur für Außenabstände festgelegt werden.
• Innenabstände (padding) und Rahmen einer Elementbox erhalten standardmäßig den Wert 0 bzw. none.
• Die Eigenschaft width bestimmt ausschließlich die Breite des Inhaltsbereichs. Die Breite von Innen- und Außenabständen und Rahmen wird hinzugerechnet. Dasselbe trifft auf height zu.

Abbildung 2: Das Boxmodell (Die Abbildung ist kein Bestandteil der Leseprobe)
Darstellung von Inline-Elementen
Sämtliche Inline-Elemente besitzen eine Zeilenhöhe (festgelegt über die Eigenschaft line-height), die zu großen Teilen dafür verantwortlich ist, wie die Elemente dargestellt werden. Die Zeilenhöhe wird für einen Text anhand der folgenden Faktoren ermittelt:

Anonymer Text

Sämtliche Zeichenketten, die sich nicht innerhalb eines Inline- Elements befinden, werden als anynomer Text bezeichnet.

<p> Ich bin <em>so</em> glücklich!</p>

Im obigen Beispiel werden die Zeichenfolgen » Ich bin « und » glücklich!« als anonymer Text betrachtet. Hierzu gehören auch die Leerzeichen, die schließlich auch nur ganz normale Zeichen sind.