Grundlagen der Webpublikation, Begleittext 5: Cascading Style Sheets und das Ansprechen einzelner (X)HTML-Elemente

1Begriffe und Konzepte

Stylesheets sind das vom W3-Konsortium favorisierte Mittel, einem strukturierten Webdokument »Stil« hinzu zu fügen, es also in Layout und Design mit den Vorstellungen der Webautor-inn-en in Einklang zu bringen. Zudem kann durch Stylesheets die Darstellung des Seiteninhalts an die Erfordernisse verschiedener Ausgabemedien (Browser, Drucker, Handhelds, TV-Geräte, etc.) angepasst werden. All dies wird durch eine strikte Trennung von Struktur und Präsentation beim Schreiben von Webdokumenten erreicht, was besonders markant in der Auslagerung der Stilbeschreibungen in eigene CSS-Dateien, die im Kopfteil der Seite mittels des <link>-Elements eingebunden werden, zum Ausdruck kommt. Eine Alternative zu diesen externen Stylesheets stellen interne Stylesheets dar, die – wiederum im Kopfteil – in das <style>-Element inkorporiert werden. Abzuraten ist hingegen von der Nutzung sogenannter Inline-Styles, die den einzelnen (X)HTML-Elementen über das style-Attribut zugewiesen werden, da auf diese Weise nicht nur die obsolet gewordene Vermischung von Inhalt und Darstellung wiederbelebt, sondern auch die Wartbarkeit des Markups selbst in hohem Maße gefährdet wird.

Die zur Zeit maßgebliche Version der auf die Präsentation strukturierter Dokumente (HTML, XML, etc.) zielenden Stylesheetsprache Cascading Style Sheets (CSS), die ihren ersten Namensteil übrigens dem in ihr zum Tragen kommenden Prinzip der »Kaskade«, einem Prinzip der Vererbung und Gewichtung also, verdankt, ist die Version 2.1, die allerdings erst den Status einer »Candidate Recommendation« besitzt, gleichwohl aber in modernen Browsern ziemlich weitreichend umgesetzt ist (Fehlimplementierungen sind dabei freilich immer in Rechnung zu stellen). Die folgenden Beschreibungen orientieren sich daher auch an dieser Version, zumal die kommende Version 3, die grundsätzlich dem Leitgedanken einer Modularisierung folgt, erst in Teilbereichen mit fortgeschritteneren Entwürfen aufwarten kann.

Beispiel 1a: Einbindung eines Stylesheets über das <link>-Element

<head>
[…]
<link rel="stylesheet" type="text/css" media="screen" 
    href="css/layout.css" />
</head>

Beispiel 1b: Internes Stylesheet mittels <style>-Element

<head>
[…]
<style type="text/css">
    h1 { font-family: "DejaVu Sans", sans-serif;
         font-size: 1.4em; }
    p { font-family: "DejaVu", serif;
        font-size: 0.9em; }
</style>
</head>

1.1CSS-Syntax und Datentypen

1.1.1Aufbau von CSS-Regeln

Eine CSS-Regel, die näher bestimmt, wie ein Element im Dokumentfluss von den jeweiligen User Agents umzusetzen ist, folgt einem immer wiederkehrenden Grundschema: einem Selektor, der auf ein (X)HTML-Element oder auf dessen Spezifizierung durch einen Identifikator bzw. ein class-Attribut referiert, wird mit einer Deklaration bzw. einem Deklarationsblock eine Eigenschaft, die einen bestimmten Wert annimmt, zugewiesen. Die Selektoren können zusätzlich miteinander kombiniert werden, so dass die entsprechenden (X)HTML-Elemente – der Dokumenthierarchie entsprechend – mit wechselnden CSS-Eigenschaften kontextsensitiv angesprochen werden können.

Die Syntax einer CSS-Regel sieht also folgendermaßen aus:

Selektor { Eigenschaft: Wert; }

Auf einen Selektor, der auch eine nach gewissen Regeln kombinierte Gruppe von Selektoren sein kann, folgt, eingefasst von geschweiften Klammern, eine Deklaration, die einer CSS-Eigenschaft nach einem obligatorischen Doppelpunkt einen bestimmten Wert zuschreibt, wobei die Deklaration selbst möglichst durch ein Semikolon beendet werden sollte. Verpflichtend ist dieses Setzen eines Semikolons allerdings nur dann, wenn einem Element in einer gemeinsamen Deklaration (einem sogenannten Deklarationsblock) gleichzeitig verschiedene CSS-Eigenschaften zugewiesen werden sollen, die dann eben voneinander differenziert werden müssen. Diese CSS-Syntax kommt sowohl bei externen, als auch bei internen Stylesheets zur Anwendung.

1.1.2Universalselektor (Universal selector)

Mit dem Universalselektor, der durch einen Asterisk wiedergegeben wird, wird jeder Elementtyp, der in ein Webdokument Eingang gefunden hat, angesprochen. Bei zusammen gesetzten Selektoren wie *#myid oder *.neueklasse kann der Asterisk aber auch weg gelassen werden.

Beispiel 2: Universalselektor

* { font-size: 100.01%; }
#inhalt { float: left;
          width: 70%; }
*.datum { color: #000000;
          background-color: #bdbdbd; }
.hinweis { color: #900000;
           background-color: #bdbdbd; }

1.1.3Elementselektoren (Type selectors)

Ein Element- oder Typselektor hat zielgenau für das jeweils gewählte Element Gültigkeit, und zwar über das ganze Dokument hinweg; Elementselektoren können aber auch zu Gruppen zusammen gefasst werden, wenn die gewünschten CSS-Eigenschaften mehreren Elementen zugleich zugewiesen werden sollen.

Beispiel 3: Elementselektor

p { font-family: sans-serif;
    font-size: 0.95em; }
h1, h2, h3 {font-family: Helvetica, Arial, sans-serif; }
h1 { font-size: 1.4em; }
h2 { font-size: 1.3em; }
h3 { font-size: 1.2em; }

1.1.4Nachfahrenselektoren (Descendant selectors)

Nachfahrenselektoren selegieren all die Elemente, die in andere Elemente geschachtelt sind, also im Dokumentbaum einem bestimmten anderen Element nachfolgen. Hierdurch können CSS-Eigenschaften sehr zielgerichtet zugewiesen werden, ohne dass neue class-Attribute ins (X)HTML-Markup eingeführt werden müssen.

Beispiel 4: Nachfahrenselektor

h1 em { font-weight: bold; }
p em { font-style: italic; }

1.1.5Kindselektoren (Child selectors)

Kindselektoren nehmen Bezug auf genau die Elemente, die in der direkten Nachfolge eines anderen Elements zu finden sind, d.h. zugleich, sie gelten nicht mehr für jene Elemente, die eine weitere Ebene (oder mehr) darunter liegen.

Beispiel 5: Kindselektor

p > em { font-style: italic;
         font-weight: bold; }

1.1.6Benachbarte-Geschwister-Selektoren (Adjacent sibling selectors)

Benachbarte-Geschwister-Selektoren kommen dann zum Einsatz, wenn zwei Elementtypen ein gemeinsames Elternelement haben und zugleich unmittelbar aufeinander folgen; mit diesem Selektor lassen sich also bestimmte Bedingungen für das Zuschreiben von CSS-Eigenschaften formulieren. Im Übrigen kann das jeweils erste Geschwisterelement auch mit einem class-Attribut versehen sein, so dass im Stylesheet der Klassenselektor einsetzbar wird.

Beispiel 6: Benachbarte-Geschwister-Selektoren

blockquote + p { text-indent: 0; }
h1.titel + h2 { margin-top: 2em; }

1.1.7Attributselektoren (Attribute selectors)

Mit Attributselektoren haben Webautor-inn-en die Möglichkeit, gezielt auf Elemente mit bestimmten Attributen Bezug zu nehmen; allerdings wird dieser Selektor nicht von allen Browsern ausreichend unterstützt.

Beispiel 7: Verschiedene Typen von Attributselektoren

p[attribut] { text-indent: 0; }
a[href="http://domain.de/"] { color: #900000;
                           background-color: #bdbdbd; }
a[class~="extern"] { color: #444444;
                     background-color: #f2f2f2; }
a[href^="https"] { color: #000000;
                   background-color: yellow; }
a[href$=".pdf"] { color: #900000;
                  background-color: #ffffff; }
img[src*="/grafik/"] { width: 5em; height: 7em; }

1.1.8Klassenselektoren (Class selectors)

Der Klassenselektor zählt zwar zu den Attributselektoren, er kann aber insofern eigenständigen Rang beanspruchen, als das ihm zu Grunde liegende class-Attribut im (X)HTML-Markup die Funktion der Spezifizierung eines Elements zugewiesen bekommen hat.

1.1.9ID-Selektoren (ID selectors)

1.1.10Pseudoklassen (Pseudo-classes)

1.1.11Pseudoelemente (Pseudo-elements)

1.2Das Boxmodell

2Gruppierung der CSS-Eigenschaften

2.1Farben und Hintergründe

color

background-color

2.2Schriften

font-family

font-size

font-weight

font-style

font-variant

2.3Text

text-decoration

text-transform

text-shadow

letter-spacing

word-spacing

2.4Listen

list-style-type

list-style-position

list-style-image

2.5Tabellen

2.6Sonstiges

↓ Verknüpfung

Textanker