vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Tag 4

Formatieren mit Stylesheets

Stylesheets sind keine ganz neue Erfindung. Tatsächlich gibt es sie schon seit einigen Jahren, nur dass sie früher - wegen mangelnder Unterstützung durch die Webbrowser - von den Webautoren kaum beachtet wurden. Was nutzt einem Webautor aber ein Tool, mit dem er sich zwar ganz neue Möglichkeiten zur Formatierung und Gestaltung seiner Webseiten erschließt, dieser Fortschritt aber von den Besuchern seiner Website gar nicht wahrgenommen wird?

Nun, zum Glück hat sich in dieser Hinsicht manches geändert. Seit der 4er-Version unterstützen der Internet Explorer wie auch der Netscape Navigator die Formatierung und Positionierung mit Stylesheets - wenn auch zum Teil in recht unterschiedlichem Maße. So ist die Unterstützung durch den Netscape Navigator etwas lückenhaft und weicht in manchen Details vom CSS-Standard ab, während der Internet Explorer den CSS-Standard in fast schon vorbildlicher Weise implementiert hat (auch wenn er eine Reihe von proprietären Elementen eingefügt hat). Nun, man hat bei Netscape Besserung versprochen und der neue Navigator 6, der jetzt gerade auf den Markt kommt, unterstützt die offiziellen Webstandards wesentlich besser. Dem verspäteten Triumphzug der Stylesheets sollte also nichts mehr im Wege stehen.

Die Themen heute:

4.1 Wozu braucht man Stylesheets?

Wie Sie wissen, verwenden Webdokumente die sogenannten HTML-Tags und deren Attribute zur Formatierung und zur Festlegung des Seitenlayouts. Die meisten dieser Tags sind allerdings nur mehr oder weniger grobe Vorgaben, deren genauen Umsetzung im Ermessen des Webbrowsers liegt. Zudem ist die Zahl der HTML-Tags recht beschränkt. Zwar kamen in den letzten Jahren immer neue Tags und Attribute hinzu, doch sind der Formatierung mit Tags nach wie vor erhebliche Grenzen gesetzt.

Hier setzt die Idee der Stylesheets an. Stylesheets räumen dem Webdesigner mehr Möglichkeiten zur dezidierten Gestaltung seiner Webseiten ein und vereinfachen und organisieren gleichzeitig die Erstellung und Wartung der Seiten. Dabei stellen Stylesheets nichts grundsätzlich Neues dar; im Grunde funktionieren Sie ähnlich wie HTML- Attribute.

Warum Sie Stylesheets nutzen sollten:

Bevor wir uns ein wenig eingehender mit den Stylesheets, mit der dahinter stehenden CSS-Spezifikation und den Möglichkeiten zum sinnvollen Einsatz von Stylesheets befassen, möchte ich Ihnen anhand eines einfachen einführenden Beispiels ein Gefühl dafür geben, was Stylesheets wirklich sind, wie sie eingesetzt werden und welche Vorteile sie uns bringen.

Vorbereitung des Beispiels

Abbildung 4.1:  Demoseite zur Formatierung mit Stylesheets

Legen Sie eine neue HTML-Seite an mit vier gleichen Textzeilen, die Sie mit Hilfe des <h2>-Tags als Überschriften der zweiten Ebene formatieren (siehe Abbildung 4.1).

Listing 4.1: ueberschriften1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Formatieren mit Stylesheets</title>
</head>

<body>

<h2>Dies ist eine Überschrift der zweiten Ebene</h2>
<h2>Dies ist eine Überschrift der zweiten Ebene</h2>
<h2>Dies ist eine Überschrift der zweiten Ebene</h2>
<h2>Dies ist eine Überschrift der zweiten Ebene</h2>

</body>
</html>

Textfarbe per HTML-Attribut

Wie kann man einer Überschrift eine andere Textfarbe zuweisen? Versuchen wir es zuerst mit den normalen HTML-Tags. Wir wollen uns dabei einmal ganz bewusst auf die Ebene eines blutigen HTML-Anfängers stellen, damit Sie einen umso deutlicheren Eindruck von den Vorteilen der Formatierung mit Stylesheets bekommen (und der etwas konfusen, traditionellen Formatierung mit HTML-Attributen).

Wenn Sie Kapitel 2.8.1 aufmerksam gelesen haben und über ein gutes Gedächtnis verfügen, werden Sie sich erinnern, dass es für das <body>-Tag ein Attribut text gibt, mit dessen Hilfe man die Standardtextfarbe für den gesamten Inhalt einer Webseite festlegen kann:

<body text="#00FFFF">
...
</body>

In unserem Beispiel wollen wir aber nur die Textfarbe der ersten <h2>-Überschrift ändern. Eine naheliegende Möglichkeit wäre, das Attribut text für die <h2>-Tags zu verwenden:

<h2 text="#00FFFF">Dies ist eine Überschrift der zweiten Ebene</h2>

Bei der Begutachtung im Browser stellt man dann allerdings schnell fest, dass es so nicht geht. Der Grund hierfür ist, dass das text-Attribut nur für das <body>-Tag und nicht für die Überschriften-Tags definiert ist.

Also laden wir uns die aktuelle HTML-Spezifikation herunter und suchen nach einem geeigneten Formatierungsattribut. Schließlich finden wir das gewünschte Attribut: es heißt color und ist... leider auch nicht für das <h2>-Tag definiert. Tatsächlich kann es nur zusammen mit dem <font>-Tag verwendet werden (und <basefont>). Also verfallen wir auf einen Trick: Wir schließen den Text der ersten Überschrift zusätzlich in <font>-Tags ein und legen in dem öffnenden <font>-Tag die Textfarbe fest. (Wir geben die Textfarbe im Beispiel als RGB-Wert an, siehe Kapitel 2.8.2)

<h2><font color="#00FFFF">Dies ist eine Überschrift der zweiten Ebene</font></h2>

Bei dieser Gelegenheit sei darauf hingewiesen, dass man HTML-Tags gemäß XHTML nicht überlappen darf (also nicht <h2><font>Dies ... </h2></font> schreiben).

Abbildung 4.2:  Unterschiedlich formatierte Überschriften

Textfarbe per Stildefinition

Gleiches kann man auch mit dem style-Attribut erreichen. Das style-Attribut kann auf alle HTML-Tags im <body>-Bereich angewendet werden (einschließlich dem <body>-Tag). Die Textfarbe des betreffenden HTML-Elements wird über die Stileigenschaft color gesetzt:

<h2 style="color: #00FFFF">Dies ist eine Überschrift der zweiten Ebene</h2>

Was ist daran so fortschrittlich?

HTML kennt zwar eine Reihe von Attributen, mit denen man HTML-Elemente formatieren kann, doch ist nicht jedes HTML-Attribut für jedes HTML-Element verfügbar. Beispielsweise können Sie das Attribut color, wie oben geschehen, dem <font>-Tag zuweisen, Sie können es aber nicht direkt dem <h2>-Tag zuweisen!

Innerhalb einer Stildefinition können Sie dagegen alle für Stylesheets verfügbaren Stileigenschaften verwenden. (Welche Eigenschaften dies im Einzelnen sind, werden wir uns in Abschnitt 4.3 anschauen.) Und über das Attribut style können Sie jedes Stylesheet jedem beliebigen HTML-Element zuweisen. Im Gegensatz zu den inkonsistenten und lückenhaften Formatierungsmöglichkeiten der HTML-Tags und -Attribute bieten Stylesheets daher ein einfaches, leistungsfähiges und wohl konstruiertes Formatierungsmodell. Kein Wunder also, dass die meisten HTML-Tags und Attribute zur reinen Textformatierung seit dem HTML 4.0-Standard als »deprecated« (abzulehnen) eingestuft sind und zugunsten von Stylesheets aufgegeben werden sollten.

Stylesheets können aber noch mehr.

Eine Stildefinition für alle Überschriften der Ebene 2

Wenn Sie alle Überschriften der Ebene 2 in einer speziellen Farbe, beispielsweise in Rot, anzeigen wollen, kann die Zuweisung der Farbe an jede einzelne Überschrift recht aufwendig werden (speziell wenn Sie viele Überschriften der Ebene 2 verwendet haben).

Stylesheets können da schnell Abhilfe schaffen.

Statt im <body>-Bereich nach den <h2>-Tag zu suchen und diese um ein entsprechendes style-Attribut zu erweitern, setzen wir im <head>-Abschnitt des HTML-Dokuments eine Stylesheet-Definition auf, in der wir festlegen, dass alle Überschriften der Ebene 2 als Textfarbe Rot verwenden sollen.

<head>
<title>Formatieren mit Stylesheets</title>

<style>
h2 { color: red }
</style>

</head>

Mit Hilfe der Tags <style>...</style> betten wir das Stylesheet in den Header-Abschnitt des Webdokuments ein. Dann geben wir das HTML-Tag an, dessen Formatierung wir beeinflussen wollen (im Beispiel h2) und hängen in geschweiften Klammern eine durch Semikolons getrennte Liste von Stileigenschaften an (im Beispiel nur color: red).

Der vollständige Quelltext unserer Testseite sieht dann wie folgt aus.

Listing 4.2: ueberschriften4.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Formatieren mit Stylesheets</title>

<style>
h2 { color: red }
</style>

</head>

<body>

<h2 style="color: #00FFFF">Dies ist eine Überschrift der zweiten Ebene</h2>
<h2>Dies ist eine Überschrift der zweiten Ebene</h2>
<h2>Dies ist eine Überschrift der zweiten Ebene</h2>
<h2>Dies ist eine Überschrift der zweiten Ebene</h2>

</body>
</html>

Abbildung 4.3:  ueberschriften4. html

In Abbildung 4.3 sind die Farben leider verloren gegangen, aber in Ihrem Browser dürften Sie nun zweierlei feststellen:

Wir können daraus schließen, dass die Stildefinition im Header-Teil der Webseite standardmäßig auf alle Überschriften der Ebene 2 (<h2>-Tag) angewendet wird. Wird im Body-Teil für eine Überschrift der Ebene 2 explizit eine andere Textfarbe vorgesehen, hat diese Einstellung Vorrang vor der Stildefinition für die ganze Seite.

4.2 Stylesheets definieren und zuweisen I

Stile - im Sinne der CSS-Spezifikation - bestehen aus einer Folge von Stileigenschaften und deren Werte, wobei die einzelnen Stileigenschaften durch Semikolons getrennt werden:

eigenschaft1: wert; eigenschaft2: wert; ...

Eine solche Folge von Stileigenschaften kann auf verschiedene Weisen definiert werden:

Inline-Stile

Im einfachsten Fall weist man die Stildefinition mit Hilfe des style-Attributs einem einzelnen HTML-Element im <body>-Bereich zu:

<p style="color: red; text-align: right"> 

Diese Art der Formatierung haben wir ja bereits in Kapitel 2 kennen gelernt, hier noch einmal ein kleines Beispiel:

Listing 4.3: inline.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Formatieren mit Stylesheets</title>
</head>

<body>

<p style="color: red; font-family: sans-serif; text-align: right">Dieser Absatz verwendet eine Schrift ohne Serifen (idealerweise Arial), erscheint in roter Textfarbe und ist rechtsbündig ausgerichtet</p>

<p>Dieser Absatz erscheint in Standardschrift. Lediglich <span style="text-decoration: underline">diese Textpassage</span> ist durch Unterstreichung hervorgehoben.

<div style="margin-left: 10em; margin-right: 10em; margin-top: 4em; text-align: justify">
<h2>Blocksatz</h2>
<p>Dieser Abschnitt (von der Überschrift bis zum nächsten Absatz) wird vom vorangehenden Absatz du5ch einen Leerraum von 4 em abgetrennt, links und rechts eingezogen und an beiden Seiten bündig dargestellt. </p>
<p>Um dies zu erreichen, wurden die Überschrift und die beiden Absätze in ein DIV-Element eingeschlossen.</p>
</div>

</body>
</html>

Abbildung 4.4:  Formatierung mit Inline-Stilen

Eingebettete Stylesheets

Wie Sie aus Abschnitt 4.1 bereits wissen, kann man Stylesheets auch im <head>-Abschnitt des HTML-Dokuments definieren. Diese Technik bringt erhebliche Vorteile mit sich:

Wir werden die Bedeutung dieser Punkte im Laufe dieses Kapitels noch etwas deutlicher herausarbeiten. Zuerst aber wollen wir uns anschauen, wie man Stylesheets in HTML- Dokumente einbettet.

Stylesheets in HTML-Dokumente einbetten

Zum Einbetten von Stylesheets in HTML-Dokumente stellt uns HTML das Tag <style> zur Verfügung. Beachten Sie, dass Stylesheet-Definitionen mit <style> nur im <head>- Abschnitt des HTML-Dokuments vorkommen dürfen:

<head>
<title>Formatieren mit Stylesheets</title>
<style>
...
</style>
</head>

Zu dem <style>-Tag gibt es zwei Attribute: type und media.

Es wurde bereits darauf hingewiesen, dass es derzeit zwar nur eine wirklich bedeutende Stylesheet-Spezifikation gibt (CSS), dass der HTML-Standard aber ausdrücklich auch andere Stylesheet-Spezifikationen zulässt. Da die Syntax und die zur Verfügung stehenden Stileigenschaften von der Stylesheet-Spezifikation abhängen, müssen wir dem Browser mitteilen, welcher Stylesheet-Spezifikation unsere Stylesheets folgen. Hierzu kann man das type-Attribut verwenden.

<style type="text/css">

Diese Deklaration teilt dem Browser beispielsweise mit, dass unsere Stylesheets der CSS- Spezifikation folgen.

Natürlich macht die Angabe der Stylesheet-Spezifikation nur Sinn, wenn der Browser die betreffende Stylesheet-Spezifikation kennt und unterstützt. Da dies derzeit nur für CSS- Stylesheets der Fall ist und HTML als Standard-Stylesheetsprache sowieso text/css vorgibt, ist die type-Angabe im Grunde unnötig. Sie gehört aber zum guten Stil und wird in Zukunft vielleicht noch an Bedeutung gewinnen.

Anstatt die Standard-Stylesheetsprache über das type-Attribut in den Stylesheet- Definitionen anzugeben, kann man Sie auch vorab mit einem entsprechenden META-Tag festlegen:

<meta http-equiv="content-style-type" content="text/css">

Diese Vorgehensweise hat zudem den Vorteil, dass sie auch für Inline-Stile gültig ist.

Wenn Sie Inline-Stile verwenden, sollten Sie stets obiges META-Tag definieren.

Medientypen und Stylesheets

HTML-Dokumente können nicht nur von Webbrowsern auf Computer-Bildschirmen dargestellt werden. Prinzipiell können HTML-Dokumente von beliebigen Ausgabegeräten verarbeitet werden, solange es nur ein entsprechendes Programm gibt, das wie ein Webbrowser den HTML-Code einliest und entsprechend dem verwendeten Ausgabegerät aufbereitet. In diesem Sinne definiert der HTML-Standard derzeit bereits folgende Medientypen, die Sie als Werte für das media-Attribut angeben können.

screen (normaler Grafik-Bildschirm), tty (Terminal), tv (TV-Bildschirm), projection (Projektor), handheld (kleine Bildschirme wie bei PalmPilots), print (Drucker), braille (für Blinde), aural (mit Sprachengenerator) und all (Alle).

Durch die Angabe des Medientyps können Sie festlegen, dass das betreffende Stylesheet nur für die Ausgabe auf einem entsprechenden Mediengerät gedacht ist. Die CSS- Stylesheet-Spezifikation kennt übrigens für verschiedene dieser Medientypen eigene Stileigenschaften. Wenn Sie mehr darüber erfahren möchten, schlagen Sie bitte in der CSS2-Spezifikation nach.

Zurück zu unserer Stylesheet-Definition.

Zwischen den <style>-Tags können wir nun beliebig viele Stildefinitionen einfügen. Jede solche Stildefinition besteht aus einer Liste von durch Semikolons getrennten Stileigenschaften (ganz wie bei den Inline-Stilen) und wird in geschweifte Klammern eingefasst. (Die geschweiften Klammern helfen dem Browser zu erkennen, wo eine Stildefinition beginnt und wo sie endet.)

<head>
...
<style type="text/css">
{color: red; font-family: sans-serif; text-align: right}
{text-decoration: underline}
</style>
</head>

Jetzt gibt es nur noch ein Problem. Wie legt man fest, welche Stildefinition zur Formatierung welcher Elemente im HTML-Dokument verwendet werden sollen? Im Falle der Inline-Stile war dies klar, da der Inline-Stil sich natürlich auf das HTML-Element bezieht, für das er definiert wird. Bei der Stylesheet-Definition im <head>-Abschnitt ist dies nicht so klar. Wir müssen also irgendwie eine Beziehung zwischen unseren Stildefinitionen und den zu formatierenden HTML-Elementen im <body>-Abschnitt herstellen. Dies geschieht mit Hilfe sogenannter Selektoren, die den Stildefinitionen vorangestellt werden.

Es gibt drei Typen von Selektoren

Die Selektoren werden den Stildefinitionen einfach vorangestellt. Auf diese Weise erhalten die Stildefinitionen so etwas wie einen Namen, über den man die Stildefinitionen unten im <body>-Abschnitt auswählen kann. Mehr dazu gleich im nächsten Abschnitt.

<head>
...
<style type="text/css">
p {color: red; font-family: sans-serif; text-align: right}
.unter {text-decoration: underline}
</style>
</head>

Zum Schluss noch zwei Anmerkungen zur Browserunterstützung.

Ältere und neuere Browser

Ältere Browser (beispielsweise Internet Explorer und Netscape Navigator vor Version 4) verstehen keine Stylesheet-Definitionen. Um sicherzustellen, dass diese Browser die Stylesheet-Definitionen nicht als Text darstellen (manche Browser stellen unbekannte Inhalte im Header-Bereich tatsächlich als Inhalt der Webseite dar), kann man CSS- Stylesheetdefinitionen auskommentieren:

<head>
...
<style type="text/css">
<!--
p {color: red; font-family: sans-serif; text-align: right}
.unter {text-decoration: underline}
-->
</style>
</head>

Browser, die CSS-Stylesheets unterstützen, werden die Stildefinitionen trotz der Kommentare erkennen und berücksichtigen.

Obwohl diese Form der Auskommentierung gängige Praxis ist und von allen aktuellen Browsern verstanden wird (und wohl auch noch für längere Zeit verstanden wird), ergibt sich hier ein Problem bei der Umstellung von HTML zu XHTML (siehe Kapitel 21). XHTML-Dokumente werden nämlich wie alle XML-Dokumente von einem XML-Parser analysiert (der in diesem Fall in die Webbrowser integriert ist), und es gibt derzeit keine verlässliche Zusicherung, dass der XML-Parser den Code in den Kommentaren nicht einfach löscht. Des Weiteren wird der XML-Parser Zeichen wie < (&lt;) als HTML- Sonderzeichen und nicht als normale Zeichen interpretieren. Man kann diesem Problem begegnen, indem man die Deklaration des eingebetteten Stylesheets in <![CDATA[ und ]]> einfasst:

<head>
<style type="text/css">
<![CDATA[
p {color: red; font-family: sans-serif; text-align: right}
.unter {text-decoration: underline}
]]>
</style>
</head>

Noch besser ist es allerdings, externe Stylesheets zu verwenden (siehe Abschnitt 4.4).

Selektoren

Selektoren dienen dazu, eine Verbindung zwischen den Stildefinitionen eines eingebetteten Stylesheets und den zu formatierenden HTML-Elementen herzustellen. Die einfachste Form der Verbindung ist dabei der HTML-Selektor.

HTML-Selektoren

HTML-Selektoren lauten wie die entsprechenden HTML-Tags ohne die spitzen Klammern.

Stildefinitionen, die innerhalb eines Stylesheets an ein HTML-Tag als Selektor zugewiesen werden, gelten für alle HTML-Elemente auf der Webseite, die das betreffende HTML-Tag verwenden. Auf diese Weise kann man beispielsweise alle Überschriften einer Ebene mit einem Schlag einheitlich formatieren:

h1 { color: rgb(255,0,255) }

Oder man rückt alle Absätze links und rechts ein:

p { margin-left: 10%; margin-right: 10%}

Listing 4.4: eingebettet1.html - Stylesheets mit HTML-Selektoren

<head>
<title>Stylesheets</title>
<style type="text/css">
h1 { color: rgb(255,0,255); font-family: Arial;
font-size: 20pt }
h2 { font-size: 16pt }
p { margin-left: 10%; margin-right: 10%}
</style>
</head>

Abbildung 4.5:  HTML-Selektoren

Wenn Sie eine Stildefinition mit mehreren HTML-Tags verbinden wollen, brauchen Sie die Stildefinition nicht mehrfach aufzusetzen. Geben Sie einfach die betreffenden HTML- Tags als kommagetrennte Liste an:

h1, h2, h3 {color: rgb(255,0,255); font-family: Arial; font-size: 20pt }

Sie können auf diese Weise beispielsweise eine allgemeine Grundformatierung für verwandte HTML-Tags vorgeben und diese durch nachfolgende Tag-spezifische Deklarationen anpassen. So legt der folgende Code fest, dass alle Überschriften der Ebenen 1, 2 und 3 in Rosa und der Schrift Arial darzustellen sind. Die Schriftgröße ist dagegen für alle Ebenen unterschiedlich:

h1, h2, h3 {color: rgb(255,0,255); font-family: Arial; font-size: 24pt}
h2 {font-size: 20pt}
h3 {font-size: 16pt}

class-Selektoren

Die Formatierung über HTML-Selektoren ist recht einfach und bequem, hat aber unter Umständen den Nachteil, dass der zugewiesene Stil ausnahmslos auf alle Vorkommen des betreffenden HTML-Tags angewendet wird. Soll eine Stildefinition dagegen nur gezielt für zwei oder drei spezielle Vorkommen des Tags gelten (beispielsweise einzelne <p>- Absätze) oder soll einem Teil der <p>-Absätze ein anderer Stil zugewiesen als den restlichen <p>-Absätzen oder möchte man eine Stildefinition auf einen speziellen <p>- Absatz, ein <img>-Tag und eine weiter unten folgende Liste anwenden, wird es schwierig. Hier kommt uns das Konzept der class-Selektoren zu Hilfe.

Ein class-Selektor ist ein beliebiger Name zur Bezeichnung einer Stildefinition, dem ein Punkt vorangeht.

.stilname {color: rgb(255,0,255); font-family: Arial}

Nachdem der Stil definiert und mit einem class-Namen verbunden ist, kann man den Stil mit Hilfe des class-Attributs den HTML-Elementen zuweisen, die gemäß diesem Stil formatiert werden sollen:

<body>
...
<p class="stilname">
...
<ol class="stilname">
...
</body>

So entsteht eine Gruppe (Klasse) von einzelnen HTML-Elementen, die alle mit dem gleichen Stil formatiert werden.

In Abbildung 4.5 ist es zum Beispiel etwas störend, dass alle Absätze (HTML-Tag <p>) gemäß der Stildefinition p { margin-left: 10%; margin-right: 10%} links und rechts eingezogen werden. Dem kann abgeholfen werden, indem man die Einzüge an einen class-Selektor (.einzug) bindet

.einzug { margin-left: 10%; margin-right: 10%}

und diesen class-Selektor dann mit Hilfe des Attributs class nur den Absätzen zuweist, die eingezogen werden sollen (im Beispiel dem Absatz unter der Überschrift 2):

<p class="einzug">

Das Ergebnis sehen Sie in Abbildung 4.6.

Abbildung 4.6:  class-Selektor

ID-Selektoren

Der letzte Typ von Selektor ist der ID-Selektor.

Ein ID-Selektor ist ein beliebiger Name zur Bezeichnung einer Stildefinition, dem ein #-Zeichen vorangeht.

Ein Stil, der mit einem ID-Selektor verbunden ist, wird dem HTML-Element im BODY- Abschnitt zugewiesen, das den gleichnamigen ID-Bezeichner trägt. Wenn Sie also in Ihrem Stylesheet folgenden Stil definieren:

#demoabs { margin-left: 10%; margin-right: 10%}

wird dieser Stil zur Formatierung des HTML-Elements herangezogen, dessen id-Attribut den Wert "demoabs" hat:

<p id="demoabs">

Da es in einem HTML-Dokument keine zwei HTML-Elemente mit gleichlautenden id- Bezeichnern geben sollte, wird ein ID-Stil immer nur mit einem HTML-Element verbunden. Der ID-Selektor ist somit der spezifischste der Selektoren.

Selektor

Beschreibung

HTML-Selektor

Ein Stil für alle HTML-Elemente eines Tags

class-Selektor

Ein Stil für mehrere HTML-Elemente (auch verschiedener Tags)

ID-Selektor

Ein Stil für ein HTML-Element

Tabelle 4.1: Spezifität von Selektoren

ID-Selektoren unterscheiden sich von den Inline-Stilen dadurch, dass Sie in einem eingebetteten oder externen Stylesheet definiert werden können und auch relative Formatierungsbefehle verwenden können. Beide Verfahren, ID-Selektoren wie Inline-Stile, dienen dazu, einzelne Elemente individuell zu formatieren, und sollten eher sparsam verwendet werden.

4.3 Die einzelnen Stileigenschaften

Nachdem wir uns nun ausführlich darüber unterhalten haben, wie man Stylesheets aufsetzt und zuweist, sollten wir es uns nicht nehmen lassen, noch einmal auf einen kleinen Streifzug durch die verschiedenen verfügbaren Stileigenschaften zu gehen. Die wichtigsten Eigenschaften haben wir ja bereits in Kapitel 2.8 kennen gelernt. Aber ich bin sicher, dass da noch einige Fragen offen geblieben sind.

Farben und Hintergründe

Mit Farben und Hintergründen haben wir uns bereits in Kapitel 2.8 ausführlich beschäftigt. Damit Sie nicht zurückblättern müssen, wiederholen wir kurz das Wichtigste (und tragen das eine oder andere nach).

Die wichtigsten Eigenschaften für Farben und Hintergrund lauten:

Eigenschaft

Bedeutung

color

Vordergrundfarbe

Werte: <Farbe>

background-color

Hintergrundfarbe

Werte: <Farbe> | transparent

background-image

Hintergrundbild

Werte: <uri>

background-repeat

Wie soll die Anzeigefläche des Browser-Fensters mit dem Hintergrundbild ausgefüllt werden

Werte: repeat | repeat-x | repeat-y | no-repeat

background-attachment

Soll das Hintergrundbild zusammen mit dem Vordergrund gescrollt werden (Standardeinstellung) oder soll es fixiert bleiben?

Werte: scroll | fixed

background-position

Positionierung des Hintergrundbildes. Angegeben werden immer ein Wert für die horizontale und ein Wert für die vertikale Positionierung, entweder als Prozentwert, als absolute Längenangabe oder als Schlüsselwort.

Werte: [<percentage> | <length>]{1,2} | [left | center | right] || [top | center | bottom]

Die Positionierung durch Prozentwerte ist ein wenig ungewöhnlich, 0% 0% bedeutet, das die linke obere Ecke des Bildes in die linke obere Ecke der Hintergrundbox des Elements kommt (entspricht: left top). 10% 20% bedeutet, dass das Bild so verrückt wird, dass der Bildpunkt, der 10% rechts und 20% unter der linken oberen Bildecke liegt, auf die Position 10% rechts und 20% unter der linken oberen Ecke der Hintergrundbox zu liegen kommt.

Tabelle 4.2: Stileigenschaften für Farben und Hintergründe

Farbwerte werden als RGB-Werte

color: #ff0000            
color: rgb(255,0,0)
color: rgb(100%, 0%, 0%)

oder als eines der folgenden Schlüsselwörter angegeben: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.

Hintergrundbilder

Über Hintergrundbilder als Seitenhintergrund haben wir schon in Kapitel 2.8 einiges erzählt. Die Stileigenschaften background-image, background-repeat, background- attachment und background-position stehen aber für alle Tags im BODY-Bereich zur Verfügung. Das bedeutet, Sie können praktisch für jedes HTML-Element Ihrer Webseite ein eigenes Hintergrundbild vorsehen. So erzeugt beispielsweise der folgende HTML- Code die Webseite aus Abbildung 4.7.

Listing 4.5: hintergrundbild.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hintergrundbilder</title>
<style type="text/css">
p { margin-left: 10em; margin-right: 10em; text-align: justify; }
</style>
</head>

<body>

<h2>Absatz mit Hintergrundbild</h2>

<p style="background-image: url('saturn.jpg'); background-position: 50% 50%; background-repeat: no-repeat">Dies ist ein Absatz. Dies ist ein Absatz. ...<p>

</body>
</html>

Abbildung 4.7:  Hintergrundbild zu einem Absatz.

Ränder und Rahmen

Im vorangehenden Abschnitt haben Sie gesehen, wie man den Hintergrund eines HTML- Elements mit einer Farbe oder einem Bild ausfüllen kann. Was aber ist eigentlich genau der »Hintergrund« eines HTML-Elements? Um diese Frage beantworten zu können, müssen wir ein wenig ausholen.

CSS unterscheidet wie HTML zwischen Block- und Inline-Elementen. Blockelemente sind grob gesagt, alle HTML-Elemente, die in einer neuen Zeile anfangen. <p>, <li>, <h1> bis <h6>, <div> sind Beispiele für Blockelemente. Inline-Elemente sind Elemente, die in der gleichen Zeile (»in line«) liegen können wie der umgebende Inhalt (üblicherweise der Inhalt des übergeordneten Blockelements). <em>, <cite> oder <span> sind Beispiele für Inline-Elemente.

Jedes Blockelement liegt aus Sicht des Browsers in einer Box (Kasten). Diese Box umschließt

Füllung (padding), Rahmen (border) und Rand (margin) können über eigene Stileigenschaften eingestellt werden.

Füllung (padding)

Indem Sie Füllraum vorgeben, können Sie den Inhalt eines Elements durch Leerraum von den umliegenden Elementen absetzen. Natürlich könnte man dazu auch einen Rand definieren, doch der Füllraum hat einige Vorteile:

Damit hätten wir auch schon die Frage aus der Einleitung zu diesem Abschnitt beantwortet. Der Hintergrund eines Elements umschließt den Inhalt und den Füllraum des Elements (reicht also bis zum Rahmen).

Der Netscape Navigator 4.x lässt immer einen kleinen Streifen zwischen Hintergrund (Inhalt und Füllung) und Rahmen (was auffällt, wenn man einen sichtbaren Rahmen definiert).

Zur Festlegung des Füllraums gibt es fünf Stileigenschaften:

Eigenschaft

Bedeutung

padding-top

Füllraum oben

padding-right

Füllraum rechts

padding-bottom

Füllraum unten

padding-left

Füllraum links

padding

Füllraum zu allen Seiten

Tabelle 4.3: padding-Eigenschaften

Sie brauchen der Eigenschaft nur die gewünschte Größenangabe in Einheiten von %, em, px, ex, pt, mm, cm, in oder pc zuzuweisen, beispielsweise:

padding-left: 3em

Über die Eigenschaft padding können Sie in einem Zug allen vier Seiten Werte zuweisen:

padding: 1em 4em 1em 4em    

Diese werden der Reihe nach den Füllräumen oben, rechts, unten und links zugewiesen. Wenn Sie nur einen Wert angeben, gilt dieser für alle vier Seiten, wenn Sie nur zwei Werte vorgeben, gilt jeder dieser Werte für die eigene und die gegenüberliegende Seite. Obige Formatierung hätte man also auch wie folgt schreiben können:

padding: 1em 4em 

In Abbildung 4.10 können Sie sehen, wie sich die Angabe eines Füllraums auswirkt.

Größenangaben in Stileigenschaften

Viele Stileigenschaften erwarten als Werte Größenangaben. Manchmal kann man diese Angaben in Prozent machen (wie im Falle des Füllraums), ansonsten stehen verschiedene absolute Maßeinheiten zur Verfügung:

em, entspricht der Punktgröße der verwendeten Schrift (2em bedeutet also doppelte Punktgröße der Schrift

¯ px, Pixel

¯ ex, Höhe des Buchstaben x in der umliegenden Schrift

¯ pt, Punktgröße (unterschiedlich auf den verschiedenen Plattformen)

¯ mm

¯ cm

¯ in, Inch

¯ pc, Pica

Grundsätzlich sollten Sie relative Größenangaben bevorzugen, also % (Prozent, falls erlaubt) oder em, ex oder px.

Vergessen Sie in Stylesheets nie die Angabe der Maßeinheit. Manche Browser wie der Internet Explorer gehen zwar bei fehlenden Maßeinheiten von Pixelwerten aus, andere Browser aber ignorieren in so einem Fall die ganze Stileigenschaft.

Rahmen (border)

Zur Festlegung des Rahmens gibt es eine ganze Reihe von Stileigenschaften:

Eigenschaft

Bedeutung

border-width

Rahmenbreite

Werte: [thin | medium | thick | <length>]{1,4}

Diese Eigenschaft ist eine Abkürzung für die vier Eigenschaften: border-top-width, border-right-width, border-bottom-width und border-left-width (siehe padding).

border-color

Farbe des Rahmens

border-style

Rahmenmuster

Werte: none | dotted | dashed | solid | double | groove | ridge | inset | outset

border-top

Zusammenfassung der Eigenschaften für den oberen Rand

Werte: <border-top-width> || <border-style> || <color>

border-right

Zusammenfassung der Eigenschaften für den rechten Rand

Werte: <border-top-width> || <border-style> || <color>

border-bottom

Zusammenfassung der Eigenschaften für den unteren Rand

Werte: <border-top-width> || <border-style> || <color>

border-left

Zusammenfassung der Eigenschaften für den linken Rand

Werte: <border-top-width> || <border-style> || <color>

border

Abkürzung für die vier Eigenschaften: border-top, border-right, border-bottom und border-left (siehe padding).

Tabelle 4.4: border-Eigenschaften

Um ein Element einzurahmen, müssen Sie zumindest eine Rahmenbreite und einen Rahmenstil vorgeben:

border-width: 3px; border-style: solid

Ein Rahmen muss nicht immer ein Rahmen sein. Sie können den Rahmen auch verwenden, um ein Element zu »unterstreichen« oder es durch Balken oben und unten hervorzuheben:

<style type="text/css">
h2 { border-width: 0.5em 0em 0.5em 0em;
border-style: solid; border-color: maroon }
</style>

Wegen des Internet Explorers müssen Sie beim Zeichnen einzelner Rahmenseiten, die nicht zu zeichnenden Rahmenseiten explizit auf 0 setzen.

Abbildung 4.9:  Rahmen um h2-Überschrift

Rand (margin)

Für den Rahmen gibt es wie für den Füllraum fünf Stileigenschaften. Eine Eigenschaft für jede Seite und eine Stileigenschaft für alle Seiten zusammen.

Eigenschaft

Bedeutung

margin-top

Rand oben

margin-right

Rand rechts

margin-bottom

Rand unten

margin-left

Rand links

margin

Rand zu allen Seiten

Tabelle 4.5: margin-Eigenschaften

In Abbildung 4.10 können Sie sehen, wie sich die Angabe eines Füllraums auswirkt.

Abbildung 4.10:  Hintergrund, Füllung, Rahmen und Rand

Die Eigenschaften für Hintergrund, Füllung, Rahmen und Rand können auch auf Inline-Elemente angewendet werden, führen dort aber unter Umständen zu ungewöhnlichen Ergebnissen.

Texteigenschaften

Die Texteigenschaften zerfallen in zwei große Blöcke:

Schriften

Über den Einsatz und die Formatierung von Schriften haben wir uns bereits in Kapitel 2.8 befasst. Hier daher nur eine kurze Zusammenfassung:

Eigenschaft

Bedeutung

font-family

Schriftfamilie

Werte: Geordnete Liste von Schriftnamen, beispielsweise:

font-family: 'Mein Arial', Arial, sans-serif

Beachten Sie, dass am Ende der Reihe immer einer der folgenden Werte stehen sollte: serif, sans-serif, cursive, fantasy, monospace (siehe Kapitel 2.8.3).

font-style

Schriftstil

Werte: normal | italic | oblique

font-weight

Schriftbreite

Werte: lighter | normal | bold | bolder | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

font-size

Schriftgröße

Werte: <Größenangabe in em, pt, px ,ex oder %> | larger | smaller

text-decoration

Textauszeichnung

Werte: none | [ underline || overline || line-through || blink ]

text-indent

Texteinzug (nur für Blockelemente)

Werte: <Größenangabe in em, pt, px ,ex, cm, mm oder %>

text-shadow

Werte: none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?]

text-transform

Textumwandlungen

Werte: capitalize | uppercase | lowercase | none

Tabelle 4.6: Schrifteigenschaften

Freiräume in Textzügen

Die Eigenschaften padding und margin erzeugen einen Freiraum um den Inhalt eines gegebenen Elements. Eine andere Frage ist, wie man den Freiraum innerhalb des Textes organisiert. Auch hierfür gibt es eigene Stileigenschaften

Eigenschaft

Bedeutung

text-align

Textausrichtung (nur für Blockelemente)

Werte: left | right | center | justify

vertical-align

vertikale Textausrichtung (nur für Inline-Elemente)

Werte: baseline | sub | super | top | text-top | middle | bottom | text-bottom | % (der Linienhöhe)

text-indent

Texteinzug (nur für Blockelemente)

Werte: <Größenangabe in em, pt, px ,ex, cm, mm oder %>

line-height

Zeilenhöhe (von einer Basislinie zur nächsten)

Werte: <Größenangabe in em, pt, px ,ex, cm, mm oder % oder als reine Zahl>

Reine Zahlen oder Prozentangaben beziehen sich immer auf die Punktgröße der betreffenden Schriftart. Ist diese beispielsweise gleich 10 pt und geben Sie als Wert für line-height 1.5 an, ist die Linienhöhe danach 15 pt.

word-spacing

Zusätzlicher Freiraum zwischen Wörtern eines Absatzes

Werte: <Größenangabe in em, pt, px ,ex, cm, mm>

letter-spacing

Zusätzlicher Freiraum zwischen Buchstaben eines Wortes

Werte: <Größenangabe in em, pt, px ,ex, cm, mm>

Tabelle 4.7: Texteigenschaften

Die Eigenschaften word-spacing und letter-spacing sollten nur sparsam zur Hervorhebung einzelner Textpassagen genutzt werden (beispielsweise gesperrte Wörter). Ansonsten sollte man immer daran bedenken, dass die Font-Designer sich bei der Entwicklung ihrer Schriften bereits intensiv mit der Frage der optimalen Buchstaben und Wortabstände gemacht haben.

Auch die Eigenschaft text-indent sollte uns eine Anmerkung wert sein.

Wenn Sie zufällig über die Faber and Faber-Ausgabe von »Lord of the Flies« verfügen (ISBN: 0-571-08483-4), so schlagen Sie diese doch bitte einmal auf. In diesem Buch wird jede erste Zeile eines Absatzes leicht eingerückt - keine ganz ungewöhnliche, aber auch nicht sonderlich aufregende Formatierung, oder?

Abbildung 4.11:  Englische Ausgabe von Lord of the Flies

Nicht aufregend? Von wegen! Das Einrücken von Textzeilen hat den Webdesignern weltweit schon einiges an Kopfzerbrechen bereitet. Einige versuchten es mit Leerzeichen, &nbsp;, die Sie in <pre>-Tags fassten, damit sie nicht vom Browser ignoriert werden, andere erzeugten blinde GIF-Bilder und kämpften damit, diese an die Größe der umliegenden Schrift anzupassen.

Blinde GIFs

Blinde GIFs sind 1x1-Pixelgrafiken, die meist einen weißen oder transparent Punkt enthalten und in vielen Designs als Platzhalter eingesetzt werden. Über die width- und height-Attribute des img-Tags wird das blinde GIF so ausgedehnt, dass es den freizuhaltenden Platz einnimmt.

Dank der Stileigenschaft text-ident sind solche Tricks - zumindest soweit es das Einziehen von Anfangszeilen angeht - überflüssig geworden. In Listing 4.6 sehen Sie HTML-Code, der das Layout des Faber-Buches nachstellt.

Listing 4.6: textindent.html - Absätze mit eingerückten Anfangszeilen

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Texteinzug</title>
<style type="text/css">
body { margin-left: 1em; margin-right: 10em }
h1 { text-align: center;
font-family: serif; font-style: italic; font-size: 20 pt }
h1.chapter { font-family: 'Courier', monospace; font-size: 12 pt;
font-style: normal}
p { text-align: justify; text-indent: 1em }
</style>
</head>

<body>

<table cols="3" width="100%">
<colgroup span="3">
<col width="10%">
<col width="400">
<col width="*">
</colgroup>
<tr>
<td width="10%"></td>
<td width="400">

<h1 class="chapter">CHAPTER ONE</h1>
<h1>The Sound of the Shell</h1>

<p>The Boy with fair hair lowered himself down the last few feet of rock and began to pick his way towards the lagoon. Though he had taken off his school sweater and trailed it now from one hand, his great shirt struck to him and his hair was plastered to his forehead. All round him the long scar smashed into the jungle was a bath of heat. He was clambering heavily among the creepers and broken trunks when a bird, a vision of red and yellow, flashed upwards with a witch-like cry; and this cry was echoed by another.</p>

<p>"Hi!" it said, "wait a minute!"</p>

<p>The undergrowth at the side of the scar was shaken and a multitude of raindrops fell pattering.</p>

<p>"Wait a minute," the voice said, "I got caught up."</p>

</td>
<td width="*"></td>
</tr>
</table>


</body>
</html>

Beachten Sie, dass wir die Breitenangaben für die einzelnen Spalten in den <td>-Deklarationen wiederholt haben. Dies ist derzeit noch notwendig, weil der Netscape Navigator 4.x (im Gegensatz zur 6er-Version oder zum Internet Explorer) die Breitenangaben in der <colgroup>-Deklaration nicht auswertet.

Listen

Einige Stileigenschaften wurden speziell zur Formatierung von Listen definiert.

Eigenschaft

Bedeutung

list-style-type

Welches Listensymbol soll verwendet werden

Werte: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

list-style-image

Statt eines der vordefinierten Listensymbole kann man auch den URL zu einer Grafikdatei mit einem passenden Symbol angeben, beispielsweise:

ul { list-style-image: url(ellipse.png) }

list-style-position

Position des Listensymbols in Relation zum Text des Listenelements

Werte: inside | outside

list-style

Zusammenfassung für list-style-type, list-style-position und list-style-image

Tabelle 4.8: Listeneigenschaften

Wenn Sie ausgefallenere Grafiken als Listensymbole verwenden wollen, die mehr Platz einnehmen als die üblichen Punkte oder Zahlen, ist es meist besser, die Liste durch eine Tabelle zu simulieren und die »Listensymbole« mittels <img> in die erste Spalte und die Listenelemente in die zweite Spalte einzutragen (siehe Abbildung 4.12). Diese Technik hat im Übrigen auch den Vorteil, dass sie von praktisch allen Browsern unterstützt wird.

Abbildung 4.12:  Durch eine Tabelle simulierte Liste

Tabellen

Seit der CSS2-Spezifikation gibt es eine Reihe von Stileigenschaften, die speziell für die Formatierung von Tabellen definiert wurden.

Eigenschaft

Bedeutung

caption-side

Wo soll die Tabellenüberschrift (caption) in Relation zur Tabelle angezeigt werden?

Werte: top | bottom | left | right

table-layout

Wie soll die Tabelle erzeugt werden? Dabei geht es vor allem darum, ob die Breite der Spalten an den Inhalt der Zellen angepasst werden soll (auto) oder allein aus den width-Angaben berechnet werden soll (fixed).

Werte: auto | fixed

border-collapse

Wie sind die Rahmen benachbarter Zellen zu behandeln. Fallen Sie zusammen (collapse) oder sind sie als einzelne Rahmenelemente zu betrachten (separate). In letzterem Fall kann man mit border-spacing den Abstand zwischen den Rahmenelementen festlegen.

Werte: collapse | separate

Tabelle 4.9: Tabelleneigenschaften

Sonstige Stile

Eine vollständige Liste aller aktuell definierten Stile finden Sie stets auf der Website des W3C-Konsortiums: http://www.w3.org. Halten Sie dort nach den Standards zu CSS1 und CSS2 Ausschau.

4.4 Stylesheets definieren und zuweisen II

Zum Schluss dieses Kapitels müssen wir noch einmal etwas technischer werden. Vor allem sollen Sie endlich erfahren, wie man Stylesheets in externen Dateien definiert und diese externe Stildefinitionen in Webseiten aufnimmt, denn dies ist die professionellste und in Hinblick auf die Zukunft von HTML (die in Richtung XHTML und XML weist) auch die sicherste Form der Einbindung von Stylesheets.

Externe Stylesheets

Statt Ihre Stile in Form eines eingebetteten Stylesheets direkt auf den Seiten abzuspeichern, können Sie diese auch in externen Dateien mit der Dateiendung .css abspeichern und mit Hilfe eines Links in Ihre Webseiten einbinden. Der Vorteil dieses Verfahrens liegt auf der Hand: ein einmal extern definiertes Stylesheet kann durch einfache Verknüpfung oder Import in beliebige Webseiten aufgenommen werden.

Externe Stylesheets arbeiten auch fehlerfrei mit XHTML-Dokumenten zusammen. Wenn Sie Ihre Webseiten also nach dem XHTML-Standard aufsetzen, sollten Sie konsequent mit externen Stylesheets arbeiten (siehe Anmerkung in Abschnitt 4.2.2, »Ältere und neuere Browser«).

Externe Stylesheets werden ganz genauso wie eingebettete Stylesheets aufgesetzt, nur dass Sie nicht innerhalb des Header-Teils eines Webdokuments, sondern in einer eigenen Datei definiert werden.

Externes Stylesheet erzeugen

  1. Legen Sie mit einem Texteditor eine neue Datei an.
  2. Geben Sie Ihre Stylesheet-Definition ein, beispielsweise

Listing 4.7: externessheet.css

h1 { color: rgb(255,0,255); font-family: Arial; font-size: 20pt }
h2 { font-size: 16pt }
.einzug { margin-left: 10%; margin-right: 10%; text-align: justify
  1. Speichern Sie die Datei mit der Extension .css.

Externe Stylesheets in eine Webseite aufnehmen

Um Stildefinitionen aus einem externen Stylesheet zu verwenden, gibt es zwei Möglichkeiten:

Der Navigator 4 unterstützt das Verknüpfen mit einem externen Stylesheets (<link>), aber nicht die @import-Syntax.

Abbildung 4.13:  Formatierung mit einem externen Stylesheet

Kombinierte Selektoren

In Abschnitt 4.2.3 haben Sie drei Arten von Selektoren kennen gelernt: HTML- Selektoren, class-Selektoren und ID-Selektoren. Durch Kombination dieser elementaren Selektoren können Sie neue spezifischere Selektoren bilden. CSS kennt zwei Formen von kombinierten Selektoren:

class-Selektoren auf einzelne Tags beschränken

Stellen Sie sich vor, Sie haben in Ihrem Webdokument Absätze, die Sie unterschiedlich formatieren wollen. Sie können dies lösen, indem Sie einen Standardstil für alle <p>- Absätze und einen class-Stil für die abweichend zu formatierenden Absätze definieren:

p        { font-family: Arial; margin-left: 10%; margin-right: 10%}
.einzug { margin-left: 25%; margin-right: 25%}

Diese Vorgehensweise ist zwar absolut korrekt und führt auch zu dem gewünschten Ergebnis, dennoch würde man diese Lösung als »unsauber« bezeichnen. Wieso? Auf der einen Seite wollen wir in diesem Beispiel einen Stil (einzug) definieren, den wir speziell zur Formatierung von Absätzen verwenden wollen. Auf der anderen Seite wird dies aus der Stildefinition nicht ersichtlich und es hindert uns nichts, den gleichen Stil auch auf Bilder oder Tabellen anwenden. Man kann dem abhelfen, indem man dem class-Selektor den HTML-Selektor des Tags, auf das sich der class-Stil beziehen soll, voranstellt:

p         { font-family: Arial; margin-left: 10%; margin-right: 10%}
p.einzug { margin-left: 25%; margin-right: 25%}

Jetzt haben wir einen Standardstil für alle <p>-Absätze und einen speziellen class-Stil für alle <p>-Absätze, denen wir das class-Attribut class="einzug" zuweisen. Aus der Stildefinition wird nun für den Webdesigner ersichtlich, dass der Stil p.einzug nur für <p>- Absätze gedacht ist, und der Webbrowser stellt sicher, dass die Attributdefinition class="einzug" für andere HTML-Tags ignoriert wird.

Vielleicht mag Ihnen die Begrenzung von class-Stilen auf einzelne HTML-Tags unnötig oder pedantisch vorkommen, aber Sie fördert den strukturierten Aufbau von Stylesheet- Definitionen und hilft Ihnen bei späteren Überarbeitungen, Ihre Stylesheet-Definition besser zu verstehen.

Achten Sie darauf, dass kein Leerzeichen zwischen dem Tag-Selektor und dem class-Selektor steht! Ansonsten definieren Sie nämlich einen Kontext (siehe unten).

Stile für einen bestimmten Kontext definieren

Durch die Kombination Tag.Klassenname beschränken Sie einen class-Stil auf die Verwendung mit einem bestimmten Tag. Eine andere Form der Begrenzung ist die Angabe des umliegenden Kontextes. Ein solcher Kontext kann ein HTML-Tag, ein class- Stil oder ein ID-Stil sein.

Nehmen wir an, Sie definieren einen Stil zur farblichen Hervorhebung von Textpassagen:

.hervor { color: red}

Wo immer Sie im BODY-Abschnitt Textpassagen hervorheben wollen, fassen Sie diese in <span>-Tags und weisen die Klasse .hervor zu:

<span class="hervor">Dies ist die Textpassage</span>. 

Nehmen wir nun weiter an, Sie definieren auch in einer Ihrer Überschriften eine Hervorhebung:

<h1>Formatierung mit <span class="hervor">Stylesheets</span></h1>

An sich ist das kein Problem, doch würden Sie gerne alle <h1>-Überschriften rot färben. Dies würde aber wiederum bedeuten, dass die Hervorhebung in den <h1>-Überschriften verloren geht. Statt nun eine zweite Klasse .hervor2 zu definieren, können wir auch vorgeben, dass die Klasse .hervor, wenn Sie in <h1>-Überschriften verwendet wird, mit der Farbe Blau verbunden werden soll.

h1 .hervor { color: blue}

Beachten Sie, dass hier kein Komma zwischen h1 und .hervor steht. Der Selektor bezieht sich jetzt auf alle HTML-Elemente, denen die Klasse .hervor zugewiesen wurde und die innerhalb eines <h1>-Elements liegen.

Listing 4.8: eingebettet3.html - Kontextsensitive Stile

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Selektoren und Kontext</title>
<style type="text/css">
<!--
h1 { color: red; font-family: Arial; font-size: 20pt }
h2 { font-size: 16pt }
h1 .hervor { color: blue}
p .hervor { color: red}
-->
</style>
</head>

<body>

<h1>Formatierung mit <span class="hervor">Stylesheets</span></h1>
...
<h2>Überschrift 2</h2>

<p class="einzug">Dies ist ein Absatz mit individuellem Einzug.<span class="hervor">Dies ist ein Absatz mit individuellem Einzug</span>.Dies ist ein Absatz mit individuellem Einzug.Dies ist ein Absatz mit individuellem Einzug.Dies ist ein Absatz mit individuellem Einzug.Dies ist ein Absatz mitindividuellem Einzug.Dies ist ein Absatz mit individuellem Einzug.Dies ist ein Absatz mit individuellem Einzug.Dies ist ein Absatz mit individuellem Einzug.Dies ist ein Absatz mit
individuellem Einzug.</p>
</body>
</html>

Da die farblichen Hervorhebungen bei der Umwandlung in Grautöne verloren gehen, haben wir hier auf eine Abbildung verzichtet. Sie können die HTML-Datei eingebettet3.html aber von der Buch-CD in Ihren Browser laden und sich in diesem das Ergebnis anschauen.

Sie können auch mehrere Kontextebenen angeben. Betrachten Sie zum Beispiel folgende Stildefinition:

ol ul li {list.style: square }

Diese Stildefinition gilt für alle Listenelemente, die in einer ungeordneten Liste liegen, die selbst in einer umliegenden geordneten Liste enthalten ist.

Oder Sie legen fest, dass eine Stildefinition nur für <em>-Elemente gilt, die in Absätze liegen, die mit dem Klassenstil .einzug formatiert sind:

p.einzug em {font-size: larger}

Selektoren für Hyperlinks und Blockanfänge

Und was ist mit den Hyperlinks? Wir erinnern uns: der Webbrowser unterscheidet zwischen nicht-besuchten, besuchten und aktivierten Hyperlinks und nutzt üblicherweise verschiedene Farben, um die betreffenden Zustände eines Hyperlinks darzustellen. Nach der alten Formatierung konnte man die Farben für die drei Linkzustände mit den Attributen link, vlink und alink selbst festlegen:

<body link="red" vlink="maroon" alink="fuchsia">
...
</body>

Wie aber kann man diese Linkfarben mit Hilfe von Stylesheets festlegen. Schließlich gibt es nur ein Anker-Element <a> und auch nur eine Stileigenschaft color für die Vordergrundfarbe?

Die Lösung liegt in einer kleinen Mogelei. Glücklicherweise müssen aber nicht wir mogeln, das hat schon der CSS-Standard für uns getan. Er hat einfach drei Pseudo-Klassen für die drei Linkzustände definiert:

Diese Pseudo-Klassen gelten für alle <a>-Elemente mit href-Attributen. Die obige Formatierung für die drei Linkzustände könnte in einem Stylesheet also wie folgt aussehen:

A:link {color: red}
A:visited {color: maroon}
A:active {color: fuchsia}

Es gibt noch weitere Pseudo-Klassen, wie z.B. :before und :after, die einen Text vor beziehungsweise nach jedem HTML-Element einfügen, doch werden diese derzeit nur vom Netscape 6-Browser unterstützt. Wer mehr über diese Formatierungsmöglichkeiten erfahren möchte, schlage bitte in der CSS2-Spezifikation nach.

4.5 Vererbung und Cascading

Bisher haben wir die Stylesheets meist so betrachtet, als ob sie ganz für sich alleine stünden. Dies ist aber selten der Fall. Vielmehr kommt es häufig zu Überschneidungen oder gar Konflikten zwischen den Stildefinitionen ineinander verschachtelter HTML- Elemente oder durch nacheinander definierte Stildefinitionen.

Vererbung

Innere Elemente übernehmen die Stile umliegender Elemente, behalten aber ihre spezifischen Einstellungen.

Wenn Sie innerhalb eines Textabsatzes (<p>) eine Textpassage als Zitat (<cite>) formatiert haben, haben Sie HTML-Elemente bereits mehrfach ineinander verschachtelt.

Ganz außen stehen die <body>-Tags. Innerhalb der <body>-Tags stehen die <p>-Tags der Absätze und innerhalb eines Absatzes finden sich irgendwo die <cite>-Tags für das Zitat:

<body>
<h1>Vererbung von Stilen</h1>

<p>Heraklit sah im Krieg <cite>&quot;... den Vater aller Dinge und den König aller.&quot; </cite></p>

</body>

Wenn Sie diesen HTML-Elementen CSS-Stile zuweisen, werden diese in gleicher Weise verschachtelt wie die HTML-Elemente - mit der Konsequenz, dass jedes innere Element die Formatierung des umliegenden Elements erbt. Dabei ist es unwesentlich, wie den Elementen die Stile zugewiesen wurden (externe Stylesheets, eingebettete Stylesheets, HTML-, class- oder id-Selektor, Inline-Stile). Dass im folgenden Beispiel alle drei Stile über HTML-Selektoren zugeordnet werden, dient also lediglich der besseren Übersichtlichkeit:

   <style type="text/css">
body {color: white; background-color: black}
p {color: gray; font-size: 18pt}
cite {color: yellow}
</style>

Wie wird der obige Text durch das obige Stylesheet formatiert?

Nicht alle Stileigenschaften werden vererbt. margin, padding und border werden beispielsweise nicht vererbt. Die Hintergrundfarbe (background-color) wird ebenfalls nicht vererbt, scheint aber durch.

Cascading

Konfliktsituationen können auch entstehen, wenn mehrere Stildefinitionen zur Formatierung eines Elements vorliegen. Dabei gilt der gleiche Grundsatz wie bei der Vererbung:

Alle Stildefinitionen, die ein Element oder eine Textpassage betreffen, werden ausgewertet. Für Formatierungen, die in mehreren Stilen vorgesehen werden, muss entschieden werden, welche Einstellung angewendet werden soll.

Hierbei gibt es vier Kriterien zu unterscheiden:

Herkunft

Stildefinitionen können von verschiedenen Orten herstammen.

Kommt es in so einem Fall zu Konflikten (etwa weil in allen vier Fällen ein Stil für die Vordergrundfarbe von <p>-Absätzen vorgesehen ist), so haben die in der obigen Aufzählung weiter unten aufgeführten Stildefinitionen Vorrang vor den anderen Stildefinitionen. Kurz gesagt, die Stildefinitionen des Autors einer Webseite haben Vorrang vor Standardstildefinitionen, die der Websurfer oder der Browser vorgeben, und unter den vom Webautor vorgesehenen Stildefinitionen haben die Stile aus importierten Stylesheets die geringste Priorität.

Spezifität

Weisen zwei Stildefinitionen unterschiedliche Spezifität auf, setzt sich der stärker spezifische Stil durch.

Die Spezifität eines Stils lässt sich an seinen Selektoren ablesen. ID-Selektoren sind spezifischer als class-Selektoren und diese sind wiederum spezifischer als HTML- Selektoren:

ID-Selektor > class-Selektor > HTML-Selektoren

Werden kombinierte Selektoren verwendet, müssen Sie die Anzahl der ID-, class- und HTML-Selektoren zählen und vergleichen.

Ausgehend von den folgenden Stildefinitionen:

      body    {color: white; background-color: black}
p.rot {color: red }
p {color: yellow; font-size: 18pt}

werden die Absätze

<p>Heraklit sah im Krieg <cite>&quot;... den Vater aller Dinge und den König aller.&quot;</cite></p>
<p class="rot">Vergil bewertete den Krieg etwas anderes: <cite>&quot;Kein Heil ist in dem Krieg; um Frieden dich flehen wir alle!&quot;</cite></p>

wie folgt formatiert:

Für den ersten Absatz gibt es nur eine Stildefinition (p). Die Stildefinition p.rot spielt hier keine Rolle, weil der erste Absatz nicht zur Klasse .rot gehört. Folglich erscheint der erste Absatz in gelber Schrift.

Für den zweiten Absatz gibt es zwei Stildefinitionen (p und p.rot) mit konkurrierenden Angaben für die Vordergrundfarbe. In diesem Falle setzt sich die Definition color:red durch, weil sie aus dem spezifischeren Stylesheet stammt.

Beachten Sie, dass der Konkurrenzkamp nur einzelne Stileigenschaften betrifft. So wird auch der zweite Absatz in einer Schrift von 18 Punkten angezeigt, weil er diese Eigenschaft aus der Stildefinition p übernimmt.

Definitionsreihenfolge

Weisen zwei konkurrierende Stildefinitionen gleiche Spezifität auf, setzt sich der zuletzt deklarierte Stil durch.

Ein solcher Fall kann beispielsweise eintreten, wenn Sie mehrere externe Stylesheet verwenden.

Abbildung 4.15:  Cascading Stylesheets

So verwendet die Webseite aus Abbildung 4.15

Das zweite Stylesheet legt fest, dass das Bild xmas.jpg am oberen Rand über die Breite des Webbrowser-Fensters nebeneinander angezeigt werden soll (repeat-x). Zudem definiert es einen kleineren oberen Rand.

Das eingebettete Stylesheet der Webseite sieht wie folgt aus:

  <style type="text/css">
@import url(body1.css);
@import url(body2.css);
.weiss {color: white}
</style>

Beachten Sie, dass das Stylesheet body2.css nach body1.css importiert wird. Auf diese Weise setzt sich der kleinere obere Rand aus Stylesheet body2.css durch. Wenn Sie die Stylesheets in umgekehrter Reihenfolge importieren, erhalten Sie den 1-Inch-Rand.

Wenn Sie das Beispiel im Netscape Navigator nachvollziehen wollen, müssen Sie die externen Stylesheets in das eingebettete Stylesheet hineinkopieren (die import-Syntax wird vom Navigator 4 nicht unterstützt).

Der !important-Spezifizierer

Wenn Sie möchten, dass eine bestimmte Formatierung eines Stils nicht durch Stildefinitionen höherer Spezifität oder nachfolgende Stildefinitionen gleicher Spezifität übergangen wird, deklarieren Sie die Formatierung als !important.

Listing 4.9: important.html - Stildefinitionen mit Vorrang

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Vererbung</title>
<style type="text/css">
body {color: white; background-color: black}
p {color: gray !important; font-size: 18pt}
p.rot {color: red; font-size: 18pt}
</style>
</head>

<body>

<h1>Vererbung von Stilen</h1>

<p class="rot">Heraklit sah im Krieg <cite>&quot;... den Vater aller Dinge und den König aller.&quot;
</cite></p>

</body>
</html>

In diesem Fall wird der Absatz mit dem Heraklit-Zitat in grauer Schrift dargestellt, obwohl die Eigenschaft color: red aus der p.rot-Stildefinition später definiert ist und die höhere Spezifität hat. Der !important-Stil setzt sich durch.

4.6 CSS-Stylesheets und die Browser

Die Formatierung mit Stylesheets ist wesentlich leistungsfähiger und fortschrittlicher als die traditionelle Formatierung mit den alten HTML-Tags und -Attributen. Dass man dennoch so viele Webseiten sieht, die auf die traditionelle Weise formatiert wurden, liegt zum einem daran, dass diese Webseiten älteren Datum sind und die Webautoren den Aufwand scheuen, den eine Aktualisierung erfordern würde, zum anderen daran, dass es immer noch viele Websurfer gibt, die Webbrowser verwenden, die Stylesheets ungenügend unterstützen.

Das Hauptproblem ist hierbei der Netscape Navigator. Laut einer Erhebung von November 2000 nutzen 35% der Websurfer den Netscape-Browser (Navigator oder Communicator). (64% verwenden den Internet Explorer und der Rest surft mit anderen Browsern.) Der Netscape Browser unterstützte die aktuellen Webstandards (neben CSS auch HTML 4 und EMCA für Web-Scripting) in den Versionen bis 4.7 jedoch nur unvollständig. Mittlerweile ist zwar der Netscape-Browser 6 verfügbar, der endlich den Anschluss gefunden hat und die Standards - insbesondere Stylesheets - besser unterstützt, doch dürfte es noch einige Zeit dauern, bis sich die Websurfer umgestellt haben.

Was ist also zu tun?

Schauen wir uns ein kleines Beispiel an.

Den meisten Ärger verursacht die Kombination von Tabellen und Stylesheets. Betrachten Sie dazu den Code aus Listing .

Listing 4.10: segenDerErde1.html - Vordergrundfarbe für Tabellen

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Segen der Erde</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
body { margin-top: 30px; margin-left: 30px;
background-color: black; color: white;
text-align: justify }
</style>

</head>

<body>

<table border="0" width="100%" cellspacing="0" cellpadding="0" >
<tr>
<td width="10%">&nbsp;</td>
<td width="450">
<h1>Segen der Erde</h1>
<p>Der lange, lange Pfad über
das Moor in den Wald hinein - wer hat ihn ausgetreten? Der Mann,
der Mensch, der erste, der hier war. Für ihn war noch kein Pfad
vorhanden...</p>
</td>
<td width="10%">&nbsp;</td>
</tr>
</table>

</body>
</html>

Wenn Sie diese Webseite im Netscape 6-Browser anschauen, sieht sie wie in Abbildung 4.16 aus.

Abbildung 4.16:  Hier ist alles okay.

Die gleiche Webseite im Netscape Navigator 4.x ist dagegen recht enttäuschend. Eigentlich ist sie sogar absolut unbrauchbar, denn der Navigator 4 verwendet die von uns gewünschte Vordergrundfarbe (Weiß) nicht für die Tabelle. Der Websurfer sieht also schwarzen Text vor schwarzem Hintergrund. (Etwas besser ist die Darstellung im Internet Explorer 5. Dieser schluckt nur den Blocksatz in der Tabelle.)

Man kann dies auf zwei Wegen bereinigen:

Die so formatierte Webseite sollte dann von nahezu allen Websurfern in der anvisierten Formatierung gelesen werden können.

Wo wir schon damit angefangen haben... hier eine kleine Liste von Tricks, wie man Formatierungsdefizite in den Browsern ausgleichen kann:

4.7 Zusammenfassung

Stylesheets sind eine moderne und leistungsfähige Technik zur Formatierung von Webseiten. Die Vorteile der Stylesheets sind:

Sie haben gesehen wie man

Und wir haben Sie darauf hingewiesen, dass man möglichst externe Stylesheets verwenden sollte (auch wenn wir dies in diesem Buch aus didaktischen Gründen - und manchmal auch aus Bequemlichkeit - selbst nicht immer tun).

Sie haben erfahren, welche Typen von Selektoren es gibt (HTML-, class-, ID- und Pseudo- Selektoren) und wie man mit Hilfe dieser Selektoren eine Verbindung zwischen den Stildefinitionen und den HTML-Elementen herstellt.

Zwischendurch haben wir uns die wichtigsten Stileigenschaften angeschaut.

Schließlich haben wir noch gesehen, wie Stile vererbt werden, wie der Browser Konflikte bei überlappenden Stildefinitionen auflöst und wie man Formatierungsprobleme aufgrund mangelnder Browserunterstützung in Angriff nehmen kann.

4.8 Fragen und Antworten

Frage:
Kann ich in meine Stylesheets Kommentare einfügen?

Antwort:
Ja, aber nicht mit der Syntax, die wir von den HTML-Kommentaren her kennen. Kommentare in Stylesheets beginnen mit der Zeichenfolge /* und enden mit */. Sie gleichen also den Kommentaren der Programmiersprache C.

Frage:
Welche Hintergrundfarbe hat eine Tabellenzelle?

Antwort:
Für eine Tabelle kann die Hintergrundfarbe auf 6 verschiedenen Ebenen spezifiziert werden. Der Hintergrund einer Zelle hängt davon ab, auf welcher Ebene das erste Mal ein nicht-transparenter Hintergrund definiert ist. Die einzelnen Ebenen sind: die Zelle, die Reihe, die Reihengruppe, die Spalte, die Spaltengruppe, die Tabelle.

Frage:
Ist es besser mit Inline-Stilen, eingebetteten Stylesheets oder mit externen Stylesheets zu arbeiten?

Antwort:
Inline-Stile sollte man möglichst gar nicht verwenden. Nutzen Sie stattdessen ID- oder class-Selektoren. Inline-Stile sind zwar schneller zu definieren als ID- oder class-Stildefinitionen, doch vermischt sich dadurch wieder der Code für Inhalt und Formatierung.

4.9 Workshop

Der Workshop enthält Quizfragen, die Ihnen helfen sollen, Ihr Wissen zu festigen, und Übungen, die Sie anregen sollen, das eben Gelernte umzusetzen und eigene Erfahrungen zu sammeln. Versuchen Sie, das Quiz und die Übungen zu beantworten und zu verstehen, bevor Sie zur Lektion des nächsten Tages übergehen.

Quiz

  1. Wie kann man den Stylesheet-Typ angeben?
  2. Warum sollte man stets den Stylesheet-Typ angeben?
  3. Was ist der Unterschied zwischen padding und margin?
  4. Wie kann man Text unterstreichen ?
  5. Zur Erinnerung an Kapitel 3: Wie rückt man den Inhalt von Tabellenzellen von den Zellenrändern ab?
  6. Was bedeutet Vererbung im Sinne der CSS-Spezifikation?
  7. Welches Stylesheet hat die höhere Priorität (unter der Annahme, dass alle aufgeführten Stildefinitionen auf ein gegebenes Element anwendbar sind)?

Übungen

  1. Webs aus mehreren Webseiten basieren üblicherweise auf einem Grund-Design, das für alle Webseiten gleich ist. Zu einem solchen Grund-Design könnten zum Beispiel aufeinander abgestimmte Vorder- und Hintergrundfarbe (oder Hintergrundbild), Hyperlinkfarben, Listensymbole und Schriften für Überschriften und Textabsätze gehören. Entwerfen Sie ein solches Design als externes Stylesheet.
  2. Setzen Sie eine Webseite mit einer Überschrift, einem Textabsatz, einigen Hyperlinks und einer Liste auf. Weisen Sie dann der Webseite Ihr Design zu und beobachten Sie, wie schnell man mit externen Stylesheets formatieren kann.



vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


© Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH