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 (...) 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 -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 (, etc.) sind davon nicht betroffen. In HTML müssten Sie bei jeder einzelnen Überschrift zusätzlich das Tag einfügen: Überschrift

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 bis . 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. Überschrift

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 -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 und notiert. Der Bereich beginnt mit dem HTML-Tag und endet mit . 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

h1 {color: red; font-size: 16pt;}

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.



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:

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 -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:

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.

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 -Tag) werden Auffüllbereich, Ränder und Außenabstand der Zellen bei der Berechnung der Zellenbreite und -höhe berücksichtigt. b Grafiken (): Die Höhe und Breite von Bildern wird jetzt unter Berücksichtigung des Auffüllbereichs berechnet. b Bereich der Webseite ( und ): In älteren Versionen des Explorer entsprach das -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 -Tag dem kompletten Seitenhintergrund. Sie können die Größe des -Bereichs über CSS-Eigenschaften sogar nach Belieben setzen. Daraus folgt, dass Sie ein Hintergrundbild oder eine Hintergrundfarbe in und 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 . 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 . Im Standards-Compliant-Mode dagegen müssen Sie das Attribut in 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 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:

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. 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 (), 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 () 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 (), 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 (), die innerhalb eines Absatzes () 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 innerhalb von notiert ist gilt die Regel. In HTML hat die Regel die folgende Wirkung: Dieses Wort ist wichtig. Ein Absatz mit einem hervorgehobenen Wort

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 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. Absatz mit 18 Punkt. Absatz mit normaler Schriftgröße.

Abbildung 13.1: Nur unmittelbar unterhalb des -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 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 -Überschrift rückt. Die folgenden -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 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 -Ü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: CSS anwenden CSS-Eigenschaften

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: Klassenselektor .fett {font-weight: bold}

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

Dieser Absatz nutzt die Standardschrift. Dieser Absatz erscheint in fetter Schrift.

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: Anhang A

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 Bereich: div > p:first-child {text-indent: 0}

In den folgenden HTML-Zeilen wurde der erste Absatz entsprechend behandelt: Ein Absatz davor. Dieser Absatz keine Einrückung

Ein Absatz davor. Uuml;berschrift Dieser Absatz keine Einrückung

: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 -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: Spiegel Online

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 und . Über binden Sie CSS-Dateien in eine HTML-Datei ein, 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 ) 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 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. p { color:red !important } Dieser Text erscheint rot.

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