CSS anwenden. CSS Die Basis

Transkript

1 ECSS Cascading Stylesheet CSS anwenden 329 CSS Die Basis 338 Wertangaben 343 Selektoren 348 Pseudo-Klassen 351 Pseudo-Elemente 352 At-Regeln 355 Die Kaskadierungsfolge CSS Die Basis Das World Wide Web Consortium (W3C, 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 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

2 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 (=) 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: TIPP 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 Kapitel 13

3 ECSS Cascading Stylesheet 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> 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. 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 {font-family: sans-serif} h2 {font-family: sans-serif} h3 {font-family: sans-serif} h4 {font-family: sans-serif} h5 {font-family: sans-serif} h6 {font-family: 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 331

4 p { color: blue; /* Schrift blau */ text-align: justify; /* 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 CSS- Deklarationen 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 Kapitel 13

5 ECSS Cascading Stylesheet <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 CSS- Regeln 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. 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 Stylesheet- Bereiche. <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 333

6 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 HTML- Dokument 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!doctype- Deklaration. Als erste Zeile eines»offiziellen«html-dokuments zeigt diese Deklaration an, welche HTML-Version und Variante das Dokument benutzt 334 Kapitel 13

7 ECSS Cascading Stylesheet (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: Tabelle 13.1: Die Bedingungen für den Standards-Compliant-Mode beim Internet Explorer 6 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" " 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 " 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 HTML (ohne Versionsangabe) Normalmodus Normalmodus 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 Die folgenden drei Beispiele schalten den Standards-Compliant-Mode ein. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" " <!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 335

8 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 Kapitel 13

9 ECSS Cascading Stylesheet 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 font- Eigenschaft 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. 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 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 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 337

10 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 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! In CSS gilt die amerikanische Schreibweise für Fließkommazahlen: Das Dezimaltrennzeichen ist ein Punkt und kein Komma. Die Zahl HINWEIS 2,37 ist falsch, die Zahl 2.37 ist richtig. 338 Kapitel 13

11 ECSS Cascading Stylesheet 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. b px: Pixel, relative Größe zum Ausgabegerät (zum Beispiel verschiedene PCs mit unterschiedlicher Bildschirmauflösung). 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 {margin: 0.5in} h2 {line-height: 3cm } h3 {word-spacing: 4mm } h4 {font-size: 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 339

12 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 Web- Adresse) 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(' 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 RGB- Werte 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 Kapitel 13

13 ECSS Cascading Stylesheet 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. Tabelle 13.2: Die verschiedenen Schreibweisen für RGB-Farbwerte. Alle Beispiel ergeben dieselbe Farbe, ein sattes Rot. RGB-Werte Ü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. 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(prozent, Prozent, Prozent) rgb(255, 0, 0) rgb(100%, 0%, 0%) Dezimale Zahlen für die Farbanteile nutzen Sie mit dem Ausdruck rgb(). Erlaubt sind Werte zwischen 0 und 255. 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 341

14 Winkelwerte dürfen auch negativ sein. Derzeit unterstützt kein Browser der 6er- Generation 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 6er- Generation 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 6er- Generation 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 ist eine 'Zeichenkette'" "das ist eine \"Zeichenkette\"" 'das ist eine "Zeichenkette"' 'das ist eine \'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 Kapitel 13

15 ECSS Cascading Stylesheet 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. Typselektor 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 343

16 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 CSS- Regel 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 Kapitel 13

17 ECSS Cascading Stylesheet Abbildung 13.2: Nur bei der Zwischenüberschrift, die unmittelbar auf <h1> folgt, ist der Abstand zum vorhergehenden Text reduziert Tabelle 13.3: Verschiedene Varianten für Attributselektoren 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 Browser [att] [att=wert] [att~=wert] [att =wert] Der Selektor prüft, ob ein bestimmtes Attribut namens att vorhanden ist. Der Attributwert spielt keine Rolle. Das Attribut att muss einen ganz bestimmten Wert haben. Das Attribut att hat als Wert eine Liste, deren einzelne Einträge durch Leerzeichen getrennt sind. Ein Eintrag in der Liste muss wert entsprechen. 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«). 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-Compliant- Mode«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 345

18 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> Listing 13.1: Der Klassenselektor.fett formatiert den zweiten Absatz 346 Kapitel 13

19 ECSS Cascading Stylesheet <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 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..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 id- Attributs. Der Unterschied zu h1[id="anhang-a" liegt in der Kaskadierungsreihen- CSS anwenden 347

20 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 Pseudo- Klassen: 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 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 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 Kapitel 13

21 ECSS Cascading Stylesheet 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> Im folgenden Beispiel greift die CSS-Regel aber nicht, denn der Absatz ist nicht das erste Kind: <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 Pseudo- Klasse :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 349

22 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=" Online</a> 350 Kapitel 13

23 ECSS Cascading Stylesheet 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 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. 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 351

24 Satzzeichen inklusive Beachten Sie, dass Satzzeichen wie Punkte oder Anführungszeichen mit zum ersten Buchstaben gerechnet werden. Wenn Sie also den Absatz mit TIPP "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 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 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 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 "Shift-JIS"; Mit dieser Regel überschreiben Sie alle Angaben zum Zeichensatz, die im einbindenden Dokument (CSS oder HTML) stehen. 352 Kapitel 13