CSS anwenden

165.book Page 329 Wednesday, July 24, 2002 10:20 AM
CSS anwenden
CSS – Die Basis
Wertangaben
Selektoren
Pseudo-Klassen
Pseudo-Elemente
At-Regeln
Die Kaskadierungsfolge
E
CSS – Die Basis
Das World Wide Web Consortium (W3C, www.w3c.org) setzt bei HTML 4.0 auf
eine möglichst strikte Trennung von Inhalt und Gestaltung der Webseiten. Mit
anderen Worten: Die HTML-Datei soll nur die Texte und Bildverweise sowie die
Struktur (Überschriften, Absätze, Listen etc.) des Dokuments enthalten. Direkte
Formatieranweisungen über Attribute wie color (engl. Farbe) oder align (engl.
ausrichten) sollen wegfallen. Deshalb sind die entsprechenden Attribute und
auch einige Tags in HTML als deprecated (engl. missbilligen) gekennzeichnet.
Diese Schlüsselwörter sollen Webdesigner nicht mehr verwenden, obwohl die
Browser sie weiterhin unterstützen. Das ist unumgänglich, denn Abermillionen
von alten Webseiten wären sonst nicht mehr kompatibel.
Wie der Browser Inhalte darstellt, zum Beispiel Überschriften 1. Ordnung mit 16
Punkt großer Schrift soll getrennt von HTML festgelegt werden. Dafür entwarf das
W3C eine eigene Sprache, die Cascading Stylesheets oder kurz CSS. Die Recommendation zu CSS Level 1 oder kurz CSS1 wurde im Dezember 1996 veröffentlicht, CSS Level 2 folgt in etwa zeitgleich mit HTML 4.0 im Mai 1998. Weitere
Informationen finden Sie in Kapitel 1 im Abschnitt »CSS: Cascading Stylesheets«.
CSS ist als unabhängige Formatierungssprache gedacht, die nicht auf die Unterstützung von HTML beschränkt ist. Prinzipiell lässt sie sich auch für die Formatierung von XML-Dokumenten einsetzen. Allerdings hat sich hier in der Praxis die
spezielle Formatiersprache XSL (Extensible Stylesheet Language) durchgesetzt.
Deshalb konzentriert sich das folgende Kapitel auf die Zusammenarbeit mit
HTML und XHTML.
329
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
CSS – Cascading Stylesheet
329
338
343
348
351
352
355
165.book Page 330 Wednesday, July 24, 2002 10:20 AM
Grundlegende Syntax
Die Syntax von CSS ist sehr praxisnah. Ein CSS-Befehl muss zwei Dinge festlegen:
b Was soll formatiert werden: Selektor
b Wie soll formatiert werden: Deklaration
Der Selektor legt fest, welche Elemente einer Webseite der CSS-Befehl betrifft.
Die Deklaration bestimmt, wie die betroffenen Elemente formatiert werden. Im
einfachsten Fall sieht das so aus:
Selektor {Eigenschaft: Wert;}
Die Kombination aus Selektor und Deklaration wird CSS-Regel genannt. Der
Selektor leitet die CSS-Regel ein. Es gibt eine Vielzahl von Selektoren, mit denen
sich ganz einfache oder auch sehr komplexe Anweisungen formulieren lassen.
Weitere Details dazu lesen Sie im Abschnitt »Selektoren« in diesem Kapitel.
Darauf folgen die Deklarationen, die in geschweifte Klammern eingefasst sind.
Die geschweiften Klammern markieren einen Deklarationsblock, der beliebig
viele einzelne Deklarationen enthalten kann. Jede Deklaration besteht aus einem
Wertepaar Eigenschaft und Eigenschaftswert. Die Eigenschaft ist der Aspekt in
der Darstellung eines Elements, den Sie verändern wollen. Die Eigenschaft
schließt ein Doppelpunkt ab, darauf folgt der Wert. Ein Strichpunkt schließt die
Deklaration ab, wenn Sie mehrere Deklarationen notieren ist der Strichpunkt
Pflicht. Steht nur eine Deklaration in den geschweiften Klammern, dann können
Sie den Strichpunkt vor der schließenden Klammer auch weglassen. Eine Übersicht aller Eigenschaften finden Sie thematisch sortiert in Kapitel 14.
Doppelpunkt (:) und Gleichheitszeichen (=)
TIPP
HTML-Attribute und CSS-Deklarationen weichen in einem entscheidenden
Detail voneinander ab: Bei HTML trennen Sie Attribut und Wert mit einem
Gleichheitszeichen, bei CSS Eigenschaft und Wert mit einem Doppelpunkt:
size="25"
color: red;
Wer viel HTML-Quelltext tippt läuft schnell Gefahr, auch bei CSS ein Gleichheitszeichen einzuschmuggeln. Laut CSS-Standard ist eine Deklaration wie
color=red;
aber ungültig und der Browser ignoriert sie. Es kann bei der Fehlersuche recht
lange dauern, solche Vertipper auszumerzen. Aber es kommt noch schlimmer:
Der Internet Explorer gibt sich nämlich besonders tolerant und akzeptiert auch
das Gleichheitszeichen (=) und führt die CSS-Deklaration aus. Andere Browser
wie Netscape oder Opera sind dagegen pingelig und ignorieren die Angabe. Verfallen Sie dann nicht auf die Idee, einen CSS-Fehler in Netscape oder Opera zu
vermuten (obwohl es davon nicht wenige gibt). Prüfen Sie zunächst, ob überall
Doppelpunkte eingetragen sind.
330
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
Kapitel 13
165.book Page 331 Wednesday, July 24, 2002 10:20 AM
Groß- und Kleinschreibung spielt bei CSS keine Rolle. Sowohl die Eigenschaften
als auch die Eigenschaftswerte können Sie beliebig schreiben. Anders sieht es nur
aus, wenn Sie als Wert eine Zeichenkette in Anführungszeichen angeben. Innerhalb der Anführungszeichen zählt die Groß-/Kleinschreibung sehr wohl. Weitere
Details dazu lesen Sie im Abschnitt »Wertangaben« in diesem Kapitel.
Das folgende konkrete Beispiel lässt Überschriften 1. Ordnung (<h1>...</h1>) in
roter Schrift erscheinen:
h1 {color: red;}
h1 ist das HTML-Tag, für das die Deklaration gilt. Es handelt sich im Beispiel um
einen Typselektor, der sämtliche <h1>-Tags im HTML-Dokument betrifft (siehe den
Abschnitt »Typselektor« in diesem Kapitel). Sie müssen die CSS-Angabe also
nur einmal machen, um sämtliche Überschriften 1. Ordnung zu formatieren.
Andere Überschriften (<h2>, <h3> etc.) sind davon nicht betroffen. In HTML müssten Sie bei jeder einzelnen Überschrift zusätzlich das Tag <font> einfügen:
<h1><font color="red">Überschrift</font></h1>
Mehrere Selektoren
In der Praxis kommt es häufig vor, dass identische CSS-Deklarationen auf verschiedene Tags (genauer Selektoren) anzuwenden sind. Denken Sie beispielsweise an Überschriften, die Sie mit einer anderen Schriftart als den normalen Text
formatieren wollen. Dabei handelt es sich um mehrere Tags von <h1> bis <h6>. Statt
nun für jedes Tag eine eigene CSS-Regel aufzustellen, notieren Sie einfach alle
Selektoren durch Kommata getrennt:
h1, h2, h3, h4, h5, h6 {font-family: sans-serif}
Diese Schreibweise hat die gleich Wirkung wie sechs einzelne Regeln:
h1
h2
h3
h4
h5
h6
{font-family:
{font-family:
{font-family:
{font-family:
{font-family:
{font-family:
sans-serif}
sans-serif}
sans-serif}
sans-serif}
sans-serif}
sans-serif}
Kommentare einfügen
Wie bei HTML und auch Programmiersprachen macht es Sinn, in Stylesheets
Kommentare anzubringen. So fällt es später leichter Änderungen vorzunehmen.
Ein Kommentar beginnt mit den Zeichen /* und endet mit */.
CSS anwenden
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
331
E
CSS – Cascading Stylesheet
Das alleine würde den Einsatz von Stylesheets bereits mehr als rechtfertigen, denken Sie nur an eine nachträgliche Änderung der Farbe in einem ganzen Projekt.
Natürlich ist es nicht immer sinnvoll, sämtliche Überschriften in einem Dokument zu formatieren. Über den Selektor schränken Sie den Wirkungsbereich einer
Deklaration ein.
165.book Page 332 Wednesday, July 24, 2002 10:20 AM
p{
color: blue;
text-align: justify;
}
/* Schrift blau */
/* Blocksatz
*/
Die Kommentare dürfen überall im Stylesheet notiert werden, also sowohl innerhalb von Blöcken als auch dazwischen. Die einzigen Ausnahmen sind wieder Zeichenketten in Anführungszeichen, hier gilt der Kommentar als Teil der Zeichenkette.
CSS in HTML einbinden
Wie Sie eine CSS-Regel definieren ist jetzt im Prinzip klar. Aber wie und wo binden Sie die Regel in ein HTML-Dokument ein? HTML 4.0 und 3.2 sehen mehrere
Wege dafür vor, die alle ihre besonderen Vor- und Nachteile haben.
b Inline-Stylesheet im HTML-Tag
b Stylesheet-Bereich im Kopf des HTML-Dokuments
b Externe Stylesheet-Datei
Eine ausführliche Diskussion der Tags, Attribute und der Kompatibilität der
Browser finden Sie in Kapitel 11 im Abschnitt »Stylesheet-Bereiche«. Die folgenden Abschnitte fassen das Wesentliche zusammen.
Inline-Stylesheet
Ein Inline-Stylesheet notieren Sie direkt in einem HTML-Tag mit dem Attribut
style. In diesem Fall müssen Sie keinen Selektor angeben, denn die Deklaration
bezieht sich automatisch auf dieses Tag.
<h1 style="color: red; font-size: 16pt">Überschrift</h1>
Das Attribut style gehört zu HTML 4.0, wird aber auch von älteren Browsern
problemlos unterstützt. Das Beispiel setzt mit zwei Deklarationen die Schriftfarbe
auf rot (color: red) und die Schriftgröße auf 16 Punkt (font-size: 16pt). Diese
Deklarationen gelten nur für dieses eine <h1>-Tag, andere Überschriften im Dokument bleiben davon unberührt. Sie dürfen als Attributwert sämtliche Eigenschaften notieren, die auch in einer CSS-Regel erlaubt sind.
Es liegt auf der Hand, dass Sie mit Inline-Stylesheets wichtige Vorteile von CSS
aus der Hand geben: Die Formatierung ist wieder eng mit einzelnen HTML-Tags
verbunden. Bei einer Änderung müssen Sie im gesamten Quelltext die CSSDeklarationen aufspüren und anpassen. Zudem verbauen Sie sich die Option,
CSS-Deklarationen in mehreren Dokumenten zu nutzen.
Stylesheet-Bereich
Ein Stylesheet-Bereich wird im Kopf einer HTML-Datei irgendwo zwischen <head>
und </head> notiert. Der Bereich beginnt mit dem HTML-Tag <style> und endet
mit </style>. Dieses Tag wurde bereits mit HTML 3.2 eingeführt und ist deshalb
auch älteren Browsern bekannt.
332
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
Kapitel 13
165.book Page 333 Wednesday, July 24, 2002 10:20 AM
<head>
<style type="text/css">
h1 {color: red; font-size: 16pt;}
</style>
</head>
Im einleitenden Tag zeigt das Attribut type="text/css" an, dass der Bereich CSSRegeln enthält. Ohne dieses Attribut weiß der Browser nicht was folgt und ignoriert unter Umständen die CSS-Regeln. Das macht Sinn, weil es durchaus andere
Stylesheet-Sprachen gibt, die allerdings in der Praxis so gut wie nie zum Einsatz
kommen. Schließlich unterstützen alle großen Browser nur CSS.
Innerhalb des Stylesheet-Bereichs notieren Sie die CSS-Regeln nach der oben
vorgestellten Syntax. Beachten Sie, dass innerhalb des Stylesheet-Bereichs nicht
die bei HTML üblichen Regeln zum Beispiel für Kommentare gelten. Der Browser
behandelt den Stylesheet-Bereich intern völlig anders.
Beachten Sie, dass Sie im Dateikopf beliebig viele Stylesheet-Bereiche notieren
dürfen. Das macht zum Beispiel Sinn, wenn Sie CSS-Regeln nur in bestimmten
Dokumenten verwenden wollen, andere CSS-Regeln dagegen in allen Dokumenten.
<head>
<style type="text/css">
<!-h1 {color: red; font-size: 16pt;}
-->
</style>
</head>
Externe Stylesheet-Datei
Die Stylesheets müssen nicht im HTML-Dokument notiert sein. Seit HTML 3.2
können die Browser auch CSS-Regeln aus einer separaten Datei einlesen und auf
das HTML-Dokument anwenden. In der Stylesheet-Datei notieren Sie nur die
CSS-Regeln. Die Dateierweiterung dafür ist typischerweise css, eine CSS-Datei
könnte format.css heißen. Der Inhalt könnte zum Beispiel so aussehen:
h1 {color: red; font-size: 16pt;}
p {color: blue; font-size: 11pt;}
Im Dateikopf der HTML-Datei notieren Sie dann folgendes Tag:
<head>
<link href="format.css" rel="stylesheet" type="text/css">
</head>
CSS anwenden
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
333
E
CSS – Cascading Stylesheet
Um kompatibel zu uralten Browsern zu bleiben, die kein CSS unterstützen, werden bisweilen die CSS-Regeln als HTML-Kommentar versteckt. In der Praxis
macht das heute kaum noch Sinn, praktisch jeder Browser erkennt StylesheetBereiche.
165.book Page 334 Wednesday, July 24, 2002 10:20 AM
Die Typangabe entspricht einem normalen Stylesheet-Bereich. Das Attribut
rel="stylesheet" sagt dem Browser, dass es sich um eine Stylesheet-Datei handelt
und er den Inhalt wie einen Stylesheet-Bereich behandeln soll.
Der Vorteil externer Stylesheet-Dateien liegt auf der Hand: Sie können einen Satz
CSS-Regeln in vielen HTML-Dokumenten verwenden und verkürzen damit die
HTML-Dokumente. Änderungen müssen Sie nur an der zentralen CSS-Datei vornehmen, beim nächsten Aufruf nutzen alle HTML-Dokumente die geänderten
Regeln.
Kaskadierte Gültigkeit
In einem HTML-Dokument können Sie Stylesheets aus verschiedenen Quellen
zusammenführen. Dabei kann es vorkommen, dass sich die Stylesheet-Angaben
widersprechen. Mit anderen Worten: In der externen CSS-Datei legen Sie als
Schriftgröße für normalen Text 12 Punkt fest. In einem style-Attribut legen Sie als
Schriftgröße aber 10 Punkt fest. Was passiert? Die Schrift wird mit 10 Punkt
Größe formatiert. Diese Kaskadierung ist fester Bestandteil von CSS (und für den
ersten Teil des Namens zuständig: Cascading Stylesheets).
Bei externen Stylesheet-Dateien gibt die Reihenfolge der <link>-Tags im HTMLDokument den Ausschlag. Die CSS-Angabe im Stylesheet an letzter Stelle benutzt
der Browser. Das gilt auch für Stylesheet-Bereiche im Kopf des HTML-Dokuments, die der Browser genauso wie externe CSS-Dateien behandelt. Wenn Sie
einzelne Tags mit dem Attribute style formatieren, so hat diese Angabe im Einzelfall den Vorrang gegenüber Stylesheet-Bereichen und externen CSS-Dateien.
Dieses Überschreiben gilt nur, wenn identische CSS-Deklarationen vorliegen, die
dieselbe Eigenschaft und dieselben Elemente betreffen. Es ist dagegen kein Problem, in verschiedenen Quellen dasselbe Element mit verschiedenen Deklarationen zu formatieren. Die verschiedenen Deklarationen zu einem Element addieren
sich sozusagen auf. Weitere Details zur Kaskadierung lesen Sie im Abschnitt
»Die Kaskadierungsfolge« in diesem Kapitel.
Standards-Compliant-Mode
Die Darstellung von HTML-Dokumenten und insbesondere CSS-Regeln entspricht beim Internet Explorer bis zur Version 5.5 nicht unbedingt dem CSS-Standard. Die CSS-Eigenschaften werden zwar interpretiert und umgesetzt, kleine
Details sind aber anders geregelt. So ist die Breite eines Elements nach CSS ohne
Auffüllbereich und Rahmen gerechnet, während der Internet Explorer standardmäßig inklusive Rahmen rechnet (siehe in Kapitel 14 den Abschnitt »Außenabstand und Auffüllbereich«).
!DOCTYPE auswerten
Die Entscheidung, ob der Internet Explorer 6 den Normalmodus (kompatibel zu
IE 5.5) oder den Standards-Compliant-Mode verwendet fällt über die !DOCTYPEDeklaration. Als erste Zeile eines »offiziellen« HTML-Dokuments zeigt diese
Deklaration an, welche HTML-Version und Variante das Dokument benutzt
334
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
Kapitel 13
165.book Page 335 Wednesday, July 24, 2002 10:20 AM
(siehe Kapitel 2, Abschnitt »Dokumenttyp festlegen«). Anhand dieser Deklaration entscheidet der IE6, in welchem Modus er die Webseite anzeigt.
Eine !DOCTYPE-Deklaration hat einige feste Bestandteile. Die vollständige
Deklaration für HTML 4.0 Transitional sieht so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Das Label gibt die HTML-Version an, also im Beispiel HTML 4.0. Die Definition
beschreibt, um welche Variante (von HTML) es geht, im Beispiel Transitional. Am
Ende folgt ein URL, der auf die DTD der jeweiligen HTML-Version verweist, im
Beispiel "http://www.w3.org/TR/html4/loose.dtd". Die folgende Tabelle zeigt, bei welcher Kombination dieser Bestandteile der Standards-Compliant-Mode aktiviert
wird.
Label
Definition
URL vorhanden
URL nicht vorhanden
Kein !DOCTYPE
vorhanden
–
Normalmodus
Normalmodus
HTML (ohne Versionsangabe)
–
Normalmodus
Normalmodus
HTML 2.0
–
Normalmodus
Normalmodus
HTML 3.0
–
Normalmodus
Normalmodus
HTML 3.2
–
Normalmodus
Normalmodus
HTML 4.0
keine Definition
vorhanden
Standards-Compliant
Standards-Compliant
HTML 4.0
Frameset
Standards-Compliant
Normalmodus
HTML 4.0
Transitional
Standards-Compliant
Normalmodus
HTML 4.0
Strict
Standards-Compliant
Standards-Compliant
XHTML
–
Standards-Compliant
Standards-Compliant
XML
–
Standards-Compliant
Standards-Compliant
Unbekanntes !DOCTYPE
–
Standards-Compliant
Standards-Compliant
E
Die folgenden drei Beispiele schalten den Standards-Compliant-Mode ein.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
HINWEIS
Individueller Modus bei Frames
Diese Entscheidung für oder gegen den Standards-Compliant Mode fällt der
Internet Explorer 6 für jede HTML-Datei einzeln. So können in einem Frameset
die einzelnen HTML-Dokumente in verschiedenen Modi angezeigt werden. Auch
ein Dokument in einem Inline-Frame kann einen anderen Anzeigemodus haben
als das umgebende Dokument (siehe Kapitel 10).
CSS anwenden
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
335
CSS – Cascading Stylesheet
Tabelle 13.1:
Die Bedingungen für den
Standards-Compliant-Mode
beim Internet
Explorer 6
165.book Page 336 Wednesday, July 24, 2002 10:20 AM
Unterschiede zum Normalmodus
Die Unterschiede zwischen Standards-Compliant Mode und Normalmodus
beziehungsweise zum Internet Explorer 5.5 und älteren Versionen betreffen
Details, die aber im Einzelfall große Auswirkungen haben können. Es gebt um
zwei Gruppen von Unterschieden. Die erste Gruppe umfasst Unterschiede in der
Darstellung oder Berechnung von Ausmaßen.
b Höhe und Breite von Elementen: Die Höhe und Breite von Elementen (height
und width) berechnet der IE6 jetzt ohne Auffüllbereich und Rahmen. Nur der
Inhalt des Elements zählt für die Maße.
b Tabellen: Bei Tabellen mit Fixed-Layout (table-layout: fixed im <table>-Tag)
werden Auffüllbereich, Ränder und Außenabstand der Zellen bei der Berechnung der Zellenbreite und -höhe berücksichtigt.
b Grafiken (<img>): Die Höhe und Breite von Bildern wird jetzt unter Berücksichtigung des Auffüllbereichs berechnet.
b Bereich der Webseite (<body> und <html>): In älteren Versionen des Explorer
entsprach das <body>-Tag dem kompletten Hintergrund einer Webseite. Auf diesem Hintergrund stellte der Browser den Inhalt des Dokuments dar. Die Größe
des Hintergrunds legt das Browserfenster fest. Im Standards-Compliant Mode
dagegen entspricht das <html>-Tag dem kompletten Seitenhintergrund. Sie können die Größe des <body>-Bereichs über CSS-Eigenschaften sogar nach Belieben setzen. Daraus folgt, dass Sie ein Hintergrundbild oder eine Hintergrundfarbe in <body> und <html> festlegen sollten. Der IE6 zeigt dann im
Normalmodus und im Standards-Compliant Mode den Hintergrund korrekt
an. Außerdem berechnet der IE6 dann die absolute Position von Elementen
(siehe in Kapitel 14 den Abschnitt »Positionierung«) ausgehend von <html>.
b Rollbalken: Über das Attribut scroll legen Sie fest, ob der Browser Rollbalken
anzeigt oder nicht. Im Normalmodus und älteren Browserversionen gehört dieses Attribut zu <body>. Im Standards-Compliant-Mode dagegen müssen Sie das
Attribut in <html> eintragen.
b Die zweite Gruppe von Unterschieden bezieht sich auf die Interpretation (engl.
parsing) von Cascading Stylesheets. Bis zum Internet Explorer 5.5 ist der Browser recht tolerant bei Schreibweisen, die nicht ganz dem CSS-Standard entsprechen. Im Standards-Compliant Mode dagegen weist der Browser eine Reihe von
nachlässigen Schreibweisen ab. Dadurch können Stylesheets, die bisher einwandfrei funktioniert haben, plötzlich unvorhersehbare Ergebnisse liefern.
b Kommentare: Der Internet Explorer akzeptiert die Kommentarzeichen <!-und --> von HTML auch innerhalb von CSS-Stylesheets. Im Standards-Compliant Mode sind nur noch die CSS-Kommentarzeichen /* und */ erlaubt. Es
gibt nur eine Ausnahme: Die Markierung eines gesamten Stylesheet-Bereichs
als HTML-Kommentar ist erlaubt:
<style>
<!-/* Beginn CSS-Regeln */
H1.blue { background-color:blue }
...
/* Ende CSS-Regeln */
-->
</style>
336
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
Kapitel 13
165.book Page 337 Wednesday, July 24, 2002 10:20 AM
b Unbekannte Schlüsselwörter in Sammeleigenschaften: Wenn Sie bei Sammeleigenschaften wie margin oder font einen falschen Wert angeben interpretiert
der Internet Explorer die Werte bis zum falschen Wert korrekt. Laut CSS-Standard sollte der Browser aber die Sammeleigenschaft komplett ignorieren. Dieses Verhalten gilt im Standards-Compliant Mode.
b Unvollständige font-Eigenschaft: Laut CSS-Standard müssen Sie bei der fontEigenschaft mindestens die Werte für font-size und font-style angeben. Sonst
gilt die font-Deklaration als ungültig. Im Standards-Compliant Mode ist konsequent die Deklaration font: 14pt; ungültig, es müsste zum Beispiel font: 14pt
normal; notiert werden.
b RGB-Farbangaben: Wenn das führende Zeichen # in einer RGB-Farbangabe
wie color: #FF0000 fehlt, ignoriert der Browser im Standards-Compliant Mode
die Farbangabe komplett.
line-height: 200%;
b Schlüsselwörter in Anführungszeichen: Schlüsselwörter wie etwa die Farbnamen (red etc.) dürfen nach CSS nicht in Anführungszeichen stehen. Sonst
interpretiert sie der Browser als Zeichenkette. Der Internet Explorer akzeptiert
Deklarationen wie color: "red"; trotzdem. Im Standards-Compliant Mode
ignoriert der Browser dagegen solche Deklarationen.
b Class- und ID-Werte: Nach CSS darf der Wert eines class- oder id-Attributs
nicht mit einer Ziffer (0-9) beginnen. <img class="0rand"> ist also für CSS eine
ungültige Schreibweise, die sich nicht als Klassenselektor einsetzen lässt (siehe
den Abschnitt »Klassenselektor« in diesem Kapitel). Zudem wird nach
HTML 4.0 Groß- und Kleinschreibung in beiden Attributwerten unterschieden. Der Internet Explorer akzeptiert beide Problemfälle dennoch, allerdings
nicht im Standards-Compliant-Mode.
Netscape: Quirks Mode
Auch Netscape 6 beziehungsweise Mozilla kennen eine vergleichbare Vorgehensweise. Anhand der !DOCTYPE-Deklaration in Dokument versucht der Browser herauszufinden, welcher Darstellungsmodus angemessen ist. Die Details lesen Sie
auf den Webseiten des Mozilla-Projekts unter www.mozilla.org/docs/web-developer/quirks/doctypes.html nach. Netscape kennt nicht nur zwei Modi, sondern
sogar drei:
b Full Standards Mode: In diesem Modus hält sich Netscape 6 eng an die Vorgaben von HTML 4.0 beziehungsweise CSS Level 1 und Level 2. Damit entspricht der Modus dem Standards-Compliant Mode des Internet Explorer 6.
Der Modus wird aktiv, wenn in der !DOCTYPE-Deklaration keine DTD angegeben
ist (<!DOCTYPE HTML>), HTML 4.0/4.01 ("-//W3C//DTD HTML 4.01//EN") oder XHTML
1.0 ("-//W3C//DTD XHTML 1.0 Strict//EN").
CSS anwenden
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
337
E
CSS – Cascading Stylesheet
b Fehlende Einheit bei Längen: Viele CSS-Eigenschaften erwarten als Wert eine
Längenangabe, für die CSS eine Reihe von festen Einheiten erlaubt (siehe den
Abschnitt »Längen« in diesem Kapitel). Der Internet Explorer interpretiert
eine Längenangabe ohne Einheit wie width: 600; automatisch als Pixel (width:
600px). Im Standards-Compliant-Mode wertet der IE6 das als Fehler und ignoriert die Deklaration. Die einzige Ausnahme ist die Eigenschaft line-height, die
Zahlen ohne Einheit als Prozentwert interpretiert: line-height: 2; entspricht
165.book Page 338 Wednesday, July 24, 2002 10:20 AM
b Almost Standards Mode: Der Modus entspricht weitgehend dem Full Standards Mode, hat aber einige Ausnahmen. Die !DOCTYPE-Deklaration ist für
die Transitional- und Frameset-Versionen von HTML 4.0 und XHTML 1.0 ausgelegt: "-//W3C//DTD XHTML 1.0 Transitional//EN" und "-//W3C//DTD HTML 4.01 Transitional//EN". Bei HTML 4.0 muss in der Deklaration ein URL für die DTD angegeben werden.
b Quirks Mode: Für die meisten bestehenden Webseiten empfehlen die Entwickler von Netscape 6 den Quirks Mode (quirk = Schrulle, Marotte). Dieser
Modus entspricht dem Normalmodus des Internet Explorers beziehungsweise
älteren Explorerversionen (die üblichen Unterschiede in der Darstellung einmal ausgenommen). Der Modus wird aktiv, wenn die !DOCTYPE-Deklaration ganz
fehlt oder die URL für die DTD weggelassen wurde. Daneben gibt es noch eine
ganze Reihe von Ausnahmen. Welche Besonderheiten den Quirks Mode auszeichnen lesen Sie bei www.mozilla.org/docs/web-developer/quirks/quirklist.html nach. Es finden sich darunter viele der Ausnahmen, die den Normalmodus des Internet Explorers ausmachen.
Insgesamt verhalten sich Internet Explorer 6 und Netscape 6/Mozilla bei der Auswahl des Darstellungsmodus sehr ähnlich. Was beim einen Browser den Standards-Compliant Mode aktiviert schaltet den anderen ebenfalls in den Full Standards Mode oder zumindest den Almost Standards Mode. Nur in wenigen Fällen
ergibt sich eine unterschiedliche Bewertung der !DOCTYPE-Deklaration.
Wertangaben
In einer CSS-Deklaration mit Eigenschaft und Eigenschaftswert gibt es eine Vielzahl von erlaubten Werten: Farben, Zahlen, Prozentwerte, URIs, Winkel, Zeiten,
Zeichenketten, Frequenzen. Wie die einzelnen Werte auszusehen haben, legt der
CSS-Standard exakt fest.
Ganzzahlen und Fließkommazahlen
Ganzzahlen (Integer) und Fließkommazahlen sind nur in Dezimalschreibweise
erlaubt. Eine Ganzzahl besteht logischerweise nur aus den Ziffern 0 bis 9, eine
Fließkommazahl kann auch einen Punkt (.) als Fließkomma enthalten. Die Zahl
der Vor- und Nachkommastellen ist beliebig. In jedem Fall kann vor einer Zahl
ein Pluszeichen (+) oder ein Minuszeichen (-) für positive und negative Zahlen
stehen. Beachten Sie aber, dass manche Eigenschaften den gültigen Wertebereich
einschränken, etwa auf positive Zahlen oder Werte von 0 bis 100.
Punkt statt Komma!
HINWEIS
In CSS gilt die amerikanische Schreibweise für Fließkommazahlen: Das Dezimaltrennzeichen ist ein Punkt und kein Komma. Die Zahl
2,37
ist falsch, die Zahl
2.37
ist richtig.
338
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
Kapitel 13
165.book Page 339 Wednesday, July 24, 2002 10:20 AM
Längen
Längenangaben tauchen in CSS-Regeln häufig auf, um zum Beispiel die Breite
eines Absatzes festzulegen, die Schriftgröße oder die Position eines Bereichs. Eine
Länge besteht immer aus einer Zahl (Ganz- oder Fließkommazahl) und einer Einheit (cm, px etc.). Vor der Zahl ist noch ein Vorzeichen (+ oder -) erlaubt. Es gibt
zwei Arten von Längenangaben: Relative und absolute Längen.
Relative Längen
Eine relative Länge gibt eine Länge relativ zu einer anderen Längeneinheit wieder.
Dadurch passen sich CSS-Regeln mit relativen Längen leichter an unterschiedliche Ausgabegeräte, zum Beispiel Monitore mit unterschiedlicher Auflösung an.
Es gibt folgende Einheiten:
b em: Die Schriftgröße im betroffenen Element. Wenn Sie in einem Absatz mit 12
Punkt großer Schrift einen linken Rand von 2em einstellen (text-indent: 2em;),
dann ist die Einrückung 2 mal 12 Punkt gleich 24 Punkt tief.
b ex: Die x-Höhe der Schrift im betroffenen Element.
Einige Beispiele:
h1 {margin:
0.5em}
h1 {margin:
1ex}
p {font-size: 11px}
Absolute Längen
Eine absolute Länge bezieht sich auf einen festen Maßstab, der vom Ausgabegerät
unabhängig ist. Es gibt folgende Einheiten:
b in: Ein Inch (oder Zoll) entspricht 2,54 cm.
b cm: Zentimeter
b mm: Millimeter
b pt: Die Einheit Punkt ist im Layout für Schriftgrößen gebräuchlich. 1 Punkt
entspricht für CSS2 1/72 Zoll, also etwa 0,35 mm.
b pc: Ein Pica entspricht 12 Punkt, also 1/6 Zoll oder 0,4 cm.
Einige Beispiele:
h1
h2
h3
h4
{margin:
{line-height:
{word-spacing:
{font-size:
0.5in}
3cm }
4mm }
14pt }
Prozentwerte
Ein Prozentwert ist eine Ganz- oder Fließkommazahl, die ein Prozentzeichen (%)
abschließt. Optional stellen Sie vor die Zahl noch ein Vorzeichen (+ oder -). Prozentwerte sind immer relativ zu einem anderen Wert, etwa der Breite eines Elements. Bei jeder Eigenschaft, die Prozentwerte unterstützt, ist in Kapitel 14
CSS anwenden
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
339
E
CSS – Cascading Stylesheet
b px: Pixel, relative Größe zum Ausgabegerät (zum Beispiel verschiedene PCs mit
unterschiedlicher Bildschirmauflösung).
165.book Page 340 Wednesday, July 24, 2002 10:20 AM
angegeben, worauf sich der Prozentwert bezieht. Das folgende Beispiel legt die
Zeilenhöhe in einem Absatz prozentual zur Schriftgröße fest.
p {font-size: 10pt}
p {line-height: 120%}
Achtung: Kindelemente erben üblicherweise die berechneten Werte ihrer Eltern.
Im Beispiel erben die Kindelemente des Absatzes also die Schriftgröße 12pt und
nicht 120%.
URLs und URIs
In einigen CSS-Eigenschaften geben Sie als Wert die Web-Adresse einer Ressourcendatei an, zum Beispiel eine Bilddatei als Hintergrundbild. In diesem Fall nutzen Sie die bei HTML üblichen URIs (Uniform Resource Identifier). Ein URI
kann eine URL (Uniform Resource Locator, die verbreitete Form einer WebAdresse) sein oder ein URN (Uniform Resource Name). Ein URN weist auf den
Speicherort einer Ressource ohne direkt eine Adresse anzugeben. Es ist ein Server-Dienst zwischengeschaltet, der einem URN einen URI zuweist. In der Praxis
werden Sie kaum jemals auf einen URN treffen. Einen URI klammern Sie mit dem
Ausdruck url(). Die folgenden Beispiele weisen einer Webseite ein Hintergrundbild zu:
body {background: url(/bilder/back.jpg)}
body {background: url("back.jpg")}
body {background: url('http://www.domain.de/bilder/back.jpg')}
Den URI schreiben Sie optional innerhalb von einfachen oder doppelten Anführungszeichen. Sie dürfen nur nicht beide Schreibweisen für Anführungszeichen
vermischen. Auch ein Dateiname, der sich auf eine Datei im selben Verzeichnis
wie die CSS- oder HTML-Datei bezieht, ist ein gültiger URI.
Farben
Ein Farbwert ist entweder ein festes Schlüsselwort oder ein RGB-Wert. Die
Schlüsselwörter beschränken sich auf wenige gebräuchliche Farben, die RGBWerte sind kompliziert in der Berechnung (sofern Ihr HTML-Editor Ihnen diese
Arbeit nicht abnimmt).
Farbnamen
Die Schlüsselwörter oder Farbnamen kennzeichnen bestimmte gebräuchliche
Farben wie rot (red), braun (maroon) etc. Die sechzehn erlaubten Farbnamen finden
Sie in Anhang A im Abschnitt »Standardfarbnamen ab HTML 3.2« aufgelistet.
Das folgende Beispiel setzt für ein HTML-Dokument die Schriftfarbe auf weiß
(color: white) und die Hintergrundfarbe auf schwarz (background-color: black).
body {color: white; background-color: black}
340
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
Kapitel 13
165.book Page 341 Wednesday, July 24, 2002 10:20 AM
Nicht im CSS-Standard (oder im HTML-Standard) stehen die erweiterten Farbnamen. Die Liste umfasst rund 140 Farben, die über das ganze Spektrum verteilt
sind. Sie finden eine Zusammenstellung in Anhang A unter »Erweiterte Farbnamen«. Internet Explorer und Netscape 4 und 6 unterstützen diese Liste komplett, Opera 5 aber nur etwa 90 Prozent. Deshalb ist es in angebracht, in der Praxis auf diese Farbnamen zu verzichten und stattdessen RGB-Werte zu benutzen.
Einen anderen Zweck verfolgt CSS 2 mit den Systemfarbnamen. Diese Farbnamen geben keinen festen Farbwert an, sondern beziehen sich auf die Farben der
grafischen Benutzeroberfläche, die der Anwender benutzt. Hier gibt es zum Beispiel das Schlüsselwort menutext, das der Schriftfarbe in Menüs entspricht. Mit diesen relativen Systemfarbnamen passen Sie also eine Webseite an das Desktop der
Besucher an. Der Internet Explorer unterstützt Systemfarbnamen ab Version 4.0,
Netscape und Opera ab Version 6.0.
RGB-Werte
Tabelle 13.2:
Die verschiedenen
Schreibweisen
für RGB-Farbwerte. Alle
Beispiel ergeben
dieselbe Farbe,
ein sattes Rot.
Schreibweise
Beispiel
Erklärung
#RGB
#f00
Die hexadezimal Schreibweise beginnt immer
mit dem Zeichen #. In der verkürzten Form
tragen Sie für jeden Farbanteil eine Zahl zwischen 0 und F ein (dezimal 0 – 15). Großoder Kleinschreibung spielt keine Rolle, es hat
sich aber Großschreibung eingebürgert. Die
verkürzte Schreibweise wird intern zur sechsstelligen Variante erweitert, aus #F00 wird
#FF0000.
#RRGGBB
#FF0000
Die übliche hexadezimale Schreibweise
erlaubt pro Farbanteil Werte zwischen 00 und
FF (dezimal 0 bis 255). Damit lassen sich
255*255*255 Farben darstellen. Auch hier
spielt Groß- und Kleinschreibung keine Rolle.
rgb(Zahl, Zahl,
Zahl)
rgb(255, 0, 0)
Dezimale Zahlen für die Farbanteile nutzen
Sie mit dem Ausdruck rgb(). Erlaubt sind
Werte zwischen 0 und 255.
rgb(Prozent,
Prozent, Prozent)
rgb(100%, 0%, 0%)
Die Prozentwerte (0.0% bis 100.0%) steuern
den Anteil der jeweiligen Grundfarbe.
Winkel
Winkel werden bei einigen CSS-Eigenschaften für Sprachausgabe benutzt. Es sind
folgende Einheiten erlaubt:
b deg: Klassische Einteilung von 0 bis 360 Grad.
b grad: Ein rechter Winkel entspricht 100grad, ein Vollkreis hat 400grad.
b rad: Unterteilt einen Vollkreis in 2*pi, also Werte von 0 bis 6,28 (gerundet).
CSS anwenden
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
341
E
CSS – Cascading Stylesheet
Über den RGB-Werte erhält man etwa 16,4 Millionen Farben. Dabei geben Sie
den Rot-, Blau- und Grünanteil der Farbe jeweils getrennt an. Bereits seit CSS1
gibt es verschiedene Schreibweisen, die die folgende Tabelle auflistet. Internet
Explorer, Netscape und Opera unterstützen alle Schreibweisen spätestens ab der
4er-Version.
165.book Page 342 Wednesday, July 24, 2002 10:20 AM
Winkelwerte dürfen auch negativ sein. Derzeit unterstützt kein Browser der 6erGeneration Winkelangaben (ebenso wenig wie Sprachausgabe).
Zeiten
Zeitangaben finden bei CSS2 nur im Zusammenhang mit der Sprachausgabe Verwendung. Es sind folgende Einheiten erlaubt:
b ms: Millisekunden
b s: Sekunden
Zeitwerte dürfen nicht negativ sein. Derzeit unterstützt kein Browser der 6erGeneration Winkelangaben (ebenso wenig wie Sprachausgabe).
Frequenzen
Frequenzen finden bei CSS2 nur im Zusammenhang mit der Sprachausgabe Verwendung. Es sind folgende Einheiten erlaubt:
b Hz: Hertz
b kHz: Kilohertz
Frequenzen dürfen nicht negativ sein. Derzeit unterstützt kein Browser der 6erGeneration Winkelangaben (ebenso wenig wie Sprachausgabe).
Zeichenketten
Zeichenketten, also beliebigen Text, schließen Sie wahlweise mit doppelten oder
einfachen Anführungszeichen ein. Sie müssen nur darauf achten, die Anführungszeichen immer paarweise zu verwenden. Doppelte Anführungszeichen dürfen
nicht in einer Zeichenkette vorkommen, die in doppelte Anführungszeichen eingeschlossen sind. Das gilt im übertragenen Sinn auch für einfache Anführungszeichen. In diesem Fall müssen Sie die inneren Anführungszeichen maskieren: \"
oder \22 beziehungsweise \' oder \27. Gemischt dürfen die Anführungszeichen
aber innerhalb einer Zeichenkette auftreten. Einige Beispiele:
"das
"das
'das
'das
ist
ist
ist
ist
eine
eine
eine
eine
'Zeichenkette'"
\"Zeichenkette\""
"Zeichenkette"'
\'Zeichenkette\''
Eine Zeichenkette kann keinen Zeilenumbruch enthalten. Einen Zeilenumbruch
fügen Sie mit \A ein. Wenn Sie eine lange Zeichenkette im Quelltext über mehrere
verteilen wollen, dürfen Sie nicht einfach einen Umbruch einbauen. Vielmehr
müssen Sie den Umbruch mit \ maskieren. Die beiden folgenden CSS-Deklarationen sind gleichwertig:
font-family: "Bookman Old\
Style Fett Kursiv";
font-family: "Bookman Old Style Fett Kursiv";
342
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
Kapitel 13
165.book Page 343 Wednesday, July 24, 2002 10:20 AM
Selektoren
Der Selektor legt in einer CSS-Regel fest, auf welche Elemente im HTML-Dokument die Regel angewendet wird. Es gibt eine ganze Reihe verschiedener Selektoren, mit denen Sie genau auswählen, was Sie formatieren möchten. Alle Selektoren lassen sich auch kombinieren, sodass sehr komplexe Konstrukte entstehen. In
99 Prozent aller Fälle genügt aber einer, der im Folgenden aufgeführten Selektoren, um den gewünschten Effekt zu erzielen.
Universalselektor
Der Universalselektor * bezieht sich auf alle Tags in einem HTML-Dokument.
Das folgende Beispiel legt die Schriftgröße für alle Tags auf 12 Punkt fest:
* { font-size: 12pt}
Beachten Sie, dass Netscape 4 den Universalselektor nicht unterstützt.
Der Typselektor bezeichnet ein bestimmtes Tag. An jeder Stelle, an der dieses Tag
im HTML-Dokument vorkommt wird die Regel angewandt. Dabei geben Sie den
Namen des Elements ohne die spitzen Klammern an. Alle CSS-fähigen Browser
unterstützen Typselektoren bereits seit etlichen Versionen. Das folgende Beispiel
legt fest, dass sämtliche Überschriften 1. Ordnung (<h1>) eine serifenlose Schrift
(zum Beispiel Arial) benutzen:
h1 {font-family: sans-serif}
Nachfahrenselektor
Ein Nachfahrenselektor erfasst nur solche Elemente, die innerhalb eines anderen
Elements notiert sind. Stellen Sie sich folgenden Fall vor: Auf einer Webseite gibt
es hervorgehobene Wörter (<em>), die blau dargestellt werden. Das funktioniert in
Überschriften wunderbar. Absätze haben allerdings ebenfalls blaue Schrift, die
Hervorhebung geht unter. Die Stellen im Haupttext sollen nun anders aussehen.
Die dritte Regel im folgenden Beispiel betrifft nur hervorgehobene Wörter (<em>),
die innerhalb eines Absatzes (<p>) notiert sind.
p
{color: blue}
em {color: blue}
p em {color: red }
Wenn Sie zwei Tagnamen durch Leerzeichen getrennt hintereinander schreiben,
entsteht ein abhängiger Selektor: Nur wenn <em> innerhalb von <p> notiert ist gilt
die Regel. In HTML hat die Regel die folgende Wirkung:
Dieses <em>Wort</em> ist wichtig.
<p>Ein Absatz mit einem <em>hervorgehobenen</em> Wort</p>
CSS anwenden
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
343
E
CSS – Cascading Stylesheet
Typselektor
165.book Page 344 Wednesday, July 24, 2002 10:20 AM
Kindselektor
Ein Kindselektor beschreibt alle Kindelemente eines Elements. Im Gegensatz zum
Nachfahrenselektor sind nur die Elemente betroffen, die unmittelbar innerhalb
eines Elements notiert sind. Zwischen Eltern- und Kindelement fügen Sie ein
Größer-als-Zeichen (>) ein. Das folgende Beispiel legt für alle Absätze, die Kinder
von <body> sind, eine Zeilenhöhe von 120% fest:
body > p {font-size: 18pt}
Der folgende HTML-Ausschnitt zeigt, dass der Kindabsatz eine größere Schrift
nutzt.
<body>
<p>Absatz mit 18 Punkt.</p>
<ul>
<li>
<p>Absatz mit normaler Schriftgröße.</p>
</li>
</ul>
</body>
Abbildung 13.1:
Nur unmittelbar
unterhalb des
<body>-Elements wirkt die
CSS-Regel mit
dem Kindselektor
Beachten Sie: Über die Pseudo-Klasse :first-child sprechen Sie in einer CSSRegel gezielt das erste Kind eines Elements an (siehe den Abschnitt »:firstchild« in diesem Kapitel).
Nachbarselektor
Der Nachbarselektor betrifft zwei Elemente, die auf derselben Ebene innerhalb
der Hierarchie des HTML-Dokuments stehen. Mit anderen Worten: Beide Elemente sind Kinder desselben Elements. Der Selektor K1 + K2 betrifft das Element
K2, wenn es in der Hierarchie unmittelbar auf K1 folgt. Das folgende Beispiel verringert den Abstand vor einer Überschrift 2. Ordnung, wenn Sie unmittelbar auf
eine Überschrift erster Ordnung folgt:
h1 + h2 { margin-top: -5mm}
Beachten Sie, dass <h1> davon nicht beeinflusst wird, hier bleiben die Abstände
unverändert. Das folgende Bild zeigt, dass die erste Zwischenüberschrift näher an
die vorhergehende <h1>-Überschrift rückt. Die folgenden <h2>-Zwischenüberschriften haben einen wesentlich größeren Abstand.
344
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
Kapitel 13
165.book Page 345 Wednesday, July 24, 2002 10:20 AM
Abbildung 13.2:
Nur bei der
Zwischenüberschrift, die
unmittelbar auf
<h1> folgt, ist der
Abstand zum
vorhergehenden
Text reduziert
Attributselektoren
Die Attributselektoren beziehen sich auf Attribute, die einem Tag zugeordnet ist.
Es gibt nach CSS2 vier verschiedene Schreibweisen für Attributselektoren. Die
Unterstützung durch die Browser sieht ziemlich mager aus und beschränkt sich
auf die teilweise Unterstützung durch Netscape 6 und Opera. In der Praxis spielen
die Attributselektoren deshalb keine große Rolle. Die folgende Tabelle listet die
vier Varianten sowie die Unterstützung durch die Browser auf.
Schreibweise
Bedeutung
[att]
Der Selektor prüft, ob ein bestimmtes Attribut
namens att vorhanden ist. Der Attributwert
spielt keine Rolle.
[att=wert]
Das Attribut att muss einen ganz bestimmten
Wert haben.
[att~=wert]
Das Attribut att hat als Wert eine Liste, deren
einzelne Einträge durch Leerzeichen getrennt
sind. Ein Eintrag in der Liste muss wert entsprechen.
[att|=wert]
Das Attribut att hat als Wert eine Liste, deren
einzelne Einträge durch Minuszeichen
getrennt sind. Ein Eintrag in der Liste muss
wert entsprechen. Diese Schreibweise soll es
möglich machen, Länderkennungen mit Untergruppen (zum Beispiel de-ch, de-at oder
de-lu) zu unterscheiden (siehe in Ï Anhang A
den Abschnitt »Ländercodes«).
Browser
Ein Attributselektor ist immer in eckige Klammern eingeschlossen. Als Attributwert sind entweder Bezeichner oder Zeichenketten erlaubt. Zeichenketten müssen Sie in Anführungszeichen setzen. Ob Groß- und Kleinschreibung eine Rolle
spielen, hängt von der Dokumentsprache ab. Bei HTML 4.0 müssen Sie auf Großund Kleinschreibung achten (siehe den Abschnitt »Standards-CompliantMode« in diesem Kapitel).
Das folgende Beispiel betrifft alle <h1>-Überschriften, die das Attribut title haben.
Der Wert von title spielt dagegen keinen Rolle:
h1[title] {color: green}
CSS anwenden
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
E
CSS – Cascading Stylesheet
Tabelle 13.3:
Verschiedene
Varianten für
Attributselektoren
345
165.book Page 346 Wednesday, July 24, 2002 10:20 AM
Die Anwendung in HTML zeigt das folgende Beispiel. Die erste Überschrift wird
mit grüner Schrift dargestellt, die zweite Überschrift dagegen mit der normalen
Schriftfarbe:
<h1 title="Besonders wichtig">CSS anwenden</h1>
<h1>CSS-Eigenschaften</h1>
Wenn das Attribut einen bestimmten Wert haben soll, schreiben Sie wie im nächsten Beispiel. Nur Überschriften mit linksbündiger Ausrichtung (align="left") werden um 1cm eingerückt:
h2[align=left] {text-indent: 1cm}
Es ist natürlich auch möglich, mehrere Attributselektoren anzugeben. Das folgende Beispiel prüft, ob das Attribut title vorhanden ist und außerdem eine linksbündige Ausrichtung mit align erfolgt ist. Nur dann wird die Schriftgröße auf 24
Punkt gesetzt.
h1[title][align=left] {font-size: 24pt}
HTML-spezifische Selektoren
CSS ist eine eigenständige Stylesheet-Sprache, die sich theoretisch mit jeder Auszeichnungssprache einsetzen lässt, zum Beispiel auch XML. In der Praxis ist CSS
jedoch eng mit HTML verknüpft. Und deshalb gibt es zwei besondere Selektoren,
die nur in Verbindung mit HTML-Dokumenten Sinn machen.
Klassenselektor
Ein Klassenselektor ist eigentlich eine besondere Variante eines Attributselektors.
Denn es geht um den Wert des Attributs class. Die folgende CSS-Regel betrifft alle
Elemente, die mit dem Attribut class="fett" versehen sind:
.fett {font-weight: bold}
Der Selektor beginnt mit einem Punkt. Darauf folgt der Attributwert von class.
Die nach CCS2 gleichwertige Schreibweise ist
*[class~="fett"] {font-weight: bold}
Allerdings unterstützen nur Netscape 6 und Opera diese Schreibweise, in der Praxis ist sie deshalb wertlos. Das folgende komplette Beispiel verdeutlicht den
Zusammenhang zwischen Klassenselektor und class-Attributwert:
<html>
<head>
<title>Klassenselektor</title>
<style type="text/css">
.fett {font-weight: bold}
</style>
</head>
<body>
346
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
Listing 13.1:
Der Klassenselektor .fett formatiert
den zweiten
Absatz
Kapitel 13
165.book Page 347 Wednesday, July 24, 2002 10:20 AM
<p>
Dieser Absatz nutzt die Standardschrift.
</p>
<p class="fett">
Dieser Absatz erscheint in fetter Schrift.
</p>
</body>
</html>
Abbildung 13.3:
Der zweite
Absatz erscheint
in fetter Schrift
.fett {font-weight: bold}
.kursiv {font-style: italic}
.kursiv.fett {
font-style: italic
font-weight: bold
}
Die erste CSS-Regel tritt in Kraft, wenn das Attribut class die Zeichenkette fett
enthält, die zweite Regel entsprechend bei kursiv. Die dritte Regel .kursiv.fett
kommt nur zum Zug, wenn class sowohl fett als auch kursiv enthält. Auf die Reihenfolge im Attributwert kommt es dabei nicht an. Derzeit unterstützt allerdings
kein Browser Mehrfachklassen.
ID-Selektor
In einem HTML-Dokument können Sie mit dem Universalattribut id (siehe in
Kapitel 2 den Abschnitt »Universalattribute«) beliebige Tags ergänzen. Die
Besonderheit an id ist, dass der Attributwert pro HTML-Dokument nur einmal
vorkommen darf. Damit identifiziert dieses Attribut ein Element eindeutig:
<h1 id="anhang-a">Anhang A</h1>
Eine CSS-Regel speziell für dieses Element sieht so aus:
h1#anhang-a {color: red}
Ein ID-Selektor beginnt mit dem Gatterzeichen (#), darauf folgt der Wert des idAttributs. Der Unterschied zu h1[id="anhang-a" liegt in der Kaskadierungsreihen-
CSS anwenden
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
347
E
CSS – Cascading Stylesheet
Laut CSS unterstützt ein Klassenselektor auch eine Hierarchie von Klassen. In
HTML notieren Sie dazu als Attributwert mehrere Klassen, zum Beispiel
class="fett kursiv". Die verschiedenen Klassen müssen durch Leerzeichen
getrennt sein. Damit gehört ein Element zwei Klassen an, nämlich fett und kursiv.
Die folgenden Beispiele zeigen, wie sich diese Mehrfachklassen im Selektor einsetzen lassen.
165.book Page 348 Wednesday, July 24, 2002 10:20 AM
folge: Der ID-Selektor liegt vor dem Attributselektor (siehe den Abschnitt »Die
Kaskadierungsfolge« in diesem Kapitel).
Pseudo-Klassen
Nicht alle Elemente auf einer Webseite lassen sich über Selektoren ansprechen.
Es handelt sich sozusagen um »immaterielle« Zustände, die erst beim Aufbau der
Webseite oder durch Benutzeraktionen entstehen. Die Pseudo-Klassen erlauben
den Zugriff auch auf diese Zustände/Elemente. Eine Pseudo-Klasse beginnt mit
einem Doppelpunkt, auf den ein Schlüsselwort folgt. Es gibt folgende PseudoKlassen:
b Aktiviertes Element::active
b Erstes Kindelement::first-child
b Element mit Fokus::focus
b Überfahren eines Elements mit der Maus::hover
b Sprache des Elements::lang
b Noch nicht besuchter Link::link
b Bereits besuchter Link::visited
b Nur in Verbindung mit seitenorientierten Ausgabemedien und der Regel @page
sind folgende Pseudoklassen zugelassen:
b Erste Seite::first
b Linke Seite::left
b Rechte Seite::right
:active
Die Pseudo-Klasse :active tritt in Aktion, wenn der Surfer ein Element im Browser gerade aktiviert. Einfacher gesagt: Wenn der Surfer einen Button mit der Maus
anklickt ist der Button aktiv, bis der Surfer die Maustaste wieder loslässt. Das folgende Beispiel definiert für aktivierte Links die Schriftfarbe rot:
a:active {color: red}
:first, :left und :right
Diese drei Pseudo-Klassen sind nur im Zusammenhang mit seitenorientierten
Ausgabemedien wie Drucker und der Regel @page erlaubt. Weitere Details lesen Sie
in Kapitel 14 im Abschnitt » Seitenorientierte Ausgabemedien«. Die Klassen
haben folgende Bedeutung:
b :first: Erste Seite des Dokuments
b :left: Eine linke Seiten des Dokuments. Beim Ausdruck teilt der Browser lange
HTML-Dokumente in einzelne Seiten auf. Beim Layout unterscheidet man wie
bei einem aufgeklappten Buch zwischen linker und rechter Seite. Auf einer lin-
348
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
Kapitel 13
165.book Page 349 Wednesday, July 24, 2002 10:20 AM
ken Seite sitzt beispielsweise die Seitennummer links, auf einer rechten Seite
rechts.
b :right: Eine rechte Seite des Dokuments, weitere Details siehe :left.
:first-child
Die Pseudo-Klasse :first-child kennzeichnet das erste Kind eines anderen Elements. Die folgende CSS-Regel bezieht sich auf den ersten Absatz in einem <div>Bereich:
div > p:first-child {text-indent: 0}
In den folgenden HTML-Zeilen wurde der erste Absatz entsprechend behandelt:
<p>Ein Absatz davor.</p>
<div>
<p>Dieser Absatz keine Einrückung</p>
</div>
<p>Ein Absatz davor.</p>
<div>
<h1>Uuml;berschrift</h1>
<p>Dieser Absatz keine Einrückung</p>
</div>
:focus
Wenn ein Element auf einer Webseite den Fokus hat, dann nimmt es Tastendrücke entgegen, zum Beispiel ein Eingabefeld. Es kann immer nur ein Element auf
einer Webseite den Fokus haben. Und genau diesen Element ist über die PseudoKlasse :focus adressierbar. Das folgende Beispiel definiert , dass ein Eingabefeld
mit Fokus eine rote Hintergrundfarbe hat:
input:focus {background-color: red}
Beachten Sie, dass diese Regel sämtliche Arten von Eingabefeldern von Textfeldern über Radiobuttons bis hin zu Auswahllisten erfasst. Um wirklich nur die einzeiligen Textfelder zu erfassen bietet sich ein Klassenselektor an.
:hover
Wenn Sie den Mauszeiger über ein Element bewegen wird die Pseudo-Klasse
:hover aktiv. Wenn der Mauszeiger den Bereich des Elements verlässt, verliert
:hover wieder die Zuständigkeit. Damit erzeugen Sie einfach den beliebten
Mouseover-Effekt:
a:hover {font-weight: bold}
CSS anwenden
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
349
E
CSS – Cascading Stylesheet
Im folgenden Beispiel greift die CSS-Regel aber nicht, denn der Absatz ist nicht
das erste Kind:
165.book Page 350 Wednesday, July 24, 2002 10:20 AM
Sobald Sie den Mauszeiger über einen Link bewegen, wird er mit fetter Schrift
dargestellt. Achtung: Weil eine fette Schrift mehr Platz benötigt verändert sich in
den meisten Fällen das Layout der Webseite. Sie sollten solche Effekte beim Einsatz von :hover einkalkulieren und entsprechend Platz bereitstellen.
Abbildung 13.4:
Beim Überfahren mit der
Maus wird der
Link fett
:lang
In HTML legen Sie über das Universalattribut lang die Sprache für jedes Element
fest. Das kann sinnvoll sein, um etwa Suchmaschinen bei der korrekten Klassifizierung von Stichworten zu unterstützen. Über die Pseudo-Klasse :lang werten
Sie die Sprache eines Elements aus.
html:lang(fr) {quotes: '«' '»'}
html:lang(de) {quotes: '"' '"'}
Die CSS-Regel legt für Abschnitte in französischer und deutscher Sprache als
Anführungszeichen die passende Variante fest. In den runden Klammern geben
Sie den entsprechenden Ländercode an (siehe in Anhang A den Abschnitt
»Ländercodes«). Mehr über das automatische Einfügen von Anführungszeichen
lesen Sie in Kapitel 14 im Abschnitt »Inhalte erzeugen«.
:link und :visited
Normale und besuchte Links haben bei allen Browsern unterschiedliche Farben.
Diese Farbgebung haben Sie mit den beiden Pseudo-Klassen im Griff.
b :link: Ein Link, der noch nicht besucht wurde.
b :visited: Ein Link, der bereits besucht worden ist.
Das folgende Beispiel sorgt dafür, dass Links nach einem Besuch rotbraun
erscheinen:
:visited {color: maroon}
Die CSS-Regel gilt für alle <a>-Elemente in einem HTML-Dokument. Wenn Sie
zwischen projektinternen Links und Links auf externe Adressen unterscheiden
wollen, verwenden Sie am besten einen Klassenselektor. Die CSS-Regel
a.external:visited {color: maroon}
wirkt nur auf Links mit der folgenden HTML-Schreibweise:
<a class="external" href="http://www.spiegel.de">Spiegel Online</a>
350
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
Kapitel 13
165.book Page 351 Wednesday, July 24, 2002 10:20 AM
Pseudo-Elemente
Ein Pseudo-Element steht für ein Element, das in der Hierarchie einer Webseite
nicht enthalten ist. So gibt es in HTML kein Tag, das die erste Zeile oder den
ersten Buchstaben eines Elements kennzeichnet. Außerdem lassen sich mit zwei
Pseudo-Elementen Inhalte in eine Webseite einfügen, die vorher noch nicht vorhanden waren.
:after und :before
Mit den beiden Pseudo-Elementen fügen Sie vor (:before) oder nach (:after)
einem Element generierten Inhalt ein. Das kann zum Beispiel eine automatische
Nummerierung über Zähler sein oder Anführungszeichen. Eine ausführliche
Beschreibung und Beispiele finden Sie in Kapitel 14 im Abschnitt »Inhalte
erzeugen«.
:first-letter
p:first-letter {
color: #ffd800;
font-size: 400%;
float: left;
}
Abbildung 13.5:
Das Initial ist
400% größer als
der normale Text
CSS anwenden
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
351
E
CSS – Cascading Stylesheet
Den ersten Buchstaben eines Elements sprechen Sie mit dem Pseudo-Element
:first-letter an. Der typische Anwendungsfall dürfte ein Initial für einen Textabsatz sein. Das folgende Beispiel formatiert den ersten Buchstaben in größerer
Schrift und mit goldener Schriftfarbe. Die Deklaration float: left sorgt dafür, dass
der Fließtext rechts vom Initial weiterläuft, sodass er über mehrere Zeilen reichen
kann. Das Bild zeigt, dass es optisch besser wirkt, wenn Sie die ersten Wörter im
Absatz mit Großbuchstaben schreiben. Sonst ragt das Initial zu weit über den
Text hinaus.
165.book Page 352 Wednesday, July 24, 2002 10:20 AM
Satzzeichen inklusive
TIPP
Beachten Sie, dass Satzzeichen wie Punkte oder Anführungszeichen mit zum ersten Buchstaben gerechnet werden. Wenn Sie also den Absatz mit
"ES WAR EINMAL
beginnen, dann besteht das Initial aus den zwei Zeichen "E.
:first-line
Das Pseudo-Element :first-line bezieht sich auf die erste Zeile in einem Element.
Was zur ersten Zeile gehört, hängt ganz vom Layout im Browser ab und kann sich
bei einer anderen Fenstergröße des Browsers dynamisch anpassen. Typischerweise kommt :first-line bei Text zum Einsatz. Das folgende Beispiel wandelt die
erste Zeile im Absatz in Großbuchstaben um:
p:first-line {text-transform: uppercase}
Abbildung 13.6:
Das Pseudo-Element :first-line
bei unterschiedlich breitem
Browserfenster
At-Regeln
Die At-Regeln haben ihren Namen von dem vorangestellten @, das im englischen
als »at« gesprochen wird. At-Regeln nehmen den Platz von normalen CSS-Regeln
(Selektor plus Deklaration) ein, führen aber besondere Funktionen aus oder enthalten Steueranweisungen für die Bearbeitung des Stylesheets. So ist es beispielsweise mit einer At-Regel möglich, besondere Anweisungen für die Druckausgabe
zu machen oder weitere CSS-Dateien einzubinden.
@charset
Über @charset beschreiben Sie, welchen Zeichensatz eine externe CSS-Datei
benutzt. In einem Style-Bereich in HTML darf die At-Regel nicht verwendet werden. Hier bestimmt die HTML-Umgebung den Zeichensatz. @charset muss die
erste Zeile der Datei sein. In Anführungszeichen schreiben Sie hinter die Regel
den Zeichensatz, zum Beispiel Shift-JIS für japanisch. Den Abschluss macht ein
Semikolon.
@charset "Shift-JIS";
Mit dieser Regel überschreiben Sie alle Angaben zum Zeichensatz, die im einbindenden Dokument (CSS oder HTML) stehen.
352
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
Kapitel 13
165.book Page 353 Wednesday, July 24, 2002 10:20 AM
@font-face
Über @font-face binden Sie eine externe Schriftdatei in eine Webseite ein und
legen die Eigenschaften der Schrift fest. Das ist wichtig, damit der Browser die
externe Schrift mit CSS-Deklarationen wie font-variant: italic verwenden kann.
Weitere Informationen und Beispiele finden Sie in Kapitel 14 im Abschnitt »
Schrift einbinden«.
@import
Mit der Regel @import fügen Sie in einem Stylesheet eine externe CSS-Datei ein. So
ist es zum Beispiel möglich, CSS-Regeln in Module aufzuteilen und nach Bedarf
zusammenzustellen. Die At-Regel muss vor allen anderen CSS-Regeln notiert
sein. Entsprechend werden die CSS-Regeln aus dem Import vor den Regeln im
einbindenden Stylesheet ausgeführt. Die zwei folgenden Beispiele binden dieselbe
Datei stile.css ein.
@import "stile.css";
@import url("stile.css");
In CSS2 ist die Syntax von @import um Medientypen erweitert. Hinter den URI
schreiben Sie die Medientypen, für den die externe CSS-Datei gedacht ist. Der
Browser lädt das externe Stylesheet nur, wenn der Medientyp passt. Kein Browser
der 6er-Generation unterstützt dieses Feature. Deshalb weichen Sie besser auf die
Regel @media aus (siehe nächster Abschnitt, dort finden Sie auch weitere Informationen zu den Medientypen).
@media
Verschiedene Ausgabegeräte wie Browser, Handhelds oder Sprachausgabe stellen
ganz unterschiedliche Anforderungen. CSS2 definiert eine ganze Reihe von
Medientypen, die solchen Ausgabegeräten entsprechen. Über die Regel @media
machen Sie CSS-Deklarationen vom Medientyp abhängig. Das Ausgabegerät
(sprich: der Browser) kennt seinen Medientyp und wählt entsprechend die Deklarationen aus. Die erlaubten Medientypen listet die Tabelle 13.4 auf.
Das folgende Beispiel definiert zwei @media-Regeln. Die erste ist für die Druckausgabe (print) zuständig, die zweite für die Bildschirmausgabe (screen). Für den Ausdruck ist eine kleinere Schrift geeignet, am Bildschirm liest sich meistens eine
etwas größere Schrift besser.
@media print {
body {font-size: 10pt;}
}
@media screen {
body {font-size: 12pt;}
}
CSS anwenden
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
353
E
CSS – Cascading Stylesheet
Sie haben die Wahl, ob Sie direkt den Dateinamen der CSS-Datei in Anführungszeichen angeben oder mit dem Ausdruck url() klammern. Beide Schreibweisen
sind gleichwertig, Sie dürfen in beiden Fällen auch einen vollständigen URI als
Adresse angeben. Der abschließende Strichpunkt ist unbedingt notwendig.
165.book Page 354 Wednesday, July 24, 2002 10:20 AM
Sie dürfen auch mehrere Medientypen durch Komma getrennt angeben.
@media print, screen {...}
Media-Typ
Browser
Beschreibung
all
geeignet für alle Geräte
aural
Ausgabe mit Sprachsynthesizer
braille
Ausgabe auf Geräten für Blindenschrift (Braille-Schrift)
embossed
Braille-Drucker
handheld
Handheld-Geräte (kleiner Bildschirm, monochrom, geringe
Bandweite zur Datenübertragung)
print
Seiten für den Ausdruck auf Papier
projection
Projektoren
screen
Normaler Computerbildschirm ohne Seitenbegrenzung,
das heißt, die Seiten könne beliebig lang sein
tty
Ausgabegeräte mit nichtproportionaler Schrift wie Fernschreiber (=teletype), Terminals oder Mobilgeräte mit
begrenzten Anzeigefähigkeiten (Pager etc.)
tv
TV-artige Geräte (geringe Bildauflösung, Farbe, begrenzte
Fähigkeiten beim Verschieben des Bildausschnitts)
Medientyp in HTML
Tabelle 13.4:
CSS2 definiert
eine Reihe von
Medientypen
TIPP
Eine Alternative zu @media bietet HTML 4.0 mit dem Attribut media in den Tags
<link> und <style>. Über <link> binden Sie CSS-Dateien in eine HTML-Datei ein,
<style> definiert einen Stylesheet-Bereich. Bei media geben Sie als Attributwert den
Medientyp an, die unterstützten Werte entsprechen bis auf embossed den Medientypen von CSS2. Weitere Informationen finden Sie in Kapitel 3 im Abschnitt
»Logische Dateibeziehungen« und in Kapitel 11 im Abschnitt »StylesheetBereiche im HTML-Kopf«.
@page
Über die At-Regel @page definieren Sie einen Seitenkontext für die Ausgabe auf seitenorientierten Geräten. Typischerweise sind das Drucker, aber auch seitenorientierte Browser oder Präsentationsfolien sind denkbare Ziele. Weitere Informationen zu @page finden Sie in Kapitel 14 im Abschnitt »Seitenorientierte
Ausgabemedien«.
354
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
Kapitel 13
165.book Page 355 Wednesday, July 24, 2002 10:20 AM
Die Kaskadierungsfolge
Der Name Cascading Stylesheets weist auf eine besondere Eigenschaft dieser
Stylesheet-Sprache hin: CSS-Regeln ergänzen oder überschreiben sich gegenseitig, wenn Sie dasselbe Element oder dieselbe Eigenschaft betreffen. Die Kaskadierungsfolge legt fest, welche CSS-Regel am Ende gültig ist.
Das erste Kriterium ist die Reihenfolge, in der CSS-Regeln im Quelltext notiert
sind: Die letzte CSS-Regel überschreibt alle ihre Vorgänger. Wenn Sie mit @import
externe CSS-Dateien einbinden, so behandelt der Browser diese CSS-Regeln, als
stünden Sie ganz am Anfang des Stylesheets. Bei mehreren CSS-Dateien kommt
es auf die Reihenfolge @import-Regeln an. Ein Inline-Stylesheet (mit dem Attribut
style direkt im HTML-Tag) überschreibt für dieses eine Tag alle vorhergehenden
CSS-Regeln.
Das zweite Kriterium betrifft den Selektor. Grundsätzlich gilt: Je spezieller der
Selektor ist, desto höher steht die Regel in der Rangfolge. Ein Beispiel macht das
klar:
Die erste CSS-Regel betrifft alle Absätze (Tag <p>) und ist deshalb sehr allgemein.
Die zweite Regel betrifft nur Absätze, die zusätzlich das Attribut class="besonders"
aufweisen. Dieser spezielle Selektor überschreibt den allgemeinen Selektor p.
Eine Besonderheit sind ID-Selektoren, die alle anderen Selektoren überschreiben.
Reihenfolge aushebeln: !important
Mit dem Schlüsselwort !important kennzeichnen Sie einzelne Regeln als besonders
wichtig. Diese überschreiben dann andere Regeln, auch wenn dies der normalen
Kaskadierungsfolge widerspricht. Im folgenden Beispiel müsste die CSS-Regel für
<p> eigentlich vom Inline-Stylesheet überschrieben werden. Allerdings ist die
Regel mit !important gekennzeichnet, sodass sie Vorrang hat. Deshalb erscheint
der Text im Absatz in roter statt grüner Schrift.
<head>
<style>
p { color:red !important }
</style>
</head>
<body>
<p style="color:green">Dieser Text erscheint rot.</p>
</body>
CSS anwenden
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002
355
E
CSS – Cascading Stylesheet
p {color: red}
p.besonders {color: blue}
165.book Page 356 Wednesday, July 24, 2002 10:20 AM
Wolfgang Nefzger: XHTML/HTML 4. ISBN: 3-86063-165-9. Microsoft Press 2002