CSS - Das Umfassende Handbuch

Cascading Style SheetsDas umfassende Handbuch

�� · �� · �� · �� · �� · �� · �� · ��

Cascading Style SheetsDas umfassende Handbuch

Eric A. Meyer

Deutsche Übersetzung von Jørgen W. Lang

Die Informationen in diesem Buch wurden mit größter Sorgfalt erarbeitet. Dennoch können Fehler nicht vollständig ausgeschlossen werden. Verlag, Autoren und Übersetzer übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene Fehler und deren Folgen.Alle Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt und sind möglicherweise eingetragene Warenzeichen. Der Verlag richtet sich im Wesentlichen nach den Schreibweisen der Hersteller. Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung,Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

Kommentare und Fragen können Sie gerne an uns richten:O’Reilly VerlagBalthasarstr. 8150670 KölnTel.: 0221/9731600Fax: 0221/9731608E-Mail: [email protected]

Copyright der deutschen Ausgabe:© 2005 by O’Reilly Verlag GmbH & Co. KG1. Auflage 2005

Die Originalausgabe erschien 2004 unter dem TitelCascading Style Sheets: The Definitive Guide, 2nd Edition bei O’Reilly Media, Inc.

Die Darstellung von Lachsen im Zusammenhang mit dem Thema CSS ist ein Warenzeichen von O’Reilly Media, Inc.

Bibliografische Information Der Deutschen BibliothekDie Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.ddb.de abrufbar.

Übersetzung und deutsche Bearbeitung: Jørgen W. LangLektorat: Michael Gerth, KölnFachgutachten: Jens GrochtdreisKorrektorat: Oliver Mosler, KölnSatz: G&U e.Publishing Services GmbH, FlensburgUmschlaggestaltung: Ellie Volckhausen, Hanna Dyer & Clay Fernald, BostonProduktion: Karin Driesen, Geesche KieckbuschBelichtung, Druck und buchbinderische Verarbeitung: Druckerei Kösel, Krugzell; www.koeselbuch.de

ISBN 3-89721-386-9

Dieses Buch ist auf 100% chlorfrei gebleichtem Papier gedruckt.

Für meine Mutter, Carol, für all die Dinge,die sie mir beigebracht hat.

Und für meine Tochter, Carolyn, für all die Dinge,die sie mir noch beibringen muss.

| VII

Inhalt

�� . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ��

�� . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ��

� �� . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . �

Als das Web in Ungnade fiel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1CSS als Retter in der Not . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4Elemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9CSS und XHTML miteinander verbinden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

� �� . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ��

Grundsätzliche Regeln . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25Gruppierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30Klassen- und ID-Selektoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Attributselektoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41Die Verwendung der Dokumentstruktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46Pseudoklassen und Pseudoelemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

��!��"�� . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . #�

Spezifität . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65Vererbung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71Kaskadierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

$ %��&"��"�� . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . '�

Zahlen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81Prozentwerte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81Farbe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82

VIII | Inhalt

Längeneinheiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95Einheiten in CSS2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

� �� . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ��

Zeichensatzfamilien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100Gewichtung von Zeichensätzen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105Schriftgröße . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112Schriftschnitte und Schriftvarianten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120Zeichensätze dehnen und die Darstellungsgröße anpassen . . . . . . . . . . . . . . . . 124Die Eigenschaft font . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127Schriftenvergleich . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131

��. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ��

Einrückung und horizontale Ausrichtung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136Vertikale Ausrichtung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142Wort- und Buchstabenabstände . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151Text-Umwandlungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155Text-Ausschmückung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156Textschatten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160

� �� . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . � �

Einfache Boxen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167Block-Elemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170Inline-Elemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190Die Darstellung von Elementen verändern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212

� ��!��" #�� $�%��!��. . . . . . . . . . . . . . . . . . . . . . . . . . . . . &&�

Grundlagen der Elementboxen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221Außenabstände . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225Rahmen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238Innenabstände . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253

� ��!�� '��(�� . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . & �

Farben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261Vordergrundfarben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263Hintergründe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269

�) �� *�� +�� . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . �))

Floats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300Positionierte Elemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320

Inhalt | IX

�� . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ��Formatierung von Tabellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359Rahmen für Tabellenzellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372Größenangaben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380

�� . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ��Listen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391Erzeugter Inhalt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401

�� . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ��Systemzeichensätze und -farben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417Cursor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422Umrisse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427

�� . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ��Medienspezifische Stylesheets zuweisen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434Seitenbasierte Medien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436Stildefinitionen für akustische Medien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454

� !��" ��#�"��. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ��

� #�"��$��% ��&�'��%��'��(�� . . . . . . . . . . . . . . . . . ��)

* ��+��",��-� ��$ �� . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ��

��.� . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ��

| XI

Vorwort von Molly Holzschlag

CSS ist hier. CSS hat sich besser etabliert, als es sich jemand hätte vorstellen können. Cas-cading Stylesheets haben das Web ohne Frage revolutioniert. Ohne CSS wären wir mitgroßer Sicherheit immer noch auf mit Präsentationselementen überladene Dokumentebeschränkt, auf Tabellen für das Layout und unvorstellbar unordentliches Markup.

Die Bewegung zur Standardisierung von Stilinformationen, Design und Layout sitzt mitt-lerweile fest im Sattel und CSS spielt dabei eine enorm wichtige Rolle. CSS gibt uns grö-ßere Kontrolle über das Layout und zusätzliche Optionen für die Verwaltung von Farben,Bildern und Textgrößen. Die Wartung von großen Dokumentenmengen wurde ebenfallsstark vereinfacht und deren Darstellung auf verschiedenen Ausgabemedien und damitderen Zugänglichkeit wesentlich erleichtert.

Und die verschiedenen Browser-Implementierungen von CSS noch eine Herausforde-rung? Tja, schon. Das ist eine Tatsache, mit der wir uns einfach abfinden müssen. Abertrotz fehlender Updates für Microsoft IE 6.0 gibt es motivierende Fortschritte bei anderenWebbrowsern. So beweisen Safari, Opera, Mozilla und Mozilla Firefox, dass ein Großteilder Implementierer die Umsetzung von Standards in den Browsern ernst nimmt. Endlichgibt es auch in einer großen Anzahl von Entwicklerwerkzeugen für Webautoren eine her-vorragende Unterstützung für CSS, wie etwa Macromedia Dreamweaver MX, AdobeGoLive CS und viele der heutzutage im Web verfügbaren Weblogging-Werkzeuge zeigen.

Gerade jetzt, wo das Web einen Umbruch in seiner Evolution erlebt, ist es extrem ermu-tigend zu sehen, dass dieses Buch – Version 2.0 von Eric Meyers bahnbrechendem Werkzu CSS – in die Regale kommt. CSS macht sich in fast allen Bereichen des Webdesignsbemerkbar.

Zur Inspiration und Motivation gibt es den CSS Zen Garden (http://www.csszengarden.com), eine großartige Website, die die Verwendung von strukturiertem Markup zusam-men mit CSS demonstriert. Alle Designer, die ein Design im Zen Garden vorstellen möch-ten, müssen das gleiche Markup und den gleichen Inhalt verwenden, sollen aber ihreigenes CSS-Design verwenden. Der CSS Zen Garden zeigt, dass CSS-Designs nicht nurschön sein können, sondern auch innovativer und interessanter als alles, was es bishergab.

XII | Vorwort von Molly Holzschlag

Und zudem ist CSS noch kosteneffektiv. Falls die Leute aus den Verkaufs- und Marke-ting-Abteilungen nach Beweisen suchen, so gibt es eine wachsende Liste von beeindru-ckenden Fallstudien, die klar veranschaulichen, wie eine Entscheidung für Webstandardsund CSS zu Einsparungen führt. Immer wenn eine große Firma, wie ESPN, Sprint oderAOL, sich für Webstandards und CSS entscheidet, entsteht eine Art Führungsphänomen;andere Firmen stellen fest, dass sie ebenfalls Kosten sparen und ihre Qualität verbessernkönnen.

Je wertvoller CSS für Designer wird – ein wichtiger Faktor für die wirtschaftlichen Ent-scheidungen von Firmen – und je besser die Integration von CSS in Entwickler- undTechnikerwerkzeuge funktioniert, desto stärker der verdiente Ruf von CSS unter denTechnologien.

Da wir CSS von Grund auf neu implementieren, haben wir noch eine Menge zu lernen.Diejenigen unter uns, die schon seit sehr langer Zeit Sites entwickeln, müssen einigeschlechte Angewohnheiten, die einst in Ordnung waren, erst wieder verlernen. Außerdemmüssen wir jungen Designern und Entwicklern helfen, unsere Fehler zu vermeiden, undsie zu einem besseren Handeln ermutigen. Dieses Buch wird dabei für beide Zielgruppeneine große Hilfe sein.

Als Evangelist für Webstandards und Student der verschiedenen Markup-Methoden undCSS kann ich mit Gewissheit sagen, dass Eric Meyer mein Leben verändert hat. VieleLeser der ersten Auflage (und hoffentlich auch dieses Buches) werden mir da zustimmen.Wie viele Leser benutze ich Erics Bücher, verfolge die Informationen auf seiner Websiteund abonniere CSS-D, eine E-Mail-Liste, die Eric betreut und auf der er Diskussionenund Lösungen für Listenmitglieder anbietet, die sich den tatsächlichen Herausforderun-gen von CSS stellen müssen. Ich achte auf Erics Aktivitäten und werde das auch weiterhintun, einfach weil es so verdammt ergiebig ist.

Das Web ist genauso ein soziales Gebilde wie ein technisches. Daher ist dessen effektiveGestaltung genauso stark mit der Wissenschaft des Lebens verknüpft wie mit der Ver-wendung von strukturierten Markups und CSS. Niemand hat mir deutlicher gezeigt, wieman denken und leben muss und wie man das Richtige noch besser machen kann, alsEric Meyer. Seit seinen frühen Tagen bei der W3C CSS-Arbeitsgruppe bis hin zu seinenbahnbrechenden Unterstützungsdiagrammen, Büchern und Ressourcen und seiner Zeitbei Netscape war Eric Meyer unermüdlich in Sachen CSS tätig. Eric leitet uns immer nochmit seiner Website und seinen Workshops und Vorträgen bei Konferenzen. Er trägt seineverschiedenen Spitznamen wie »Der CSS-Papst« völlig zu Recht.

Trotz der großen öffentlichen Aufmerksamkeit, die Eric zuteil wurde, fast so wie einemRockstar der Webwelt, blieb er einer der bodenständigsten Leute, die ich kenne, und einechter Freund dazu. Ich habe tief mit ihm um seine Mutter Carol getrauert und aus purerFreude in meinem Büro getanzt, als ich acht Monate später die Nachricht erhielt, dassEric und seine Frau Kat ihre Tochter Carolyn zur Welt gebracht haben.

Vorwort von Molly Holzschlag | XIII

Ich bin sicher, dass Sie nach jeder Gelegenheit, Zeit mit Eric zu verbringen – sei dies aufeinem Kurs, durch regelmäßige Besuche seiner Website oder durch seine Bücher –, miteinem besseren Verständnis von CSS nach Hause gehen. Sie werden lachen, werden ange-spornt und schließlich inspiriert, in allen Situationen Ihres Lebens Ihr Bestes zu geben.

Molly E. Holzschlag, Tucson, Arizona 2004

| XV

Vorwort

Unabhängig davon, ob Sie nun ein Webdesigner sind oder sich als Autor für das fortge-schrittene Einbinden von Stilinformationen in Ihre Dokumente und verbesserte Zugriffs-möglichkeiten interessieren oder einfach nur Zeit und Aufwand sparen wollen, diesesBuch soll Ihnen dabei helfen. Um mit diesem Buch arbeiten zu können, brauchen Sieeigentlich nur ein gutes Verständnis von HTML 4.0. Je besser Sie sich mit HTML ausken-nen, desto besser sind Sie natürlich vorbereitet. Weitere Kenntnisse sind nicht nötig, umdiesem Buch folgen zu können.

In dieser 2. Auflage des Buchs behandeln wir CSS2 und CSS2.1, das hauptsächlich eineKlarstellung von CSS2 ist. Während dieses Buch geschrieben wurde, haben zwar einigeCSS3-Module den Status »Candidate Recommendation« erreicht, ich habe mich jedochentschieden, sie in dieser Auflage nicht zu behandeln. Dies geschah zum Teil, weil dasBuch auch ohne diese Module bereits umfangreich genug erschien, und teilweise auch,weil deren Implementierung noch nicht vollständig ist. Ich halte es für wichtig, das Buchauf die Ebenen von CSS zu konzentrieren, die gegenwärtig unterstützt und gut verstandenwerden, während zukünftige Fähigkeiten in zukünftigen Auflagen dieses Buchs behandeltwerden.

Sie sollten sich an dieser Stelle einen wesentlichen Unterschied zwischen Webstandardsund Büchern klar machen: Während sich die Standards beständig weiterentwickeln, sindBücher quasi »in der Zeit eingefroren« (bis die nächste Auflage erscheint, versteht sich).Im Fall von (X)HTML und CSS sind sogar, während diese Worte geschrieben werden,viele Veränderungen im Gange. Unabhängig davon hoffe ich, dass diese zweite Auflage,wie bereits die erste, für mehrere Jahre gültig bleibt.

Um den Text kurz zu halten und Platz zu sparen, habe ich die Informationen zur CSS-Unterstützung der verschiedenen Browser weggelassen. Diese Art von Informationenwird wesentlich besser online veröffentlicht, wo sie jederzeit korrigiert und aktualisiertwerden kann, sobald sich die CSS-Unterstützung durch einen bestimmten Browserändert. Eine gute deutschsprachige und laufend aktualisierte Übersicht über die Browser-Unterstützung finden Sie zum Beispiel unter http://www.css4you.de/browsercomp.html.

XVI | Vorwort

Diese Art von Informationen zu drucken war zwar in der ersten Auflage noch sinnvoll,macht inzwischen aber keinen großen Sinn mehr. Dies ist sogar doppelt wahr, weil sichdie CSS-Unterstützung in den letzten Jahren so sehr weiterentwickelt hat, dass die Pro-bleme und Fehler, die es jetzt noch gibt, sich nur schwer in einer einfachen Übersicht aus-drücken lassen. So gab es beispielsweise beim Schreiben dieses Buchs einen Fehler inSafari, bei dem die Anwendung von text-transform auf eine :first-letter-Regel ein selt-sames Verhalten ausgelöst hatte. Es gibt praktisch gesehen keine gute Möglichkeit, dies ineiner Tabelle zu beschreiben, nicht einmal in einer dreidimensionalen Darstellung. Darü-ber hinaus wird davon ausgegangen, dass das Problem in der nächsten Zukunft behobenwird bzw. schon behoben ist, wenn dieses Buch in den Regalen steht.

Anstatt also einen großen Teil dieses Buchs bereits bei seiner Veröffentlichung als hinfäl-lig betrachten zu müssen, habe ich diese Informationen lieber komplett weggelassen.Hierdurch war es mir möglich, wesentlich mehr Informationen in diesem Buch unterzu-bringen, ohne dass es dabei zu sehr anwächst. Die Unterstützungs-Informationen, die ichbeibehalten habe, beziehen sich auf Fehler und Einschränkungen bei verschiedenen Ver-sionen des Internet Explorer, die nicht mehr weiter entwickeltwerden.

In diesem Buch verwendete KonventionenIn diesem Buch werden die folgenden typographischen Konventionen verwendet:

KursivschriftKennzeichnet neue Begriffe, URLs, Variablen im Text, benutzerdefinierte Dateienund Verzeichnisse, Befehle, Dateiendungen, Dateinamen, Verzeichnis- oder Ordner-namen und UNC-Pfadnamen.

Nichtproportionalschrift

Kennzeichnet Kommandozeilen-Eingaben am Computer, Codebeispiele und Tasta-turkürzel.

Nichtproportionalschrift fettKennzeichnet Benutzereingaben in Beispielen.

Nichtproportionalschrift kursivKennzeichnet variablen Text in Beispielen. Außerdem werden damit Variablen undbenutzerdefinierte Elemente innerhalb kursiver Schrift (wie Pfad- und Dateinamen)gekennzeichnet. So würden Sie beispielsweise im Pfad \Windows\benutzername»benutzername« durch Ihren eigenen Namen ersetzen.

Dieses Symbol kennzeichnet einen Hinweis, einen Vorschlag oder eine all-gemeine Anmerkung.

Vorwort | XVII

Dieses Symbol kennzeichnet eine Warnung oder einen Sicherheitshinweis.

Eigenschaften-KonventionenInnerhalb dieses Buchs gibt es immer wieder Kästen, in denen eine bestimmte CSS-Eigen-schaft (Property) in ihren Einzelteilen erklärt wird. Diese wurden fast wörtlich aus denCSS-Spezifikationen des W3C übernommen, wobei einige Erklärungen der Syntax ineiner anderen Reihenfolge stattfinden.

Die erlaubten Werte für eine bestimmte Eigenschaft werden im gesamten Buch durch fol-gende Schreibweise dargestellt:

Wert: [ <Länge> | thick | thin ]{1,4}Wert: [<Familie> , ]* <Familie>Wert: <URL>? <Farbe> [ / <Farbe> ]?Wert: <URL> || <Farbe>

Alle Wörter zwischen »<« und »>« beziehen sich auf einen Wert oder eine Referenz aufeine andere Eigenschaft. So akzeptiert die Eigenschaft font Werte, die ihrerseits der Eigen-schaft font-family angehören. Dies wird im Text durch die Schreibweise <font-family>verdeutlicht. Alle Wörter in Nichtproportionalschrift sind Schlüsselwörter, die – wie imBeispiel gezeigt – wörtlich und ohne Anführungszeichen verwendet werden müssen. DerSchrägstrich (/ ) und das Komma müssen ebenfalls wörtlich verwendet werden.

Stehen mehrere Schlüsselwörter direkt hintereinander, bedeutet dies, dass sämtlicheSchlüsselwörter in genau dieser Reihenfolge benutzt werden müssen. So bedeutet helpme, dass für die betreffende Eigenschaft diese Schlüsselwörter in exakt dieser Reihenfolgeangegeben werden müssen.

Ein vertikaler Balken trennt zwei Alternativen voneinander (X | Y), von denen irgendeineauf jeden Fall benutzt werden muss (X oder Y). Ein doppelter vertikaler Balken (X || Y)bedeutet, dass entweder X oder Y oder X und Y in beliebiger Reihenfolge benutzt werdenmüssen. Eckige Klammern ([...]) werden benutzt, um Dinge zu gruppieren. Dabei ist dieGruppierung »stärker« als der doppelte vertikale Balken und dieser ist wiederum stärkerals der einfache vertikale Balken. Die Formulierung »V W | X || Y Z« ist also gleichbedeu-tend mit »[ V W ] | [ X || [ Y Z ]]«.

Auf jedes Wort bzw. auf jede Gruppe innerhalb eckiger Klammern kann einer der folgen-den Modifikatoren folgen:

• Ein Asterisk (*) zeigt an, dass der vorangehende Wert oder die Gruppe in eckigenKlammern nicht oder mehrmals wiederholt wird. Die Schreibweise bucket* bedeutetdemnach, dass das Wort bucket beliebig oft, also auch gar nicht, vorkommen kann.Für die Anzahl der möglichen Vorkommnisse gibt es keine Obergrenze.

XVIII | Vorwort

• Ein Pluszeichen (+) zeigt an, dass der vorangehende Wert oder die Gruppe mindes-tens einmal oder öfter vorkommt. Demnach bedeutet mop+, dass mop mindestens ein-mal, vielleicht aber auch häufiger benutzt wird.

• Ein Fragezeichen bedeutet, der vorangehende Wert bzw. die vorangehende Gruppeist optional. Die Formulierung [pine tree]? bedeutet also, dass die Wörter pine treenicht benutzt werden müssen (aber in genau der angegebenen Reihenfolge stehenmüssen, wenn sie benutzt werden).

• Ein Zahlenpaar innerhalb geschweifter Klammern ({M,N}) zeigt an, dass der vorange-hende Wert bzw. die Gruppe innerhalb eckiger Klammern mindestens M-mal, höchs-tens aber N-mal vorkommen darf. Bei der Schreibweise ha{1,3} darf das Wort ha alsoein-, zwei- oder dreimal vorkommen.

Hier ein paar Beispiele:

give || me || libertyEs muss mindestens eines der Wörter benutzt werden, wobei die Wörter in einerbeliebigen Reihenfolge vorkommen dürfen. Gültige Interpretationen dieses Beispielssind etwa give liberty, give me, liberty me give und give me liberty.

[ I | am ]? the || walrus

Eines der beiden Wörter I oder am darf benutzt werden, muss aber nicht. Es dürfennicht beide Wörter zusammen benutzt werden. Hierauf muss mindestens eines derWörter the oder walrus folgen. Es dürfen aber auch beide in beliebiger Reihenfolgevorkommen. So sind beispielsweise die folgenden Kombinationen möglich: I thewalrus, am walrus the, am the, I walrus, walrus the und so weiter.

koo+ ka-chooAuf mindestens ein oder mehrere Vorkommen von koo muss genau ein Vorkommenvon ka-choo folgen. Die Beispiele koo koo ka-choo, koo koo koo ka-choo und koo ka-choo sind also alle gültig. Die Anzahl von koos ist potenziell unendlich, wobei die tat-sächliche Höchstzahl von der Implementierung abhängen kann.

I really{1,4}* [love | hate] [Microsoft | Netscape | Opera | Safari]

Der Allzweck-Meinungsgenerator für Webdesigner. Diese Formulierung kann inter-pretiert werden als I love Netscape, I really love Microsoft und weitere ähnlicheAusdrücke. Es dürfen zwischen null und vier Vorkommen von really benutzt wer-den. Des Weiteren können Sie zwischen love und hate wählen, auch wenn wir indiesem Beispiel nur love benutzt haben.

[[Alpha || Baker || Cray],]{2,3} and] Delphi

Das ist ein potenziell langer und komplizierter Ausdruck. Ein mögliches Ergebniswäre Alpha, Cray, and Delphi. Das Komma wird auf Grund seiner besonderen Posi-tion innerhalb der verschachtelten Gruppen von eckigen Klammern gesetzt.

Vorwort | XIX

DanksagungenEin Buch zu schreiben ist keinesfalls eine Aufgabe für eine einzelne Person, außer viel-leicht für meine Frau, die sich so manchen Abend gefragt hat, ob ich noch aus meinemBüro herunterkomme. Daher möchte ich mir einen Moment Zeit nehmen, um den Leu-ten zu danken, die mir während des langen Prozesses, dieses Buch zu veröffentlichen, denRücken gestärkt haben.

Zuallererst möchte ich allen Leuten bei O’Reilly danken, die trotz aller Verzögerungen zumir gehalten haben. Auf Grund einer ganzen Reihe von Ereignissen, nicht zuletzt Verän-derungen im Bereich von CSS selbst, habe ich es geschafft, den Prozess so lange hinauszu-zögern, dass dreimal der Lektor gewechselt hat, bevor alles gesagt und getan war. Einerdieser Lektoren, namentlich Grover Cleveland, hat sich dieses Projekts sogar zweimalangenommen. Vielen Dank euch allen für eure Geduld, euer Verständnis und den Willen,das Beste für dieses Buch zu tun. Besonders herzlichen Dank an Lorrie LeJeune undMolly Wood sowie an Marlowe Shaeffer und David Futato, die keinen Umweg gescheuthaben, um alles so korrekt wie möglich zu machen.

Besonders danken möchte ich auch meinen technischen Sachverständigen Tantek Çelikund Ian Hickson, die beide mit beachtlicher Expertise und Sachkenntnis zu diesem Pro-jekt beigetragen haben. Sie haben mich ständig auf dem Laufenden gehalten, was die neu-esten Änderungen bei CSS2.1 angeht, und mir keine schlampige Beschreibung oderungenaue Erklärung durchgehen lassen. Ohne sie wäre dieses Buch nicht so gut gewor-den. Sollten Sie trotzdem noch irgendwelche Fehler im Text finden, gehen diese komplettauf mein Konto. Das ist zwar schon ein etwas abgenutztes Klischee, aber es ist so wahr,dass es entspricht so sehr der Wahrheit, dass es ein Frevel wäre, es nicht zu erwähnen.

Außerdem gibt es ein paar persönliche Danksagungen auszusprechen.

Zum einen an TEDS, das Team für Webstandards bei Netscape, das leider im Juli 2003aufgelöst wurde. Wir haben für eine gute Sache gekämpft und es war mir eine Ehre, demTeam anzugehören. Ich empfinde Dankbarkeit und Respekt für Bob Clary, Marcio Galli,Katsuhiko Momoi, Chris Nalls, Tristan Nitot, Arun Ranganathan, Doron Rosenberg undSusie Wyshak – alles gute Gefährten.

Vielen Dank, Dave, für die vielen Jahre voller Lachen und Konversation. Unsere Arbeitam Drehbuch zu »CSS: Der Film« kann jeden Moment beginnen.

Danke, Jeff und Carrie, dass ihr mir Freunde seid, die ich vermutlich nicht verdiene, fürdie ich aber mit Sicherheit dankbar bin, sie zu haben.

An Gini und Ferrett, mit zwei der etwas seltsameren Namen, aber den größten Herzenaller Leute, die ich kenne. Danke, dass ihr mich (und Kat) abgelenkt und unterhaltenhabt, als wir es am meisten gebraucht haben.

Danke an Jim und Genevieve für das gute Essen, die großartigen Partys und tollenGespräche.

XX | Vorwort

An meine Familie im näheren und weiteren Sinne. Ich kann meine Dankbarkeit für eureLiebe und Unterstützung gar nicht tief genug ausdrücken.

Und an meine Frau, Kathryn, die nie in ihrem Glauben an mich und meine Aktivitätenund ihrer Bereitschaft, mich das tun zu lassen, was nötig war, gezweifelt hat. Ich dankedir mit aller Liebe, die wir teilen. Ich hätte all dies nicht tun können ohne deine Unter-stützung, dein Lachen und deine grenzenlose Freude.

Eric A. MeyerCleveland Heights, Ohio

23. Februar 2004

| 1

KAPITEL 1

CSS und Dokumente

Cascading Style Sheets (CSS) bieten mächtige Möglichkeiten, die Präsentation einesDokuments oder einer Sammlung von Dokumenten zu beeinflussen. Offensichtlich istCSS ohne irgendein Dokument ziemlich nutzlos, da es keine Inhalte zu präsentieren gäbe.Hierbei ist die Definition von »Dokument« extrem weit gefasst. So wird bei Mozilla undverwandten Browsern CSS benutzt, um die Darstellung der verschiedenen Browser-Ele-mente zu steuern. Aber auch hier gäbe es ohne die Elemente, wie Buttons, Adressfeld,Dialogboxen, Fenster und so weiter, wenig Bedarf für CSS (oder irgendeine andere Formvon Präsentationsinformationen).

Als das Web in Ungnade fielDamals, in den kaum beachteten Jahren der Frühzeit des Web (1990–1993), war HTMLnoch eine recht schlanke Sprache. Sie bestand vollständig aus strukturellen Elementen,die Dinge wie Absätze, Hyperlinks, Listen und Überschriften beschrieben. Es gab nichts,was auch nur im Entferntesten mit Tabellen, Frames und dem komplexen Markup zu tunhatte, das wir heute als nötigen Teil beim Erstellen von Webseiten ansehen. Im Grundewar HTML als strukturelle Sprache zur Beschreibung und Bezeichnung (»Markup«) derverschiedenen Bestandteile eines Dokuments gedacht. Es wurde nur sehr wenig darübergesagt, wie die verschiedenen Teile dargestellt werden sollten. Die Sprache hatte nichtsmit dem Erscheinungsbild zu tun, sondern war einfach nur ein sauberes Beschreibungs-konzept für die einzelnen Elemente.

Und dann kam Mosaic.

Plötzlich wurde die Macht des World Wide Web jedem klar, der auch nur etwas mehr alszehn Minuten damit herumspielte. Das Springen von einem Dokument zu einem anderenwar plötzlich nicht schwerer, als den Mauszeiger auf einem speziell eingefärbten Textteiloder sogar einem Bild zu positionieren und zu klicken. Bilder und Text konnten sogargemeinsam dargestellt werden, und alles, was man zur Erstellung einer Seite brauchte,war ein einfacher Texteditor. Das Web war frei, es war offen und es war cool.

2 | Kapitel 1: CSS und Dokumente

Überall wurden neue Websites erstellt. Hierbei handelte es sich um private Seiten, Uni-versitäts-Websites, Firmenpräsentationen und mehr. Mit dem Ansteigen der Websitesstieg auch das Verlangen nach neuen HTML-Elementen, die jeweils eine bestimmteFunktion hatten. Autoren begannen, die Möglichkeit einzufordern, bestimmte Textteilefett oder kursiv darstellen zu können.

Zu jener Zeit war HTML aber noch nicht in der Lage, diese Bedürfnisse zu befriedigen. Esgab zwar die Möglichkeit, ein Stück Text hervorzuheben, was aber nicht unbedingt dasGleiche war wie dessen Darstellung in kursiver Schrift. Stattdessen konnte der Text auchfett gedruckt oder auch als normaler Text in einer anderen Farbe dargestellt werden,abhängig vom Browser des Benutzers und seiner Vorlieben. Es gab keine Möglichkeit, umsicherzustellen, dass die vom Autor erstellten Inhalte auch auf die gleiche Art beim Leserdargestellt wurden.

Das Ergebnis dieses Drucks war, dass Markup-Elemente wie <B> und <I> begannen, in dieSprache einzufließen. Plötzlich konnte eine strukturelle Sprache auch Elemente enthal-ten, die die Präsentation der Inhalte steuerten.

Was für ein DurcheinanderJahre später haben wir das Erbe dieser unkontrollierten Entwicklung angetreten. GroßeTeile von HTML 3.2 und HTML 4.0 befassen sich beispielsweise mit Aspekten der Prä-sentation der im Dokument enthaltenen Inhalte. Die Möglichkeit, die Farbe und dieGröße von Text mittels des font-Elements zu steuern, die Fähigkeit, ein Dokument mitHintergrundfarben und -bildern zu versehen, die Verwendung spezieller table-Elemente(wie etwa cellspacing) und die Möglichkeit, Text zum Blinken zu bringen, sind alle dasVermächtnis der ursprünglichen Rufe nach »mehr Kontrolle«.

Um sich dieses Durcheinander in Aktion anzusehen, können Sie sich den Website-Quell-text fast jeder beliebigen Firma ansehen. Allein schon die schiere Menge an Markup-Informationen im Verhältnis zu den eigentlichen Informationen ist erstaunlich. Und wasnoch schlimmer ist: Das Markup besteht fast ausschließlich aus Tabellen und font-Ele-menten, die keinerlei Einfluss auf die eigentlichen Inhalte haben. Strukturell gesehen sinddiese Seiten kaum besser als eine zufällige Aneinanderreihung von Zeichenketten.

Nehmen wir beispielsweise an, der Autor benutzt für die Beschreibung des Seitentitelsfont-Elemente an Stelle von Heading-Elementen wie h1:

<font size="+3" face="Helvetica" color="red">Seitentitel</font>

Was die Struktur des Dokuments angeht, hat das font-Tag keinerlei Bedeutung, was denNutzen des Dokuments bereits stark einschränkt. Was hat ein solches Tag etwa in einemBrowser zu suchen, der die Texte vorliest? Benutzt der Autor statt des font-Tags die dafürvorgesehenen Heading-Elemente, kann ein Browser mit Sprachsynthese einen bestimm-ten Sprechstil verwenden, um den Text vorzulesen. Wird dagegen font benutzt, hat derBrowser keine Möglichkeit, diesen Text von irgendwelchen anderen Textteilen zu unter-scheiden.

Als das Web in Ungnade fiel | 3

Warum vermischen Autoren Struktur und Bedeutung so rücksichtslos? Weil sie möchten,dass die Leser ihre Seiten so sehen, wie sie diese designt haben. Die Verwendung vonHTML zur reinen Strukturierung eines Dokuments bedeutet, einen Großteil der Kon-trolle über das Erscheinungsbild einer Seite aufzugeben, und verhindert vermutlich auchdie dicht gepackten Seitenlayouts, die in den letzten Jahren so populär geworden sind.Dennoch sollten Sie sich über die folgenden Konsequenzen im Klaren sein, die so einwildwüchsiger Ansatz mit sich bringt:

• Unstrukturierte Seiten machen eine Indexierung der Seiten unglaublich schwierig.Eine wirklich mächtige Suchmaschine würde ihren Benutzern ermöglichen, inner-halb der Titel einer Seite zu suchen oder nur in den Abschnittsüberschriften odernur in den Absätzen, die als wichtig markiert sind. Dazu muss der Seiteninhalt miteiner bestimmten strukturellen Markierung versehen werden – also genau die Artvon Bezeichnungen, die vielen Seiten fehlt. Google achtet beim Indexieren einerSeite beispielsweise auf die Markierungsstruktur; eine gut strukturierte Seite erhältdadurch bei Google einen höheren Rang.

• Ein Mangel an Struktur vermindert die Zugänglichkeit. Stellen Sie sich vor, Sie sindblind und auf einen sprachfähigen Browser angewiesen, um das Web zu durchsu-chen. Was wäre Ihnen lieber: eine strukturierte Seite, bei der der Browser einfachnur Überschriften der einzelnen Abschnitte vorlesen kann, aus denen Sie dann denAbschnitt aussuchen können, der Sie wirklich interessiert, oder eine Seite, die sowenig Struktur bietet, dass der Browser das ganze Ding vorlesen muss, ohne in derLage zu sein, einen Absatz von einer unwichtigen Fußnote zu unterscheiden? Kehrenwir noch einmal zu Google zurück. Die Suchmaschine ist im Prinzip der aktivsteblinde Benutzer mit Millionen von Freunden, die ihm jeden Surf- und Einkaufstippabnehmen.

• Eine fortschrittliche Darstellung einer Seite kommt nicht ohne irgendeine Art vonDokumentstruktur aus. Stellen Sie sich eine Seite vor, auf der nur die Abschnitts-überschriften dargestellt werden, neben denen jeweils ein kleiner Pfeil zu sehen ist.Der Benutzer kann entscheiden, welche Überschrift ihn interessiert, und auf denPfeil klicken, wodurch der Text des betreffenden Abschnitts angezeigt wird.

• Strukturierte Markup-Informationen lassen sich leichter warten. Wie oft haben SieIhre Zeit damit verbracht, sich durch den HTML-Code von irgendjemandem zu gra-ben (vielleicht sogar Ihren eigenen), um den kleinen Fehler zu finden, der Ihre Seitein dem einen oder anderen Browser durcheinander bringt? Wie viel Zeit haben Siedamit verbracht, verschachtelte Tabellen und font-Elemente so anzuordnen, dassam Ende eine Seitenleiste mit weißen Hyperlinks entsteht? Wie viele Zeilenum-bruch-Elemente haben Sie schon in einen Text eingefügt, um exakt den richtigenAbstand zwischen einem Titel und dem folgenden Text zu erreichen? Durch dasStrukturieren Ihrer Seitenbeschreibung können Sie Ihren Code sauber halten unddas Gesuchte leichter finden.


Sicher – ein komplett strukturiertes Dokument ist ein wenig stressig. Und aus diesem ein-zigen Grund können hundert Argumente für ein strukturelles Markup die Marketing-Abteilung nicht davon abbringen, die Art von HTML zu benutzen, die am Ende des20. Jahrhunderts so populär war und sogar noch heute ist. Was wir brauchen, ist alsoeine Möglichkeit, die Struktur eines Dokuments mir einer attraktiven Seitendarstellungzu verbinden.

CSS als Retter in der NotNatürlich ist das Problem der Verschmutzung von HTML mit Präsentationselementendem World Wide Web Consortium (W3C) nicht entgangen, das nach einer schnellenLösung dafür suchte. 1995 veröffentlichte das Konsortium ein Konzept mit dem Arbeits-titel CSS. Bereits 1996 erreichte CSS den vollen Empfehlungsstatus (Recommendation)mit dem gleichen Gewicht wie HTML selbst. Im Folgenden erfahren Sie die Gründedafür.

Reichhaltige StilinformationenZuallererst ermöglicht CSS eine wesentlich umfangreichere Gestaltung des Aussehenseines Dokuments, als HTML das jemals konnte, nicht einmal als die Präsentationsele-mente einen Großteil der Sprache ausmachten. Mit CSS kann für jedes Element eineeigene Text- und Hintergrundfarbe festgelegt werden. Jedes Element lässt sich zudem miteinem Rahmen versehen; der Platz um ein Element herum kann in der Größe verändertwerden und es kann Einfluss auf die Groß- und Kleinschreibung genommen werden. MitCSS können Sie außerdem bestimmen, wie fett bestimmte Textteile dargestellt werdensollen, welche Dekoration (z.B. Unterstreichungen) verwendet werden soll, wie groß dieAbstände zwischen einzelnen Buchstaben und Wörtern sein sollen und ob der Text über-haupt angezeigt wird. Hinzu kommt noch eine ganze Reihe weiterer Effekte.

Nehmen wir beispielsweise die erste (und Haupt-) Überschrift auf einer Seite, die norma-lerweise dem Seitentitel entspricht. Die korrekte HTML-Bezeichnung lautet:

<h1>Leaping Above The Water</h1>

Nun gehen wir davon aus, Sie wollen den Titel dunkelrot darstellen; er soll in einerbestimmten Schriftart, kursiv und unterstrichen sein und vor einem gelben Hintergrunderscheinen. Wenn Sie diese Aufgabe allein mit HTML erledigen wollen, müssen Sie dasTag h1 in eine Tabelle verpacken und diese mit einer Tonne anderer Elemente wie fontund U voll laden. Mit CSS brauchen Sie dafür nur eine kleine Regel:

h1 {color: maroon; font: italic 2em Times, serif; text-decoration: underline;

background: yellow;}

Das ist schon alles. Wie Sie sehen, lässt sich alles, was Sie bisher in HTML erledigt haben,auch mit CSS erledigen. Es gibt auch keinen Grund, sich nur auf die Dinge zu beschrän-ken, die HTML kann:

CSS als Retter in der Not | 5


background: yellow url(titlebg.png) repeat-x;

border: 1px solid red; margin-bottom: 0; padding: 5px;}

Hier verwenden wir als Hintergrundbild für h1 eine Grafik, die nur horizontal wiederholtwird. Umgeben wird das Bild von einem Rahmen, der mindestens einen Abstand von fünfPixeln zum Text haben soll. Außerdem haben wir den unteren Rand des Elements ent-fernt. Das sind Dinge, die HTML nicht einmal ansatzweise beherrscht – und das ist nurein Vorgeschmack auf die Dinge, die mit CSS möglich sind.

Leichte BenutzungWenn die Fülle an Möglichkeiten Sie noch nicht von CSS überzeugt hat, dann tut es viel-leicht dieses Argument: CSS kann die Arbeit eines Webautors erheblich erleichtern.

Erstens zentralisieren Stylesheets die Befehle für bestimmte visuelle Effekte an einempraktischen Ort, anstatt sie über das gesamte Dokument zu verstreuen. Als Beispiel stel-len wir uns vor, Sie wollen alle mit h2 gekennzeichneten Überschriften purpur darstellen.In HTML würden Sie für jede einzelne Überschrift ein font-Tag benutzen wie hier:

<h2><font color="purple">Dieser Text ist purpur!</font></h2>

Das muss nun mit jeder Überschrift zweiter Klasse gemacht werden. Wenn Ihr Doku-ment also 40 Überschriften enthält, müssen Sie auch 40 font-Elemente einfügen, nämlicheines für jede Überschrift. Das ist eine ganze Menge Arbeit für einen kleinen Effekt.

Gehen wir nun davon aus, Sie hätten inzwischen alle nötigen font-Elemente eingebautund sind fertig und glücklich. Aber plötzlich entscheiden Sie (oder Ihr Chef entscheidetfür Sie), dass alle mit h2 markierten Überschriften doch eher dunkelgrün statt purpur seinsollen. Sicher – Sie könnten die Attribute per Suchen und Ersetzen austauschen, soferndiese Überschriften die einzigen purpurfarbenen Textteile in Ihrem Dokument sind.Sobald Sie aber auch noch andere purpurfarbene font-Elemente besitzen, können Sie dasnicht mehr, weil sich die Änderungen auch auf die anderen Teile auswirken.

Es wäre viel besser, wenn man nur eine einzige Regel zu ändern bräuchte:

h2 {color: purple;}

Das lässt sich nicht nur wesentlich schneller eingeben, sondern ist auch viel leichter zuändern. Wenn Sie von purpur nach dunkelgrün wechseln wollen, brauchen Sie nur nochdiese eine Regel zu ändern.

Sehen wir uns noch einmal das h1-Element mit den vielen Stildefinitionen aus dem vori-gen Abschnitt an:



Das sieht vielleicht aus, als wäre es schwieriger zu schreiben, als HTML zu benutzen. Wasist aber in dem Fall, wenn Sie eine Seite mit einem Dutzend h2-Elementen haben, die alle


wie h1 aussehen sollen. Wie viele Markup-Informationen wären für diese 12 Elementewohl nötig? Eine Menge. Mit CSS brauchen Sie andererseits nur Folgendes zu tun:

h1, h2 {color: maroon; font: italic 2em Times, serif; text-decoration: underline;


Jetzt beziehen sich die Stildefinitionen auf h1- und auf h2-Elemente gleichermaßen, unddas mit nur drei zusätzlichen Tastaturanschlägen.

Wenn Sie die Darstellung von h1 und h2 ändern wollen, werden die Vorteile von CSSsogar noch offensichtlicher. Überlegen Sie, wie lange es dauern würde, um das HTML-Markup für eine h1- und die zwölf h2-Überschriften zu ändern, und vergleichen Sie dasmit einer einfachen Änderung der Stildefinition von oben:

h1, h2 {color: navy; font: bold 2em Helvetica, sans-serif;

text-decoration: underline overline; background: silver;}

Hätte man für beide Ansätze die Zeit gestoppt, bin ich mir sicher, dass der Autor mit CSS-Kenntnissen den HTML-Jockey locker geschlagen hätte.

Hinzu kommt, dass die meisten CSS-Regeln an einem gemeinsamen Ort im Dokumentabgelegt werden. Es ist zwar möglich, die Regeln über das Dokument zu verstreuen,indem sie mit den entsprechenden Stildefinitionen oder einzelnen Elementen gruppiertwerden, aber es ist wesentlich effizienter, alle Stilvorgaben in einem einzigen Stylesheet zubündeln. Dadurch können Sie die Darstellung des gesamten Dokuments von einer Stelleaus steuern (oder ändern).

Stildefinitionen auf mehreren Seiten verwendenUnd noch etwas: Die Stilinformationen können nicht nur für einzelne Seiten an einem zen-tralen Ort abgelegt werden; Sie können sogar ein Stylesheet anlegen, das von mehrerenSeiten gemeinsam benutzt werden kann. Hierfür wird das Stylesheet in seinem eigenenDokument gespeichert und kann so von verschiedenen Seiten eingebunden werden.Dadurch können Sie schnell eine einheitliche Darstellung für die gesamte Website errei-chen. Dafür müssen Sie bloß das einzelne Stylesheet über einen speziellen Link mit allenDokumenten der Website verbinden. Wenn Sie dann einmal das Aussehen der Seiten IhrerWebsite ändern möchten, brauchen Sie nur eine einzige Datei zu bearbeiten, und dieÄnderungen werden automatisch in alle entsprechenden Seiten übernommen.

Nehmen wir zum Beispiel eine Site, bei der alle Überschriften grau auf weißem Hinter-grund dargestellt werden. Die Seiten erhalten die Farbdefinitionen aus einem Stylesheetmit dem Inhalt:

h1, h2, h3, h4, h5, h6 {color: gray; background: white;}

Unsere Beispiel-Site besteht aus 700 Seiten, die alle das Stylesheet verwenden, in dem dieÜberschriften als grau definiert wurden. Irgendwann wird nun entschieden, dass dieÜberschriften doch lieber weiß und der Hintergrund grau sein sollen. Also ändert derWebmaster für die Site das Stylesheet folgendermaßen ab:

h1, h2, h3, h4, h5, h6 {color: white; background: gray;}

CSS als Retter in der Not | 7

Er sichert das Stylesheet auf die Festplatte und die Änderung ist vollzogen. Das ist dochnun wirklich besser, als 700 einzelne Seiten zu bearbeiten und für alle Überschriften eineTabelle und ein font-Tag zu verwenden, oder?

KaskadierungUnd das ist noch nicht alles! CSS besitzt außerdem Regeln, die bei Konflikten zwischenverschiedenen Stildefinitionen zur Anwendung kommen. Diese Regeln bezeichnet manzusammen als Kaskadierung (engl. cascade). Nehmen wir hierfür noch einmal das vorigeSzenario, bei dem ein Stylesheet von mehreren Seiten eingebunden wurde. Nun erweiternSie die Website um einige Seiten, die viele der Stildefinitionen teilen, aber zusätzlich nocheigene Regeln verwenden sollen. Hierfür können Sie entweder ein weiteres Stylesheetanlegen, das zusätzlich zu dem bereits importierten in die Dokumente eingebunden wird,oder Sie platzieren die zusätzlichen Stildefinitionen einfach direkt in den Seiten, in denendie Definitionen benutzt werden sollen.

So sollen beispielsweise auf einer der 700 Seiten die Überschriften gelb auf dunkelblauemHintergrund erscheinen. In dem entsprechenden Dokument könnten Sie nun folgendeRegel einfügen:

h1, h2, h3, h4, h5, h6 {color: yellow; background: blue;}

Dank der Kaskadierung überschreibt diese Regel die zuvor importierte Anweisung, dieÜberschriften weiß auf grau darzustellen. Durch gutes Verständnis der Kaskadierungsre-geln und ihre sinnvolle Anwendung können Sie besonders ausgefeilte Stylesheets anlegen,die sich leicht ändern lassen und Ihrer Site ein professionelles Aussehen geben.

Die Möglichkeiten der Kaskade sind hierbei nicht auf den Autor einer Site beschränkt.Websurfer (oder -leser) können in manchen Browsern ihre eigenen Stylesheets (auchlokale Stylesheets oder reader style sheets genannt) angeben, die mit den Stilvorgaben desAutors sowie denen des Browsers selbst kaskadiert werden. Auf diese Weise kann bei-spielsweise ein farbenblinder Leser ein Stylesheet benutzen, bei dem Hyperlinks beson-ders hervorgehoben werden:

a:link, a:visited {color: white; background: black;}

Dabei kann das lokale Stylesheet alle möglichen Anweisungen enthalten: eine Anwei-sung, um Text für Personen mit Sehbehinderungen groß genug darzustellen, Regeln zumEntfernen von Bildern, um so den Seitenaufbau zu beschleunigen, oder sogar eine Regel,bei der das Lieblingsbild des Lesers als Hintergrundbild für alle dargestellten Seiten ver-wendet wird. (Das ist zwar nicht empfehlenswert, aber möglich.) Auf diese Weise könnendie Leser ihre eigene Darstellung der Webseiten erreichen, ohne dafür die vom Autor vor-gegebenen Stildefinitionen komplett abzuschalten.

Durch die Importfähigkeiten, die Kaskadierung und seine vielen möglichen Effekte istCSS ein wunderbares Werkzeug für jeden Autor und jeden Leser.


Kleine DateigrößenNeben seinen visuellen Fähigkeiten und seinen Möglichkeiten, Autor wie Leser eigeneOptionen zu geben, gibt es noch etwas, das Ihre Leser an CSS mögen werden. Es kanndabei helfen, die Dokumentgrößen so klein wie möglich zu halten und so die Download-Zeiten stark zu verringern. Wie das? Wie ich bereits gesagt habe, wurde in vielen Seitenmit Tabellen und font-Elementen gearbeitet, um schicke visuelle Effekte zu erzielen. Lei-der sorgen beide Methoden dafür, dass zusätzlicher HTML-Code benutzt werden muss,der die Dateigrößen in die Höhe treibt. Durch die Gruppierung visueller Stilvorgaben aneiner zentralen Stelle und deren kompakte Schreibweise können Sie auf font-Tags undandere Happen aus dem sonst üblichen Tag-Eintopf verzichten. Dadurch kann CSS dieLadezeiten Ihrer Seiten klein halten und gleichzeitig die Zufriedenheit Ihrer Leser steigern.

Blick in die ZukunftWie zuvor bereits erwähnt, ist HTML eine strukturbezogene Sprache, während CSS daspassende Gegenstück dazu darstellt: eine stilbezogene Sprache. Als Konsequenz hat dasW3C (die Organisation, die für die Diskussion und Festlegung der Standards im Webzuständig ist) begonnen, Stil definierende Elemente aus HTML zu entfernen. Der Grundfür diese Entscheidung besteht darin, dass die zuvor durch bestimmte HTML-Elementeerzeugten Effekte nun mit Stylesheets erzielt werden können. Wer braucht also den altenHTML-Code noch?

Aus diesem Grund enthält die Spezifikation für XHTML eine Reihe von Elementen, derenVerwendung mittlerweile abgelehnt wird; das bedeutet, sie werden im Laufe der Zeitganz aus der Sprache entfernt. Zu einem späteren Zeitpunkt werden diese Elemente dannals obsolet bezeichnet, was bedeutet, dass eine Browserunterstützung für diese Elementeweder gefordert noch gefördert wird. Zu diesen veralteten Elementen gehören beispiels-weise <font>, <basefont>, <u>, <strike>, <s> und <center>. Durch die Einführung vonCSS sind diese Elemente unnötig; im Laufe der Zeit werden sogar noch wesentlich mehrhinzukommen.

Und als wäre das noch nicht genug, ist es außerdem noch sehr wahrscheinlich, dassHTML nach und nach durch XML, die Extensible Markup Language, ersetzt wird. XMList wesentlich komplizierter als HTML, aber auch um einiges mächtiger und flexibler.Trotzdem besitzt XML keine Möglichkeit, Stilvorgaben wie <i> oder <center> zu benut-zen. Stattdessen ist es sehr gut möglich, dass sich die Darstellung von XML-Dokumentenauf Stylesheets verlässt. Hierbei werden die in XML verwendeten Stylesheets vermutlichkein CSS verwenden, sondern höchstwahrscheinlich dessen sehr ähnlich gestaltetenNachfolger. Wenn Sie also jetzt CSS lernen, kann das bei der Umstellung auf ein XML-basiertes Web von großem Vorteil sein.

Für den Anfang ist es daher sehr wichtig zu verstehen, wie CSS und die Struktur einesDokuments zusammenspielen. Es ist möglich, die Präsentation eines Dokuments durchCSS stark zu beeinflussen; dennoch sind auch die Möglichkeiten von CSS begrenzt. Wirwollen uns zu Beginn mit ein paar grundsätzlichen Begriffen vertraut machen.

Elemente | 9

ElementeElemente sind das Fundament der CSS-gesteuerten Darstellung. In HTML sind die häu-figsten Elemente, wie p, table, span, a und div, leicht erkennbar. In XML-Sprachen wer-den die Elemente durch die so genannte Document Type Definition (DTD) festgelegt.Jedes einzelne Element eines Dokuments spielt eine Rolle in dessen Darstellung. Für CSS– jedenfalls bei CSS 2.1 – bedeutet das, dass jedes Element seinen eigenen »Behälter«, dieso genannte Box, erzeugt, der den Inhalt des jeweiligen Elements enthält.

Ersetzte und nicht-ersetzte ElementeAuch wenn CSS auf Elementen basiert, werden diese Elemente nicht alle auf die gleicheWeise gehandhabt. So werden Bilder und Absätze beispielsweise unterschiedlichen Ele-menttypen zugeordnet, genau wie auch span und div. In CSS haben die Elemente norma-lerweise eine von zwei Erscheinungsformen: ersetzt und nicht ersetzt. Diese zwei Typenwerden in Kapitel 7 eingehend behandelt, wo auch die Details des Box-Modells erläutertwerden. Dennoch werde ich hier kurz darauf eingehen.

Ersetzte Elemente

Als ersetzte Elemente bezeichnet man solche Elemente, deren Inhalt durch etwas ersetztwird, das nicht direkt durch den Inhalt des Dokuments wiedergegeben wird. Das bekann-teste XHTML-Beispiel ist das Element img, das durch eine externe Bilddatei ersetzt wird,die nicht im Dokument selbst enthalten ist. Eigentlich hat img keinen wirklichen Inhalt,wie Sie an diesem einfachen Beispiel sehen können:

<img src="howdy.gif" />

Dieser Codeschnipsel hat keinen wirklichen Inhalt, sondern erwähnt nur den Namen desElements und ein Attribut. Das Element stellt nur dann etwas dar, wenn Sie damit aufbestimmte externe Inhalte verweisen (in unserem Fall ein durch das Attribut src bezeich-netes Bild). Ebenso verhält es sich mit dem Element input, das abhängig vom Typ durcheinen Radio-Button, eine Checkbox oder ein Feld zur Texteingabe ersetzt wird. Auchersetzte Elemente erzeugen für ihre Anzeige eine Box.

Nicht-ersetzte Elemente

Den Großteil der HTML- und XHTML-Elemente bilden die nicht-ersetzten Elemente. Dasbedeutet, der Inhalt dieser Elemente wird in der Regel durch den Browser (obwohl esauch noch andere »User Agents« gibt) in einer eigenen Box dargestellt, die vom Elementselbst erzeugt wird. So ist <span>Hallo Welt!</span> ein nicht-ersetztes Element, bei demder Text »Hallo Welt!« durch den Browser dargestellt wird. Das gilt beispielsweise fürAbsätze, Überschriften, Tabellenfelder, Listen und so gut wie alles andere in XHTML.


Darstellungsrollen der ElementeZusätzlích zu den ersetzten und nicht-ersetzten Elementen verwendet CSS2.1 zwei wei-tere grundsätzliche Elementtypen: Block und Inline. Diese Typen sind Autoren, die sichbereits mit HTML oder XHTML und deren Darstellung in Webbrowsern befasst haben,vermutlich eher vertraut. Eine Darstellung dieser Elemente sehen Sie in Abbildung 1-1.

Block-Elemente

Block-Elemente erzeugen (standardmäßig) eine Box, die den Inhaltsbereich des Elternele-ments ausfüllt und dabei nicht von anderen Elementen umgeben sein kann. Anders aus-gedrückt, ein Block-Element erzeugt ober- und unterhalb der Box »Zeilenumbrüche«. Diebekanntesten Block-Elemente in HTML sind p und div. Ersetzte Elemente können zwarBlock-Elemente sein, das ist aber eher selten der Fall.

Die einzelnen Einträge einer Liste stellen einen Sonderfall der Block-Level-Elemente dar.Zusätzlich zu den Eigenschaften, die sie mit anderen Block-Elementen teilen, erzeugendiese Elemente eine Markierung – bei ungeordneten Listen normalerweise einen Aufzäh-lungspunkt (Bullet) und bei geordneten Listen eine Ziffer –, die mit der Box des Elements»verbunden« ist. Abgesehen von dieser speziellen Markierung, verhalten sich die Listen-einträge genau wie alle anderen Block-Elemente.

Inline-Elemente

Inline-Elemente erzeugen eine Box innerhalb einer Textzeile, deren Fluss davon nichtunterbrochen wird. Das beste Beispiel für ein Inline-Element in XHTML ist a. WeitereKandidaten wären strong und em. Diese Elemente erzeugen weder vor noch nach der Boxeinen »Umbruch« und können dadurch als Teil des Inhalts eines anderen Elementserscheinen.

Auch wenn die Bezeichnungen »Block« und »Inline« zwar sehr viel mit Block- und Inline-Elementen in XHTML gemeinsam haben, gibt es doch einen wesentlichen Unterschied:Weder in HTML noch in XHTML können Block-Elemente innerhalb von Inline-Elemen-ten dargestellt werden. In CSS können die Darstellungsrollen dagegen beliebig ineinanderverschachtelt werden.

Demonstrieren wollen wir dies anhand der folgenden CSS-Eigenschaft (CSS-Property).

Abbildung 1-1: Block- und Inline-Elemente in einem XHTML-Dokument

Elemente | 11

Sie haben bemerkt, dass es eine Menge Werte gibt, von denen ich gerade einmal dreierwähnt habe: block, inline und list-item. Wir werden hier nicht weiter auf die andereneingehen, weil diese detaillierter in Kapitel 2 und Kapitel 7 behandelt werden.

Lassen Sie uns für den Moment bei block und inline bleiben. Sehen wir uns nun folgen-den Code an:

<body>

<p>Das ist ein Absatz mit <em>einem Inline-Element</em> darin.</p>

</body>

Hier haben wir zwei Block-Elemente (body und p) und ein Inline-Element (em). Gemäß derXHTML-Spezifikation kann em in p enthalten sein, aber nicht umgekehrt. Normalerweisekönnen in der XHTML-Hierarchie Inline-Elemente in Block-Elemente enthalten sein,während der umgekehrte Weg nicht erlaubt ist.

CSS hat dagegen keinerlei Einschränkungen dieser Art. Sie können den Code unverändertlassen, aber die Darstellungsrolle der zwei Elemente auf folgende Weise verändern:

p {display: inline;}

em {display: block;}

Auf diese Weise würden die Elemente eine Block-Box innerhalb einer Inline-Box erzeu-gen. Das ist vollkommen legal und verletzt keine Spezifikation. Es gäbe jedoch Probleme,wenn Sie versuchen, die Verschachtelung der Elemente umzukehren:

<em><p>Dieser Absatz wird auf falsche Weise von einem Inline-Element umgeben.</p></em>

Dieses Vorgehen ist in XHTML nicht erlaubt, unabhängig davon, was Sie mit den Dar-stellungsrollen in CSS anstellen.

Während es in XHTML gelegentlich sinnvoll sein kann, die Darstellungsrollen von Ele-menten zu ändern, ist dieses Vorgehen bei XML-Dokumenten sehr wichtig. Ein XML-Dokument besitzt sehr wahrscheinlich keinerlei »eingebaute« Darstellungsrollen; es iststattdessen die Aufgabe des Autors, diese zu definieren. Wie würden Sie beispielsweiseden folgenden XML-Code darstellen?

display

Werte: none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | inherit

Anfangswert: inline

Anwendung auf: alle Elemente

Vererbt: nein

Berechneter Wert: variiert für umflossene, positionierte und Root-Elemente (siehe CSS2.1,Abschnitt 9.7); ansonsten wie angegeben.


<book>

<maintitle>Cascading Style Sheets - Das umfassende Handbuch</maintitle>

<subtitle>Deutsche Ausgabe der 2. Auflage</subtitle>

<author>Eric A. Meyer</author>

<publisher>O'Reilly</publisher>

<pubdate>2005</pubdate>

<isbn>blahblahblah</isbn>

</book>

<book>

<maintitle>CSS - kurz & gut</maintitle>

<author>Eric A. Meyer</author>

<publisher>O'Reilly</publisher>

<pubdate>2005</pubdate>

<isbn>3-89721-504-7</isbn>

</book>

Das bedeutet, der Inhalt wird standardmäßig als Inline-Text interpretiert (sieheAbbildung 1-2). Das ist allerdings noch keine besonders nützliche Art der Darstellung.

Die grundsätzlichen Layout-Regeln können Sie mit display festlegen:

book, maintitle, subtitle, author, isbn {display: block;}

publisher, pubdate {display: inline;}

Damit haben Sie fünf der sieben Elemente als Block-Elemente definiert. Das heißt, dieeinzelnen Block-Elemente verhalten sich ganz ähnlich wie div in XHTML, während diebeiden Inline-Elemente eher span entsprechen.

Diese grundsätzliche Möglichkeit, die Darstellungsrollen zu beeinflussen, macht CSS füreine ganze Reihe von Situationen sehr nützlich. Wenn Sie die oben gezeigten Regeln umein paar Stile erweitern, können Sie etwa das in Abbildung 1-3 gezeigte Ergebnis bekom-men.

Abbildung 1-2: Standarddarstellung eines XML-Dokuments

Abbildung 1-3: Darstellung eines XML-Dokuments mit Stilinformationen

CSS und XHTML miteinander verbinden | 13

Im weiteren Verlauf dieses Buchs werden wir die verschiedenen Eigenschaften und Werteerforschen, mit denen Präsentationen wie diese möglich sind. Zuerst müssen wir unsallerdings ansehen, wie die Verbindung zwischen CSS und einem Dokument funktio-niert. Dabei gehen wir von einer XHTML-Umgebung aus, da diese den meisten Leutenbereits bekannt ist.

CSS und XHTML miteinander verbindenWie ich bereits gesagt habe, besitzen HTML- und XHTML-Dokumente eine eingebauteStruktur, und das kann man nicht oft genug wiederholen. Ein großes Problem mit altenWebseiten besteht darin, dass viele von uns komplett vergessen haben, dass Dokumenteeine innere Struktur haben sollten, die sich vollständig von der visuellen Struktur unter-scheiden kann. Wir haben den Code verbogen und verzerrt, um schnell möglichst cooleSeiten ins Web zu stellen, und haben dabei vergessen, dass die Seiten auch Informationenüber die Struktur enthalten sollten.

Diese Struktur ist ein grundsätzlicher Bestandteil der Beziehung zwischen XHTML undCSS, denn ohne die Struktur wäre eine Beziehung überhaupt nicht möglich. Um das bes-ser verstehen zu können, wollen wir nun ein XHTML-Dokument in seine Bestandteilezerlegen:

<html>

<head>

<title>Eric's World of Waffles</title>

<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />

<style type="text/css">

@import url(sheet2.css);

h1 {color: maroon;}

body {background: yellow;}

/* Meine eigenen Stildefinitionen! Hurra! */

</style>

</head>

<body>

<h1>Waffles!</h1>

<p style="color: gray;">The most wonderful of all breakfast foods is

the waffle--a ridged and cratered slab of home-cooked, fluffy goodness

that makes every child's heart soar with joy. And they're so easy to make!

Just a simple waffle-maker and some batter, and you're ready for a morning

of aromatic ecstasy!

</p>

</body>

</html>

Die Darstellung dieses Codes sehen Sie in Abbildung 1-4.

Nun wollen wir uns die verschiedenen Möglichkeiten ansehen, wie die CSS-Regeln in die-ses Dokument eingebunden werden können.


Das link-TagNehmen wir uns als Erstes das link-Tag vor:

<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />

Das link-Tag ist zwar nicht besonders bekannt, hat aber trotzdem seine Gültigkeit. Es istschon seit Jahren Teil der HTML-Spezifikation und hat eigentlich nur auf eine gute Ein-satzmöglichkeit gewartet. Seine Hauptaufgabe besteht darin, HTML-Autoren zu ermögli-chen, andere Dokumente mit dem Dokument zu verbinden, das das link-Tag enthält.CSS benutzt dieses Tag, um Stylesheets mit dem Dokument zu verbinden. In Abbil-dung 1-5 ist dies das Stylesheet mit dem Namen sheet1.css.

Abbildung 1-4: Ein einfaches Dokument

Abbildung 1-5: Die Einbindung eines externen Stylesheets in ein Dokument

index.html

sheet1.css


Stylesheets, die nicht im HTML-Dokument selbst enthalten sind, sondern von außen ein-gebunden werden, bezeichnet man als externe Stylesheets (wie in der Abbildung gezeigt).

Um ein Stylesheet erfolgreich zu laden, muss sich ein link innerhalb des head-Elementsbefinden, darf aber nicht innerhalb eines anderen Elements wie etwa title stehen. Aufdiese Weise wird der Webbrowser angewiesen, das Stylesheet zu suchen, zu laden unddie enthaltenen Stildefinitionen zur Darstellung des HTML-Dokuments anzuwenden(siehe Abbildung 1-5).

Und welches Format hat das externe Stylesheet? Es ist einfach nur eine Liste von Regeln,genau wie diejenigen, die wir im vorigen Abschnitt und im XHTML-Beispieldokumentgesehen haben, nur dass die Regeln diesmal in ihrer eigenen Datei stehen. Denken Siedaran, dass das Stylesheet weder HTML-Code noch irgendwelche anderen Markup-Informationen enthalten darf, sondern nur Stildefinitionen. Hier der Inhalt eines exter-nen Stylesheets:

h1 {color: red;}

h2 {color: maroon; background: white;}

h3 {color: white; background: black;

font: medium Helvetica;}

Das ist schon alles. Keine HTML-Tags oder -Kommentare, nur einfache, schnörkelloseStildeklarationen. Diese werden in einer Nur-Text-Datei gespeichert, deren Name in derRegel auf .css endet, wie bei sheet1.css.

Ein externes Stylesheet darf keinerlei Markup-Informationen enthalten,sondern nur CSS-Regeln und -Kommentare. Enthält das Stylesheet den-noch Markup-Code, kann es sein, dass Teile der Stilregeln oder sogar dasganze Stylesheet ignoriert werden.

Die Dateiendung .css ist offiziell nicht unbedingt nötig. Dennoch brauchen einige Brow-ser die Endung, um ein Stylesheet als solches zu erkennen, manchmal sogar dann, wennSie im link-Tag das Attribut type korrekt mit text/css angegeben haben. Einige Webser-ver können eine Datei nur dann als text/css zurückgeben, wenn ihr Dateiname auf .cssendet. Achten Sie also darauf, Ihre Stylesheets korrekt zu benennen.

Attribute

Die übrigen Attribute des link-Tags sind relativ einfach zu verstehen. rel steht für dasenglische Wort »relation«, also eine Beziehung oder Verknüpfung. In unserem Fallbezieht sich der link auf ein stylesheet. Das Attribut type hat immer den Wert text/css.Dieser Wert beschreibt die Art der Daten, die über das link-Tag geladen werden sollen.Auf diese Weise weiß der Browser, dass das geladene Stylesheet im CSS-Format angelegtist, und kann die importierten Daten korrekt interpretieren. In Zukunft wird es weitereSprachen zur Beschreibung von Stilen geben, wie etwa XSL. Daher ist es wichtig anzuge-ben, welche Sprache für das Stylesheet benutzt wird.


Als Nächstes betrachten wir das Attribut href. Der Wert dieses Attributs ist die URLIhres Stylesheets. Das kann entweder eine absolute oder eine relative URL sein, je nach-dem, was für Sie am besten funktioniert. In unserem Beispiel haben wir eine relative URLbenutzt; es wäre aber auch kein Problem, etwas wie http://www.meyerweb.com/sheet1.csszu schreiben.

Abschließend betrachten wir das Attribut media mit dem Wert all. Das bedeutet, dasgeladene Stylesheet soll für alle Präsentationsmedien verwendet werden. Für dieses Attri-but gibt es eine Reihe erlaubter Werte, die alle durch CSS2 definiert werden:

all

Zur Verwendung in allen Präsentationsmedien.

aural

Zur Verwendung mit Sprachsynthesizern, Bildschirm-Vorlesegeräten und anderenFormen der akustischen Darstellung des Dokuments.

braille

Zur Verwendung bei der Darstellung des Dokuments mit einem Braille-Gerät.

embossed

Für die Ausgabe des Dokuments auf einem Braille-Drucker.

handheld

Zur Darstellung auf Palmtop-Computern wie PDAs oder webfähigen Mobiltelefo-nen.

print

Beim Druck des Dokuments für Leser ohne Sehschwächen und bei der Darstellungeiner »Druckvorschau« des Dokuments.

projection

Bei der Darstellung mit einem Projektionsmedium wie einem Digitalprojektor, umeinen Vortrag durch eine Diaschau zu unterstützen.

screen

Für die Darstellung des Dokuments auf einem Bildschirm-Medium, z.B. einem Com-puterbildschirm. Alle auf solchen Systemen laufenden Webbrowser sind so genanntebildschirmbasierte User Agents.

tty

Für die Darstellung des Dokuments in einer Nichtproportionalschrift-Umgebung,z.B. Telexdrucker.

tv

Für die Darstellung des Dokuments auf einem Fernsehgerät.

Nur wenige Webbrowser unterstützen zurzeit alle Medientypen. Am häufigsten unter-stützt werden all, screen und print. Während dieses Buch geschrieben wurde, unter-stützte Opera außerdem den Medientyp projection für Projektionen wie etwa eineDiaschau.


Sie können ein Stylesheet in mehreren Medien verwenden, indem Sie eine durch Kommasgetrennte Liste der Medientypen angeben, für die das Stylesheet gelten soll. So ist es mög-lich, ein externes Stylesheet gleichermaßen für die Bildschirm- und Projektionsdarstel-lung zu verwenden, wie dieses Beispiel zeigt:

<link rel="stylesheet" type="text/css" href="visual-sheet.css"

media="screen, projection" />

Denken Sie daran, dass Sie mehr als ein externes Stylesheet mit einem Dokument assozi-ieren können. In diesen Fällen werden für die Darstellung des Dokuments nur die link-Tags berücksichtigt, deren Attribut rel den Wert stylesheet enthält. Zum Einbindenzweier Stylesheets mit den Namen basic.css und splash.css sähe der Code demnach so aus:

<link rel="stylesheet" type="text/css" href="basic.css" />

<link rel="stylesheet" type="text/css" href="splash.css" />

Dies veranlasst den Browser, beide Stylesheets zu laden, die Regeln aus beiden zu kombi-nieren und auf das Dokument anzuwenden. (Wie die Kombination der Sheets im Detailfunktioniert, sehen wir in Kapitel 3. Für den Moment reicht es zu wissen, dass die Regelnkombiniert werden.) Ein Beispiel:

<link rel="stylesheet" type="text/css" href="basic.css" />

<link rel="stylesheet" type="text/css" href="splash.css" />

<p class="a1">Dieser Absatz wird nur grau dargestellt, wenn die Stildefinitionen aus dem

Stylesheet 'basic.css' angewendet werden.</p>

<p class="b1">Dieser Absatz wird nur grau dargestellt, wenn die Stildefinitionen aus dem

Stylesheet 'splash.css' angewendet werden.</p>

Ein Attribut wird in diesem Beispiel nicht aufgeführt: title. Dieses Attribut wird zwarnicht oft benutzt, könnte aber in Zukunft sehr wichtig werden, und es kann bei unsachge-mäßer Benutzung zu unerwarteten Ergebnissen führen. Warum das so ist, sehen Sie imfolgenden Abschnitt.

Alternative Stylesheets

Es ist außerdem möglich, alternative Stylesheets zu definieren. Sie werden definiert,indem das Attribut rel den Wert alternate stylesheet erhält, und werden in der Präsen-tation nur verwendet, wenn der Benutzer sie auswählt.

Ist ein Browser in der Lage, mit alternativen Stylesheets umzugehen, werden die Werteder title-Attribute im link-Element benutzt, um eine Liste der verschiedenen verfügba-ren Stil-Alternativen zu erstellen. Sie könnten also Folgendes schreiben:

<link rel="stylesheet" type="text/css"

href="sheet1.css" title="Default" />

<link rel="alternate stylesheet" type="text/css"

href="bigtext.css" title="Big Text" />


href="zany.css" title="Crazy colors!" />


Daraufhin wäre der Benutzer in der Lage, den Stil auszuwählen, der benutzt werden soll,und der Browser würde vom ersten Stil (mit der Beschriftung »Default«) zu dem Stilwechseln, der vom Benutzer gewählt wurde. Ein Beispiel für die Umsetzung dieses Aus-wahlmechanismus sehen Sie in Abbildung 1-6.

Alternative Stylesheets werden von den meisten Gecko-basierten Brow-sern, wie Mozilla und Netscape 6+, sowie von Opera 7 unterstützt. Durchden Einsatz von JavaScript kann auch eine Unterstützung im InternetExplorer erreicht werden. Diese findet dann allerdings nicht nativ durchden Browser statt.

Außerdem ist es möglich, alternative Stylesheets zu gruppieren, indem Sie sie mit demgleichen Wert für title versehen. Dadurch wird es möglich, verschiedene Arten der Prä-sentation für Bildschirm- und für Druckmedien auszuwählen, wie hier gezeigt:


href="sheet1.css" title="Default" media="screen" />


href="print-sheet1.css" title="Default" media="print" />


href="bigtext.css" title="Big Text" media="screen" />


href="print-bigtext.css" title="Big Text" media="print" />

Wählt ein Benutzer die Option »Big Text« in einem Browser aus, der alternative Style-sheets unterstützt, so werden die Stildefinitionen aus bigtext.css für die Bildschirmdarstel-lung verwendet, während print-bigtext.css für den Druck des Dokuments zum Einsatzkommt. Weder sheet1.css noch print-sheet1.css werden in einem der Medien verwendet.

Da Sie ein link-Tag mit dem Wert stylesheet für das Attribut rel angegeben haben, giltdas angegebene Stylesheet als bevorzugtes Stylesheet. Das hier angegebene Stylesheet wirdbenutzt, wenn das Dokument zum ersten Mal angezeigt wird. Wenn jedoch einmal ein

Abbildung 1-6: Ein Browser mit Unterstützung für alternative Stylesheets


alternatives Stylesheet ausgewählt wurde, wird das bevorzugte Stylesheet nicht mehrbenutzt.

Wenn Sie noch weiter gehen und mehrere Stylesheets als bevorzugt angeben, werden allebis auf eines ignoriert. Folgendes Szenario:


href="sheet1.css" title="Default layout" />


href="sheet2.css" title="Default text sizes" />


href="sheet3.css" title="Default colors" />

Alle drei link-Elemente beziehen sich hier wegen des vorhandenen title-Attributs aufbevorzugte Stylesheets, aber nur eines wird tatsächlich als solches angesehen. Die ande-ren beiden werden vollständig ignoriert. Welche zwei das sind, kann nicht klar gesagtwerden, da weder HTML noch XHTML eine Methode besitzt, mit der festgestellt werdenkann, welche bevorzugten Stylesheets ignoriert oder verwendet werden sollen.

Wenn Sie das Attribut title für ein stylesheet jedoch weglassen, wird das angegebeneStylesheet zu einem persistenten Stylesheet und wird von nun an immer für die Darstel-lung des betreffenden Dokuments verwendet. Oftmals entspricht das genau dem, was derAutor wollte.

Das Element styleDas Element style, ein neues HTML-Element, ist der häufigste Weg, um ein Stylesheetzu definieren, da es in das Dokument selbst eingebettet wird:


style sollte immer zusammen mit dem Attribut type verwendet werden. Im Fall eines ein-gebetteten CSS-Dokuments ist der korrekte Wert "text/css", genau wie bei dem Elementlink.

Das Element style sollte – wie im vorigen Beispiel gezeigt – immer mit <styletype="text/css"> beginnen. Hierauf folgen eine oder mehrere Stildefinitionen, auf diewiederum ein schließendes </style>-Tag folgt. Es ist außerdem möglich, dem Elementstyle ein media-Attribut mitzugeben, für das die gleichen Werte verwendet werden kön-nen wie bei den zuvor besprochenen externen Stylesheets.

Die Stildefinitionen zwischen den öffnenden und schließenden style-Tags bezeichnetman als Dokumenten-Stylesheet oder auch als eingebettetes Stylesheet, da sie direkt in demDokument gespeichert sind, auf das sie sich beziehen. Eingebettete Stylesheets werdenviele Stile enthalten, die auf das betreffende Dokument angewendet werden sollen.Außerdem können sie aber auch Links auf mehrere externe Stylesheets enthalten, die mit-tels der Direktive @import eingebunden werden.


Die Direktive @importAls Nächstes befassen wir uns mit den Dingen, die zwischen den style-Tags stehen kön-nen. Als Erstes haben wir etwas, das dem Element link sehr ähnlich ist; die Direktive@import:


Genau wie link können Sie @import einsetzen, um den Webbrowser anzuweisen, einexternes Stylesheet zu laden und die darin enthaltenen Regeln zu benutzen, um dasHTML-Dokument darzustellen. Der Hauptunterschied liegt in der Schreibweise und derPlatzierung dieser Anweisung. Wie Sie sehen, steht @import innerhalb der style-Tags. DieDirektive muss vor alle anderen CSS-Definitionen gestellt werden oder die ganze Sachefunktioniert nicht. Sehen Sie sich einmal dieses Beispiel an:


@import url(styles.css); /* @import steht am Anfang */

h1 {color: gray;}

</style>

Analog zu link darf ein Dokument auch mehr als eine @import-Direktive enthalten. ImGegensatz zu link werden die durch mehrere @import-Anweisungen angesprochenen Style-sheets jedoch alle geladen und benutzt. Es gibt bei @import also keine Möglichkeit, alter-native Stylesheets anzugeben. Nehmen wir einmal folgenden Code:


@import url(blueworld.css);

@import url(zany.css);

Alle drei externen Stylesheets werden geladen, und sämtliche enthaltenen Regeln werdenbei der Darstellung des Dokuments auch verwendet.

Sowohl Navigator 4.x als auch Opera 3.x ignorieren @import vollkommen;andere ältere Browser sind nicht in der Lage, mit den verschiedenenErscheinungsformen der Direktive @import umzugehen. Das kann sogarvon Vorteil sein, da man auf diese Weise Stildefinitionen vor bestimmtenBrowsern verstecken kann. Nähere Details finden Sie unter http://w3development.de/css/hide_css_from_browsers/.

Wie bei link können Sie die importierten Stile auf einen oder mehrere Medientypenbeschränken, indem Sie die Medien, für die die Definitionen gelten sollen, nach der URLdes Stylesheets angeben:

@import url(sheet2.css) all;

@import url(blueworld.css) screen;

@import url(zany.css) projection, print;

@import kann sehr hilfreich sein, wenn ein externes Stylesheet Definitionen aus anderenexternen Stylesheets benutzen muss. Da externe Stylesheets keinerlei Markup-Code ent-halten dürfen, kann link hier nicht benutzt werden – @import aber schon. Es ist also mög-lich, ein externes Stylesheet mit folgenden Anweisungen anzulegen:


@import url(http://example.org/library/layout.css);

@import url(basic-text.css);

@import url(printer.css) print;

body {color: red;}

h1 {color: blue;}

Na ja, vielleicht nicht genau diese Stilangaben, aber Sie verstehen, worum es geht. Beach-ten Sie auch die gleichzeitige Verwendung von absoluten und relativen URLs in dem vori-gen Beispiel. Wie bei link können auch hier beide URL-Formen eingesetzt werden.

Beachten Sie weiterhin, dass die @import-Anweisungen am Anfang des Stylesheets stehen,genau wie in unserem Beispieldokument von vorhin. CSS verlangt, dass die @import-Direktiven vor allen anderen Regeln eines Stylesheets stehen müssen. @import-Anweisun-gen, die nach anderen Regeln stehen (z.B. body {color: red;}), werden von User Agents(Browsern usw.), die sich an die CSS-Spezifikation halten, ignoriert.

Während andere Browser falsch platzierte @import-Anweisungen ignorie-ren, akzeptiert Internet Explorer für Windows alle @import-Direktiven –auch solche, die nach anderen Regeln stehen. Dadurch kann es leicht pas-sieren, dass man die @import-Direktive falsch platziert und dadurch dieDarstellung in anderen Browsern abweicht.

Die eigentlichen StildefinitionenIn unserem Beispiel finden wir nach der @import-Direktive einige einfache Stilangaben.Ihre tatsächliche Bedeutung ist an dieser Stelle nicht so wichtig, auch wenn Sie vermutlichrichtig vermuten, dass hier die h1-Elemente des Dokuments in der Farbe »maroon« (kas-tanienbraun) und die body-Elemente mit einem gelben Hintergrund dargestellt werdensollen:

h1 {color: maroon;}


Stilangaben wie diese machen den größten Teil eingebetteter Stylesheets aus – einfachund komplex, kurz und lang. Sie werden selten ein Dokument mit einem style-Elementfinden, das keinerlei Regeln enthält.

Rückwärtskompatibilität

Für diejenigen unter Ihnen, die Ihre Dokumente auch für ältere Browser-Versionen ver-fügbar halten möchten, muss an dieser Stelle eine wichtige Warnung ausgesprochen wer-den. Vermutlich wissen Sie, dass Browser nicht erkannte Tags einfach ignorieren. Wenneine Website also beispielsweise ein patzer-Tag enthält, werden Browser ihn komplettignorieren, weil sie nicht wissen, was sie damit anfangen sollen.

Das Gleiche gilt auch für Stylesheets. Wenn ein Browser die Tags <style> und </style>nicht erkennt, wird er sie vollständig ignorieren. Die in den Tags enthaltenen Deklaratio-nen jedoch werden womöglich nicht ignoriert, da sie dem Browser nun als einfacher Texterscheinen. Ihre Stildefinitionen werden also zu Beginn der Seite mit angezeigt! (Selbst-


verständlich sollte ein Browser Text ignorieren, der nicht Teil des body-Elements ist, dasist aber nie der Fall.)

Um dieses Problem zu beheben, empfehlen wir, Ihre Deklarationen mit einem Kommen-tar-Tag zu umgeben. In dem hier gezeigten Beispiel steht der Anfang des Kommentar-Tags direkt hinter dem öffnenden style-Tag, während das Kommentar-Ende direkt vordem schließenden style-Tag steht.

<style type="text/css"></style>

Dadurch sollten alte Browser die Deklarationen und die style-Tags vollständig ignorie-ren, weil HTML-Kommentare nicht mit dargestellt werden, während Browser, die mitCSS umgehen können, Ihr Stylesheet weiterhin lesen können.

Kommentare in CSSAuch in CSS ist es möglich, Kommentare zu verwenden. Diese sind Kommentaren in Cund C++ recht ähnlich, da auch CSS-Kommentare mit /* und */ umgeben werden:

/* Das ist ein CSS1-Kommentar */

Wie in C++ können sich Kommentare über mehrere Zeilen erstrecken:

/* Das ist ein CSS1-Kommentar, der

mehrere Zeilen lang sein kann, ohne

dass es damit irgendwelche Probleme gibt. */

Allerdings dürfen CSS-Kommentare nicht verschachtelt werden. Das folgende Beispiel istalso nicht korrekt:

/* Das ist ein Kommentar, der einen

weiteren Kommentar enthält. Das ist FALSCH.

/* noch ein Kommentar */

und zurück zum ersten Kommentar. */

Davon abgesehen, ist es äußerst selten, dass verschachtelte Kommentare überhauptgebraucht werden. Daher ist diese Einschränkung auch nicht weiter schlimm.

Wenn Sie Kommentare in der gleichen Zeile verwenden wollen wie die Stildefinitionen,müssen Sie bei deren Platzierung vorsichtig sein. Hier ein Beispiel für die korrekte Ver-wendung:

h1 {color: gray;} /* Dieser CSS-Kommentar ist mehrere Zeilen */

h2 {color: silver;} /* lang. Da er sich aber auf der gleichen Zeile */

p {color: white;} /* mit den Stildefinitionen befindet, muss jede */

pre {color: gray;} /* Kommentarzeile einzeln markiert werden. */

Beim folgenden Beispiel wird ein großer Teil des Stylesheets als Kommentar angesehenund funktioniert nicht richtig, weil Kommentare und Stilanweisungen nicht korrekt von-einander getrennt wurden:


h1 {color: gray;} /* Dieser CSS-Kommentar ist mehrere Zeilen lang.

h2 {color: silver;} Da er aber nicht durch die korrekten Kommentar-

p {color: white;} Markierungen abgesetzt ist, gelten die letzten drei

pre {color: gray;} Stildefinitionen als Teil des Kommentars. */

In diesem Beispiel wird nur die erste Regel (h1 {color: gray;}) auf das Dokument ange-wendet. Die übrigen Regeln werden als Teil des Kommentars betrachtet und vom Brow-ser nicht zur Darstellung des Dokuments herangezogen.

Wenn wir mit dem Beispiel weitermachen, sehen wir, dass bestimmte CSS-Informationeninnerhalb eines XHTML-Tags stehen können!

Inline-StileFür Fälle, in denen Sie einem bestimmten Element nur wenige Stildefinitionen zuweisenmöchten, ohne dass diese sich in eingebetteten oder externen Stylesheets befinden müs-sen, können Sie das HTML-Attribut style verwenden, um einen Inline-Stil zu definieren:

<p style="color: gray;">The most wonderful of all breakfast foods is

the waffle--a ridged and cratered slab of home-cooked, fluffy goodness...

</p>

Das Attribut style ist erst seit kurzem Bestandteil von HTML und kann mit allen HTML-Tags verwendet werden, die sich innerhalb des body befinden (ausgenommen sind alsobeispielsweise head oder title).

Die Syntax für das Attribut style ist relativ einfach. Es sieht sogar den Definitionen inner-halb der regulären style-Tags sehr ähnlich, nur dass hier doppelte Anführungszeichendie geschweiften Klammern ersetzen. Das heißt also, die Anweisung <p style="color:maroon; background: yellow;"> legt Rotbraun für die Textfarbe und Gelb als Hintergrund-farbe für diesen einen Absatz fest. Auf andere Teile des Dokuments hat diese Deklarationkeinen Einfluss.

Sie sollten wissen, dass ein Inline-style-Attribut nur einen Deklarationsblock, aber keinkomplettes Stylesheet enthalten kann. Es ist daher weder möglich, ein style-Attribut miteiner @import-Anweisung zu füllen, noch können Sie vollständige Regeln verwenden. Alseinzig möglicher Wert für das style-Attribut kommen allein die Dinge in Frage, die zwi-schen den geschweiften Klammern einer Regel stehen können.

Die Verwendung des Attributs style wird im Allgemeinen nicht empfohlen. Tatsächlichwird das Attribut von der Spezifikation für XHTML 1.1 als »veraltet« angesehen und esist sehr unwahrscheinlich, dass es in anderen XML-Sprachen als XHTML überhaupt ver-wendet wird. Einige der großen Vorzüge von CSS – die Möglichkeit, Stile an einem zen-tralen Ort zu speichern und von dort das gesamte Erscheinungsbild eines Dokumentsoder sogar aller Dokumente einer Website zu steuern –werden außer Kraft gesetzt, wennSie Ihre Stile mit Hilfe des style-Attributs definieren. In vielerlei Hinsicht sind Inline-Stilenicht besser als font-Tags, auch wenn sie wesentlich flexibler sind.


ZusammenfassungMit CSS ist es möglich, die Präsentation der einzelnen Elemente durch den Browser voll-ständig zu verändern. Auf einer grundsätzlichen Ebene funktioniert das mit der Eigen-schaft display und auf anderen Ebenen durch die Assoziation eines Stylesheets mit einemDokument. Für den Benutzer macht es keinen Unterschied, ob das über ein externes Style-sheets, ein eingebettetes Stylesheet oder sogar über einen Inline-Stil passiert. Der wich-tigste Aspekt externer Stylesheets besteht aber darin, dass Autoren die Möglichkeithaben, sämtliche Informationen zur Präsentation einer Site an einem einzigen Ort abzule-gen, auf den sich dann sämtliche Dokumente beziehen können. Dadurch werden nichtnur Updates und die Wartung einer Site zum Kinderspiel, sondern dieses Verfahren hilftauch noch, Bandbreite zu sparen, da die für die Präsentation wichtigen Informationennicht mehr im Dokument selbst enthalten sein müssen.

Um die Möglichkeiten von CSS so weit wie möglich auszuschöpfen, müssen Autoren wis-sen, wie ein Satz von Stildefinitionen mit den verschiedenen Elementen eines Dokumentsverbunden werden kann. Um vollständig zu verstehen, wie CSS diese Dinge umsetzt,brauchen Autoren ein solides Wissen darüber, wie CSS die einzelnen Teile eines Doku-ments mit Stilen versieht. Diese Dinge werden im nächsten Kapitel besprochen.

| 25

KAPITEL 2

Selektoren

Einer der größten Vorteile von CSS, insbesondere für Designer, besteht in der Möglich-keit, mehrere Stildefinitionen auf alle Elemente des gleichen Typs anzuwenden. Nichtbeeindruckt? Dann vielleicht hiervon: Durch das Anpassen nur einer Zeile im CSS-Codekönnen Sie die Farben aller Überschriften gleichzeitig ändern. Sie mögen den verwende-ten Blauton nicht? Ändern Sie einfach die betreffende Codezeile und schon sind IhreÜberschriften lila, gelb, rotbraun oder haben eine andere Farbe Ihrer Wahl. Dadurchkönnen Sie sich als Designer auf das Design anstelle der »Drecksarbeit« konzentrieren.Wenn also beim nächsten Meeting irgendjemand die Überschriften in einem anderenGrünton sehen möchte, brauchen Sie bloß Ihre Stildefinition zu ändern und den »Aktua-lisieren«-Button zu drücken. Voilà! Das lässt sich in Sekunden erledigen und die Ergeb-nisse können sofort gezeigt werden.

Selbstverständlich kann auch CSS nicht alle Ihre Probleme lösen. Die Farbe Ihrer GIFskönnen Sie leider nicht ändern, aber andere globale Anpassungen werden dennoch erheb-lich erleichtert. Wir wollen uns nun mit Selektoren und ihrer Beziehung zur Dokument-struktur befassen.

Grundsätzliche RegelnWie bereits erwähnt, besteht eine der großen Stärken von CSS darin, bestimmte Regelnauf einen vollständigen Satz von Elementtypen in einem Dokument anzuwenden. Für dasfolgende Beispiel soll der Text aller mit h2 markierten Elemente grau dargestellt werden.Nach den HTML-Regeln alter Schule würden Sie dies durch das Einfügen von <FONTCOLOR="gray">...</FONT>-Tags in alle h2-Elemente erreichen:

<h2><font color="gray">This is h2 text</font></h2>

Das ist offensichtlich sehr aufwändig, besonders wenn Ihr Dokument viele h2-Elementeenthält. Schlimmer wird es, wenn alle diese h2-Überschriften später nicht mehr grau, son-dern vielleicht grün dargestellt werden sollen und Sie alle Markierungen von Hand wiederändern müssen.

26 | Kapitel 2: Selektoren

CSS macht es möglich, einfache und leicht änderbare Regeln aufzustellen, die auf alle vonIhnen definierten Textelemente angewendet werden können. (Im folgenden Abschnittwerden Sie sehen, wie diese Regeln funktionieren.) Um sämtliche h2-Elemente grau ein-zufärben, benötigen Sie beispielsweise nur diese eine Regel:

h2 {color: gray;}

Soll nun die Farbe aller h2-Elemente geändert werden, sagen wir einfach mal auf Silber-grau, müssen Sie diese Regel nur entsprechend anpassen:

h2 {color: silver;}

Struktur der RegelnUm das Konzept dieser Regeln besser zu verstehen, wollen wir uns deren Struktur einmalgenauer ansehen.

Jede Regel besteht aus zwei wesentlichen Teilen: dem Selektor und dem Deklarations-block. Der Deklarationsblock besteht seinerseits aus mehreren Deklarationen. JedeDeklaration ist unterteilt in eine Eigenschaft (Property) und den dazugehörigen Wert.Jedes Stylesheet besteht aus einer Reihe von Regeln. Die verschiedenen Teile einer Regelsehen Sie in Abbildung 2-1.

Der auf der linken Seite stehende Selektor legt fest, auf welche Teile des Dokuments sichdie Regel auswirkt. In Abbildung 2-1 wurden h1-Elemente ausgewählt. Wäre p der Selek-tor, würde sich diese Regel auf alle p-Elemente (Absätze) auswirken.

Die rechte Seite der Regel enthält den Deklarationsblock, der seinerseits eine oder meh-rere Deklarationen enthalten kann. Jede Deklaration besteht aus einer CSS-Eigenschaftund einem dazugehörigen Wert. In Abbildung 2-1 enthält der Deklarationsblock dem-nach zwei Deklarationen. Die erste Deklaration besagt, dass Teile des Dokuments dieFarbe (color) Rot (red) erhalten sollen, während die zweite Deklaration dafür sorgt, dassfür bestimmte Teile des Dokuments der Hintergrund (background) gelb (yellow) darge-stellt werden soll. Sämtliche (durch den Selektor festgelegten) h1-Elemente des Doku-ments werden also rot mit einem gelben Hintergrund dargestellt.

Abbildung 2-1: Die Struktur einer Regel

Grundsätzliche Regeln | 27

Elemente als SelektorenIn den meisten Fällen entspricht ein Selektor einem bestimmten HTML-Element, abernicht immer. Enthält eine CSS-Datei beispielsweise die Stildefinitionen für ein XML-Dokument, kann ein Selektor auch schon einmal so aussehen:

QUOTE {color: gray;}

BIB {color: red;}

BOOKTITLE {color: purple;}

MYElement {color: red;}

Anders gesagt: Die Elemente eines Dokuments dienen als grundsätzliche Selektoren. InXML kann ein Selektor so ziemlich alles sein, da XML die Schaffung neuer Auszeich-nungssprachen ermöglicht, in denen die Elemente beliebige Namen haben können.Wenn Sie dagegen ein HTML-Dokument mit Stildefinitionen versehen möchten, wirdnormalerweise ein bestimmtes HTML-Element als Selektor verwendet, wie beispielsweisep, h3, em, a oder sogar html selbst. Ein Beispiel:

html {color: black;}

h1 {color: gray;}

h2 {color: silver;}

Die Ergebnisse für dieses Stylesheet sehen Sie in Abbildung 2-2.

Haben Sie einmal begonnen, globale Stildefinitionen direkt auf bestimmte Elemente zubeziehen, können Sie diese zwischen den verschiedenen Elementen auch verschieben.Vielleicht wollen Sie, dass nicht die mit h1 markierten Überschriften aus Abbildung 2-2,sondern der Text in den Absätzen grau dargestellt werden soll. Tauschen Sie hierfür ein-fach den Selektor h1 gegen ein p aus:

html {color: black;}

p {color: gray;}

h2 {color: silver;}

Abbildung 2-2: Einfache Stildefinitionen für ein einfaches Dokument


Die Ergebnisse sehen Sie in Abbildung 2-3.

Deklarationen und SchlüsselwörterDer Deklarationsblock kann eine oder mehrere Deklarationen enthalten. Eine Deklara-tion besteht dabei immer aus einer Eigenschaft, die mit einem Wert durch einen Doppel-punkt verbunden ist. Abgeschlossen wird die Deklaration durch ein nachgestelltesSemikolon (;). Auf den Doppelpunkt und das Semikolon kann eine beliebige Anzahl vonLeerzeichen (also auch keines) folgen. Fast immer besteht der Wert aus einem einzelnenSchlüsselwort oder einer durch Leerzeichen getrennten Liste aus mehreren Schlüsselwör-tern, die für die genannte Eigenschaft zulässig sind. Benutzen Sie in einer Deklaration eineungültige Eigenschaft oder einen nicht zulässigen Wert, wird das Ganze einfach ignoriert.Die folgenden zwei Deklarationen würden also nicht funktionieren:

brain-size: 2cm; /* unbekannte Eigenschaft */

color: ultraviolet; /* unbekannter Wert */

Wenn für den Wert einer Eigenschaft mehrere Dinge angegeben werden können, werdendie Schlüsselwörter in der Regel durch Leerzeichen voneinander getrennt. Allerdingsakzeptieren nicht alle Eigenschaften mehrere Schlüsselwörter; viele aber schon, wie bei-spielsweise die Eigenschaft font. Wie in Abbildung 2-4 gezeigt, wollen wir nun für denAbsatztext den Schrifttyp Helvetica in mittlerer Größe festlegen.

Dafür verwenden wir die folgende Regel:

p {font: medium Helvetica;}

Beachten Sie das Leerzeichen zwischen medium und Helvetica, die beide als Schlüsselwortgelten (das erste Schlüsselwort bezieht sich hier auf die Schriftgröße, das zweite auf denverwendeten Schrifttyp). Das Leerzeichen ermöglicht es dem Browser, zwischen beiden

Abbildung 2-3: Stildefinitionen zwischen zwei Elementen verschieben

Grundsätzliche Regeln | 29

Schlüsselwörtern zu unterscheiden und sie korrekt anzuwenden. Das Semikolon kenn-zeichnet das Ende der Deklaration.

Diese durch Leerzeichen voneinander getrennten Wörter bezeichnet man als Schlüssel-wörter, weil sie zusammen genommen den Wert der fraglichen Eigenschaft bilden. Neh-men Sie beispielsweise folgende fiktive Regel:

rainbow: red orange yellow green blue indigo violet;

Natürlich gibt es keine Eigenschaft namens rainbow und zwei der benutzten Farben sindauch nicht gültig; trotzdem illustriert das Beispiel das zuvor Gesagte recht gut. Der Wertvon rainbow ist red orange yellow green blue indigo violet, wobei die sieben Schlüssel-wörter einen einmaligen Wert bilden. Wir können den Wert von rainbow daher folgen-dermaßen neu definieren:

rainbow: infrared red orange yellow green blue indigo violet ultraviolet;

Jetzt besteht der Wert von rainbow aus neun Schlüsselwörtern an Stelle der vorhinbenutzten sieben. Auch wenn der Name für die zwei Werte gleich ist, sind die beiden sounterschiedlich wie Null und Eins.

Wie wir gesehen haben, werden CSS-Schlüsselwörter durch Leerzeichenvoneinander getrennt – bis auf eine Ausnahme. In der CSS-Eigenschaftfont gibt es genau eine Stelle, an der ein Schrägstrich (/) benutzt werdenkann, um zwei Schlüsselwörter voneinander zu trennen. Hier ein Beispiel:

h2 {font: large/150% sans-serif;}

Der Schrägstrich trennt die Schlüsselwörter, die die Schriftgröße und dieHöhe der Zeilen festlegen. Das ist der einzige Ort, an dem der Schräg-strich in einer font-Deklaration verwendet werden darf. Alle anderen fürfont erlaubten Schlüsselwörter müssen durch Leerzeichen voneinandergetrennt werden.

Abbildung 2-4: Die Ergebnisse eines Eigenschaftswerts mit mehreren Schlüsselwörtern


Das sind die Grundlagen einfacher Deklarationen, die allerdings auch wesentlich kom-plexer ausfallen können. Im folgenden Abschnitt erhalten Sie einen kleinen Einblick indie Macht von CSS.

GruppierungBisher haben wir verhältnismäßig einfache Techniken kennen gelernt, mit denen eine ein-zelne Stildefinition einem einzelnen Selektor zugeordnet wurde. Was aber nun, wenn dergleiche Stil auf mehrere Elemente angewendet werden soll? In diesem Fall wollen Siemehr als einen Selektor benutzen oder mehr als einen Stil auf ein Element oder eineGruppe von Elementen anwenden.

Selektoren gruppierenFür dieses Beispiel sollen alle Überschriften der zweiten Ebene (h2) und alle Absätze (p)grau dargestellt werden. Am einfachsten lässt sich das mit folgender Deklaration errei-chen:

h2, p {color: gray;}

Hier stehen zwei Selektoren, h2 und p, auf der linken Seite, die durch ein Komma getrenntwerden. Damit haben Sie eine Regel definiert, bei der die Stildefinition auf der rechtenSeite (color: gray;) auf alle Elemente, auf die sich die beiden Selektoren auf der linkenSeite beziehen, angewendet wird. Das Komma zwischen den beiden Selektoren zeigt demBrowser, dass zwei Selektoren an der Regel beteiligt sind. Durch das Weglassen des Kom-mas würde die Regel eine vollkommen andere Bedeutung erhalten, die wir später imAbschnitt »Kindselektoren« genauer erforschen werden.

Für die Anzahl der Selektoren, die miteinander gruppiert werden können, gibt es keineObergrenze. Wenn Sie beispielsweise eine große Anzahl von Elementen in Grau darstel-len wollen, können Sie die folgende Regel verwenden:

body, table, th, td, h1, h2, h3, h4, p, pre, strong, em, b, i {color: gray;}

Durch die Gruppierung kann der Autor bestimmte Stilzuweisungen stark zusammenfas-sen, wodurch auch das Stylesheet selbst kürzer wird. Die folgenden Alternativen erzeugenexakt das gleiche Ergebnis; es ist aber ziemlich offensichtlich, welche der beiden Möglich-keiten leichter einzugeben ist:

h1 {color: purple;}

h2 {color: purple;}

h3 {color: purple;}

h4 {color: purple;}

h5 {color: purple;}

h6 {color: purple;}

h1, h2, h3, h4, h5, h6 {color: purple;}

Gruppierung | 31

Die Gruppierung gibt Ihnen außerdem ein paar interessante Wahlmöglichkeiten. So sindalle Regelgruppen im folgenden Beispiel gleichwertig und sollen nur unterschiedlicheWege aufzeigen, wie Selektoren und Deklarationen miteinander gruppiert werden können:

/* Gruppe 1 */

h1 {color: silver; background: white;}

h2 {color: silver; background: gray;}

h3 {color: white; background: gray;}

h4 {color: silver; background: white;}

b {color: gray; background: white;}

/* Gruppe 2 */

h1, h2, h4 {color: silver;}

h2, h3 {background: gray;}

h1, h4, b {background: white;}

h3 {color: white;}

b {color: gray;}

/* Gruppe 3 */

h1, h4 {color: silver; background: white;}

h2 {color: silver;}

h3 {color: white;}

h2, h3 {background: gray;}

b {color: gray; background: white;}

Alle drei Gruppen erzeugen das in Abbildung 2-5 gezeigte Ergebnis. (Zur Definition derStile werden gruppierte Deklarationen benutzt, auf die wir im folgenden Abschnitt einge-hen werden.)

Der universelle Selektor

Mit CSS2 wurde ein neuer einfacher Selektor namens universeller Selektor eingeführt. Erwird durch einen Asterisken (*) dargestellt. Dieser Selektor passt auf ein beliebiges Ele-

Abbildung 2-5: Das Ergebnis von gleichwertigen Stylesheets


ment und verhält sich damit so ähnlich wie ein Wildcard-Zeichen. Um beispielsweise alleElemente in einem Dokument rot einzufärben, bräuchten Sie nur Folgendes schreiben:

* {color: red;}

Diese Deklaration hat die gleiche Bedeutung wie ein gruppierter Selektor, der jedes imDokument enthaltene Element einzeln aufführt. Mit dem universellen Selektor könnenSie alle Elemente eines Dokuments in einem effizienten Schritt rot einfärben (color: red).Sie sollten allerdings bedenken, dass der universelle Selektor trotz seiner Bequemlichkeiteinige ungewollte Konsequenzen nach sich ziehen kann, auf die wir im nächsten Kapitelgenauer eingehen werden.

Deklarationen gruppierenAus der Möglichkeit, Selektoren zu einer einzigen Regel zusammenzufassen, folgt dieMöglichkeit, auch Deklarationen gruppieren zu können. Im nächsten Beispiel sollen alleh1-Elemente in purpurfarbener, 18 Pixel großer Schrift vom Typ Helvetica vor einem was-serblauen Hintergrund dargestellt werden (wenn es Ihnen nichts ausmacht, Ihre Leser zublenden). Hierfür könnten Sie folgendes Stylesheet verwenden:

h1 {font: 18px Helvetica;}

h1 {color: purple;}

h1 {background: aqua;}

Allerdings ist diese Methode nicht besonders effizient. Stellen Sie sich vor, Sie müssteneine solche Liste für ein Element anlegen, das 10 oder sogar 15 Stildefinitionen benötigt.Stattdessen können Sie Ihre Deklarationen in einem gemeinsamen Deklarationsblockzusammenfassen:

h1 {font: 18px Helvetica; color: purple; background: aqua;}

Diese Schreibweise hat exakt den gleichen Effekt wie das dreizeilige Stylesheet, das wirgerade gesehen haben.

Beachten Sie, dass die Verwendung des Semikolons (;) am Ende jeder Deklaration für dieGruppierung von Deklarationen absolut notwendig ist. Leerzeichen in Stylesheets wer-den von Browsern ignoriert, allerdings benötigen die User Agents eine korrekte Syntax,um Ihr Stylesheet richtig zu interpretieren. Sie können Ihre Stildefinitionen auf eine derhier gezeigten Arten formatieren:

h1 {

font: 18px Helvetica;

color: purple;

background: aqua;

}

Wenn allerdings das zweite Semikolon entfernt wird, interpretiert der User Agent das Style-sheet wie folgt:

h1 {

font: 18px Helvetica;

color: purple background: aqua;

}

Gruppierung | 33

Da background kein gültiger Wert für color ist und color außerdem nur ein Schlüsselwortals Wert enthalten darf, wird diese Deklaration von color (inklusive des background:aqua-Teils) vollständig vom Browser ignoriert. Stattdessen wird der Text in h1 vielleichtpurpurfarben, aber ohne den wasserblauen Hintergrund dargestellt. Allerdings ist eswesentlich wahrscheinlicher, dass auch für h1-Elemente einfach die Standardfarbe ohneirgendwelche Hintergründe benutzt wird. (Dagegen wird die Deklaration font: 18pxHelvetica benutzt, weil sie korrekt mit einem Semikolon beendet wurde.)

Zwar ist es technisch gesehen nicht unbedingt notwendig, die letzte Dekla-ration einer Regel mit einem Semikolon zu beenden, dennoch gilt diesesVorgehen als guter Stil. Zum einen werden Sie sich so daran gewöhnen,immer Semikola zu benutzen, deren Fehlen einer der häufigsten Fehlerbeim Interpretieren von Stylesheets ist. Zum anderen müssen Sie beimHinzufügen einer weiteren Deklaration zu der Regel nicht darauf achten,ob ein zusätzliches Semikolon eingefügt werden muss oder nicht. Undschließlich lassen sich einige ältere Browser wie beispielsweise der InternetEplorer 3.x von einem fehlenden Semikolon am Ende einer Regel leichterverwirren als andere. Um diese Probleme zu vermeiden, sollten Sie eineDeklaration daher immer mit einem Semikolon beenden, unabhängig vonihrer Position innerhalb der Regel.

Wie das Gruppieren von Selektoren bietet auch das Gruppieren von Deklarationen einebequeme Möglichkeit, um Stildefinitionen kurz, ausdrucksstark und leicht wartbar zuhalten.

Alles gruppierenSie wissen nun, dass Sie sowohl Selektoren wie auch Deklarationen gruppieren können.Wenn Sie beide Arten der Gruppierung in einer Regel zusammenfassen, können Sie mitwenigen Anweisungen sehr komplexe Stildefinitionen erstellen. Wie gehen Sie also vor,wenn Sie einige komplexe Stilvorgaben für alle Überschriften eines Dokuments gemein-sam verwenden wollen? Hier ein Beispiel:

h1, h2, h3, h4, h5, h6 {color: gray; background: white; padding: 0.5em;

border: 1px solid black; font-family: Charcoal, sans-serif;}

Hier wurden die Selektoren gruppiert, wodurch die Stildefinitionen auf der rechten Seiteauf alle in der Liste stehenden Überschriftsmarkierungen angewendet werden. Die Grup-pierung der Deklarationen bedeutet, dass alle aufgeführten Stilvorgaben auf die Selekto-ren auf der linken Seite angewendet werden. Das Ergebnis sehen Sie in Abbildung 2-6.

Dieser Ansatz ist einer Version vorzuziehen, bei der sämtliche Teile einzeln aufgeführtwerden. Diese könnte etwa so aussehen:

h1 {color: gray;}

h2 {color: gray;}

h3 {color: gray;}

h4 {color: gray;}


h5 {color: gray;}

h6 {color: gray;}

h1 {background: white;}



Diese Schreibweise geht noch viele Zeilen so weiter. Sicherlich können Sie Ihre Stildefini-tionen auch nacheinander formulieren; allerdings würde ich Ihnen das nicht empfehlen.Ein Bearbeiten Ihrer Stile wäre fast so aufwändig wie die Verwendung von font-Tags!

Anstatt Stildefinitionen nur auf bestimmte Elemente eines Dokuments zu beziehen, kön-nen Sie die Selektoren noch ausdrucksstärker machen, indem Sie sie eher auf bestimmteInformationen anwenden. Für etwas so Mächtiges ist zwar einige Vorarbeit nötig, die sichaber auf jeden Fall lohnt.

Klassen- und ID-SelektorenBisher haben wir Selektoren und Deklarationen auf verschiedene Weise miteinanderkombiniert; allerdings handelte es sich bisher nur um einfache Selektoren, die sich aufbestimmte Elemente von Dokumenten bezogen. Das ist bis zu einem bestimmten Punktauch völlig in Ordnung. Manchmal brauchen Sie jedoch etwas Spezielleres.

Zusätzlich zu den rohen Dokument-Elementen gibt es noch zwei weitere Arten von Selek-toren: Klassenselektoren und ID-Selektoren, mit denen sich Stildefinitionen unabhängigvon den Elementen eines Dokuments zuweisen lassen. Diese Selektoren können eigen-

Abbildung 2-6: Gleichzeitiges Gruppieren von Selektoren und Regeln

Klassen- und ID-Selektoren | 35

ständig oder zusammen mit Elementselektoren verwendet werden. Allerdings ist es hier-für notwendig, die Dokumentteile entsprechend zu markieren. Die Benutzung dieserneuen Selektoren erfordert daher ein wenig Voraussicht und Planung.

Wenn Sie beispielsweise ein Dokument entwerfen, in dem es um die Handhabung vonPlutonium geht, so enthält das Dokument vermutlich eine Reihe von Warnungen, wieman mit solch einer gefährlichen Substanz umzugehen hat. Um die Warnungen hervor-zuheben, sollen diese in fetter Schrift dargestellt werden. Sie wissen allerdings noch nicht,welche Elemente diese Warnungen enthalten werden. Einige Warnungen könnten ausganzen Absätzen bestehen, während andere vielleicht nur ein einzelner Eintrag in einerlängeren Liste oder ein kleiner Textabschnitt sind. Mit einfachen Selektoren lässt sicheine solche Regel nicht definieren. Folgender Ansatz wäre demnach eine Sackgasse:

p {font-weight: bold;}

Nun würden alle Absätze fett dargestellt, nicht nur solche, die auch wirklich eine War-nung enthalten. Sie benötigen dagegen eine Möglichkeit, nur den Text auszuwählen, derauch wirklich eine Warnung enthält. Genauer gesagt: Es sollen nur die Elemente ausge-wählt werden, die als Warnung gelten. Wie machen Sie das? Sie wenden Stildefinitionenauf Teile des Dokuments an, die auf eine bestimmte Art markiert wurden, und zwarunabhängig von den verwendeten Elementen, indem Sie Klassenselektoren verwenden.

KlassenselektorenDie häufigste Methode, Stile zu verwenden, ohne sich dabei um die beteiligten Elementekümmern zu müssen, besteht darin, Klassenselektoren zu benutzen. Dafür müssen Sieallerdings zunächst den Code des Dokuments ändern, damit die Klassenselektoren auchfunktionieren. Und hier kommt das Attribut class ins Spiel:

<p class="warning">When handling plutonium, care must be taken to avoid

the formation of a critical mass.</p>

<p>With plutonium, <span class="warning">the possibility of implosion is

very real, and must be avoided at all costs</span>. This can be accomplished

by keeping the various masses separate.</p>

Um die Stildefinitionen eines Klassenselektors mit einem Element zu verbinden, müssenSie das Attribut class mit dem entsprechenden Wert versehen. Im obigen Beispiel wurdezwei Elementen der class-Wert warning zugewiesen: dem ersten Absatz und dem Ele-ment span im zweiten Absatz.

Hierfür brauchen Sie nur zu wissen, wie Sie Ihre Stildefinitionen auf die einer Klasse zuge-teilten Elemente anwenden können. In HTML-Dokumenten gibt es dafür eine sehr kom-pakte Schreibweise, bei der dem Namen einer Klasse (class) ein Punkt (.) vorangestelltwird. Dieser kann nun mit einem einfachen Selektor verbunden werden:

*.warning {font-weight: bold;}

Wenn Sie diese Anweisung mit dem zuvor gezeigten Markup-Beispiel kombinieren, hatdiese einfache Regel den in Abbildung 2-7 gezeigten Effekt. Das heißt, die Stildefinition


font-weight: bold wird auf alle Elemente angewendet (dank des universellen Selektors),deren class-Attribut den Wert warning hat.

Wie Sie sehen, bezieht sich ein Klassenselektor direkt auf einen Wert, der im Attributclass eines Elements zu finden ist. Dieser Referenz wird immer ein Punkt (.) vorange-stellt, der diesen Selektor als Klassenselektor kennzeichnet. Der Punkt hilft dabei, denKlassenselektor von Dingen zu trennen, mit denen er eventuell kombiniert wird, wie etwaeinem Elementselektor. Vielleicht wollen Sie bestimmte Teile nur dann fett gedruckt dar-stellen, wenn ein ganzer Absatz als Warnung markiert wurde:

p.warning {font-weight: bold;}

Dieser Selektor passt auf alle p-Elemente, deren class-Attribut das Wort warning enthält,aber keine anderen Elemente dieses Typs, seien diese nun klassifiziert oder nicht. DerSelektor p.warning lässt sich so übersetzen: »Ein beliebiger Absatz, dessen class-Attributdas Wort warning enthält.« Da das Element span kein Absatz ist, passt der Selektor fürdiese Regel nicht mehr, und es wird daher auch nicht fett gedruckt dargestellt.

Wenn Sie für das Element span einen anderen Stil verwenden wollen, könnten Sie hierfürden Selektor span.warning einsetzen:

p.warning {font-weight: bold;}

span.warning {font-style: italic;}

In diesem Fall werden als Warnung markierte Absätze fett gedruckt dargestellt, währenddas als Warnung bezeichnete Element span in kursiver Schrift ausgegeben wird. JedeRegel bezieht sich also auf eine bestimmte Kombination aus Element und Klasse, ohnedabei die Darstellung anderer Elemente zu beeinflussen.

Eine weitere Option besteht in der Kombination eines allgemeinen Klassenselektors miteinem elementspezifischen Klassenselektor, wodurch die Stildefinitionen sogar nochnützlicher werden, wie im folgenden Beispiel zu sehen:

Abbildung 2-7: Die Benutzung eines Klassenselektors


.warning {font-style: italic;}

span.warning {font-weight: bold;}


Hier werden alle Warnungen kursiv dargestellt, während nur der Text innerhalb einesspan-Elements, dessen class-Attribut den Wert warning hat, kursiv und fett gedruckt aus-gegeben wird.

Beachten Sie das Format des allgemeinen Klassenselektors im vorigen Beispiel: Er ist ein-fach ein Klassenname, dem ein Punkt, aber kein Elementname vorangestellt wurde. Dasheißt: Wenn Sie einfach alle Elemente mit dem gleichen Klassennamen auswählen möch-ten, können Sie den universellen Selektor auch weglassen, ohne dass dies irgendwelchenSchaden anrichtet.

Mehrfache KlassenIm vorigen Abschnitt haben wir uns mit Werten für class befasst, die nur ein einzelnesWort enthielten. In HTML ist es aber auch möglich, eine durch Leerzeichen getrennteListe von Wörtern als Wert für class anzugeben. Möchten Sie beispielsweise einbestimmtes Element sowohl als »dringend« (engl. urgent) und als Warnung hervorheben,können Sie Folgendes schreiben:

<p class="urgent warning">When handling plutonium, care must be taken to

avoid the formation of a critical mass.</p>

<p>With plutonium, <span class="warning">the possibility of implosion is

very real, and must be avoided at all costs</span>. This can be accomplished

by keeping the various masses separate.</p>

Die Reihenfolge der Wörter spielt hier übrigens keine Rolle; warning urgent würde ge-nauso funktionieren.

Abbildung 2-8: Die Verwendung von allgemeinen und spezifischen Selektoren zum Kombinieren von Stildefinitionen


Jetzt wollen wir alle Elemente mit dem class-Wert warning fett darstellen und solche mitdem class-Wert urgent kursiv. Elemente, die beide Werte haben, sollen außerdem einensilbergrauen Hintergrund bekommen. Das würde man folgendermaßen schreiben:

.warning {font-weight: bold;}

.urgent {font-style: italic;}

.warning.urgent {background: silver;}

Indem Sie beide Klassenselektoren miteinander verketten, können Sie die Auswahl aufElemente beschränken, in denen beide Klassennamen in beliebiger Reihenfolge vorkom-men. Wie Sie sehen, steht im HTML-Quellcode class="urgent warning", während dieSchreibweise des CSS-Selektors .warning.urgent lautet. Dennoch wird der Absatz, dermit »When handling plutonium…« beginnt, mit einem silbergrauen Hintergrund verse-hen (siehe Abbildung 2-9).

Enthält der mehrfache Klassenselektor allerdings einen Namen, der sich nicht in derdurch Leerzeichen getrennten Liste befindet, wird der Vergleich fehlschlagen. Sehen Siesich einmal diese Regel an:

p.warning.help {background: red;}

Wie erwartet, passt dieser Selektor nur auf p-Elemente, deren class-Attribut die Wörterwarning und help enthält. Ein p-Element mit den Wörtern warning und urgent als Wertvon class wird dagegen nicht beachtet. Auf folgenden Code würde der Selektor jedochangewendet werden:

<p class="urgent warning help">Help me!</p>

Internet Explorer hat Probleme beim Umgang mit mehrfachen Selektoren.Während ein einzelner Klassenname aus einer Liste ausgewählt werdenkann, ist die Auswahl anhand mehrerer Namen in einer Liste nicht mög-

Abbildung 2-9: Auswahl von Elementen mit Hilfe von mehrfachen Klassenselektoren


lich. Der Selektor p.warning würde also wie erwartet funktionieren, wäh-rend der Selektor p.warning.help auf alle Elemente angewendet würde,deren class-Wert das Wort help enthält (weil help das letzte Wort imSelektor ist). Hätten Sie stattdessen den Selektor p.help.warning verwen-det, würde Internet Explorer diesen auf alle Elemente anwenden, derenclass-Wert das Wort warning enthält.

ID-SelektorenID-Selektoren ähneln auf viele Arten den Klassenselektoren. Es gibt allerdings ein paarentscheidende Unterschiede. Der erste Unterschied besteht darin, dass ID-Selektoren einDoppelkreuz (#) an Stelle des Punkts vorangestellt wird. Sie könnten also folgende Regelschreiben:

*#first-para {font-weight: bold;}

Mit dieser Regel wird der Text aller Elemente fett dargestellt, deren id-Attribut den Wertfirst-para hat.

Der zweite Unterschied ist, dass ID-Selektoren sich auf Werte des Attributs id beziehenund nicht auf die des Attributs class, was nicht weiter überrascht. Hier ein Beispiel fürden ID-Selektor in Aktion:

*#lead-para {font-weight: bold;}

<p id="lead-para">Dieser Absatz wird fett ausgegeben.</p>

<p>Dieser Absatz wird NICHT fett dargestellt.</p>

Beachten Sie, dass der Wert lead-para einem beliebigen Element des Dokuments zuge-wiesen werden kann. In diesem speziellen Fall wird er dem ersten Absatz zugewiesen. Erhätte aber genauso gut auch im zweiten oder dritten Absatz benutzt werden können.

Wie bei Klassenselektoren kann auch bei ID-Selektoren der universelle Selektor weggelas-sen werden. Das obige Beispiel kann man also auch so schreiben:

#lead-para {font-weight: bold;}

Die Wirkung dieses Selektors wäre gleich.

Sinnvoller Einsatz von Klassen und IDsWie zuvor gezeigt, können Sie Klassen einer beliebigen Anzahl von Elementen zuweisen.So haben wir den Klassennamen warning sowohl einem p- als auch einem span-Elementzugewiesen; es wären aber noch wesentlich mehr Elemente möglich gewesen. IDs werdenjedoch nur genau einmal innerhalb eines HTML-Dokuments vergeben. Wenn Sie also einHTML-Element mit dem id-Wert lead-para haben, so kann kein anderes Element diesenWert tragen.


Im wirklichen Leben überprüfen die Browser die Einmaligkeit der IDs imHTML-Code eher selten. Sie können ein HTML-Dokument also mit einerReihe von Elementen versehen, die alle den gleichen Wert für die ID-Attri-bute verwenden und auf die dadurch auch die gleiche Stilvorgabe angewen-det wird. Dieses Verhalten ist zwar nicht korrekt, kommt aber trotzdem vor.Außerdem erschwert die mehrfache Verwendung gleicher ID-Werte dieBenutzung von DOM-Skripten. Funktionen wie getElementById( ) verlas-sen sich darauf, dass es nur exakt ein Element mit einem bestimmten ID-Wert gibt.

Im Gegensatz zu Klassenselektoren können ID-Selektoren nicht kombiniert werden, weilID-Attribute keine durch Leerzeichen getrennten Wortlisten zulassen.

Auf einer rein syntaktischen Ebene ist nicht gewährleistet, dass die Punkt-Klasse-Schreib-weise (z.B. .warning) in XML-Dokumenten auch funktioniert. Während dieses Buchgeschrieben wird, funktioniert diese Schreibweise bei Dokumenten im HTML-, SVG- undMathML-Format und wird sehr wahrscheinlich auch in zukünftige Sprachen Eingang fin-den. Es ist jedoch Sache der jeweiligen Spezifikation der betreffenden Sprache, dies zu ent-scheiden. Die Doppelkreuz-ID-Notation (z.B. #lead) funktioniert jedoch in jeder Doku-mentensprache, die ein Attribut besitzt, mit dem die Einmaligkeit innerhalb desDokuments sichergestellt wird. Die Einmaligkeit kann durch ein Attribut namens iderreicht werden oder durch irgendetwas anderes, solange der Inhalt des Attributs perDefinition innerhalb des Dokuments nur ein einziges Mal verwendet wird.

Ein weiterer Unterschied zwischen den bei class und id benutzten Namen besteht darin,dass IDs bei der Ermittlung, welche Stilvorgabe für ein bestimmtes Element verwendetwerden soll, höhere Priorität genießen. Auf dieses Thema werde ich im folgenden Kapitelsehr detailliert eingehen.

Wie Klassen können auch IDs unabhängig von einem bestimmten Element ausgewähltwerden. Es kann passieren, dass Sie wissen, dass ein bestimmter ID-Wert in einem Doku-ment vorkommt, aber nicht, in welchem Element er auftaucht (wie bei den Plutonium-Warnungen). Also möchten Sie ID-Selektoren verwenden, die für sich stehen können.Stellen Sie sich vor, Sie wissen von einem Element mit dem ID-Wert mostImportant. Siewissen aber nicht, ob diese überaus wichtige Sache ein Absatz ist, eine kurze Textpassage,ein Listenelement oder eine Abschnittsüberschrift. Sie wissen nur, dass dieses Element injedem Dokument und nicht öfter als einmal vorkommt. In diesem Fall könnten Sie fol-gende Regel schreiben:

#mostImportant {color: red; background: yellow;}

Diese Regel würde auf die folgenden Elemente passen (die, wie ich bereits zuvor gesagthabe, nicht im gleichen Dokument vorkommen dürfen, da sie den gleichen ID-Wert besit-zen):

<h1 id="mostImportant">This is important!</h1>

<em id="mostImportant">This is important!</em>

<ul id="mostImportant">This is important!</ul>

Attributselektoren | 41

Bedenken Sie bitte auch, dass die ID-Selektoren je nach verwendeter Dokumentenspra-che zwischen Groß- und Kleinschreibung unterscheiden. Für HTML und XHTML istfestgelegt, dass für die Werte von Klassen und IDs zwischen Groß- und Kleinschreibungunterschieden wird. Die Schreibweise der Werte muss also mit derjenigen im Dokumentexakt übereinstimmen. Bei der folgenden Kombination von CSS und HTML wird das Ele-ment demnach nicht fett gedruckt ausgegeben:

p.criticalInfo {font-weight: bold;}

<p class="criticalinfo">Don't look down.</p>

Durch die unterschiedliche Schreibweise des Buchstaben »I« passt der Selektor nicht aufdas gezeigte Element.

Einige ältere Browser unterscheiden nicht zwischen Groß- und Klein-schreibung bei Klassen- und ID-Namen. Zurzeit ist diese Unterscheidungaber bei allen aktuellen Browsern korrekt implementiert.

AttributselektorenBei Klassen- und ID-Selektoren findet die Zuordnung eigentlich anhand der Werte vonAttributen statt. Die in den vorigen zwei Abschnitten verwendete Schreibweise kommtdabei (während dieses Buch geschrieben wird) bei Dokumenten im HTML-, SVG- undMathML-Format zum Einsatz. In anderen Markup-Sprachen stehen diese Klassen- undID-Selektoren vielleicht nicht zur Verfügung. Als Lösung für dieses Problem wurden mitCSS2 so genannte Attributselektoren eingeführt, die in der Lage sind, Elemente anhandihrer Attribute und deren Werten auszuwählen. Es gibt insgesamt vier Arten von Attri-butselektoren.

Attributselektoren werden von Opera und von Gecko-basierten Browsernunterstützt; nicht jedoch von Internet Explorer 5 (Macintosh) bis hin zuInternet Explorer 6 (Windows).

Einfache Auswahl anhand von AttributenWollen Sie Elemente anhand bestimmter Attribute, aber unabhängig von deren Wertenauswählen, so können Sie einen einfachen Attributselektor verwenden. In diesem Beispielsoll der Text aller mit h1 markierten Elemente, die ein class-Attribut mit beliebigem Wertbesitzen, silbergrau eingefärbt werden. Hierfür können Sie Folgendes schreiben:

h1[class] {color: silver;}

Bei folgendem Code erhalten Sie das in Abbildung 2-10 gezeigte Ergebnis.

<h1 class="hoopla">Hello</h1>

<h1 class="severe">Serenity</h1>

<h1 class="fancy">Fooling</h1>


Diese Arbeitsweise ist besonders bei XML-Dokumenten nützlich, da gerade XML-Spra-chen Element- und Attributnamen benutzen, die sich stark an ihrem jeweiligen Zweckorientieren. Nehmen wir als Beispiel eine XML-Sprache, mit der die Planeten des Sonnen-systems beschrieben werden (wir nennen sie PlanetML). Angenommen, Sie wollen alleElemente mit dem Namen planet auswählen, die ein Attribut namens moons besitzen.Diese Elemente sollen in fetter Schrift dargestellt werden, um die Planeten besonders her-vorzuheben, die Monde besitzen. Hierfür können Sie Folgendes schreiben:

planet[moons] {font-weight: bold;}

Durch diese Regel wird der Text des zweiten und dritten Elements im unten stehendenMarkup-Code fett dargestellt, das erste Element jedoch nicht:

<planet>Venus</planet>

<planet moons="1">Earth</planet>

<planet moons="2">Mars</planet>

In HTML-Dokumenten können Sie dieses Merkmal auf eine Vielzahl kreativer Arten ver-wenden. So ist es beispielsweise möglich, allen Bildern mit einem alt-Attribut einebestimmte Stilvorgabe zuzuweisen und so die Bilder hervorzuheben, die korrekt forma-tiert sind:

img[alt] {border: 3px solid red;}

(Dieses Beispiel kann besonders für Diagnosezwecke hilfreich sein, also wenn es darumgeht herauszufinden, ob die Bilder korrekt formatiert sind, und eignet sich weniger fürDesignzwecke.)

Wenn Sie alle Elemente fett darstellen wollen, die ein title-Attribut tragen (die von denmeisten Browsern als eine Art Kurzbeschreibung oder »Tooltip« angezeigt werden, wennder Mauszeiger darüber bewegt wird), könnten Sie Folgendes schreiben:

*[title] {font-weight: bold;}

Auf ähnliche Weise könnten Sie auch alle Anker (a-Elemente), die ein href-Attribut besit-zen, mit einem eigenen Stil versehen.

Abbildung 2-10: Elemente anhand ihrer Attribute auswählen


Es ist auch möglich, die Auswahl von mehr als einem Attribut abhängig zu machen. Dazumüssen Sie nur die entsprechenden Attributselektoren miteinander verketten. Um etwaden Text von Hyperlinks fett darzustellen, die sowohl ein href- als auch ein title-Attri-but besitzen, könnten Sie Folgendes schreiben:

a[href][title] {font-weight: bold;}

Dadurch würde der erste Link fett hervorgehoben, der zweite und der dritte aber nicht:

<a href="http://www.w3.org/" title="W3C Home">W3C</a><br />

<a href="http://www.webstandards.org">Standards Info</a><br />

<a title="Not a link">das ist kein Link</a>

Auswahl basierend auf einem exakten AttributwertZusätzlich zu der Auswahl von Elementen anhand ihrer Attribute können Sie den Aus-wahlprozess auch auf solche Elemente beschränken, deren Attribute einen bestimmtenWert haben. Vielleicht wollen Sie nur Hyperlinks fett hervorheben, die auf einen ganzbestimmten Webserver verweisen. Das sähe dann etwa so aus:

a[href="http://www.css-discuss.org/about.html"] {font-weight: bold;}

Für alle Elemente kann die Kombination beliebiger Attribute und Werte angegeben wer-den. Erscheint diese Kombination jedoch nicht im Dokument, wird der Selektor auch kei-nen Treffer erzielen. Auch von dieser Art der Stildefinition können besonders XML-Sprachen profitieren. Wir wollen nun zu unserem PlanetML-Beispiel zurückkommen. Essollen alle planet-Elemente ausgewählt werden, deren Attribut moons den Wert 1 trägt:

planet[moons="1"] {font-weight: bold;}

Durch diese Regel würde der Text des zweiten Elements in fetter Schrift erscheinen, wäh-rend das erste und dritte Element von der Regel unberührt bleiben:

<planet>Venus</planet>

<planet moons="1">Earth</planet>

<planet moons="2">Mars</planet>

Wie bei der Auswahl anhand der Attribute ist es auch hier möglich, mehrere Attribut-werte anzugeben, um ein ganz bestimmtes Element auszuwählen. Um die Textgröße vonHyperlinks zu verdoppeln, die ein href-Attribut mit dem Wert http://www.w3.org und eintitle-Attribut mit dem Wert W3C Home besitzen, könnten Sie folgende Regel verwenden:

a[href="http://www.w3.org/"][title="W3C Home"] {font-size: 200%;}

Hierdurch wird die Textgröße des ersten Links im unten stehenden Markup-Fragmentverdoppelt, nicht aber die des zweiten oder dritten:

<a href="http://www.w3.org/" title="W3C Home">W3C</a><br />

<a href="http://www.webstandards.org"

title="Web Standards Organization">Standards Info</a><br />

<a href="http://www.example.org/" title="W3C Home">dead.link</a>



Bedenken Sie, dass für dieses Format eine exakte Entsprechung für den Wert des Attri-buts notwendig ist. Das Auffinden der richtigen Treffer wird wichtig, sobald die Wertewiederum durch Leerzeichen getrennte Wertelisten enthalten können (wie beispielsweisedas HTML-Attribut class). Sehen Sie sich hierfür einmal folgendes Markup-Fragmentan:

<planet type="barren rocky">Mercury</planet>

Die einzige Möglichkeit, um dieses Element basierend auf seinem exakten Attributwertzu finden, besteht in folgender Formulierung:

planet[type="barren rocky"] {font-weight: bold;}

Hätten Sie jedoch planet[type="barren"] geschrieben, hätte die Regel unser Beispiel-Markup nicht gefunden und wäre demnach fehlgeschlagen. Das gilt sogar für das HTML-Attribut class. Noch ein Beispiel:



Um dieses Element anhand seines exakten Attributwerts auszuwählen, müssten Sie Fol-gendes schreiben:

p[class="urgent warning"] {font-weight: bold;}

Hierbei handelt es sich nicht um die Punkt-Klasse-Schreibweise, über die wir zuvorgesprochen haben.

Es ist wichtig, zwischen ID-Selektoren und Attributselektoren, die sich auf das id-Attri-but beziehen, korrekt zu unterscheiden. Es gibt einen subtilen, aber schwer wiegendenUnterschied zwischen h1#page-title und h1[id="page-title"], der im folgenden Kapitelerklärt wird.

Auswahl basierend auf partiellen AttributwertenBei allen Attributen, die eine durch Leerzeichen getrennte Wortliste als Wert besitzenkönnen, ist es möglich, die Auswahl vom Vorkommen eines dieser Wörter abhängig zumachen. Auch hier ist das klassische Beispiel das HTML-Attribut class, bei dem mehr alsein Wort als Wert angegeben werden kann. Hier noch einmal unser übliches Beispiel:



Um alle Elemente auszuwählen, deren Attribut class das Wort warning enthält, könnenSie folgenden Selektor verwenden:

Abbildung 2-11: Auswahl von Elementen anhand ihrer Attribute und deren Werten


p[class~="warning"] {font-weight: bold;}

Die Tilde (~) spielt in diesem Selektor eine wichtige Rolle. Sie ist der Schlüssel zur Aus-wahl anhand eines bestimmten Wortes in einer als Attributwert benutzten Wortliste. Las-sen Sie die Tilde weg, haben Sie wieder die Suche nach einem exakten Treffer, wie imvorigen Abschnitt besprochen.

Diese Form des Selektors entspricht der Punkt-Klasse-Schreibweise, die wir bereitsbesprochen haben. Die Formulierungen p.warning und p[class~="warning"] haben diegleiche Bedeutung, wenn sie auf HTML-Dokumente angewendet werden. Wir wolleneinen weiteren Blick auf unser XML-Beispiel von vorhin werfen:

<planet type="barren rocky">Mercury</planet>

<planet type="barren cloudy">Venus</planet>

<planet type="life-bearing cloudy">Earth</planet>

Um alle Elemente, deren Attribut type das Wort barren enthält, kursiv auszugeben,schreiben Sie:

planet[type~="barren"] {font-style: italic;}

Der Selektor dieser Regel passt auf die ersten zwei Elemente im Beispiel-XML-Code undsorgt dafür, dass ihr Text kursiv dargestellt wird (siehe Abbildung 2-12).

Diese Art von Attributselektor kann sogar in HTML nützlich sein. Vielleicht haben Sie einDokument mit Grafiken, von denen aber nur einige als »Abbildungen« gelten. Wenn Sieden Selektor für partielle Werte auf den title-Text anwenden, ist es möglich, nur dieGrafiken auszuwählen, die eine Abbildung enthalten:

img[title~="Abbildung"] {border: 1px solid gray;}

Diese Regel wählt alle Bilder aus, deren title-Text das Wort Abbildung enthält. Solangeder Text im title-Attribut etwas enthält wie »Abbildung 4. Ein glatzköpfiger alter Staats-mann«, wird die obige Regel auf diese Bilder angewendet. Deshalb wird die Regelimg[title~="Abbildung"] auch einen Treffer erzielen, wenn der title-Wert etwa »DerUnterschied zwischen einer Abbildung und einem Schaubild« lautet. Bilder, die keintitle-Attribut besitzen oder deren title-Wert nicht das Wort »Abbildung« enthält, wer-den von der Regel nicht gefunden.

Eine Sonderform des AttributselektorsEs gibt noch eine vierte Art von Attributselektor, der eine gewisse Besonderheit aufweist.Es ist leichter, diesen Selektor zu zeigen, als ihn zu erklären. Nehmen Sie die folgende Regel:

*[lang|="en"] {color: white;}

Abbildung 2-12: Die Auswahl von Elementen basierend auf Teilen des Attributwerts


Diese Regel wählt Elemente aus, deren Attribut lang dem Wert en entspricht oder mit denBuchstaben en beginnt. Dementsprechend würden die ersten drei Elemente aus demunten stehenden Beispiel-Markup ausgewählt, während die letzten beiden nicht beachtetwürden:

<h1 lang="en">Hello!</h1>

<p lang="en-us">Greetings!</p>

<div lang="en-au">G'day!</div>

<p lang="fr">Bonjour!</p>

<h4 lang="cy-en">Jrooana!</h4>

Im Allgemeinen kann die Form [attribut|="wert"] für beliebige Attribute und derenWerte benutzt werden. Nehmen wir einmal an, Sie hätten eine Reihe von Abbildungen ineinem HTML-Dokument, die alle Dateinamen tragen wie abbildung-1.gif und abbildung-3.jpg. Alle diese Bilder können von folgendem Selektor gefunden werden:

img[src|="abbildung"] {border: 1px solid gray;}

Am häufigsten wird dieser Attributselektor verwendet, um auf natürliche Sprachen bezo-gene Werte zu finden, wie wir später in diesem Kapitel sehen werden.

Die Verwendung der DokumentstrukturWie ich bereits erwähnt habe, ist CSS so mächtig, weil es die Struktur von HTML-Doku-menten benutzt, um die passenden Stilvorgaben zu finden und diese anzuwenden. Das istaber nur ein Teil des Ganzen, da CSS die Dokumentstruktur bei weitem nicht nur aufdiese Weise nutzt. Die Struktur spielt eine wesentlich größere Rolle bei der Anwendungvon Stildefinitionen auf ein Dokument. Wir wollen uns jetzt einen Moment Zeit nehmen,um diese Struktur genau zu betrachten, bevor wir uns mit mächtigeren Auswahlmöglich-keiten befassen.

Die Eltern-Kind-Beziehung verstehenUm die Beziehung zwischen Selektoren und Dokumenten zu verstehen, müssen Sie einweiteres Mal untersuchen, wie Dokumente strukturiert sind. Als Beispiel soll uns diesessehr einfache HTML-Dokument dienen:

<html>

<head>

<base href="http://www.meerkat.web/">

<title>Meerkat Central</title>

</head>

<body>

<h1>Meerkat <em>Central</em></h1>

<p>

Welcome to Meerkat <em>Central</em>, the <strong>best meerkat web site

on <a href="inet.html">the <em>entire</em> Internet</a></strong>!</p>

<ul>

<li>We offer:

Die Verwendung der Dokumentstruktur | 47

<ul>

<li><strong>Detailed information</strong> on how to adopt a meerkat</li>

<li>Tips for living with a meerkat</li>

<li><em>Fun</em> things to do with a meerkat, including:

<ol>

<li>Playing fetch</li>

<li>Digging for food</li>

<li>Hide and seek</li>

</ol>

</li>

</ul>

</li>

<li>...and so much more!</li>

</ul>

<p>

Questions? <a href="mailto:[email protected]">Contact us!</a>

</p>

</body>

</html>

Ein großer Teil der Fähigkeiten von CSS basiert auf der Eltern-Kind-Beziehung der Ele-mente. HTML-Dokumente (eigentlich sogar die meisten strukturierten Dokumente)basieren auf einer Hierarchie der Elemente, die am einfachsten durch ein Baumdiagrammdes Dokuments verdeutlicht wird (Abbildung 2-13). In dieser Hierarchie hat jedes Ele-ment seinen Platz in der Gesamtstruktur des Dokuments. Jedes Element ist entweder dasElternelement oder das Kindelement eines anderen Elements und oftmals sogar beides aufeinmal.

Man spricht von einem Elternelement, wenn sich dieses in der Dokumenthierarchiedirekt oberhalb eines anderen Elements befindet. So ist in Abbildung 2-13 das erste p-Ele-ment ein Elternelement für ein em- und ein strong-Element, während strong seinerseitsein Elternelement für ein Anker-Element (a) ist. Der Anker ist wiederum ein Elternele-ment für ein em-Element. Andererseits spricht man von einem Kindelement, wenn dieses

Abbildung 2-13: Die Baumstruktur eines Dokuments


in der Hierarchie direkt unterhalb eines anderen Elements steht. Daraus folgt: Das Anker-Element in Abbildung 2-13 ist ein Kindelement von strong, das wiederum ein Kindele-ment des Absatzes ist und so weiter.

Die Bezeichnungen Eltern und Kind sind spezifische Anwendungen der Begriffe Vorfahreund Nachfahre. Es gibt einen wichtigen Unterschied zwischen diesen beiden Begriffspaa-ren: Wenn sich ein Element genau eine Ebene über oder unter einem anderen Elementbefindet, haben diese beiden Elemente eine Eltern-Kind-Beziehung. Durchläuft der Pfadvon einem Element zu einem anderen jedoch zwei oder mehr Ebenen, haben diese zweiElemente zwar eine Vorfahre-Nachfahre-Beziehung, aber kein Eltern-Kind-Verhältnis.(Selbstverständlich sind Eltern auch Vorfahren und Kinder auch Nachfahren.) InAbbildung 2-13 ist das erste ul-Element ein Elternelement für zwei li-Elemente. Gleich-zeitig ist das ul aber auch ein Vorfahre für alle Elemente, die von seinen li-Elementen»abstammen«, bis hinunter zu den am tiefsten verschachtelten li-Elementen.

In Abbildung 2-13 findet sich außerdem ein Anker-Element, das ein Kindelement vonstrong ist, gleichzeitig aber auch ein Nachfahre des Absatz-Elements (p) sowie der body-und html-Elemente. Das Element body ist ein Vorfahre für alles, was der Browser stan-dardmäßig anzeigt; das Element html ist der Vorfahre für das gesamte Dokument. Des-halb wird das Element html auch als Wurzelelement (root element) bezeichnet.

Selektoren für NachfahrenDer erste Vorteil, der sich aus dem Verständnis dieses Modells ergibt, ist die Möglichkeit,Selektoren für Nachfahren (auch als Kontext-Selektoren bezeichnet) zu definieren. DieDefinition von Selektoren für Nachfahren besteht aus dem Festlegen von Regeln, die nurfür bestimmte hierarchische Strukturen gelten. Als Beispiel wollen wir diejenigen em-Ele-mente mit einer Stildefinition versehen, die von h1-Elementen »abstammen«. Hierfürkönnten Sie jetzt jedes em, das sich innerhalb eines h1-Elements befindet, mit einem class-Attribut versehen. Das wäre aber fast genauso zeitaufwändig wie die Benutzung von font-Tags. Es ist offensichtlich wesentlich effizienter, eine Regel zu definieren, die nur auf em-Elemente angewendet wird, die sich innerhalb von h1-Elementen befinden.

Dazu schreiben Sie Folgendes:

h1 em {color: gray;}

Diese Regel sorgt dafür, dass der gesamte Text eines em-Elements grau dargestellt wird –vorausgesetzt, es handelt sich um einen Nachkommen eines h1-Elements. Andere mit emmarkierte Textteile, die sich etwa in Absätzen oder einem Zitat befinden, werden von die-ser Regel nicht ausgewählt. Abbildung 2-14 verdeutlicht das.

Abbildung 2-14: Die Auswahl eines Elements basierend auf seinem Kontext


Bei einem Selektor für Nachkommen besteht die linke (Selektoren-)Seite aus zwei odermehr durch Leerzeichen getrennten Selektoren. Der Zwischenraum zwischen den beidenSelektoren ist ein Beispiel für einen so genannten Kombinator. Der Leerzeichen-Kombina-tor kann gelesen werden als »zu finden innerhalb von« oder »ist Teil von« oder auch »istein Nachfahre von«, aber nur, wenn Sie die Regel von rechts nach links lesen. Die Formu-lierung h1 em lautet also übersetzt: »Ein beliebiges em-Element, das ein Nachfahre eines h1-Elements ist«. (Um den Selektor andersherum zu lesen, könnten Sie etwa sagen »Beijedem h1, das em-Elemente enthält, sollen die folgenden Stilvorgaben für em verwendetwerden«.)

Hierbei sind Sie selbstverständlich nicht auf zwei Selektoren beschränkt, wie hier gezeigt:

ul ol ul em {color: gray;}

Wie in Abbildung 2-15 zu sehen, werden mit dieser Regel em-Elemente grau dargestellt,sofern sie Teil einer ungeordneten Liste sind, die ihrerseits Teil einer geordneten Liste ist,die wiederum Teil einer ungeordneten Liste ist (ja, das stimmt schon so). Das ist offen-sichtlich ein sehr spezielles Auswahlkriterium.

Selektoren für Nachfahren können sehr mächtig sein. Sie ermöglichen Dinge, die inHTML nie möglich waren – zumindest nicht ohne Unmengen von font-Tags. Lassen Sieuns ein häufig vorkommendes Beispiel betrachten: Stellen Sie sich vor, Sie haben einDokument mit einer Seitenleiste und einem Hauptbereich. Die Seitenleiste hat einenblauen Hintergrund, während der Hauptteil einen weißen Hintergrund hat; in beidenbefinden sich Links. Sie können nicht einfach alle Links blau einfärben, weil die Links inder Seitenleiste dadurch unlesbar würden.

Die Lösung lautet: Selektoren für Nachfahren. In diesem Fall weisen Sie der Tabellen-zelle, in der sich Ihre Seitenleiste befindet, die Klasse sidebar zu, während dem Hauptbe-reich die Klasse main zugewiesen wird. Nun können Sie folgende Stildefinitionenverwenden:

td.sidebar {background: blue;}

td.main {background: white;}

td.sidebar a:link {color: white;}

td.main a:link {color: blue;}

Das Ergebnis sehen Sie in Abbildung 2-16.

Abbildung 2-15: Ein sehr spezieller Selektor für Nachfahren


Die Bezeichnung :link bezieht sich auf Ressourcen, die noch nicht besuchtwurden. Wir werden uns später in diesem Kapitel genauer damit befassen.

Hier ein weiteres Beispiel: Nehmen wir an, Sie wollen allen Text innerhalb von b-Elemen-ten grau einfärben, der sich innerhalb von blockquote-Tags oder normalen Absätzenbefindet:

blockquote b, p b {color: gray;}

Als Ergebnis werden b-Elemente, die von Absätzen oder blockquotes abstammen, graudargestellt.

Ein leicht zu übersehender Aspekt der Selektoren für Nachfahren besteht darin, dass diebeiden Elemente im Prinzip unendlich weit voneinander entfernt sein können. Wenn Siebeispielsweise ul em schreiben, wählt diese Schreibweise jedes em-Element aus, das voneinem ul-Element abstammt, egal wie tief verschachtelt em hierbei ist. Deshalb würde dieFormulierung ul em auch das em im folgenden Markup-Beispiel finden:

<ul>

<li>Listenelement 1

<ol>

<li>Listenelement 1-1</li>


<li>Listenelement 1-3

<ol>

<li>Listenelement 1-3-1</li>

<li>Listenelement <em>1-3-2</em></li>

<li>Listenelement 1-3-3</li>

</ol></li>


</ol></li>

</ul>

Kindelemente auswählenIn manchen Fällen ist es nicht wünschenswert, ein beliebiges abstammendes Element aus-zuwählen. Stattdessen wollen Sie den Auswahlbereich nur auf direkte Nachkommen, also

Abbildung 2-16: Die Verwendung von Selektoren für Nachfahren, um gleichartigen Elementen verschiedene Stile zuzuweisen


Kindelemente, einschränken. So soll hier nur dann ein strong-Element ausgewählt wer-den, wenn es ein Kindelement (also kein einfacher Nachfahre) eines h1-Elements ist. Hier-für verwenden Sie das Kombinatorzeichen für Kindselektoren, das Größer-als-Zeichen (>):

h1 > strong {color: red;}

Aufgrund der oben stehenden Regel wird das strong-Element innerhalb der ersten h1-Zeile rot eingefärbt, nicht aber das in der zweiten Zeile:

<h1>This is <strong>very</strong> important.</h1>

<h1>This is <em>really <strong>very</strong></em> important.</h1>

Von rechts nach links gelesen, bedeutet dieser Selektor: »Wähle strong-Elemente, dieKindelemente eines h1-Elements sind.« Der Kind-Kombinator kann optional von Leerzei-chen umgeben sein. Die Schreibweise h1 > strong ist also gleichbedeutend mit h1> strongund h1>strong. Sie können Leerzeichen nach eigenem Belieben benutzen oder weglassen.

Wenn wir noch einmal einen Blick auf die Baumstruktur des Dokuments werfen, wirdschnell klar, dass ein Kindselektor seine Treffer auf Elemente beschränkt, die im Baumdirekt miteinander verbunden sind. In Abbildung 2-17 sehen Sie einen Teil eines Doku-mentbaums.

In diesem Baumfragment lassen sich leicht die Eltern-Kind-Beziehungen erkennen. So ista ein Elternelement für strong, aber gleichzeitig Kindelement für das p-Element. Auf dieseElemente würden daher die Selektoren p > a und a > strong passen, nicht aber p > strong,weil strong zwar ein Nachfahre von p ist, aber nicht dessen Kind.

Kombinatoren für Nachfahren und Kindelemente können übrigens im gleichen Selektorgemeinsam verwendet werden. table.summary td > p sorgt also für die Auswahl von p-Ele-menten, die Kindelemente eines td-Elements sind. Hierbei muss td von einem table-Ele-ment abstammen, dessen Attribut class das Wort summary enthält.

Benachbarte Geschwisterelemente auswählenNehmen wir an, Sie wollen einen Stil für einen Absatz definieren, der direkt auf eineÜberschrift folgt, oder eine Liste mit einem besonderen Rand versehen, wenn diese direktauf einen Absatz folgt. Um ein Element auszuwählen, das direkt auf ein anderes Elementfolgt und dabei vom gleichen Elternelement abstammt, benutzen Sie das Kombinatorzei-chen für Selektoren für benachbarte Elemente (adjacent sibling combinator), das als ein

Abbildung 2-17: Ein Teil eines Dokumentbaums


Pluszeichen (+) dargestellt wird. Wie beim Kindselektor-Kombinatorzeichen, könnenlinks und rechts des Zeichens beliebig viele Leerzeichen eingefügt werden.

Um den oberen Rand von einem Absatz zu entfernen, der direkt auf ein h1-Element folgt,schreiben Sie:

h1 + p {margin-top: 0;}

Dieser Selektor liest sich: »Wähle einen beliebigen Absatz aus, der direkt auf ein h1-Ele-ment folgt, das das gleiche Elternelement wie der Absatz besitzt.«

Um sich leichter vorstellen zu können, wie dieser Selektor funktioniert, ist es auch hieram einfachsten, sich einen Teil des Dokumentbaums anzusehen (siehe Abbildung 2-18).

In diesem Fragment stammen eine geordnete und eine ungeordnete Liste von einem div-Element ab. Beide Listen enthalten jeweils drei Elemente. Beide Listen haben ein nach-barschaftliches Verhältnis und dabei das gleiche Elternelement. Genauso verhält es sichmit den einzelnen Einträgen der beiden Listen, die ebenfalls benachbarte Kinder gleicherEltern sind. Dagegen sind die Einträge der ersten Liste keine benachbarten Geschwisterder Einträge der zweiten Liste, da sie verschiedene Eltern haben. (Sie sind höchstens Cou-sins oder Cousinen.)

Bedenken Sie, dass Sie nur das zweite von zwei benachbarten Geschwistern mit einemeinzelnen Kombinator auswählen können. Wenn Sie also li + li {font-weight: bold;}schreiben, werden nur der zweite und der dritte Listeneintrag fett dargestellt (sieheAbbildung 2-19).

Um richtig zu funktionieren, verlangt CSS, dass die beiden Elemente in »Quellcode-Rei-henfolge« aufgeführt werden. In unserem Beispiel folgt ein ul- auf ein ol-Element. Sie

Abbildung 2-18: Ein weiteres Dokumentbaum-Fragment

Abbildung 2-19: Benachbarte Geschwister auswählen

Pseudoklassen und Pseudoelemente | 53

könnten das zweite Element daher mit der Formulierung ol + ul auswählen, aber nichtdas erste. Um mit der Schreibweise ul + ol einen Treffer zu erzielen, müsste eine geord-nete Liste direkt auf eine ungeordnete Liste folgen.

Steht zwischen zwei benachbarten Kindelementen Text, so verhindert dieser nicht, dassdas Kombinatorzeichen für Selektoren für benachbarte Elemente funktioniert. Sehen Siesich einmal folgendes Markup-Fragment an, dessen Baumansicht Abbildung 2-18 ent-spricht:

<div>

<ol>

<li>Eintrag 1</li>

<li>Eintrag 1</li>

<li>Eintrag 1</li>

</ol>

Hier etwas Text, der Teil des 'div'-Elements ist.

<ul>

<li>Ein Listenelement</li>

<li>noch ein Listenelement</li>

<li>und noch ein weiteres Listenelement</li>

</ul>

</div>

Obwohl sich zwischen den beiden Listen Text befindet, kann die zweite Liste mit demSelektor ol + ul gefunden werden, weil der Text nicht in einem eigenen Kindelementsteht, sondern Teil des Elternelements div ist. Hätten Sie den Text in einen eigenenAbsatz gepackt, würde die Schreibweise ol + ul nicht funktionieren. Stattdessen bräuch-ten Sie nun eine Formulierung wie ol + p + ul.

Wie das folgende Beispiel zeigt, kann der Nachbarschafts-Kombinator mit anderen Kom-binatoren gemeinsam verwendet werden:

html > body table + ul{margin-top: 1.5em;}

Dieser Selektor liest sich: »Wähle ein ul-Element, das direkt auf ein benachbartes table-Element folgt, das von einem body-Element abstammt, welches wiederum ein direkterNachkomme (Kind) eines html-Elements ist.«

Internet Explorer für Windows inklusive der Version IE6 (die beim Schrei-ben dieses Buches aktuellste Version) bietet keine Unterstützung für Kind-und Nachbarschaftsselektoren.

Pseudoklassen und PseudoelementeRichtig interessant werden die Dinge erst mit Selektoren für Pseudoklassen und Pseudo-elemente. Mit diesen Selektoren können Sie Stildefinitionen auf Strukturen zuweisen, dienicht unbedingt im Dokument vorkommen müssen, oder auch auf Phantomklassen, dievom Zustand bestimmter Elemente oder sogar vom Zustand des Dokuments selbst


abhängen. Anders gesagt, werden die Stile, basierend auf etwas anderem als der Strukturdes Dokuments, auf Teile des Dokuments angewendet. Die Art der Anwendung kannhierbei nicht durch ein Studium des Dokument-Markup abgeleitet werden.

Das klingt, als ob ich Stile jetzt nach dem Zufallsprinzip anwenden wollte; das ist abernicht der Fall. Stattdessen richtet sich die Zuweisung der Stildefinitionen nach anderen,flüchtigen Bedingungen, die sich nicht voraussagen lassen. Allerdings sind die Umständesehr genau definiert, unter denen die Stildefinitionen auftauchen. Stellen Sie sich das sovor: Immer wenn während eines Fußballspiels die Heimatmannschaft ein Tor schießt,werden die Fans jubeln. Sie wissen aber nicht genau, wann das passiert, sondern nur, dassdie Fans wie vorausgesagt jubeln werden.

Selektoren für PseudoklassenLassen Sie uns mit den Selektoren für Pseudoklassen beginnen, für die es eine bessereBrowser-Unterstützung gibt und die daher auch häufiger benutzt werden.

Für dieses Beispiel benutzen wir ein Anker-Element (a), das in HTML und XHTML einenLink von einem Dokument zu einem anderen herstellt. Manche Anker beziehen sich aufSeiten, die bereits besucht wurden, während andere Anker auf Seiten zeigen, die erst nochbesucht werden müssen. Durch ein einfaches Betrachten des HTML-Codes lässt sichjedoch kein Unterschied feststellen; alle Anker haben das gleiche Aussehen. Die einzigeMöglichkeit, um festzustellen, welche Links bereits besucht wurden, besteht darin, siemit den Links im »Verlauf« des Browsers zu vergleichen. Es gibt also zwei grundsätzlicheArten von Ankern: besuchte und nicht besuchte. Diese Typen werden als Pseudoklassenbezeichnet und die dazugehörigen Selektoren heißen Pseudoklassen-Selektoren.

Um diese Klassen und Selektoren besser zu verstehen, sollten Sie sich vor Augen führen,wie Browser sich bezüglich Links verhalten. Nach den Konventionen von Mosaic wurdeeinmal festgelegt, dass Seiten, die noch nicht besucht wurden, blau markiert werden sol-len, während bereits besuchte Links rot angezeigt werden sollten (in späteren Browsernwie Internet Explorer wurde aus Rot Lila). Wenn Sie jetzt eigene Klassen für die unter-schiedlichen Anker hätten, könnten Sie festlegen, dass Links der Klasse »besucht« (visi-ted) rot eingefärbt werden sollen:

a.visited {color: red;}

<a href="http://www.w3.org/" class="visited">W3C Website</a>

Dieser Ansatz erfordert allerdings, dass die Klassen für die Anker sich jedes Mal verän-dern, sobald Sie eine neue Seite besucht haben, was ein wenig albern ist. Stattdessen defi-niert CSS Pseudoklassen, die dafür sorgen, dass Anker für besuchte Seiten sich verhalten,als gehörten sie der Klasse »besucht« an:

a:visited {color: red;}

Jetzt wird jeder Anker, der auf eine besuchte Seite verweist, rot eingefärbt, ohne dass Siedie Anker mit class-Attributen versehen müssten. Beachten Sie den als Trennzeichen ver-


wendeten Doppelpunkt (:) zwischen a und visited, der für die Kennzeichnung von Pseu-doklassen und Pseudoelementen verwendet wird.

Pseudoklassen für Links

In CSS2.1 werden zwei Pseudoklassen definiert, die sich ausschließlich auf Hyperlinksbeziehen. In HTML sowie XHTML 1.0 und 1.1 sind dies alle a-Elemente, die ein href-Attribut besitzen; in XML-Sprachen wären dies alle Elemente, die als Link auf eine andereRessource verwendet werden. Diese beiden Pseudoklassen werden in Tabelle 2-1beschrieben.

Die erste der beiden Pseudoklassen in Tabelle 2-1 kommt Ihnen vielleicht redundant vor.Schließlich ist ein Anker, der noch nicht besucht wurde, offensichtlich »unbesucht«,oder? Wenn das der Fall ist, bräuchten wir eigentlich nur etwas wie das hier:

a {color: blue;}

a:visited {color: red;}

Auch wenn dieses Format auf den ersten Blick völlig ausreichend erscheint, ist es das abernicht. Die erste hier gezeigte Regel bezieht sich nämlich nicht nur auf unbesuchte Links,sondern verweist auch auf Anker wie den folgenden:

<a name="section4">4. The Lives of Meerkats</a>

Der ausgegebene Text würde blau eingefärbt, weil die Regel a {color: blue;} auch auf daseinfache Element a zutrifft. Um zu vermeiden, dass Ihre Stildefinitionen auch auf Ankerangewendet werden, die keine Hyperlinks sind, benutzen Sie die Pseudoklasse :link.

a:link {color: blue;} /* unbesuchte Links sind blau */

a:visited {color: red;} /* besuchte Links sind rot */

Vermutlich ist es Ihnen schon aufgefallen: Die Pseudoklassen :link und :visited habendie gleiche Funktion wie die body-Attribute link und vlink. Nehmen wir an, ein Autormöchte die Anker unbesuchter Seiten lila und die Anker für besuchte Seiten silbergraudarstellen lassen. In HTML 3.2 könnte er das so angeben:

<body link="purple" vlink="silver">

In CSS erreichen Sie den gleichen Effekt mit:

a:link {color: purple;}

a:visited {color: silver;}

Tabelle 2-1: Pseudoklassen für Links

Name Beschreibung

:link Bezieht sich auf Anker, die als Hyperlink benutzt werden (d.h. ein href-Attribut besitzen) und noch nicht besucht wurden. Vorsicht: Manche Browser beziehen :link fälschlicherweise auf beliebige Hyperlinks, besucht oder nicht.

:visited Bezieht sich auf Anker, die als Hyperlink verwendet werden und auf eine bereits besuchte Adresse verweisen.


Im Fall der CSS-Pseudoklassen können Sie selbstverständlich wesentlich mehr ändern alsnur die Farben. Vielleicht wollen Sie besuchte Links kursiv darstellen, die neben ihrer sil-bergrauen Farbe auch noch durchgestrichen werden sollen, wie in Abbildung 2-20 gezeigt.

Dafür benötigen Sie nur die folgende Regel:

a:visited {color: silver; text-decoration: line-through; font-style: italic;}

Diese Stelle bietet sich an, um einen weiteren Blick auf die Klassenselektoren zu werfenund zu zeigen, wie diese mit Pseudoklassen gemeinsam verwendet werden können. Viel-leicht wollen Sie die Farbe von Links ändern, die auf Seiten außerhalb Ihrer eigenen Web-site verweisen. Wenn Sie jeden dieser Anker mit einem Klassenattribut versehen, ist daseinfach:

<a href="http://www.mysite.net/">My home page</a>

<a href="http://www.site.net/" class="external">Another home page</a>

Um dem externen Link einen eigenen Stil zuzuweisen, brauchen Sie nur eine Regel wiediese hier:

a.external:link, a.external:visited {color: maroon;}

Diese Regel färbt den zweiten Link im obigen Markup-Code rotbraun ein, während dererste Anker die Standardfarbe für Hyperlinks behält (üblicherweise Blau).

Die gleiche allgemeine Schreibweise wird auch für ID-Selektoren benutzt:

a#footer-copyright:link{font-weight: bold;}

a#footer-copyright:visited {font-weight: normal;}

Obwohl :link und :visited sehr nützlich sind, bleiben sie statisch, d.h., nachdem einDokument einmal angezeigt wurde, ändern sie den Stil eines Dokuments nicht mehr. InCSS2.1 gibt es jedoch einige Pseudoklassen, die nicht ganz so statisch sind und mit denenwir uns als Nächstes befassen wollen.

Dynamische Pseudoklassen

CSS2.1 definiert drei Pseudoklassen, die das Erscheinungsbild eines Dokuments als Reak-tion auf bestimmte Aktionen des Benutzers verändern können. Diese dynamischen Pseu-doklassen wurden traditionell dazu verwendet, um Hyperlinks mit Stilinformationen zuversehen; ihre Möglichkeiten sind jedoch noch wesentlich weiter gefasst. In Tabelle 2-2finden Sie eine Aufstellung dieser Pseudoklassen.

Abbildung 2-20: Mehrere Stildefinitionen auf einen besuchten Link anwenden


Wie :link und :visited sind diese Pseudoklassen am beliebtesten im Zusammenhangmit Hyperlinks. Viele Webseiten benutzen Stildefinitionen wie diese:

a:link {color: navy;}

a:visited {color: gray;}

a:hover {color: red;}

a:active {color: yellow;}

Die ersten beiden Regeln verwenden Pseudoklassen für Links, während die letzten beidenmit dynamischen Pseudoklassen arbeiten. :active verhält sich hierbei analog zum Attri-but alink in HTML 3.2. Bei der Verwendung der Pseudoklasse können Sie aktiven Linksauf diese Weise neben einer anderen Farbe eine beliebige Anzahl eigener Stildefinitionenzuweisen.

Die Reihenfolge der Pseudoklassen ist wichtiger, als es auf den ersten Blickscheint. Die übliche Empfehlung lautet »link-visited-hover-active«, wurdeaber inzwischen geändert in »link-visited-focus-hover-active«. Das kom-mende Kapitel erklärt, warum diese Reihenfolge so wichtig ist, und zeigtauf, warum Sie die empfohlene Reihenfolge vielleicht ändern oder sogarkomplett ignorieren wollen.

Die dynamischen Pseudoklassen können übrigens auf beliebige Elemente angewendetwerden. Das ist besonders praktisch, wenn Sie dynamische Stile vielleicht auch für Ele-mente benutzen möchten, die keine Links sind. Nehmen wir beispielsweise folgendeRegel:

input:focus {background: silver; font-weight: bold;}

Mit diesem Code können Sie ein Formularelement hervorheben, das bereit ist, Tastatur-eingaben entgegenzunehmen, wie in Abbildung 2-21 gezeigt.

Tabelle 2-2: Dynamische Pseudoklassen

Name Beschreibung

:focus Bezieht sich auf ein Element, das gerade den Eingabefokus besitzt. Das heißt, das Element kann Eingaben von der Tastatur entgegennehmen oder sonst wie aktiviert werden.

:hover Bezieht sich auf ein Element, über dem gerade der Mauszeiger platziert wurde, z. B. ein Hyperlink, über dem sich gerade der Cursor befindet.

:active Bezieht sich auf ein Element, das durch eine Benutzereingabe aktiviert wurde, z. B. einen Hyperlink, auf den ein Benutzer gerade klickt, während die Maustaste heruntergedrückt ist.

Abbildung 2-21: Ein Formularelement hervorheben, das gerade den Fokus hat


Durch die Anwendung von Pseudoklassen auf beliebige Elemente lassen sich auch einigeseltsame Dinge anstellen. Vielleicht möchten Sie Ihre Leser durch folgenden Code miteinem Hervorhebungseffekt überraschen:

body *:hover {background: yellow;}

Dadurch wird jedes Element, das vom body-Element abstammt, mit einem gelben Hinter-grund versehen, sobald Sie mit dem Mauszeiger darüber fahren (»hover«) – das betrifftÜberschriften, Absätze, Listen, Tabellen, Bilder und alles andere, was sich im body befin-det. Sie könnten auch den Schrifttyp ändern, das Element, über dem sich der Cursorbefindet, mit einem Rahmen versehen oder was auch immer Ihr Browser Sie tun lässt.

Internet Explorer für Windows inklusive der Version IE6 (beim Schreibendieses Buches die aktuellste Version) gestattet die Verwendung von dyna-mischen Pseudoklassen nur für Hyperlinks.

Dynamische Stildefinitionen im wahren Leben

Dynamische Pseudoklassen bringen einige interessante Eigenwilligkeiten mit sich. So istes beispielsweise möglich, besuchten und unbesuchten Links die gleiche Schriftgrößezuzuweisen, während Links, über denen sich der Mauszeiger befindet, größer dargestelltwerden (siehe Abbildung 2-22):

a:link, a:visited {font-size: 13px;}

a:hover {font-size: 20px;}

Wie Sie sehen, verändert der Browser die Textgröße eines Ankers, während sich derMauszeiger über dem Link befindet. Ein Browser, der dieses Verhalten unterstützt, musshierfür das Dokument neu aufbauen, während sich ein Anker im hover-Zustand befindet.Dadurch werden unter Umständen alle Elemente neu angeordnet, die auf den Link fol-gen.

In den CSS-Spezifikationen ist jedoch festgelegt, dass von User Agents nicht erwartetwird, dass sie ein Dokument neu darstellen müssen, nachdem es einmal für die Anzeigeaufbereitet wurde. Sie können sich also nicht darauf verlassen, dass der von Ihnengewünschte Effekt auch tatsächlich ausgeführt wird. Ich empfehle Ihnen, Designs, diesich auf ein solches Verhalten stützen, auf jeden Fall zu vermeiden.

Abbildung 2-22: Das Layout mit dynamischen Pseudoklassen ändern


Das erste Kindelement auswählen

Eine weitere statische Pseudoklasse namens :first-child wird verwendet, um Elementeauszuwählen, die man als »Erstgeborene« eines anderen Elements bezeichnen könnte.Diese Pseudoklasse wird leicht missverstanden, daher werden wir ihr ein umfangreichesBeispiel widmen. Sehen Sie sich dazu den folgenden Markup-Code an:

<div>

<p>These are the necessary steps:</p>

<ul>

<li>Insert key</li>

<li>Turn key <strong>clockwise</strong></li>

<li>Push accelerator</li>

</ul>

<p>

Do <em>not</em> push the brake at the same time as the accelerator.

</p>

</div>

In diesem Beispiel sind die ersten Kindelemente das erste p, das erste li sowie die Ele-mente strong und em. Durch die Anwendung folgender Regeln

p:first-child {font-weight: bold;}

li:first-child {text-transform: uppercase;}

erhalten Sie das in Abbildung 2-23 gezeigte Ergebnis.

Die erste Regel gibt jedes p-Element fett aus, das das erste Kindelement eines anderen Ele-ments ist. Die zweite Regel gibt alle li-Elemente in Großbuchstaben aus, die erste Kind-elemente eines anderen Elements sind (in HTML also entweder ein ol- oder ein ul-Element).

Der häufigste Fehler besteht in der Verwendung eines Selektors wie p:first-child, umdas erste Kindelement eines p-Elements auszuwählen. Vergessen Sie dabei nicht die Naturder Pseudoklassen, die eine Art »Phantomklasse« für das mit ihnen verbundene Elementvergeben. Fügen Sie dem Code ein tatsächliches Klassenattribut hinzu, ergibt sich Folgen-des:

<div>

<p class="first-child">These are the necessary steps:</p>

<ul>

<li class="first-child">Insert key</li>

Abbildung 2-23: Stildefinitionen für erste Kindelemente


<li>Turn key <strong class="first-child">clockwise</strong></li>

<li>Push accelerator</li>

</ul>

<p>

Do <em class="first-child">not</em> push the brake at the same time as the accelerator.

</p>

</div>

Wenn Sie also ein em-Element auswählen möchten, das das erste Kindelement eines ande-ren Elements ist, so schreiben Sie em:first-child. Mit diesem Selektor können Sie bei-spielsweise den ersten Eintrag einer Liste mit einem besonderen Stil versehen oder denersten Absatz eines div-Elements oder auch das erste td-Element in einer Tabellenspalte.

Internet Explorer für Windows inklusive der Version IE6 (beim Schreibendieses Buches die aktuellste Version) bietet keine Unterstützung für:first-child.

Sprachbasierte Auswahl

Für die Auswahl eines Elements anhand seiner Sprache gibt es die Pseudoklasse :lang( ).Was die Mustererkennung angeht, verhält sich :lang( ) genau wie der Attributselektor|=. Um beispielsweise alle französischsprachigen Elemente kursiv darzustellen, könnenSie die folgende Regel verwenden:

*:lang(fr) {font-style: italic;}

Der wesentliche Unterschied zwischen dem Pseudoselektor und dem Attributselektorbesteht darin, dass die Information über die verwendete Sprache aus verschiedenen Quel-len stammen kann, die sich auch außerhalb des Dokuments befinden können. Die Spezi-fikation von CSS2.1 sagt hierzu:

In HTML wird die Sprache durch eine Kombination des Attributs »lang«, dem META-Ele-ment und möglicherweise Informationen aus dem Übertragungsprotokoll (wie beispiels-weise einem HTTP-Header) ermittelt. XML benutzt das Attribut xml:lang. Und es kannnoch andere für die Dokumentensprache spezifische Methoden geben, nach denen die Spra-che ermittelt wird.

Aus diesem Grund ist die Verwendung der Pseudoklasse etwas verlässlicher als der Attri-butselektor und in den meisten Fällen, in denen sprachspezifische Stildefinitionen benö-tigt werden, die bessere Wahl.

Pseudoklassen kombinieren

Seit der Einführung von CSS2.1 können Sie mehrere Pseudoklassen in einem Selektorzusammenfassen. So ist es möglich, unbesuchte Links rot einzufärben, wenn der Maus-zeiger sich darüber befindet, während bereits besuchte Links rotbraun dargestellt wer-den:

a:link:hover {color: red;}

a:visited:hover {color: maroon;}


In diesem Fall spielt die Reihenfolge keine Rolle. Sie könnten also auch a:hover:linkschreiben, um den gleichen Effekt zu erzielen. Es ist auch möglich, Links (besuchte undunbesuchte), über denen sich der Mauszeiger befindet, abhängig von der Sprache einzu-färben, zum Beispiel Deutsch:

a:link:hover:lang(de) {color: gray;}

a:visited:hover:lang(de) {color: silver;}

Passen Sie aber auf, dass Sie keine Pseudoklassen kombinieren, die einander ausschlie-ßen. Ein Link kann beispielsweise nicht gleichzeitig »besucht« und »unbesucht« sein. DerSelektor a:link:visited hat also keinen Sinn. Ein derartiger Selektor (und damit diegesamte Regel) wird normalerweise von User Agents ignoriert.

Internet Explorer für Windows inklusive der Version IE6 (beim Schreibendieses Buches die aktuellste Version) erkennt kombinierte Pseudoklassennicht korrekt. Wie bei den Kombinationen aus Klasse und Wert wird statt-dessen nur die letzte der kombinierten Pseudoklassen beachtet. Bei einemSelektor wie a:link:hover wird demnach zwar der :hover-Teil beachtet,nicht aber der :link-Teil des Selektors.

Selektoren für PseudoelementeSo wie Pseudoklassen Anker mit fiktiven Klassenattributen versehen, fügen Pseudoele-mente fiktive Elemente in ein Dokument ein, um bestimmte Effekte zu erzielen. In CSS2.1 werden vier Pseudoelemente definiert: Stilangaben für den ersten Buchstaben (first-let-ter), die erste Zeile (first-line) und Stilangaben vor (before) und nach (after) bestimmtenElementen.

Stilangaben für den ersten Buchstaben

Das erste Pseudoelement versieht nur den ersten Buchstaben eines Block-Elements miteiner eigenen Stildefinition:

p:first-letter {color: red;}

Durch diese Regel wird der erste Buchstabe jedes Absatzes rot dargestellt. Alternativ dazukönnen Sie auch den ersten Buchstaben jeder mit h2 markierten Überschrift doppelt sogroß darstellen wie den Rest:

h2:first-letter {font-size: 200%;}


Abbildung 2-24: Das Pseudoelement :first-letter in Aktion


Wie ich bereits gesagt habe, erzeugt der User Agent durch diese Regel ein fiktives Ele-ment, das den ersten Buchstaben jedes h2-Elements umgibt. In HTML würde das etwa soaussehen:

<h2><h2:first-letter>D</h2:first-letter>ies ist ein h2-Element</h2>

Die Stildefinitionen von :first-letter werden nur auf das im Beispiel gezeigte Elementangewendet. Das Element <h2:first-letter> erscheint nicht im Quellcode des Doku-ments. Stattdessen wird es spontan vom Browser zum Leben erweckt und benutzt, umanschließend die mit :first-letter definierten Stilvorgaben auf die entsprechendenTextteile anzuwenden. Anders gesagt: <h2:first-letter> ist ein Pseudoelement. Sie brau-chen hierfür keinerlei zusätzliche Tags in Ihr Dokument einzufügen; der User Agent erle-digt das für Sie.

Stildefinitionen für die erste Zeile

Auf ähnliche Weise kann :first-line benutzt werden, um die erste Textzeile eines Ele-ments mit einer eigenen Stilvorgabe zu versorgen. Vielleicht möchten Sie die erste Zeilealler Absätze in Ihrem Dokument lila einfärben:

p:first-line {color: purple;}

In Abbildung 2-25 wird die Stildefinition auf die erste Zeile des angezeigten Textes jedesAbsatzes angewendet. Das geschieht unabhängig von der tatsächlichen Darstellungs-breite. Enthält die erste Zeile nur fünf Wörter, werden auch nur diese fünf Wörter lila ein-gefärbt. Enthält die erste Zeile die ersten 30 Wörter dieses Elements, werden alle 30Wörter lila eingefärbt.

Um den Text von »Dieser« bis »nur« lila darzustellen, verwendet der User Agent ein fikti-ves Markup, das in etwa so aussieht:

<p><p:first-line>Dieser Absatz enthält Text, für den nur</p:first-line>

ein Stylesheet benutzt wurde. Dieser Stil

sorgt dafür, dass die erste Zeile grau ...

Wenn die erste Textzeile so geändert wird, dass sie nur die ersten fünf Wörter enthält,dann würde das fiktive Tag </p:first-line> so verschoben, dass es direkt nach demWort »für« erscheint.

Abbildung 2-25: Das Pseudoelement :first-line in Aktion


Einschränkungen für :first-letter und :first-line

In CSS2 können die Pseudoelemente :first-letter und :first-line nur auf Block-Ele-mente wie Überschriften (h1, h2 usw.) und Absätze, nicht aber auf Inline-Elemente wiebeispielsweise Hyperlinks angewendet werden. In CSS2.1 wirkt :first-letter auf alleElemente. Zudem gibt es einige Einschränkungen bei den CSS-Eigenschaften, die für:first-letter und :first-line benutzt werden können. Eine Liste dieser Einschränkun-gen sehen Sie in Tabelle 2-3.

Zudem müssen alle Pseudoelemente am Ende des Selektors platziert werden, in dem sieerscheinen. Es ist also nicht erlaubt, Dinge zu schreiben wie p:first-line em, weil dasPseudoelement hier vor dem Subjekt (dem letzten Element der Liste) steht. Die gleicheRegel gilt für die anderen zwei in CSS2.1 definierten Pseudoelemente.

Stildefinitionen vor und nach Elementen

Im nächsten Beispiel wollen wir jedem h2-Element ein Paar silbergrauer eckiger Klam-mern voranstellen, um einen typographischen Effekt zu erzielen:

h2:before {content: "]]"; color: silver;}

Tabelle 2-3: In Pseudoelementen erlaubte Eigenschaften

:first-letter :first-line

Alle font-Eigenschaften

Alle color-Eigenschaften

Alle background-Eigenschaften

Alle margin-Eigenschaften

Alle padding-Eigenschaften

Alle border-Eigenschaften

text-decoration

vertical-align (wenn float den Wert none hat)

text-transform

line-height

float

letter-spacing (neu seit CSS2.1)

word-spacing (neu seit CSS2.1)

clear (nur CSS2; entfernt in CSS2.1)

text-shadow (nur CSS2)

Alle font-Eigenschaften

Alle color-Eigenschaften

Alle background-Eigenschaften

word-spacing

letter-spacing

text-decoration

vertical-align

text-transform

line-height

clear (nur CSS2; entfernt in CSS2.1)

text-shadow (nur CSS2)


Seit CSS2.1 ist es möglich, so genannte generierte Inhalte in das Dokument einzufügenund diese mittels der Pseudoelemente :before und :after direkt mit Stildefinitionen zuversehen. Ein Beispiel sehen Sie in Abbildung 2-26.

Mit Hilfe des Pseudoelements können Sie generierte Inhalte einfügen und mit Stildefiniti-onen versehen. Um Dinge nach einem Element einzufügen, benutzen Sie das Pseudoele-ment :after. Um Ihre Dokumente angemessen zu beenden, wäre folgende Regeldenkbar:

body:after {content: " The End.";}

Generierte Inhalte bilden ein eigenständiges Thema, das (inklusive weiterer Details zu:before und :after) in Kapitel 12 behandelt wird.

ZusammenfassungDie Verwendung von Selektoren, die auf der Sprache des Dokuments basieren, ermög-licht es Autoren, genauso einfach CSS-Regeln aufzustellen, die sich auf eine große Anzahlähnlicher Elemente anwenden lassen, wie Regeln für sehr klar definierte Umstände zudefinieren. Durch die Möglichkeit, Selektoren und Regeln zu gruppieren, können Style-sheets kompakt und flexibel gehalten werden, was wiederum zu kleineren Dateigrößenund so zu schnelleren Download-Zeiten führt.

User Agents müssen in der Lage sein, Selektoren korrekt zu handhaben, denn ohne dieseFähigkeit kann ein Browser nur recht wenig mit CSS anfangen. Andererseits ist es absolutnotwendig, dass Autoren ihre Selektoren korrekt schreiben, da Fehler in den Regeln dafürsorgen, dass ein User Agent die Stile nicht richtig auf das Dokument anwendet. Um Selek-toren und ihre Kombinationsmöglichkeiten richtig zu begreifen, müssen Sie verstehen,wie Selektoren sich auf die Dokumentstruktur beziehen und welche Rolle andere Mecha-nismen, wie Vererbung und die Kaskadierung selbst, bei der Anwendung der Stildefinitio-nen auf das Dokument spielen. Diese Dinge sind das Thema des nächsten Kapitels.

Abbildung 2-26: Generierte Inhalte vor einem Element einfügen

| 65

KAPITEL 3

Struktur und Kaskadierung

In Kapitel 2 haben Sie gesehen, wie die Dokumentstruktur und CSS-Selektoren es Ihnenermöglichen, Elementen eine Vielzahl von Stilen zuzuweisen. Da Sie wissen, dass jedesgültige Dokument einen Strukturbaum besitzt, können Sie Selektoren anlegen, die Ele-mente basierend auf ihren Vorfahren, Attributen, Kindelementen und anderen Dingenauswählen. Der Strukturbaum ist eine Voraussetzung für das korrekte Funktionieren vonSelektoren und gleichzeitig auch notwendig für einen weiteren Aspekt von CSS: Verer-bung.

Durch Vererbung können die Werte mancher Eigenschaften von einem Element an des-sen Nachfahren weitergegeben werden. Um zu ermitteln, welche Werte auf ein bestimm-tes Element angewendet werden sollen, muss der User Agent nicht nur die Vererbungberücksichtigen, sondern auch die Spezifität der einzelnen Deklarationen sowie die Her-kunft der Deklarationen selbst. Diesen Auswahlprozess bezeichnet man als Kaskadie-rung. Wir werden diese drei Mechanismen – Spezifität, Vererbung und Kaskadierung –und ihr Zusammenspiel in diesem Kapitel behandeln.

Egal wie abstrakt Ihnen die Dinge im Moment erscheinen – bleiben Sie dran! Ihre Aus-dauer wird belohnt.

SpezifitätAus Kapitel 2 wissen Sie, dass Elemente mit einer Vielzahl verschiedener Mittel ausge-wählt werden können. Es ist sogar möglich, das gleiche Element mit zwei oder mehrRegeln auszuwählen, die alle ihre eigenen Selektoren verwenden. Werfen wir einmaleinen Blick auf die folgenden drei Regelpaare. Hierbei gehen wir davon aus, dass jedesPaar auf das gleiche Element passt:

h1 {color: red;}

body h1 {color: green;}

h2.grape {color: purple;}

h2 {color: silver;}

66 | Kapitel 3: Struktur und Kaskadierung

html > body table tr[id="totals"] td ul > li {color: maroon;}

li#answer {color: navy;}

Offensichtlich kann nur eine der zwei Regeln in jedem Paar das Rennen machen, da diegefundenen Elemente jeweils nur eine Farbe besitzen können. Wie können Sie aber nunwissen, welche der Regeln gewinnt?

Die Antwort finden Sie in der Spezifität (specificity) der einzelnen Selektoren. Der UserAgent ermittelt für jeden Selektor dessen Spezifität und fügt sie den einzelnen Deklaratio-nen einer Regel hinzu. Gibt es für ein Element zwei widersprüchliche Eigenschaftsdekla-rationen, macht die Deklaration mit der höheren Spezifität das Rennen.

Was die Lösung von Konflikten betrifft, ist das noch nicht alles. Tatsäch-lich werden alle Konflikte durch die Regeln der Kaskadierung aufgelöst,auf die wir später in diesem Kapitel eingehen werden.

Die Spezifität eines Selektors hängt von dessen Bestandteilen ab. Die Spezifität wird invier Teilen ausgedrückt, wie hier gezeigt: 0,0,0,0. Die tatsächliche Spezifität eines Selek-tors wird folgendermaßen ermittelt:

• Erhöhen Sie für jedes im Selektor vorhandene ID-Attribut den Wert nach dem erstenKomma von links um eins: 0,1,0,0.

• Erhöhen Sie für jeden Wert eines Klassenattributs, für jedes Attribut und für jedePseudoklasse im Selektor den Wert nach dem zweiten Komma um eins: 0,0,1,0.

• Erhöhen Sie für jedes Element und Pseudoelement im Selektor den Wert nach demdritten Komma um eins: 0,0,0,1. Bezüglich der Spezifität von Pseudoelementen gabes widersprüchliche Behauptungen in CSS2. CSS2.1 legt nun klar fest, dass Pseudo-elemente tatsächlich eine Spezifität besitzen und wo diese berücksichtigt wird.

• Kombinatoren und der universelle Selektor tragen nicht zur Spezifität eines Selektorsbei (später mehr zu diesen Werten).

Hier ein paar Beispiele für Selektoren und ihre Spezifität:

h1 {color: red;} /* Spezifität = 0,0,0,1 */

p em {color: purple;} /* Spezifität = 0,0,0,2 */

.grape {color: purple;} /* Spezifität = 0,0,1,0 */

*.bright {color: yellow;} /* Spezifität = 0,0,1,0 */

p.bright em.dark {color: maroon;} /* Spezifität = 0,0,2,2 */

#id216 {color: blue;} /* Spezifität = 0,1,0,0 */

div#sidebar *[href] {color: silver;} /* Spezifität = 0,1,1,1 */

Für den Fall, dass ein em-Element sowohl von der zweiten als auch von der fünften Regelgefunden wird, wird dieses Element rotbraun eingefärbt, da die Spezifität der fünftenRegel die der zweiten Regel übersteigt.

Als Übung wollen wir uns noch einmal die Regelpaare von vorhin vornehmen und derenSpezifität feststellen:

Spezifität | 67

h1 {color: red;} /* 0,0,0,1 */

body h1 {color: green;} /* 0,0,0,2 (Gewinner)*/

h2.grape {color: purple;} /* 0,0,1,1 (Gewinner) */

h2 {color: silver;} /* 0,0,0,1 */

html > body table tr[id="totals"] td ul > li {color: maroon;} /* 0,0,1,7 */

li#answer {color: navy;} /* 0,1,0,1 (Gewinner) */

Die Regel mit der höheren Spezifität ist jeweils als »Gewinner« markiert. Beachten Sie dieSortierreihenfolge. Im zweiten Regelpaar gewinnt h2.grape, weil dieser Selektor einenZusatzpunkt ergattern konnte: 0,0,1,1 schlägt 0,0,0,1. Im dritten Paar gewinnt diezweite Regel, weil 0,1,0,1 eine höhere Spezifität darstellt als 0,0,1,7. Aus dem gleichenGrund gewinnt die Spezifitätsangabe 0,0,1,0 auch gegen 0,0,0,13.

Das ist so, weil die Werte von links nach rechts sortiert werden. Eine Spezifität von1,0,0,0 gewinnt immer über eine Spezifität, die mit 0 beginnt, unabhängig davon, wie dieübrigen Zahlen aussehen. 0,1,0,1 hat demnach Vorrang gegenüber 0,0,1,7, weil die 1 ander zweiten Stelle der ersten Spezifitätsangabe die 0 nach dem ersten Komma in der zwei-ten Angabe übertrifft.

Deklarationen und SpezifitätIst die Spezifität eines Selektors einmal ermittelt, wird dieser Wert auf alle verbundenenDeklarationen übertragen. Betrachten Sie folgende Regel:

h1 {color: silver; background: black;}

Aus Gründen der Spezifität muss der User Agent diese Regel behandeln, als würde sie auseiner Reihe von Einzelregeln bestehen. Aus dem obigen Beispiel würde also:

h1 {color: silver;}

h1 {background: black;}

Beide Einzelregeln besitzen eine Spezifität von 0,0,0,1, und das ist auch der Wert, derauf die einzelnen Deklarationen übertragen wird. Der gleiche Aufteilungsprozess findetbei gruppierten Selektoren statt. Die folgende Regel:

h1, h2.section {color: silver; background: black;}

wird vom User Agent folgendermaßen interpretiert:

h1 {color: silver;} /* 0,0,0,1 */

h1 {background: black;} /* 0,0,0,1 */

h2.section {color: silver;} /* 0,0,1,1 */

h2.section {background: black;} /* 0,0,1,1 */

Dieses Vorgehen wird wichtig, wenn mehrere Regeln auf das gleiche Element zutreffenund einige Deklarationen sich widersprechen, wie im folgenden Beispiel:

h1 + p {color: black; font-style: italic;} /* 0,0,0,2 */

p {color: gray; background: white; font-style: normal;} /* 0,0,0,1 */

*.aside {color: black; background: silver;} /* 0,0,1,0 */


Wenn diese Regeln auf den folgenden Code angewendet werden, erhalten Sie die inAbbildung 3-1 gezeigte Darstellung:

<h1>Greetings!</h1>

<p class="aside">

It’s a fine way to start a day, don’t you think?

</p>

<p>

There are many ways to greet a person, but the words are not as important as the act of

greeting itself.

</p>

<h1>Salutations!</h1>

<p>

There is nothing finer than a hearty welcome from one's fellow man.

</p>

<p class="aside">

Although a thick and juicy hamburger with bacon and mushrooms runs a close second.

</p>

In allen Fällen ermittelt der User Agent, welche Regeln auf ein Element zutreffen, berech-net die dazugehörigen Deklarationen und deren Spezifität und stellt so fest, welche Regelschließlich angewendet werden soll, um das Element mit Stilen zu versehen. DieseBerechnungen müssen für jedes Element, jeden Selektor und jede Deklaration vorgenom-men werden. Zum Glück erledigt der User Agent diese Aufgabe automatisch. Dieses Ver-halten ist ein wichtiger Bestandteil der Kaskadierung, auf die wir später in diesem Kapiteleingehen werden.

Spezifität des universellen SelektorsWie bereits erwähnt, trägt der universelle Selektor nicht zur Bestimmung der Spezifitäteines Selektors bei. Anders gesagt: Seine Spezifität beträgt 0,0,0,0, was etwas anderes istals »keine Spezifität« (wie wir im folgenden Abschnitt »Vererbung« sehen werden). Dem-nach wird nach den folgenden zwei Regeln ein Absatz, der von einem div-Elementabstammt, schwarz dargestellt, während alle anderen Elemente grau erscheinen:

Abbildung 3-1: Die Auswirkungen widersprüchlicher Regeln auf ein Dokument

Spezifität | 69

div p {color: black;} /* 0,0,0,2 */

* {color: gray;}g/* 0,0,0,0 */

Wie erwartet, wird die Spezifität eines Selektors durch die Anwesenheit des universellenSelektors nicht verändert. Die folgenden beiden Selektoren haben exakt die gleiche Spezi-fität:

div p /* 0,0,0,2 */

body * strong /* 0,0,0,2 */

Kombinatoren besitzen dagegen überhaupt keine Spezifität, nicht einmal 0,0,0,0. Siehaben also überhaupt keinen Einfluss auf die Gesamtspezifität eines Selektors.

Spezifität von ID- und AttributselektorenAn dieser Stelle muss auf den Unterschied der Spezifität zwischen einem ID- und einemAttributselektor hingewiesen werden, die sich beide auf ein bestimmtes id-Attribut bezie-hen. Kehren wir zum dritten Regelpaar unseres Beispiels zurück:

html > body table tr[id="totals"] td ul > li {color: maroon;} /* 0,0,1,7 */

li#answer {color: navy;} /* 0,1,0,1 (Gewinner) */

Der ID-Selektor der zweiten Regel (#answer) trägt mit einem Wert von 0,1,0,0 zurGesamtspezifität des Selektors bei. In der ersten Regel trägt der Attributselektor([id="totals"]) mit 0,0,1,0 zur Gesamtspezifität bei. Nach den unten stehenden Regelnwird demnach das Element mit dem id-Wert meadow grün eingefärbt:

#meadow {color: green;} /* 0,1,0,0 */

*[id="meadow"] {color: red;} /* 0,0,1,0 */

Spezifität von Inline-StildefinitionenBisher haben wir nur Spezifitäten gesehen, die mit einer Null beginnen. Vermutlich fra-gen Sie sich jetzt, was die da überhaupt zu suchen hat. Wie wir sehen werden, ist die ersteNull für Inline-Stilangaben reserviert, die die Spezifität aller anderen Deklarationen über-trumpfen. Nehmen wir beispielsweise folgende Regel und ein dazugehöriges Markup-Fragment:

h1 {color: red;}

<h1 style="color: green;">The Meadow Party</h1>

Trotz der Regel, die für das Element h1 zutrifft, werden Sie erwarten, dass der Text von h1grün dargestellt wird. Und genau das geschieht in CSS2.1 – und zwar, weil jede Inline-Deklaration eine Spezifität von 1,0,0,0 besitzt.

Das bedeutet, dass selbst id-Attribute, auf die eine Regel zutrifft, hinter einer Inline-Stil-deklaration zurücktreten müssen. Lassen Sie uns das letzte Beispiel modifizieren, so dasses ein id-Attribut enthält:

h1#meadow {color: red;}

<h1 id="meadow" style="color: green;">The Meadow Party</h1>


Dank der Spezifität der Inline-Deklaration wird der Text des h1-Elements weiterhin gründargestellt.

Der Vorrang von Inline-Deklarationen wurde mit CSS2.1 festgeschrieben,um das Verhalten von Webbrowsern zu dem Zeitpunkt festzuhalten, alsCSS2.1 geschrieben wurde. In CSS2 war die Spezifität von Inline-Stilen mit1,0,0 festgelegt (weil CSS2 nur drei Werte festlegt und nicht vier). Andersausgedrückt, hatte eine Inline-Stildefinition die gleiche Spezifität wie einID-Selektor, mit dem Inline-Stile leicht überschrieben werden konnten.

WichtigkeitGelegentlich ist eine Regel so wichtig, dass sie trotz aller Berechnungen vorgezogen wer-den soll. In CSS2.1 nennt man diese Regeln daher auch wichtige Regeln (important rules),die durch das Einfügen von !important direkt vor dem abschließenden Semikolon einerRegel markiert werden:

p.dark {color: #333 !important; background: white;}

In diesem Beispiel wurde der Wert #333 als !important gekennzeichnet, während der Hin-tergrundwert (background) diese Markierung nicht trägt. Wenn Sie beide Regeln alswichtig kennzeichnen möchten, muss jede Regel einzeln mit !important markiert werden:

p.dark {color: #333 !important; background: white !important;}

Wenn Sie !important falsch platzieren, wird die gesamte Regel als ungültig betrachtet.!important steht immer am Ende einer Deklaration, direkt vor dem abschließenden Semi-kolon. Diese Platzierung ist besonders entscheidend, wenn es um Eigenschaften geht, dieWerte mit mehreren Schlüsselwörtern zulassen, wie beispielsweise font:

p.light {color: yellow; font: smaller Times, serif !important;}

Hätten Sie !important an eine andere Stelle in der font-Deklaration gestellt, würde dieDeklaration mit großer Wahrscheinlichkeit als ungültig angesehen, und die Stildefinitio-nen kämen nicht zur Anwendung.

Mit !important markierte Deklarationen haben keine spezielle Spezifität, sondern werdenvon nicht-wichtigen Deklarationen getrennt betrachtet. Das hat den Effekt, dass Kon-flikte in der Spezifität von mit !important gekennzeichneten Deklarationen unabhängigvon anderen Deklarationen aufgelöst werden. Auf ähnliche Weise bilden auch die nichtmarkierten Deklarationen eine eigene Gruppe, deren Eigenschaftskonflikte anhand derSpezifität geklärt werden. Gibt es einen Konflikt zwischen wichtigen und unwichtigenDeklarationen, erhält die mit !important gekennzeichnete Deklaration auf jeden Fall denVorzug.

Das Ergebnis der folgenden Regeln im Zusammenhang mit dem folgenden Markup-Frag-ment ist in Abbildung 3-2 dargestellt:

h1 {font-style: italic; color: gray !important;}

.title {color: black; background: silver;}

Vererbung | 71

* {background: black !important;}

<h1 class="title">NightWing</h1>

»Wichtige« Regeln werden im Abschnitt »Kaskadierung« später in diesemKapitel eingehend behandelt.

VererbungGenauso wichtig wie das Verständnis der Spezifität ist es zu verinnerlichen, wie sich dieVererbung auf ein Dokument auswirkt. Als Vererbung bezeichnet man den Mechanis-mus, nach dem Stildefinitionen nicht nur auf ein bestimmtes Element, sondern auch aufdessen Nachfahren übertragen werden. Wenn beispielsweise ein h1-Element mit einerbestimmten Farbe versehen wird, wird jeglicher Text innerhalb dieses Elements in derangegebenen Farbe dargestellt, auch wenn sich dieser Text innerhalb von Kindelementenvon h1 befindet:

h1 {color: gray;}

<h1>Meerkat <em>Central</em></h1>

Sowohl der einfache Text in der mit h1 markierten Überschrift als auch der Text im em-Element werden grau ausgegeben, weil em den Wert der Eigenschaft color vom Elementh1 erbt. Wenn die Eigenschaftswerte nicht an Nachfahren vererbt werden könnten,würde der Text des em-Elements schwarz dargestellt werden, und Sie müssten alle Ele-mente einzeln mit einer eigenen Farbe versehen.

Die Vererbung funktioniert auch bei ungeordneten Listen. Nehmen wir einmal an, Siedefinieren für ul-Elemente den Stil color: gray;:

ul {color: gray;}

Sie erwarten, dass sich Stildefinitionen, die für ul festgelegt wurden, auch auf die Listen-einträge und deren Inhalt auswirken. Dank der Vererbung geschieht genau das (sieheAbbildung 3-3).

Die Vererbung lässt sich leichter verstehen, wenn Sie sich das Baumdiagramm einesDokuments ansehen. In Abbildung 3-4 sehen Sie das Baumdiagramm für ein sehr einfa-ches Dokument, das eine ungeordnete und eine geordnete Liste enthält.

Wenn die Deklaration color: gray; auf das Element ul angewendet wird, übernimmt die-ses Element die Deklaration. Der Wert wird daraufhin entlang des Baums an die Nach-

Abbildung 3-2: Als !important markierte Regeln erhalten prinzipiell den Vorzug


fahren von ul weitergereicht, bis es keine Nachfahren mehr gibt, die diesen Wert erbenkönnen. Werte werden niemals nach oben weitergereicht; ein Element kann also keineWerte an seine Vorfahren weitergeben.

Für die Regel der Aufwärts-Vererbung gibt es in HTML eine Ausnahme:Auf das Element body angewendete Hintergrundstile können an das Ele-ment html weitergereicht werden, weil dieses das Root-Element des Doku-ments ist und daher die Zeichenfläche (canvas) für das Dokument festlegt.

Die Vererbung in CSS ist so einfach, dass Sie selten darüber nachdenken, es sei denn, Siemüssen. Trotzdem sollten Sie sich ein paar Dinge zur Vererbung merken.

Als Erstes sollten Sie bedenken, dass einige Eigenschaften – normalerweise einfach ausgesundem Menschenverstand – nicht vererbt werden. So wird beispielsweise die Eigen-schaft border (mit der Rahmen um ein Element gezogen werden können) nicht vererbt.Ein schneller Blick auf Abbildung 3-5 zeigt Ihnen, warum. Werden die Rahmen mit ver-erbt, würden die Dokumente mehr und mehr »verstopft«, es sei denn, der Autor schaltetdie Vererbung von Rahmen ausdrücklich ab.

Abbildung 3-3: Vererbung von Stildefinitionen

Abbildung 3-4: Ein einfaches Baumdiagramm

Abbildung 3-5: Warum Rahmen nicht vererbt werden

Vererbung | 73

Wie sich zeigt, werden die meisten auf das Box-Modell bezogenen Eigenschaften wieAußenabstände (margins), Innenabstände (padding) und Rahmen aus dem gleichenGrund nicht vererbt. Schließlich ist es nicht gerade wünschenswert, wenn alle Links ineinem Absatz einen 30 Pixel breiten Rand von ihrem Elternelement erben!

Ererbte Werte besitzen keinerlei Spezifität, nicht einmal den Nullwert. Diese Unterschei-dung erscheint rein akademisch, bis Sie sich durch die Folgen eines Mangels an vererbterSpezifität graben. Nehmen Sie einmal folgende Regeln und vergleichen Sie diese mit denErgebnissen in Abbildung 3-6:

* {color: gray;}

h1#page-title {color: black;}

<h1 id="page-title">Meerkat <em>Central</em></h1>

<p>

Welcome to the best place on the web for meerkat information!

</p>

Da der universelle Selektor mit einer Spezifität von null auf alle Elemente angewendetwird, bekommt sein Farbwert gray Vorrang vor dem geerbten Wert black, der keinerleiSpezifität besitzt. Daher wird das Element em grau und nicht schwarz dargestellt.

Vererbte Programmierfehler

Problemen mit den verschiedenen Browser-Implementierungen haben wir es zu verdan-ken, dass sich ein Autor nicht darauf verlassen kann, dass die Vererbung unter allenUmständen funktioniert wie erwartet. So werden Stildefinitionen in Navigator 4 (und zumTeil auch in Explorer 4 und 5) nicht in Tabellen weitergereicht. Aus diesem Grund würdedie folgende Regel dafür sorgen, dass der Text dieses Dokuments außerhalb von Tabellenkleiner dargestellt wird als innerhalb:

body {font-size: 0.8em;}

Dieses Verhalten ist nicht CSS-konform, aber es existiert. Daher haben sich Autoren imLaufe der Zeit Tricks wie den folgenden ausgedacht, um dieses Problem zu umgehen:

body, table, th, td {font-size: 0.8em;}

Hierdurch ist es wahrscheinlicher, aber immer noch nicht sicher, dass der gewünschteEffekt auch in fehlerhaften Browsern erreicht wird.

Unglücklicherweise führt die oben stehende »Lösung« zu einem noch schlimmeren Prob-lem mit Browsern, die die Vererbung korrekt umsetzen, wie IE6/Win, IE5/Mac, Netscape6+ und anderen. In diesen Browsern wird der Text innerhalb von Tabellenzellen nun 41Prozent kleiner dargestellt als die vom Benutzer eingestellte Standard-Schriftgröße. Es istoftmals gefährlicher, Programmierfehler bei der Vererbung in alten Browsern auf dieseWeise zu umgehen, als korrekten CSS-Code für aktuelle Browser zu schreiben.


Dieses Beispiel stellt anschaulich dar, warum der universelle Selektor mit Bedacht einge-setzt werden sollte. Da er auf ein beliebiges Element passt, sorgt er leicht für einen Kurz-schluss in der Vererbungskette. Das kann zwar umgangen werden, aber meistens ist essinnvoller, das Problem ganz zu vermeiden, indem Sie den universellen Selektor nurbenutzen, wenn Sie ihn wirklich brauchen.

Das vollständige Fehlen von Spezifitätsdaten für ererbte Werte ist ein schwer wiegenderPunkt. Nehmen wir als Beispiel dieses Stylesheet, bei dem aller Text in der »Werk-zeugleiste« (Toolbar) weiß auf schwarz dargestellt werden soll:

#toolbar {color: white; background: black;}

Das funktioniert, solange das Element mit dem id-Wert toolbar ausschließlich reinenText enthält. Besteht der Text dieses Elements dagegen nur aus Links (a-Elemente), über-nimmt die Stildefinition des Browsers für Links die Kontrolle. In einem Webbrowserbedeutet das, dass die Links sehr wahrscheinlich blau dargestellt werden, da das Style-sheet des Browsers vermutlich einen Eintrag wie diesen enthält:

a:link {color: blue;}

Um dieses Problem zu umgehen, müssten Sie daher so vorgehen:

#toolbar {color: white; background: black;}

#toolbar a:link {color: white;}

Indem Sie die Regel direkt auf die a-Elemente in der Werkzeugleiste beziehen, erhaltenSie das in Abbildung 3-7 gezeigte Ergebnis.

KaskadierungBisher haben wir in diesem Kapitel eine sehr wichtige Frage übergangen: Was passiert,wenn sich zwei Regeln mit gleicher Spezifität auf das gleiche Element beziehen? Wie löstder Browser diesen Konflikt auf? Nehmen wir zum Beispiel die folgenden Regeln:

h1 {color: red;}

h1 {color: blue;}

Abbildung 3-6: Null-Spezifität übertrifft nicht definierte Spezifität

Abbildung 3-7: Direkte Zuweisung von Stilen auf die betroffenen Elemente

Kaskadierung | 75

Welche Regel gewinnt? Beide besitzen eine Spezifität von 0,0,0,1 und sollten demnachbeide angewendet werden. Das kann aber einfach nicht sein, weil ein Element nichtgleichzeitig rot und blau sein kann. Aber welche Farbe bekommt nun den Vorzug?

Endlich offenbart uns der Name »Cascading Style Sheets« etwas von seinem Sinn. CSSbasiert auf einer Methode, nach der Stile kaskadiert werden können, indem Vererbungund Spezifität miteinander kombiniert werden. Die Kaskadierungsregeln für CSS2.1 sindrecht einfach:

1. Finde alle Deklarationen, die einen Selektor enthalten, der auf ein gegebenes Ele-ment passt.

2. Sortiere alle auf das Element bezogenen Deklarationen nach Spezifität. Mit!important markierte Regeln erhalten eine höhere Gewichtung gegenüber unmar-kierten. Sortiere außerdem alle Deklarationen, die sich auf ein bestimmtes Elementbeziehen, nach ihrer Herkunft. Es gibt drei mögliche Arten der Herkunft: Autor,Leser und User Agent. Unter normalen Umständen haben Stildefinitionen desAutors gegenüber denen des Lesers Vorrang. Mit !important markierte Stile desLesers haben ein höheres Gewicht als alle anderen Stildefinitionen, inklusive der mit!important markierten Definitionen des Autors. Sowohl die Stilvorgaben des Autorswie die des Lesers überschreiben die Standardstile des User Agents.

3. Sortiere alle Deklarationen für ein bestimmtes Element nach ihrer Spezifität. Ele-mente mit einer höheren Spezifität erhalten gegenüber Elementen mit geringer Spezi-fität mehr Gewicht.

4. Sortiere alle Deklarationen für ein bestimmtes Element nach ihrer Reihenfolge. Je spä-ter eine Deklaration in einem Stylesheet oder Dokument erscheint, desto mehrGewicht wird ihr verliehen. Deklarationen aus importierten Stylesheets kommen vorallen Deklarationen im importierenden Stylesheet.

Um zu verdeutlichen, wie das alles funktioniert, wollen wir uns drei Beispiele ansehen,die die letzten drei der vier Kaskadierungsregeln illustrieren:

Sortierung nach Gewicht und HerkunftDie zweite Kaskadierungsregel besagt, dass als !important markierte Regeln unmarkier-ten Regeln vorgezogen werden:

p {color: gray !important;}

<p style="color: black;">Well, <em>hello</em> there!</p>

Obwohl dem Absatz im style-Attribut eine Farbe zugewiesen wurde, bekommt die als!important gekennzeichnete Regel den Vorrang, und der Absatz wird grau dargestellt.Diese graue Farbe wird an das Element em vererbt.

Außerdem wird die Herkunft der Regel in Betracht gezogen. Gibt es für ein ElementRegeln im Stylesheet des Autors und im Stylesheet des Lesers, so gewinnen die Definitio-


nen des Autors. Nehmen wir an, die folgenden Stildefinitionen stammen aus den imKommentar angegebenen Quellen:

p em {color: black;} /* Stylesheet des Autors */

p em {color: yellow;} /* Stylesheet des Lesers */

In diesem Fall wird der mit em markierte Text innerhalb des Absatzes schwarz dargestelltund nicht gelb, weil die Stildefinitionen normaler Gewichtung des Autors Priorität überdie Stile normalen Gewichts des Lesers erhalten. Werden jedoch beide Regeln als!important gekennzeichnet, ändert sich die Situation:

p em {color: black !important;} /* Stylesheet des Autors */

p em {color: yellow !important;} /* Stylesheet des Lesers */

Jetzt wird der mit em gekennzeichnete Text in Absätzen gelb dargestellt und nicht mehrschwarz.

Wie sich zeigt, werden auch die Standard-Stile des User Agents, die oftmals von den Vor-lieben des Benutzers bestimmt werden, in diesen Schritt mit einbezogen. Die Standardde-finitionen haben am wenigsten Einfluss von allen. Legt ein Autor also einen Stil für alleAnker-Elemente fest (zum Beispiel dass sie alle white sein sollen), so überschreibt dieseRegel die Standardeinstellungen des User Agents.

Zusammenfassend können wir also feststellen: Bezüglich der Gewichtung von Deklaratio-nen gibt es fünf Ebenen. Diese sind in absteigender Gewichtung:

1. Vom Leser als !important markierte Deklarationen

2. Vom Autor als !important markierte Deklarationen

3. Normale Deklarationen des Autors

4. Normale Deklarationen des Lesers

5. Deklarationen des User Agents

Normalerweise brauchen sich Autoren nur um die ersten vier Gewichtungsebenen zukümmern, da alles, was hier deklariert wurde, Vorrang vor den Regeln des User Agentshat.

Sortierung nach SpezifitätGemäß der dritten Kaskadierungsregel sollen widersprüchliche Deklarationen gleicherGewichtung nach ihrer Spezifität sortiert werden, wobei die Deklaration mit höherer Spe-zifität gewinnt. Zum Beispiel:

p#bright {color: silver;}

p {color: black;}

<p id="bright">Well, hello there!</p>

Kaskadierung | 77

Nach diesen Regeln wird der Absatz silbergrau dargestellt (siehe Abbildung 3-8).Warum? Weil die Spezifität von p#bright (0,1,0,0) höher ist als die Spezifität von p(0,0,0,1), auch wenn diese Regel weiter hinten im Stylesheet steht.

Sortierung nach ReihenfolgeDie vierte Kaskadierungsregel besagt schließlich, dass zwei Regeln mit exakt der gleichenGewichtung, Herkunft und Spezifität nach ihrer Reihenfolge im Stylesheet behandeltwerden sollen. Die Regel, die im Stylesheet weiter hinten steht, erhält den Vorzug. LassenSie uns hierfür zu einem früheren Beispiel zurückkehren, in dem folgende zwei Regeln imStylesheet des Dokuments definiert werden:

h1 {color: red;}

h1 {color: blue;}

Da die zweite Regel weiter hinten im Stylesheet steht, wird für alle h1-Elemente der Wertfür color mit blue anstelle von red festgelegt. Regeln, die im Dokument enthalten sind,haben ein höheres Gewicht und erhalten daher gegenüber importierten Regeln den Vor-rang. Das gilt auch, wenn die Regel Teil des Dokument-Stylesheets ist und nicht imstyle-Attribut eines Elements definiert wurde. Zum Beispiel:

p em {color: purple;} /* importiertes Stylesheet */

p em {color: gray;} /* Regel im Dokument definiert */

In diesem Fall erhält die zweite Regel den Vorzug gegenüber der importierten Regel, weilsie Teil des Dokument-Stylesheets ist.

Damit diese Kaskadierungsregel funktioniert, werden Stile, die im style-Attribut einesElements definiert wurden, behandelt, als würden sie am Ende des Stylesheets stehen,wodurch sie Vorrang vor allen anderen Stildefinitionen erhalten. Diese Regel hat aber nurwenig praktischen Wert, weil Inline-Stile laut CSS2.1 sowieso eine höhere Spezifitätbesitzen als alle anderen Selektoren.

Wie Sie wissen, glich die Spezifität von Inline-Stilen derjenigen von ID-Selektoren. Ein CSS2-kompatibler User Agent (im Gegensatz zu einemCSS2.1-kompatiblen User Agent) betrachtet Inline-Stile daher, als stündensie am Ende des Dokument-Stylesheets, die dann nach Gewichtung, Her-kunft, Spezifität und Reihenfolge sortiert werden wie alle anderen Deklara-tionen des Stylesheets auch.

Abbildung 3-8: Höhere Spezifität hat Vorrang vor niedriger Spezifität


Und hier haben wir auch den Grund für die empfohlene Reihenfolge von link-Stildefiniti-onen. Die Empfehlung lautet, Ihre link-Stile in der Reihenfolge link-visited-hover-activeoder kurz LVHA anzuordnen, wie hier gezeigt:

:link {color: blue;}

:visited {color: purple;}

:hover {color: red;}

:active {color: orange;}

Dank der vielen Informationen in diesem Kapitel wissen Sie nun, dass diese Selektorenalle die gleiche Spezifität von 0,0,1,0 besitzen. Da sie die gleiche Gewichtung, Herkunftund Spezifität haben, gewinnt schließlich die letzte Deklaration, die auf ein Elementzutrifft. Wird ein unbesuchter Link angeklickt, passen drei Regeln auf dieses Element::link, :hover und :active. Durch die empfohlene Reihenfolge LVHA bekommt :activeden Vorzug, was meistens der Intention des Autors entspricht.

Wir wollen uns einmal vorstellen, Sie hätten die Stildefinitionen statt in ihrer üblichenReihenfolge nun alphabetisch geordnet. Das ergibt:





Bei dieser Reihenfolge wird der Link niemals nach den Regeln :hover oder :active darge-stellt, weil die Regeln :link und :visited später kommen. Jeder Link ist entwederbesucht (visited) oder unbesucht, wodurch diese Definitionen die Regel :hover auf jedenFall überschreiben.

Eine Variation der LVHA-Reihenfolge könnte für Autoren noch von Interesse sein. Beidieser Reihenfolge erhalten Links die Definition :hover nur, wenn sie noch nicht besuchtwurden; bereits besuchte Links jedoch nicht. Sowohl besuchte wie auch unbesuchteLinks erhalten einen eigenen Stil, wenn sie aktiv sind:





Selbstverständlich tauchen solche Konflikte auf, wenn alle Button-Zustände versuchen,die gleiche Eigenschaft zu setzen (hier: color). Setzt jeder Button-Zustand eine andereEigenschaft, spielt die Reihenfolge keine Rolle. Im folgenden Beispiel können die Stildefi-nitionen für Links eine beliebige Reihenfolge haben und würden trotzdem funktionieren:

:link {font-weight: bold;}

:visited {font-style: italic;}


:active {background: yellow;}

Vielleicht ist Ihnen auch schon aufgefallen, dass die Reihenfolge der Stildefinitionen für:link und :visited nicht wichtig ist. Die Reihenfolge könnte entweder LVHA oder

Kaskadierung | 79

VLHA lauten, ohne dass dies irgendwelchen Schaden anrichtet. Scheinbar wird LVHAbevorzugt, weil es einerseits in der Spezifikation zu CSS2 empfohlen wird und man esgleichzeitig aussprechen kann wie »LoVe – HA!« (Liebe? Ha! – Offenbar gibt es da drau-ßen ein wenig Verbitterung.)

Die Möglichkeit, Pseudoklassen miteinander zu verketten, macht diese Sorgen hinfällig.Die folgenden Regeln können eine beliebige Reihenfolge haben, ohne dass die einen Ein-fluss auf die Darstellung hätte:



:link:hover {color: red;}

:visited:hover {color: gray;}

Da sich nun jede Regel auf einen genau festgelegten Link-Zustand bezieht, stehen sichdiese nicht mehr gegenseitig im Weg. Die letzten beiden Regeln besitzen die gleiche Spe-zifität, aber das macht nichts. Ein unbesuchter Link, über dem sich der Mauszeiger befin-det, wird nicht von der Regel für besuchte Links angesprochen und umgekehrt. Wenn wirzusätzlich Stile für aktivierte Links definieren, spielt die Reihenfolge jedoch wieder eineRolle:



:link:hover {color: red;}

:visited:hover {color: gray;}

:link:active {color: orange;}

:visited:active {color: silver;}

Würden die Definitionen für aktive Links vor denen für »Mauszeiger darüber« stehen, sowürden sie ignoriert. Auch hier sind Konflikte in der Spezifität der Grund. Durch dasErweitern der Verkettungen um weitere Pseudoklassen ließe sich dieser Konflikt aus demWeg räumen, wie hier gezeigt:

:link:hover:active {color: orange;}

:visited:hover:active {color: silver;}

Verkettete Pseudoklassen, die Probleme mit Spezifität und Reihenfolge verringern, wür-den häufiger benutzt, wenn sie auch von Internet Explorer unterstützt würden.

Präsentationselemente, die kein CSS sindGelegentlich enthält ein Dokument Präsentationselemente, die nicht im CSS-Formatvorliegen, wie etwa font. Diese Nicht-CSS-Elemente werden behandelt, als hätten sieeine Spezifität von 0 und stünden am Anfang des Autoren-Stylesheets. Diese Anweisun-gen werden von den Stildefinitionen des Autors und des Lesers überschrieben, nicht abervon den Standardeinstellungen des User Agents.


ZusammenfassungDer wohl wichtigste Aspekt von Cascading Style Sheets ist die Kaskadierung selbst, alsoder Prozess, anhand dessen widersprüchliche Deklarationen aussortiert werden und derdie endgültige Darstellung des Dokuments festlegt. Integraler Bestandteil dieses Prozessesist die Spezifität von Selektoren und ihrer dazugehörigen Deklarationen sowie der Mecha-nismus der Vererbung.

Im nächsten Kapitel werden wir uns die vielen verschiedenen Maßeinheiten ansehen,durch die Eigenschaftswerte ihre Bedeutung bekommen. Nachdem wir diese Bespre-chung abgeschlossen haben, sind wir mit den Grundlagen fertig und können uns damitbeschäftigen, wie und welche Eigenschaften für das Erstellen von Dokumentstilen ver-wendet werden.

| 81

KAPITEL 4

Werte und Einheiten

In diesem Kapitel befassen wir uns mit den Dingen, auf denen fast alle Möglichkeiten vonCSS basieren: den Maßeinheiten für Farben, Entfernungen und Größenangaben für einenGroßteil der Eigenschaften. Ohne die Einheiten könnten Sie nicht festlegen, dass einAbsatz lila dargestellt werden soll oder dass ein Bild mit einem Freiraum von 10 PixelnBreite umgeben werden soll oder dass der Text der Überschrift eine bestimmte Größehaben soll. Durch das Verständnis der hier erklärten Konzepte wird es Ihnen leichter fal-len, den Rest von CSS schneller zu lernen und anzuwenden.

ZahlenIn CSS gibt es zwei Arten von Zahlen: Integerwerte (ganze Zahlen ohne Nachkommastel-len) und reelle Zahlen (Zahlen mit optionalen Nachkommastellen). Diese Zahlentypendienen hauptsächlich als Basis für andere Wertetypen, auch wenn in einigen wenigen Fäl-len schlichte Zahlenangaben als Wert für eine Eigenschaft ausreichen.

Nach der Definition von CSS2.1 ist eine reelle Zahl ein Integerwert, auf den ein optionalerDezimalpunkt (die englische Version des hierzulande üblichen Kommas) und optionaleNachkommastellen folgen können. So sind die folgenden Zahlen alle in CSS gültigeWerte: 15.5, –270.00004 und 5. Integerwerte und reelle Zahlen dürfen positive und nega-tive Vorzeichen haben, obwohl manche Eigenschaften den Bereich der akzeptierten Zah-lenwerte einschränken dürfen (und dies oft auch tun).

ProzentwerteAls Prozentwert bezeichnet man eine berechnete reelle Zahl, auf die ein Prozentzeichen(%) folgt. Prozentwerte sind so gut wie immer relativ zu einem beliebigen anderen Wert zubetrachten. Dies kann beispielsweise der Wert einer anderen Eigenschaft des gleichenElements sein, ein von einem Elternelement geerbter Wert oder der Wert eines Vorfah-ren-Elements. Alle Eigenschaften, die mit Prozentwerten umgehen können, definieren

82 | Kapitel 4: Werte und Einheiten

Beschränkungen der akzeptierten Prozentwerte sowie das Verhältnis, nach dem der Pro-zentwert berechnet wird.

FarbeEine der ersten Fragen eines frisch gebackenen Webautors lautet in der Regel: »Wie kannich die Farben meiner Seite festlegen?« In HTML gab es hierfür zwei Möglichkeiten: Siekonnten entweder aus einer kleinen Anzahl benannter Farben (wie red oder purple) aus-wählen oder die etwas kryptischeren Hexadezimalcodes verwenden. Beide Methoden zurBeschreibung von Farben sind auch in CSS gültig. Allerdings gibt es hier noch eine Reihevon – meiner Meinung nach – intuitiveren Methoden.

Benannte FarbenWenn wir davon ausgehen, dass es Ihnen genügt, aus einer kleinen Menge von Farbenauszuwählen, besteht die einfachste Methode darin, einfach den (englischen) Namen dergewünschten Farbe anzugeben. In CSS heißen diese Farben dann auch benannte Farben(named colors).

Entgegen den Aussagen mancher Browser-Hersteller gibt es nur eine begrenzte Palettevon Schlüsselwörtern für benannte Farben. Eine Auswahl von »Opal« würde fehlschla-gen, weil es keine als »benannt« definierte Farbe ist. CSS2.1 legt genau 17 Farbnamenfest. Das sind die 16 in HTML 4.01 definierten Farben und Orange:

Wenn wir alle Überschriften erster Ebene rotbraun einfärben wollen, können wir Folgen-des sagen:

h1 {color: maroon;}

Einfach und leicht zu verstehen, oder? In Abbildung 4-1 sehen Sie ein paar weitere Bei-spiele:

h1 {color: gray;}

h2 {color: silver;}

h3 {color: black;}

Mit Sicherheit haben Sie neben den oben aufgelisteten Farbnamen auch schon anderegesehen (und vielleicht sogar benutzt). Wenn Sie etwa Folgendes angeben:

h1 {color: lightgreen;} /*hellgrün */

aqua (Wasser) green (Grün) orange (Orange) yellow (Gelb)

black (Schwarz) lime (Limone) purple (Lila) white (Weiß)

blue (Blau) maroon (Kastanienbraun) red (Rot)

fuchsia (Fuchsie) navy (Marine) silver (Silber)

gray (Grau) olive (Oliv) teal (Krickentengrün)

Farbe | 83

so ist es sehr wahrscheinlich, dass Ihre h1-Elemente tatsächlich hellgrün dargestellt wer-den, obwohl lightgreen nicht in der Spezifikation von CSS2.1 genannt wird. Das funktio-niert, weil die meisten Webbrowser bis zu 140 Farbnamen verstehen, inklusive der 17Standardnamen. Diese Extrafarben werden in der Farbspezifikation von CSS3 definiert,die in diesem Buch jedoch nicht behandelt wird. Die (beim Schreiben dieses Buches) 17Standardfarben sind sehr wahrscheinlich verlässlicher als die längere Liste der 140 Far-ben, da die Farbwerte für die 17 Farben in CSS2.1 festgeschrieben sind. Die umfangrei-chere Liste der 140 Farben basiert auf den Standard-RGB-Werten für X11, die schon seitJahrzehnten in Gebrauch sind und daher vermutlich recht gut unterstützt werden.

Zum Glück gibt es detailliertere und genauere Verfahren, um Farben in CSS zu definie-ren. Der Vorteil dieser Methoden besteht darin, dass Sie nicht mehr auf die 17 (oder 140)benannten Farben festgelegt sind, sondern eine beliebige Farbe des 8-Bit-Farbraums aus-wählen können.

Farbangaben anhand von RGB-WertenComputer erzeugen Farben, indem sie die Farben Rot, Grün und Blau in unterschiedli-chen Verhältnissen miteinander mischen, weshalb Farbe im Zusammenhang mit Compu-tern oft auch als RGB-Farbe bezeichnet wird. Wenn Sie einen Computermonitor odersogar einen Fernseher öffnen und sich die Bildröhre einmal genau ansehen, werden Siedrei »Farbkanonen« finden. (Ich empfehle Ihnen jedoch nicht, das wirklich auszuprobie-ren, es sei denn, Sie wollen, dass die Garantie Ihres Monitors erlischt.) Diese Kanonenverschießen Lichtstrahlen in unterschiedlichen Helligkeiten in einer der drei RGB-Farbenauf die einzelnen Bildschirmpunkte. Dort werden die Helligkeiten der Strahlen miteinan-der kombiniert und erzeugen so die sichtbaren Farben. Jeder Bildschirmpunkt wird alsPixel bezeichnet, ein Begriff, auf den wir später in diesem Kapitel noch einmal kommenwerden.

Nachdem wir wissen, wie ein Monitor aufgebaut ist, erscheint es sinnvoll, für die größt-mögliche Kontrolle direkt auf diese Farbkanonen zugreifen und die Strahlen selbstmischen zu können. Die Lösung ist zwar kompliziert, aber möglich. Die Resultate sinddie Mühe wert, denn es gibt nur wenige Einschränkungen, was die Auswahl der mögli-chen Farben angeht. Bei diesem Verfahren können Sie Farben auf vier verschiedene Artenbeeinflussen.

Abbildung 4-1: Farben über ihren Namen ansprechen


Funktionelle RGB-Farben

Die anderen zwei Arten, Farbwerte anzugeben, verwenden die funktionelle RGB-Notationanstelle der hexadezimalen Schreibweise. Die allgemeine Syntax für diese Art von Farb-werten lautet rgb(farbe). Hierbei steht farbe für eine Gruppe aus drei Integer- oder Pro-zentwerten. Die Prozentwerte müssen im Bereich zwischen 0%–100% liegen, während sichdie Integerwerte im Bereich zwischen 0 und 255 bewegen müssen.

Um mit der Prozentschreibweise beispielsweise die Farben Schwarz und Weiß auszudrü-cken, würden Sie Folgendes schreiben:

rgb(100%,100%,100%)

rgb(0%,0%,0%)

Als Ganzzahlen-(Integer-)Triplett würden Sie stattdessen schreiben:

rgb(255,255,255)

rgb(0,0,0)

Im folgenden Beispiel sollen alle Ihre mit h1 markierten Überschriften einen roten Farb-ton irgendwo zwischen Standardrot (red) und Rotbraun (maroon) erhalten. Hierbei wird»Rot« als rgb(100%,0%,0%) und »Rotbraun« als (50%,0%,0%) festgelegt. Um einen Farbtonzwischen diesen beiden zu erhalten, könnten Sie nun Folgendes versuchen:

h1 {color: rgb(75%,0%,0%);}

Hierdurch wird der Rotanteil heller als maroon, aber dunkler als red dargestellt. Um dage-gen ein blasseres Rot zu erhalten, würden Sie die Grün- und Blauanteile erhöhen:

h1 {color: rgb(75%,50%,50%);}

In der Integer-Notation würde die ähnlichste Farbe so aussehen:

h1 {color: rgb(191,127,127);}

Am einfachsten verdeutlicht man sich das Zusammenspiel der Werte und der dazugehö-rigen Farben anhand einer Tabelle mit Grauwerten. Davon abgesehen, können wir unsfür dieses Buch sowieso nur Grauwerte als Druckfarben leisten, was wir in Abbildung 4-2dann auch machen:

p.eins {color: rgb(0%,0%,0%);}

p.zwei {color: rgb(20%,20%,20%);}

p.drei {color: rgb(40%,40%,40%);}

p.vier {color: rgb(60%,60%,60%);}

p.fuenf {color: rgb(80%,80%,80%);}

p.sechs {color: rgb(0,0,0);}

p.sieben {color: rgb(51,51,51);}

p.acht {color: rgb(102,102,102);}

p.neun {color: rgb(153,153,153);}

p.zehn {color: rgb(204,204,204);}

Da wir es hier mit Grautönen zu tun haben, sind alle drei RGB-Werte des Tripletts gleich.Würde sich einer dieser Werte von den anderen unterscheiden, würde eine Farbe anfangenhindurchzuscheinen. Ändern Sie beispielsweise rgb(50%,50%,50%) in rgb(50%,50%,60%),wäre das Ergebnis eine halbdunkle Farbe mit einem leichten Blauton.

Farbe | 85

Die Prozentwerte können auch mit Nachkommastellen angegeben werden. Vielleichtwollen Sie ja aus irgendeinem Grund, dass Ihre Farbe aus 25,5% Rot, 40% Grün und98,6% Blau besteht:

h2 {color: rgb(25.5%,40%,98.6%);}

User Agents, die die Nachkommastellen ignorieren (manche tun das), sollten den Wertauf den nächsten ganzzahligen Wert runden, wodurch sich ein deklarierter Wert vonrgb(26%,40%,99%) ergibt. Bei den Integer-Tripletts sind Sie dagegen selbstverständlich aufInteger beschränkt.

Werte, die sich außerhalb des erlaubten Bereichs befinden, werden auf den nächstgelege-nen erlaubten Wert »zurechtgestutzt«. Ein Wert, der über 100% oder unter 0% liegt,wird demnach standardmäßig zu einem dieser Grenzwerte. Die folgenden Deklarationenwürden also behandelt, als seien sie die Werte in den Kommentaren:

P.eins {color: rgb(300%,4200%,110%);} /* 100%,100%,100% */

P.zwei {color: rgb(0%,-40%,-5000%);} /* 0%,0%,0% */

p.drei {color: rgb(42,444,-13);} /* 42,255,0 */

Die Umwandlung zwischen Prozent- und Integerwerten mag beliebig erscheinen, trotz-dem brauchen Sie die einem Prozentwert entsprechenden Integer nicht zu erraten – fürdie Berechnung gibt es eine einfache Formel. Wenn Sie die Prozentwerte für diegewünschten RGB-Werte kennen, brauchen Sie die Prozentzahl nur auf die Zahl 255anzuwenden, um die entsprechenden Integerwerte zu erhalten. Angenommen Sie habeneine Farbe, die zu 25% aus Rot, 37% aus Grün und zu 60% aus Blauanteilen besteht.Multiplizieren Sie diese Prozentangaben einfach mit 255 und Sie erhalten 63,75, 95,625und 153. Runden Sie diese Werte auf die nächstgelegene Ganzzahl und voilà:rgb(64,96,153).

Wenn Sie die Prozentwerte bereits kennen, macht es wenig Sinn, diese in Integer umzu-wandeln. Die Integerschreibweise ist für Leute nützlicher, die Programme wie Photoshopbenutzen, die die Integerwerte im Dialogfenster »Info« anzeigen können. Personen, diesich mit den technischen Details der Farberzeugung befassen, denken dagegen eher in

Abbildung 4-2: Textabschnitte in verschiedenen Grautönen


Werten zwischen 0 und 255 und bevorzugen vermutlich die hexadezimale Notation, zuder wir im folgenden Abschnitt kommen.

Hexadezimale RGB-Farben

In CSS können Sie Farben auch in hexadezimaler Schreibweise (kurz Hex-Schreibweise)angeben, die besonders HTML-Webautoren bereits bekannt sein sollte:

h1 {color: #FF0000;} /* H1-Elemente rot darstellen */

h2 {color: #903BC0;} /* H2-Elemente blasslila darstellen */

h3 {color: #000000;} /* H3-Elemente schwarz darstellen */

h4 {color: #808080;} /* H4-Elemente mittelgrau darstellen */

Computer verwenden die hexadezimale Schreibweise schon seit längerem. Daher sindProgrammierer oftmals schon damit vertraut oder können sie sich leicht aneignen. Des-halb wurde diese Schreibweise vermutlich auch bei HTML-Code der alten Schule häufigbenutzt und dann in CSS einfach übernommen.

Und so funktioniert das Ganze: Eine Farbe lässt sich durch Zusammensetzen von dreihexadezimalen Zahlen zwischen 00 und FF definieren. Die allgemeine Syntax für dieseNotation lautet #RRGGBB. Zwischen den drei Zahlen dürfen keine Leerzeichen, Kommasoder andere Trennzeichen stehen.

Die hexadezimale Schreibweise ist mathematisch gesehen mit der Integer-Schreibweiseidentisch, die wir im vorigen Abschnitt besprochen haben. So entspricht rgb(255,255,255) genau dem Farbton, der durch #FFFFFF angegeben wird, und rgb(51,102,128) ist dasGleiche wie #336680. Sie haben völlig freie Hand bei der Wahl der Schreibweise – die meis-ten Browser stellen die Farben identisch dar. Wenn Sie einen Taschenrechner besitzen,der dezimale in hexadezimale Werte umrechnen kann, sollte ein Wechsel zwischen beidenNotationen recht einfach sein.

Für hexadezimale Zahlen, die aus drei gleichen Zahlenpaaren bestehen, gibt es in CSSeine Kurzschreibweise. Diese lautet allgemein #RGB:

h1 {color: #000;} /* H1-Elemente schwarz darstellen */

h2 {color: #666;} /* H2-Elemente dunkelgrau darstellen */

h3 {color: #FFF;} /* H3-Elemente weiß darstellen */

Wie Sie sehen können, enthalten die einzelnen Farbwerte hier nur drei Ziffern. Wie funk-tioniert das aber, wo Hex-Zahlen zwischen 00 und FF doch eigentlich aus sechs Ziffernbestehen müssen?

Wenn die Kurzschreibweise benutzt wird, verdoppelt der Browser die Ziffern automa-tisch. #F00 wird zu #FF0000 und #6FA wird zu #66FFAA, während #FFF zu #FFFFFF verdop-pelt wird, was der benannten Farbe white entspricht. Offensichtlich können auf dieseWeise nicht alle Farben dargestellt werden. Für ein mittleres Grau, das in normaler Hex-Schreibweise als #808080 angegeben wird, gibt es keine Kurzform. Der nächste in Kurz-schreibweise mögliche Wert wäre #888, der dann als #888888 interpretiert wird.

Farbe | 87

Die Farben in der Übersicht

In Tabelle 4-1 finden Sie eine Übersicht einiger der hier besprochenen Farben. Farbensollten sicherheitshalber besser in Form von RGB- oder Hex-Wertepaaren angegebenwerden, da die hier benutzten Farbnamen eventuell nicht von allen Browsern vollständigerkannt werden. Außerdem gibt es nicht für alle Farben eine Kurzschreibweise, weil dieWerte nicht einfach in die längere Schreibweise (mit 6 Ziffern) übertragen werden kön-nen. So wird der Wert #880 beispielsweise zu #888800 und nicht zu #808000 (entsprechendder benannten Farbe olive). Deshalb gibt es auch keine Kurzversion für #808000 und derentsprechende Eintrag in dieser Spalte bleibt leer.

Websichere Farben

Als »websichere« Farben bezeichnet man Farben, die auf Computersystemen mit 256Farben ohne Dithering dargestellt werden. Websichere Farben werden in RGB als Vielfa-che von 20% bzw. 51 angegeben, was einem Hex-Wert von 33 entspricht. Außerdem giltdie Angabe 0% oder 0 als websicher. Bei der Benutzung von RGB müssen alle drei Wertealso entweder 0% oder eine durch 20 teilbare Zahl sein. Wenn Sie numerische RGB-Werteverwenden, muss der Wert entweder 0 oder durch 51 teilbar sein, wie bei rgb(0,204,153)oder rgb(255,0,102).

Tabelle 4-1: Farbentsprechungen

benannte Farbe Prozentwert Numerisch Hexadezimal

Hex-Kurz-form

red Rot rgb(100%,0%,0%) rgb(255,0,0) #FF0000 #F00

orange Orange rgb(100%,40%,0%) rgb(255,102,0) #FF6600 #F60

yellow Gelb rgb(100%,100%,0%) rgb(255,255,0) #FFFF00 #FF0

green Grün rgb(0%,100%,0%) rgb(0,255,0) #00FF00 #0F0

blue Blau rgb(0%,0%,100%) rgb(0,0,255) #0000FF #00F

aqua Wasser rgb(0%,100%,100%) rgb(0,255,255) #00FFFF #0FF

black Schwarz rgb(0%,0%,0%) rgb(0,0,0) #000000 #000

fuchsia Fuchsie rgb(100%,0%,100%) rgb(255,0,255) #FF00FF #F0F

gray Grau rgb(50%,50%,50%) rgb(128,128,128) #808080

lime Limone rgb(0%,100%,0%) rgb(0,255,0) #00FF00 #0F0

maroon Kastanienbraun rgb(50%,0%,0%) rgb(128,0,0) #800000

navy Marine rgb(0%,0%,50%) rgb(0,0,128) #000080

olive Oliv rgb(50%,50%,0%) rgb(128,128,0) #808000

purple Lila rgb(50%,0%,50%) rgb(128,0,128) #800080

silver Silber rgb(75%,75%,75%) rgb(192,192,192) #C0C0C0

teal Krickentengrün rgb(0%,50%,50%) rgb(0,128,128) #008080

white Weiß rgb(100%,100%,100%) rgb(255,255,255) #FFFFFF #FFF


Bei der hexadezimalen Schreibweise gelten alle Tripletts, die die Werte 00, 33, 66, 99, CCund FF (Kurzform: 0, 3, 6, 9, C und F) benutzen, als websicher. Demnach sind #693, #0C6und #F0F Beispiele für websichere Farben.

LängeneinheitenViele CSS-Eigenschaften wie etwa Ränder benötigen die Angabe einer Längeneinheit, umverschiedenste Seitenelemente korrekt darstellen zu können. Daher überrascht es auchnicht, dass es in CSS eine Reihe von Methoden gibt, um Längen anzugeben.

Alle Längeneinheiten können als positive oder negative Zahl ausgedrückt werden, gefolgtvon der benutzten Längeneinheit. Bei Längenangaben ist es möglich, reelle Zahlen zu ver-wenden, wie beispielsweise 10.5 oder 4.561. (Beachten Sie die Verwendung des in Codesüblichen Dezimalpunkts anstelle des in Deutschland üblichen Dezimalkommas!) DerLängenangabe folgt prinzipiell eine aus zwei Buchstaben bestehende Abkürzung der zubenutzenden Längeneinheit, wie beispielsweise in (Inches) oder pt (Punkte). Einzig vondieser Regel ausgenommen ist die Längenangabe 0 (Null), für die keine Einheit angege-ben werden muss.

Dabei unterscheidet man zwischen zwei Arten von Längeneinheiten: absolute Längenein-heiten und relative Längeneinheiten.

Absolute LängeneinheitenWir beginnen mit absoluten Einheiten, weil diese leichter zu begreifen sind, obwohl siebeim Webdesign so gut wie unbenutzbar sind. Die fünf möglichen absoluten Einheitensind:

Inch (Zoll) (in)Wie Sie vielleicht erwarten, bezieht sich diese Schreibweise auf die Inches, die aufeinem Lineal in den USA zu finden sind. (Die Tatsache, dass diese Einheit Teil derCSS-Spezifikation ist, obwohl fast die gesamte Welt das metrische System benutzt,zeigt auf interessante Weise, wie sehr das Internet von US-Interessen bestimmt ist.Aber hier geht es nicht um virtuelle soziopolitische Theorie, also lassen wir das.)

Zentimeter (cm)Bezieht sich auf Zentimeter, wie sie als Maßeinheit auf vielen Linealen der Welt vor-kommen. Ein Inch entspricht 2,54 Zentimetern; ein Zentimeter entspricht 0,394Inch.

Millimeter (mm)Für die Amerikaner unter ihnen, die metrisch nicht so bewandert sind: Ein Zentime-ter entspricht 10 Millimetern, das heißt: Ein Inch ist 25,4 Millimeter lang; ein Milli-meter entspricht 0,0394 Inch.

Längeneinheiten | 89

Punkte (pt)Punkte sind eine in der Typographie übliche Maßeinheit, die von Druckern undSchriftsetzern seit Jahrzehnten und von Textverarbeitungsprogrammen seit vielenJahren verwendet wird. Traditionsgemäß hat ein Inch 72 Punkte. (Punkte wurdenvor der verbreiteten Verwendung des metrischen Systems definiert.) Wenn für einenGroßbuchstaben also die Größe mit 12 Punkten angegeben wird, wäre dieser Buch-stabe ein sechstel Inch (oder etwa 42 Millimeter) groß. Die Angabe p {font-size:18pt;} entspricht also der Definition p {font-size: 0.25in;}.

Pica (pc)Pica ist ein weiterer typographischer Ausdruck. Ein Pica entspricht 12 Punkten, dasheißt, ein Inch ist 6 Picas groß. Wie oben wäre ein ein Pica hoher Großbuchstabeeinen sechstel Inch hoch. p {font-size: 1.5pc;} bedeutet demnach das Gleiche wiedie Beispieldeklaration im obigen Eintrag.

Natürlich sind diese Einheiten nur sinnvoll, wenn der Browser oder ein anderer UserAgent auch die Details des Monitors oder Druckers kennt, auf dem Ihre Seite ausgegebenwerden soll. Bei einem Webbrowser wird die Darstellung von der Größe und der Auflö-sung des Monitors beeinflusst – Faktoren, auf die Sie als Autor nur wenig Einfluss haben.Sie können nur hoffen, dass die Maßeinheiten auch konsequent umgesetzt werden, also1.0in auch tatsächlich doppelt so groß ist wie 0.5in (siehe Abbildung 4-3).

Mit absoluten Längenangaben arbeiten

Ist der Monitor auf eine Größe von 1024 x 768 Pixel eingestellt, so ist die Darstellungsflä-che genau 14,22 Inch (36,12 cm) breit und 10,67 Inch (27,1 cm) hoch; demnach müsstejedes Pixel 1/72 Inch (ca. 0,3 mm) hoch und breit sein. Wie Sie sich denken können, istdies nur sehr, sehr selten wirklich der Fall. (Haben Sie jemals einen Monitor mit diesenAbmessungen gesehen?) Bei den meisten Monitoren ist die tatsächliche Anzahl der Pixelpro Inch (ppi) größer als 72, manchmal sogar bis zu 120 ppi und mehr.

Als Windows-Benutzer können Sie Ihren Bildschirmtreiber vielleicht so einstellen, dasssich die Darstellung von Elementen mit den Maßeinheiten der realen Welt deckt. Um daszu versuchen, klicken Sie Start ➝ Systemsteuerung. In der Systemsteuerung klicken Sieauf »Anzeige«. Wählen Sie das Register »Einstellungen« und klicken Sie auf »Erweitert«,um eine Dialogbox anzuzeigen. Der Inhalt dieser Dialogbox ist vermutlich für jedenRechner anders. Hier sollten Sie einen Abschnitt namens »Schriftgröße« oder so ähnlichfinden. Wählen Sie hier den Eintrag »Andere« oder »Benutzerdefinierte Einstellung«.

Abbildung 4-3: Linke Ränder mit absoluten Längenangaben darstellen


Halten Sie nun ein Lineal an Ihren Bildschirm und bewegen Sie den Schieber zum Einstel-len der Schriftgröße so lange, bis die Maßeinheiten des angezeigten Lineals mit denenIhres Lineals zur Deckung kommen. Klicken Sie OK, bis keine Dialogboxen mehr ange-zeigt werden, und Sie sind fertig.

Auf einem Mac gibt es keine Möglichkeit, diese Informationen über das Betriebssystemanzupassen. Mac OS hat bereits eigene Vorstellungen von der Beziehung zwischen Pixelnauf dem Bildschirm und absoluten Messungen, die besagen, dass Ihr Monitor genau 72Pixel pro Inch darstellt. Diese Mutmaßung ist vollkommen falsch, aber sie ist Teil desBetriebssystems und daher, jedenfalls im Moment, nicht zu vermeiden. Das Ergebnis ist,dass auf vielen Macintosh-Browsern ein Punkt-Wert der gleichen Länge in Pixeln ent-spricht. Das heißt, mit 24pt angegebener Text ist 24 Pixel hoch und 8pt-Text ist acht Pixelhoch. Das ist leider ein wenig zu klein, um lesbar zu sein (siehe Abbildung 4-4).

Dieses Problem bei der Darstellung auf dem Mac verdeutlicht sehr gut, warum dieAngabe von Punkten bei der Gestaltung von Webseiten tunlichst vermieden werdensollte. Stattdessen sollten Sie, immer wenn die Browser-Darstellung eine Rolle spielt, alsMaßeinheit em, Prozentwerte oder notfalls auch Pixel der Angabe von Punkten vorziehen.

Ab Internet Explorer 5 und Gecko-basierten Browsern wie Netscape 6+enthält der Browser eine eigene Einstellmöglichkeit für ppi-Werte. Sie kön-nen zwischen der Macintosh-Standardeinstellung von 72 ppi, der üblichenWindows-Einstellung von 96 ppi oder einer eigenen Einstellung wählen,die zu Ihrem Monitor passt. Die letzte Option funktioniert in etwa so wiedie zuvor beschriebene Einstellung bei Windows-Systemen, bei der Sie einLineal benutzen, um Ihren Monitor an die reale Welt anzupassen.

Trotz allem, was wir gesehen haben, wollen wir einmal die äußerst fragwürdige Vermu-tung anstellen, Ihr Rechner wüsste genug über seine Darstellung, um Messungen aus derrealen Welt richtig darstellen zu können. In diesem Fall könnten Sie beispielsweise denoberen Rand aller Absätze mit einem halben Inch festlegen, indem Sie die Regel p{margin-top: 0.5in;} benutzen. Unabhängig von der Schriftgröße und anderen Dingenhat nun jeder Absatz einen oberen Rand von einem halben Inch Höhe.

Absolute Einheiten sind bei der Definition von Stylesheets für gedruckte Dokumentewesentlich sinnvoller, bei denen Maßeinheiten wie Inches, Punkte und Picas üblich sind.Wie Sie gesehen haben, ist der Versuch, absolute Werte im Webdesign zu benutzen, bes-tenfalls sehr riskant. Daher wollen wir uns nun nützlicheren Maßeinheiten zuwenden.

Abbildung 4-4: Kleiner Text ist schwer zu lesen


Relative LängeneinheitenRelative Längenheiten heißen so, weil sie im Verhältnis zu anderen Dingen berechnetwerden. Auf Grund von nicht kontrollierbaren Faktoren wie Bildschirmauflösung oderBreite des Darstellungsbereichs kann die tatsächliche (oder absolute) gemessene Entfer-nung variieren. Darüber hinaus steht die Größe von relativen Maßeinheiten immer inBezug zu dem Element, das sie benutzt, und kann daher von Element zu Element unter-schiedlich sein.

In CSS gibt es drei relative Längeneinheiten: em, ex und px. Die ersten zwei stehen für zweihäufige typographische Maßeinheiten: »em-Höhe« und »x-Höhe«. In CSS weichen dieBedeutungen dieser Begriffe aber vermutlich von dem ab, was Sie aus der Typographiekennen. Die letzte relative Maßeinheit ist px und steht für »Pixel«. Ein Pixel ist einer derPunkte, die Sie auf Ihrem Bildschirm sehen können, wenn Sie nahe genug herangehen.Dieser Wert wird als relativ angesehen, weil er von der Auflösung des Ausgabegerätsabhängt, einem Thema, auf das wir bald kommen werden.

Die Einheiten em und ex

Vorher wollen wir uns jedoch mit em und ex beschäftigen. In CSS ist ein »em« definiert alsder Wert von font-size für einen gegebenen Zeichensatz. Ist der Wert von font-size fürein Element mit 14 Pixeln angegeben, entspricht 1em 14 Pixeln.

Offensichtlich kann sich dieser Wert von Element zu Element unterscheiden. Nehmenwir als Beispiel eine als h1 gekennzeichnete Überschrift, deren Schriftgröße mit 24 Pixelnangegeben wird, ein h2-Element mit einer Schriftgröße von 18 Pixeln und einen Absatz,dessen Schrift 12 Pixel groß sein soll. Wenn Sie nun für diese drei Elemente die linkenRänder mit 1em festlegen, werden die Ränder jeweils 24, 18 bzw. 12 Pixel breit dargestellt:

h1 {font-size: 24px;}

h2 {font-size: 18px;}

p {font-size: 12px;}

h1, h2, p {margin-left: 1em;}

small {font-size: 0.8em;}

<h1>linker Rand = <small>24 Pixel</small></h1>

<h2>linker Rand = <small>18 Pixel</small></h1>

<p>linker Rand = <small>12 Pixel</small></p>

Benutzen Sie em dagegen zum Setzen der Schriftgröße, verhält sich die Angabe relativ zurSchriftgröße des Elternelements (siehe Abbildung 4-5).

Abbildung 4-5: Die Benutzung der Maßeinheit em für Ränder und Schriftgrößen


Die Maßeinheit ex bezieht sich dagegen auf die Höhe eines kleingeschriebenen x des ver-wendeten Zeichensatzes. Haben Sie also zwei Absätze, deren Schriftgröße jeweils mit 24Punkt angegeben ist, die aber unterschiedliche Schriften benutzen, so können sich dieWerte für ex in den beiden Absätzen unterscheiden. Das liegt daran, dass verschiedeneZeichensätze unterschiedliche Höhen für das kleine x haben (siehe Abbildung 4-6).Obwohl für alle Zeilen der Wert für em mit 24 Punkt festgelegt wurde, ist die x-Höhe füralle Schriften unterschiedlich.

Praktische Erwägungen bei der Verwendung von em und ex

Selbstverständlich ist alles, was ich bis jetzt erklärt habe, reine Theorie. Ich habe darge-stellt, was passieren sollte; in der Praxis jedoch ermitteln viele Browser ihren Wert für ex,indem sie den Wert für em einfach durch zwei teilen. Der Grund liegt darin, dass vieleSchrifttypen keinen eingebauten ex-Wert besitzen und dieser recht schwer zu berechnen

Abbildung 4-6: Unterschiedliche x-Höhen


ist. Da die Kleinbuchstaben der meisten Schriften ungefähr halb so groß sind wie dieGroßbuchstaben, ist es bequem, einfach anzunehmen, dass 1ex 0,5em entspricht.

Einige wenige Browser, darunter die Mac-Version des Internet Explorer 5, versuchen diex-Höhe dadurch herauszubekommen, dass sie intern ein kleingeschriebenes x berechnenund die Pixel zählen, um dessen Höhe im Verhältnis zur angegebenen Schriftgröße(sprich: font-size) zu ermitteln. Diese Methode ist zwar nicht perfekt, aber wesentlichbesser, als einfach anzunehmen, 1ex entspräche 0,5em. Wir CSS-Praktiker hoffen, dass imLaufe der Zeit mehr User Agents den tatsächlichen Wert für ex verwenden und die Notlö-sung mit dem halben em verschwindet.

Längenangaben in Pixeln

An der Oberfläche scheinen Pixel sehr leicht zu handhaben. Wenn Sie nah genug an einenMonitor herangehen, können Sie sehen, dass er aus einem Gitter aus kleinen Kästchenbesteht. Jedes Kästchen ist ein Pixel. Wenn Sie die Länge und Breite eines Elements miteiner bestimmten Anzahl von Pixeln angeben wie in diesem Beispiel:

<p>

Das folgende Bild ist 20 Pixel hoch und breit: <img src="test.gif"

style="width: 20px; height: 20px;" alt="" />

</p>

würde sich daraus ergeben, dass die Höhe und Breite dieses Elements genau der angege-benen Anzahl von Bildschirmpunkten entspricht (siehe Abbildung 4-7).

Gelegentlich kann die Verwendung von Pixeln jedoch zu Problemen führen. Wenn Sieeine Schriftgröße in Pixeln angeben, können Benutzer des Internet Explorer für Windowsbis zur Version 6 (die beim Schreiben dieses Buches aktuelle Version) die Größe des Tex-tes über das entsprechende Menü in ihrem Browser nicht verändern. Das kann problema-tisch werden, wenn der Text für einen Benutzer zu klein zum Lesen ist. Wenn Sie jedochflexiblere Maßeinheiten wie em einsetzen, können Benutzer die Textgröße an ihre Bedürf-nisse anpassen. (Autoren, die sehr genau auf ihr Design bedacht sind, betrachten dasselbstverständlich eher als Nachteil.)

Andererseits sind Maßangaben in Pixeln perfekt, um die Größe von Bildern festzulegen,die bereits eine bestimmte Anzahl von Pixeln hoch und breit sind. Die einzige Situation,in der Sie keine Pixel als Größenangabe verwenden wollen, tritt auf, wenn Sie die Bilderanalog zur Textgröße skalieren möchten. Dieser praktische und gelegentlich sogar nützli-che Ansatz ist am sinnvollsten, wenn Sie anstelle von pixelbasierten Bildern mit Vektor-grafiken (inklusive der »Scalable Vector Graphics«, SVG, von denen wir in Zukunft sichernoch einiges hören werden) arbeiten.

Abbildung 4-7: Die Verwendung von Pixeln als Längenangabe


Pixeltheorie

Warum sind Pixel aber als relative Einheiten definiert? Ich habe ja bereits gesagt, dass diekleinen Bildschirmpunkte als Pixel bezeichnet werden. Aber wie viele dieser Punkte pas-sen auf einen Zentimeter? Diese Frage scheint unlogisch zu sein, aber warten Sie nocheinen kleinen Moment.

Zu Pixeln sagt die CSS-Spezifikation, dass eine »Referenz-Pixelrate« zur Berechnung her-angezogen werden soll, wenn sich die Bildschirmauflösung stark von 96 ppi unterschei-det. In CSS2 war diese mit 90 ppi angegeben. CSS2.1 empfiehlt dagegen 96 ppi, eineGrößenordnung, die sowohl auf Windows-Rechnern, wie auch von den modernenMacintosh-Browsern wie IE5 und Safari unterstützt wird.

Im Allgemeinen wird ein Webbrowser bei Angaben wie font-size: 18px mit ziemlicherSicherheit die tatsächlichen Pixel Ihres Monitors zur Berechnung verwenden – schließlichsind sie ja schon vorhanden. Bei anderen Ausgabegeräten wie Druckern wird der UserAgent die Pixelgröße in etwas Passenderes umwandeln. Anders gesagt: Beim Druckenmuss ermittelt werden, wie viele Punkte einem Pixel tatsächlich entsprechen, und hierfürkann die Referenz-Pixelrate von 96 ppi verwendet werden.

Ein mögliches Problem bei Maßangaben in Pixeln finden wir in einer frü-hen Implementierung von CSS1 im Internet Explorer 3.x. Sollte ein Doku-ment gedruckt werden, ging Internet Explorer 3 davon aus, dass 18px auch18 Punkten entsprach. Auf einem 600-dpi-Drucker sind das 18/600 oder3/100 Inch, also 0,03 Inch (0,0762 Zentimeter). Das ist schon ziemlichschwer zu lesen!

Auf Grund dieser Möglichkeit zur Skalierung werden Pixel als relative Maßeinheit ange-sehen, auch wenn sie sich beim Webdesign eher wie absolute Einheiten verhalten.

Und was jetzt?

Wenn man alle möglichen Probleme und Eigenheiten in Betracht zieht, ist es wohl amsinnvollsten, relative Einheiten – insbesondere em und wo angebracht auch px – zu ver-wenden. Da ex in den meisten Browsern einfach nur als Bruchteil von em berechnet wird,ist dessen Verwendung im Moment nicht besonders nützlich. Sollten mehr User Agentsex als eigenständige Maßeinheit verwenden, könnte sich das jedoch ändern. Im Allgemei-nen ist die Verwendung von em jedoch flexibler, weil diese analog zur Buchstabengrößeskalierbar ist, wodurch Elemente und Elementzwischenräume konsistenter bleiben.

Bei anderen Aspekten von Elementen, wie der Positionierung oder der Angabe von Rah-men, ist der Einsatz von Pixeln als Maßeinheit eher angebracht. Es hängt alles von derSituation ab. Bei Designs etwa, die früher eher GIF-Grafiken für das Layout benutzthaben, werden Pixelangaben für die Ränder (margins) einen identischen Effekt erzeugen.Die Konvertierung dieser Abstände in em-Einheiten gestattet es, die Elemente passend zurTextgröße zu skalieren – ob das gut ist oder nicht, ist situationsbedingt.

URLs | 95

URLsWenn Sie bereits Webseiten erstellt haben, kennen Sie auch URLs (oder URIs, wie sie inCSS2.1 genannt werden). Das allgemeine Format lautet (beispielsweise in einer @import-Anweisung):

url(Protokoll://Server/Pfadname)

Im obigen Beispiel wird eine so genannte absolute URL definiert. Hiermit meine ich eineURL, die unabhängig von ihrem Fundort (von der Seite, in der die URL steht) funktio-niert und eine abolute Adresse im Web definiert. Heißt Ihr Server zum Beispiel www.waffles.org und im Verzeichnis pix liegt ein Bild namens waffle22.gif, so wäre die absoluteURL für dieses Bild:

http://www.waffles.org/pix/waffle22.gif

Unabhängig davon, wo sich die Seite befindet, in der die URL gefunden wurde (etwawww.waffles.org oder auch web.pancakes.com), ist die URL gültig.

Der zweite Typ von URL wird relative URL genannt, weil sie einen Ort relativ zum Doku-ment bezeichnet, in dem die URL zu finden ist. Wenn Sie sich also auf einen relativen Ortbeziehen wie etwa eine Datei im gleichen Verzeichnis wie Ihre Webseite, dann lautet dasallgemeine Format:

url(Pfadname)

Das funktioniert allerdings nur, wenn sich das Bild auf dem gleichen Server befindet wiedie Seite, die die URL enthält. Um beim Thema zu bleiben nehmen, wir für dieses Beispieleine Webseite mit der Adresse http://www.waffles.org/syrup.html, in die die Dateiwaffle22.gif eingebunden werden soll. Die relative URL hierfür würde lauten:

pix/waffle22.gif

Der obige Pfad funktioniert, weil der Webbrowser weiß, dass er bei der Suche nach derDatei von dem Ort ausgehen muss, an dem das Webdokument zu finden ist. Auf dieseAdresse wird dann der relative Pfad bezogen. In unserem Fall wird der Pfadname pix/waffle22.gif dem Servernamen http://www.waffles.org/ hinzugefügt. Daraus ergibt sichhttp://www.waffles.org/pix/waffle22.gif. Fast immer können Sie anstelle einer relativenURL eine absolute benutzen. Hierbei macht es keinen Unterschied, welche Art von URLSie benutzen, solange Sie einen gültigen Speicherort für das betreffende Dokument ange-ben.

In CSS verhalten sich URLs relativ zum Speicherort des Stylesheets und nicht zumHTML-Dokument, welches das Stylesheet importiert. Wenn Sie beispielsweise ein exter-nes Stylesheet verwenden, das ein weiteres Stylesheet einbindet, und Sie wollen daszweite Stylesheet über eine relative URL importieren, so muss diese relativ zum erstenStylesheet formuliert werden. Nehmen wir zum Beispiel ein HTML-Dokument unter derAdresse http://www.waffles.org/toppings/tips.html. Dieses bindet über ein link-Tag einStylesheet ein, das unter der Adresse http://www.waffles.org/styles/basic.css zu finden ist:



href="http://www.waffles.org/styles/basic.css">

Innerhalb der Datei basic.css bezieht sich eine @import-Anweisung auf ein weiteres Style-sheet:

@import url(special/toppings.css);

Die Anweisung @import weist den Browser an, das zweite Stylesheet unter der Adressehttp://www.waffles.org/styles/special/toppings.css zu suchen und nicht unter http://www.waffles.org/toppings/special/toppings.css. Liegt Ihr Stylesheet jedoch unter der zweitenAdresse, müsste die @import-Direktive in basic.css folgendermaßen lauten:

@import url(http://www.waffles.org/toppings/special/toppings.css);

Netscape Navigator 4 interpretiert relative URLs als relativ zum HTML-Dokument, nicht zum Stylesheet. Wenn Sie viele Besucher auf Ihrer Sitehaben, die NN4.x benutzen, oder einfach nur sicherstellen möchten, dassauch NN4.x alle Stylesheets und Hintergrundbilder findet, ist es im Allge-meinen am einfachsten, absolute URLs zu verwenden, weil diese auch vonNavigator korrekt behandelt werden.

Beachten Sie, dass zwischen url und der öffnenden runden Klammer keine Leerzeichenstehen dürfen:

body {background: url(http://www.pix.web/picture1.jpg) /* richtig */

body {background: url (images/picture2.jpg);} /* FALSCH */

Werden dennoch Leerzeichen verwendet, wird die gesamte Deklaration ungültig undnicht weiter beachtet.

SchlüsselwörterWenn ein Wert mit einem bestimmten Begriff umschrieben werden muss, benutzt manSchlüsselwörter. Ein häufiges Beispiel hierfür ist none, das sich von 0 (null) unterscheidet.Um beispielsweise die Unterstreichungen von Links in einem HTML-Dokument zu ent-fernen, können Sie schreiben:

a:link, a:visited {text-decoration: none;}

Wenn Sie dagegen Unterstreichungen erzwingen möchten, benutzen Sie stattdessen dasSchlüsselwort underline.

Wenn eine Eigenschaft Schlüsselwörter als Werte akzeptiert, haben diese nur für dieseeine Eigenschaft Gültigkeit. Wenn zwei Eigenschaften das gleiche Wort als Schlüsselwortverwenden, hat das Verhalten des einen Schlüsselworts nichts mit dem anderen zu tun.Das Schlüsselwort normal hat demnach für letter-spacing eine andere Bedeutung als fürfont-style.

Einheiten in CSS2 | 97

inherit

In CSS2.1 gibt es ein Schlüsselwort, das für alle Eigenschaften gleichermaßen gilt:inherit. Dieser Wert sorgt dafür, dass eine Eigenschaft den Wert ihres Elternelementserbt. In den meisten Fällen brauchen Sie die Vererbung jedoch nicht extra anzugeben, dasie für die meisten Eigenschaften ohnehin das Standardverhalten ist. Trotzdem kanninherit gelegentlich ganz nützlich sein.

Nehmen Sie beispielsweise folgende Stildefinitionen und den dazugehörigen Code:

#toolbar {background: blue; color: white;}

<div id="toolbar">

<a href="one.html">One</a> | <a href="two.html">Two</a> |

<a href="three.html">Three</a>

</div>

Für das Element div wurde hier ein blauer Hintergrund und ein weißer Vordergrund fest-gelegt. Trotzdem richtet sich die Darstellung der Links mit größter Wahrscheinlichkeitnach den Voreinstellungen des Browsers. Sie werden ziemlich sicher als blauer Text voreinem blauen Hintergrund mit weißen vertikalen Balken dazwischen angezeigt.

Sie könnten eine Regel schreiben, die ausschließlich dafür sorgt, dass die Links innerhalbder Werkzeugleiste (Toolbar) weiß dargestellt werden. Allerdings könnten Sie die Dingedurch die Verwendung von inherit etwas robuster gestalten. Hierfür brauchen Sie nurdie folgende Regel in Ihr Stylesheet einzufügen:

#toolbar a {color: inherit;}

Hierdurch wird die von color geerbte Farbe anstelle der Standardeinstellungen des Brow-sers verwendet. Normalerweise haben direkt zugewiesene Stildefinitionen Vorrang gegen-über vererbten Stilen, doch inherit kann dieses Verhalten umkehren.

Einheiten in CSS2Zu den hier behandelten Maßeinheiten von CSS2.1 gibt es in CSS2 ein paar zusätzlicheEinheiten, die alle mit akustischen Stylesheets zu tun haben (die von Browsern mit derFähigkeit zur Sprachausgabe benutzt werden können). Diese Einheiten sind nicht Teilvon CSS2.1. Da sie allerdings in zukünftigen Versionen von CSS wieder auftauchen kön-nen, wollen wir sie hier kurz behandeln:

WinkelWerden verwendet, um festzulegen, aus welcher Richtung ein bestimmter Klangkommen soll. Es gibt drei Arten, um einen Winkel zu beschreiben: in Grad (deg),Gradienten (grad) und im Bogenmaß (rad). (Das deutsche Wort »Grad« entsprichtdem englischen »degree«, während das englische Wort »grad« als Abkürzung für»gradients«, also Gradienten, steht. – Anm.d.Ü.) Ein rechter Winkel könnte dem-


nach formuliert werden als 90deg, 100grad oder 1.57rad. In allen Fällen werden dieWerte in Gradangaben zwischen 0 und 360 umgerechnet. Dies gilt übrigens auch fürdie hier erlaubten negativen Werte. Die Angabe –90deg ist demnach das Gleiche wie270deg.

ZeiteinheitenWerden verwendet, um die Verzögerungen zwischen der Sprachausgabe verschiede-ner Elemente festzulegen. Sie können entweder in Millisekunden (ms) oder in Sekun-den (s) angegeben werden. 100ms entsprechen also 0.1s. Zeitangaben dürfen keinenegativen Werte haben, weil CSS bemüht ist, Widersprüche zu vermeiden.

FrequenzangabenWerden verwendet, um die Frequenz für Töne festzulegen, die Browser mit Sprach-ausgabe erzeugen können. Die Werte können entweder in Hertz (Hz) oder in Mega-hertz (mHz) angegeben werden und dürfen nicht negativ sein. Die Markierungen fürdiese Werte unterscheiden nicht zwischen Groß- und Kleinschreibung. Es gibt alsokeinen Unterschied zwischen 10mHz und 10mhz.

Der einzige beim Schreiben dieses Buches bekannte User Agent, der diese Art von Wertenunterstützt, ist Emacspeak, der eine Implementierung von akustischen Stylesheets bietet.Weitere Details zu akustischen Stylesheets finden Sie in Kapitel 14.

Zusätzlich zu diesen Werten gibt es noch einen alten Freund mit einem neuen Namen. EinURI ist ein Uniform Resource Identifier, was praktisch gesehen nur ein anderer Name füreinen Uniform Resource Locator (URL) ist. Sowohl CSS2 als auch CSS2.1 verlangen, dassURIs in der Form url(...) deklariert werden. In der Praxis gibt es also keine Veränderung.

ZusammenfassungEinheiten und Werte sind ein weites Feld – von Längeneinheiten bis hin zu speziellenSchlüsselwörtern, die bestimmte Beziehungen ausdrücken (wie etwa smaller), von Einhei-ten für Farben bis hin zu Speicherorten von Dateien (z.B. Bilder). In der Regel werden sievon Browsern vollkommen korrekt gehandhabt. Es sind diese kleinen Fehler, die nervenkönnen. Die Unfähigkeit von Navigator 4.x, relative URLs richtig zu interpretieren, hatschon viele Autoren getäuscht und dazu geführt, dass sie sich allzu oft auf absolute URLsverlassen. Farben sind ein weiterer Bereich, den die meisten Browser sehr gut beherrschen,mal abgesehen von ein paar kleinen Macken hier und da. Die Launen vieler Browser beimUmgang mit Längeneinheiten sind, auch wenn sie noch lange nicht als Programmierfehlerzu bezeichnen sind, dagegen für die meisten Autoren ein interessantes Problem.

Diese Einheiten haben alle ihre Vor- und Nachteile, abhängig von den Umständen, unterdenen sie eingesetzt werden. Einige haben wir bereits gesehen (und die Feinheiten dieserUmstände werden im Rest dieses Buchs besprochen). Als Nächstes kommen wir zu denCSS-Eigenschaften, die beschreiben, wie man die Darstellung von Text beeinflussenkann.

| 99

KAPITEL 5

Zeichensätze

Die Autoren der CSS-Spezifikation haben schon ganz richtig erkannt, dass die Möglich-keit, Zeichensätze (Schriften, Fonts) auszuwählen, ein sehr beliebtes und (wichtiges)Merkmal von CSS sein würde. Viele Seiten wurden im Laufe der Zeit mit Dutzenden odersogar Hunderten von <FONT FACE="...">-Tags zugemüllt. Daher wundert es nicht, wennder Abschnitt »Zeichensatz-Eigenschaften« der Spezifikation mit dem Satz beginnt: »DieMöglichkeit, Eigenschaften für Zeichensätze festzulegen, wird eine der häufigstenAnwendungen von Stylesheets sein.«

Trotz dieser Bedeutung gibt es bis heute keine Möglichkeit, eine konsequente Benutzungvon Zeichensätzen im Web sicherzustellen, weil es keine einheitliche Möglichkeit gibt,Schriften und deren Unterarten zu beschreiben. So sind die Schriften Times, Times NewRoman und TimesNR sich sehr ähnlich oder sogar gleich, aber woher soll ein Benutzer-programm das wissen? Zwar kann ein Autor in seinem Dokument »TimesNR« angeben;was aber passiert, wenn der betreffende Zeichensatz beim Benutzer nicht installiert ist?Und selbst wenn stattdessen Times New Roman vorhanden ist, kann der Browser nichtwissen, dass beide Zeichensätze quasi identisch sind. Falls Sie darauf hoffen, einem Lesereinen bestimmten Zeichensatz aufzwingen zu können, vergessen Sie die Sache bessergleich.

Obwohl in CSS2 Mechanismen für das Herunterladen von Zeichensätzen definiert wur-den, wurden diese von Webbrowsern nicht besonders gut implementiert. Außerdemkann der Leser ein Herunterladen von Fonts aus Performance-Gründen einfach unterbin-den. CSS bietet nicht mehr Kontrolle über Zeichensätze als ein Textverarbeitungspro-gramm auch. Wenn jemand ein von Ihnen erstelltes Microsoft Office-Dokument lädt,wird dessen Darstellung von den Zeichensätzen abhängen, die auf dem Rechner desLesers installiert sind. Wenn der Leser nicht die gleichen Schriften wie Sie hat, wird sichdie Darstellung unterscheiden. Das Gleiche gilt für Dokumente, die mit Hilfe von CSSerstellt wurden.

Das Problem mit den Zeichensatznamen wird besonders verwirrend, wenn Sie in dasReich der verschiedenen Variationen wie fett gedrucktem oder kursivem Text vordringen.

100 | Kapitel 5: Zeichensätze

Die meisten Leute wissen, wie kursiver Text aussieht, aber die wenigsten können erklä-ren, wie er sich von »abgeschrägtem« Text unterscheidet. »Abgeschrägt« bzw. »slanted«ist in der englischen Sprache nicht einmal der einzige andere Ausdruck für kursiven Text;unter anderem werden auch italic, oblique, inclined (geneigt) und cursive benutzt. So kanndie eine Kursivschrift den Namen TimesItalic tragen, während eine andere vielleichtGeorgiaOblique heißt. Selbst wenn es sich bei beiden um die kursive Variante der betref-fenden Schrift handelt, tragen beide sehr unterschiedliche Bezeichnungen. Ähnlich ver-hält es sich mit Schriftvarianten, die fett gedruckt dargestellt werden; Dinge wie bold,black und heavy können, müssen aber nicht das Gleiche bedeuten.

CSS versucht, diese Zeichensatzfragen aufzulösen, kann aber auch keine vollständigeLösung bieten. Am schwierigsten gestaltet sich hierbei das Ermitteln der richtigen Schrif-tenfamilie (font-family), der Schriftgewichtung (font-weight) und – auf einem knappendritten Platz – die Berechnung der Schriftgröße. Die von CSS behandelten Zeichensatzfra-gen beziehen sich auf Schriftschnitte, wie Kursivschrift, und auf Schriftvarianten, wiezum Beispiel Kapitälchen. Diese sind relativ gesehen wesentlich einfacher zu handhaben.Die verschiedenen Aspekte bei der Arbeit mit Zeichensätzen werden mit einer einzigenCSS-Eigenschaft beschrieben, font, die wir später in diesem Kapitel detailliert betrachtenwerden. Zuerst wollen wir uns jedoch mit den verschiedenen Schriftenfamilien befassen,weil sie die wichtigste Grundlage für die Auswahl des richtigen Fonts für Ihr Dokumentbilden.

ZeichensatzfamilienObwohl wir bereits gesehen haben, dass es eine ganze Reihe verschiedener Möglichkeitengibt, den gleichen Zeichensatz zu benennen, unternimmt CSS den tapferen Versuch,Benutzerprogrammen zu helfen, diese Unordnung in den Griff zu bekommen. Was wirfür einen »Font« halten, kann schließlich aus vielen Beschreibungsvariationen für fettgedruckten, kursiven und anderen Text bestehen. Vermutlich kennen Sie den SchrifttypTimes. Aber auch Times ist eine Kombination aus vielen verschiedenen Varianten, unteranderem TimesBold, TimesItalic, TimesOblique, TimesBoldItalic, TimesBoldObliqueund so weiter. Jede dieser Varianten ist eine eigene Schriftart, aber das, was wir normaler-weise als »Times« bezeichnen, ist eine Kombination aus diesen verschiedenen Varianten.Mit anderen Worten: Times ist eigentlich eine Schriftenfamilie (font family) und kein ein-zelner Zeichensatz, auch wenn die meisten von uns Schriften als Einheiten betrachten.

Zusätzlich zu bestimmten Schriftenfamilien wie Times, Verdana, Helvetica oder Arialdefiniert CSS fünf allgemeine Schriftenfamilien:

SerifenschriftenDiese Fonts sind Proportionalschriften und besitzen Serifen. Ein Font wird als pro-portional bezeichnet, wenn die Buchstaben auf Grund ihrer Größe unterschiedlicheBreiten haben, wie beispielsweise ein kleingeschriebenes i und ein kleingeschriebenes

Zeichensatzfamilien | 101

m. (Der für diesen Absatz benutzte Zeichensatz ist so eine Proportionalschrift.) AlsSerifen bezeichnet man die Verzierungen an den Linienenden jedes Zeichens, zumBeispiel die kleinen Linien am oberen und unteren Ende eines großgeschriebenen Ioder am unteren Ende der beiden Beine eines großgeschriebenen A. Beispiele fürSerifenschriften sind Times, Georgia und New Century Schoolbook.

Serifenlose SchriftenDas sind ebenfalls Proportionalschriften, die aber keine Serifen aufweisen. Beispielefür serifenlose Schriften (sans-serif) sind Helvetica, Geneva, Verdana, Arial und Uni-vers.

FestbreitenschriftenFestbreitenschriften (monospace) sind nicht proportional. Sie werden normalerweisebenutzt, um mit einer Schreibmaschine geschriebenen Text, die Ausgaben einesalten Matrixdruckers oder eines noch älteren Video-Anzeigeterminals nachzubilden.Bei diesen Zeichensätzen haben alle Buchstaben exakt die gleiche Breite. Ein kleinge-schriebenes i hat also die gleiche Breite wie ein kleingeschriebenes m. Diese Schriftenkönnen Serifen haben oder auch nicht. Besteht ein Zeichensatz also aus gleich brei-ten Buchstaben, wird er, unabhängig von eventuell vorhandenen Serifen, als Fest-breitenschrift bezeichnet. Beispiele für Festbreitenschriften sind Courier, CourierNew und Andale Mono.

Kursive SchriftenDiese Schriften sollen Handschriften nachbilden. Sie bestehen zum größten Teil ausKurven und besitzen zudem Schriftverzierungen, die über normale Serifen hinausge-hen. So könnte ein großgeschriebenes A einen kleinen Schwung am unteren Endedes linken Beins aufweisen und komplett aus kleinen Verzierungen und Schwüngenbestehen. Beispiele für Kursivschriften sind Zapf Chancery, Author und Comic Sans.

FantasieschriftenDiese Schriften lassen sich nicht durch ein gemeinsames Merkmal definieren, son-dern nur dadurch, dass sie in keine der anderen Schriftfamilien passen. Beispiele fürFantasieschriften sind Western, Woodblock und Klingon.

Theoretisch lässt sich jede Schriftfamilie, die ein Benutzer installieren kann, in eine dieserallgemeinen Familien einordnen. In der Praxis ist das allerdings nicht immer möglich,aber das ist (falls überhaupt) nur selten der Fall.

Die Verwendung allgemeiner SchriftfamilienJede der oben genannten Familien kann als Wert für die CSS-Eigenschaft font-family ineinem Dokument verwendet werden.

Soll Ihr Dokument eine serifenlose Schrift verwenden, die Sie aber nicht genauer bezeich-nen möchten, dann wäre die korrekte Deklaration:

body {font-family: sans-serif;}


Diese Regel veranlasst den Browser, eine serifenlose Schriftfamilie auszuwählen (wie etwaHelvetica) und sie auf das Element body anzuwenden. Dank der Vererbung wird die Aus-wahl dieser Schrift auf alle Elemente weitergereicht, die von body abstammen – es seidenn, ein Selektor mit einer höheren Spezifität überschreibt diesen.

Allein schon durch die Verwendung dieser allgemeinen Schriftfamilien kann ein Autorein sehr ausgeklügeltes Stylesheet erstellen. Die folgende Regel wurde für die Darstellungvon Abbildung 5-1 benutzt.

body {font-family: serif;}

h1, h2, h3, h4 {font-family: sans-serif;}

code, pre, tt, span.input {font-family: monospace;}

p.signature {font-family: cursive;}

Durch diese Anweisungen wird ein Großteil des Dokuments in einer Serifenschrift (z.B.Times) dargestellt. Hierzu gehören alle Absätze außer denen, deren Attribut für class denWert signature hat. Diese werden stattdessen in einer Kursivschrift wie etwa Author dar-gestellt. Die Überschriften der Ebene 1 bis 4 erscheinen ohne Serifen (z.B. in Helvetica),während die Elemente code, pre, tt und span.input in Festbreitenschrift, z.B. in Courier,dargestellt werden, die für diese Elemente sowieso am häufigsten zum Einsatz kommt.

font-family

Werte: [[<Schriftfamilie> | <allgemeine Schriftfamilie>],]* [<Schriftfamilie> | <allgemeine Schriftfamilie>] | inherit

Startwert: abhängig vom Benutzerprogramm


Vererbt: ja

Berechneter Wert: wie angegeben

Abbildung 5-1: Verschiedene Schriftfamilien

Zeichensatzfamilien | 103

Eine Schriftfamilie angebenVielleicht hat ein Autor aber auch genauere Vorstellungen davon, welche Schriften beider Darstellung des Dokuments oder Elements zum Einsatz kommen sollen. Auf ähnlicheWeise will ein Benutzer vielleicht ein Stylesheet schreiben, das für die Darstellung all sei-ner Dokumente benutzt werden soll. In beiden Fällen wird auch hierfür die Eigenschaftfont-family verwendet.

Wir nehmen einmal an, für alle h1-Elemente soll Georgia als Schrifttyp benutzt werden.Die einfachste Regel hierfür würde lauten:

h1 {font-family: Georgia;}

Diese Anweisung sorgt dafür, dass ein Benutzerprogramm versucht, alle h1-Elemente inder Schrift Georgia darzustellen (siehe Abbildung 5-2).

Selbstverständlich geht die oben stehende Regel davon aus, dass Georgia als Schrift fürdie Darstellung auch zur Verfügung steht. Ist das nicht der Fall, ist das Benutzerpro-gramm auch nicht in der Lage, diese Regel anzuwenden. Es wird die Regeln nicht überge-hen, kann aber, wenn es keine Schrift namens »Georgia« findet, nichts anderes tun, alsh1-Elemente mit der Standardschrift des Browsers darzustellen.

Aber selbst in diesem Fall ist noch nicht alles verloren. Wenn Sie genaue Namen vonSchriften mit allgemeinen Schriftfamilien kombinieren, können Sie Dokumente erstellen,die, wenn auch nicht genauso, doch zumindest ungefähr Ihren Vorstellungen entspre-chend ausgegeben werden. Um das vorige Beispiel weiterzuführen, soll das Benutzerpro-gramm nun Georgia verwenden, wenn diese Schrift verfügbar ist, ansonsten eine andereSerifenschrift:

h1 {font-family: Georgia, serif;}

Hat ein Benutzer Georgia nicht installiert, aber Times steht zur Verfügung, könnte dasBenutzerprogramm stattdessen Times zur Darstellung von h1-Elementen verwenden.Selbst wenn Times nicht das Gleiche wie Georgia ist, reicht die Ähnlichkeit vermutlichtrotzdem aus.

Aus dem oben genannten Grund sollten Sie zusätzlich zu einem genauen Schriftnamenimmer auch eine allgemeine Schriftfamilie in einer font-family-Regel angeben. Hierdurchschaffen Sie sich eine Ausweichlösung, die der Browser einsetzen kann, wenn er die vomAutor gewünschte Schrift nicht findet. Dies ist besonders sinnvoll, wenn Stylesheets ineiner plattformübergreifenden Umgebung benutzt werden, in der es keine Garantie gibt,dass alle Benutzer die gleichen Zeichensätze installiert haben. Mit ziemlicher Sicherheithaben alle Windows-Computer dieser Welt Arial und Times New Roman installiert, aber

Abbildung 5-2: Ein in der Schrift Georgia dargestelltes h1-Element


auf vielen Macintosh-Rechnern und Unix-Maschinen ist das nicht der Fall. Andererseitssind die Schriften Chicago und Charcoal wohl auf allen aktuellen Macs zu finden; aufWindows- oder Unix-Rechnern haben Sie schon Glück, wenn eine von beiden zu findenist, mal ganz abgesehen von beiden. Hier ein paar weitere Beispiele:

h1 {font-family: Arial, sans-serif;}

h2 {font-family: Charcoal, sans-serif;}

p {font-family: TimesNR, serif;}

address {font-family: Chicago, sans-serif;}

Wenn Sie sich mit Schriften auskennen, fallen Ihnen vermutlich gleich mehrere Schriftenein, die Sie für die Darstellung eines bestimmten Elements verwenden können. Vielleichtwollen Sie alle Absätze in einem Dokument in Times anzeigen, gleichzeitig aber auch dieSchriften TimesNR, Georgia, New Century Schoolbook und New York akzeptieren (allesSerifenschriften). Zuerst überlegen Sie sich eine Reihenfolge entsprechend Ihren Vorlie-ben und schreiben dann die Namen durch Kommas getrennt hintereinander:

p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,

'New York', serif;}

Basierend auf dieser Liste und Reihenfolge sucht das Benutzerprogramm nun nach denSchriften. Sind keine der aufgeführten Fonts verfügbar, wird einfach eine Serifenschriftausgewählt, die auf dem Rechner installiert ist.

Die Verwendung von Anführungszeichen

Vielleicht haben Sie schon die einfachen Anführungszeichen im obigen Beispiel bemerkt,die wir bisher noch nicht gesehen haben. Anführungszeichen werden in einer font-family-Deklaration nur gebraucht, wenn der Name einer Schriftart ein oder mehrereLeerzeichen (z.B. New York) oder Zeichen wie # oder $ enthält. In beiden Fällen mussder Name der Schrift von Anführungszeichen umgeben sein, damit das Benutzerpro-gramm den Schriftnamen auch richtig erkennt. (Kommas reichen hier leider nicht aus.)Die Schrift Karrank% sollte also vermutlich mit Anführungszeichen umgeben werden:

h2 {font-family: Wedgie, 'Karrank%', Klingon, fantasy;}

Lassen Sie die Anführungszeichen weg, kann es passieren, dass der Browser diesenNamen einfach ignoriert, selbst wenn der Rest der Regel korrekt verarbeitet wird. DieBenutzung von Anführungszeichen wird laut Spezifikation von CSS2.1 zwar nicht aus-drücklich verlangt, sondern nur empfohlen, aber viel höflicher formuliert werden Siediese »Forderung« in der CSS-Spezifikation nicht finden. Auf ähnliche Weise ist es auchnur »empfohlen«, dass Font-Namen, die Leerzeichen enthalten, mit Anführungszeichenumgeben werden sollten. Tatsächlich müssen die Namen von Schriften nur dann einge-fasst sein, wenn eine Verwechslungsgefahr mit reservierten Schlüsselwörtern besteht.Eine Schrift namens »cursive« muss also auf jeden Fall mit Anführungszeichen umgebenwerden.

Font-Namen, die nur aus einem einzigen Wort bestehen und nicht mit Schlüsselwörternfür font-family kollidieren, benötigen demnach offensichtlich keine Anführungszeichen.

Gewichtung von Zeichensätzen | 105

Genauso sollten allgemeine Namen für Schriftfamilien (serif, monospace usw.) nicht mitAnführungszeichen umgeben werden, wenn tatsächlich diese Namen gemeint sind. TunSie das trotzdem, geht das Benutzerprogramm davon aus, dass Sie eine bestimmte Schriftmit exakt diesem Namen (z.B. »serif«) meinen.

Sie können wahlweise einfache oder auch doppelte Anführungszeichen benutzen. Dabeisollten Sie bei der Verwendung von font-family in einem style-Attribut beachten, nichtdie gleichen Anführungszeichen zu benutzen wie für das Attribut. Wenn Sie also bereitsdoppelte Anführungszeichen für die eigentliche font-family-Regel benutzen, muss dasAttribut in einfachen Anführungszeichen stehen, wie im folgenden Beispiel:

p {font-family: sans-serif;} /* Absätze werden standardmäßig in serifenloser Schrift */

/* angezeigt */



<p style="font-family: 'New Century Schoolbook', Times, serif;">...</p>



<p style="font-family: "New Century Schoolbook", Times, serif;">...</p>

Wenn Sie hier trotzdem doppelte Anführungszeichen verwenden, würde dies zu Konflik-ten mit der Schreibweise für das Attribut führen (siehe Abbildung 5-3).

Gewichtung von ZeichensätzenSogar wenn Sie es selbst noch nicht wissen, haben Sie bereits Erfahrung mit Schriftge-wichten. Fett gedruckte Schrift ist nur eines von vielen Beispielen eines erhöhten Schrift-gewichts. Zumindest theoretisch gibt Ihnen CSS mit der Eigenschaft font-weight einegrößere Kontrolle über die Gewichtung von Zeichensätzen.

Im Allgemeinen wird ein Schrifttyp umso »fetter«, je »bolder« oder »darker« er erscheint.Es gibt eine Menge Benennungsmöglichkeiten für fette Schriftvarianten. So besitzt dieSchriftfamilie Zurich eine Reihe von Varianten mit Namen wie Zurich Bold, Zurich Black,Zurich UltraBlack, Zurich Light und Zurich Regular. All diese Schriftschnitte basieren aufdem gleichen Font, haben aber ein unterschiedliches Schriftgewicht.

Abbildung 5-3: Die Tücken bei der Benutzung falscher Anführungszeichen


Vielleicht wollen Sie in einem Dokument die Schrift Zurich verwenden und dabei die ver-schieden gewichteten Schriftschnitte einsetzen. Sie könnten diese direkt in der Eigen-schaft font-family ansprechen, obwohl das keine besonders gute Idee ist. Davonabgesehen macht es auch keinen wirklichen Spaß, ein Stylesheet wie das hier zu schrei-ben:

h1 {font-family: 'Zurich UltraBlack', sans-serif;}

h2 {font-family: 'Zurich Black', sans-serif;}

h3 {font-family: 'Zurich Bold', sans-serif;}

h4, p {font-family: Zurich, sans-serif;}

small {font-family: 'Zurich Light', sans-serif;}

Mal abgesehen von der offensichtlichen Eintönigkeit, die das Schreiben solch eines Style-sheets mit sich bringt, funktioniert es nur, wenn jeder die gleiche Schrift installiert hat.Das ist ziemlich sicher nicht der Fall. Es wäre wesentlich sinnvoller, eine Schriftfamilie fürdas gesamte Dokument anzugeben und den verschiedenen Elementen dann verschiedeneSchriftgewichte zuzuweisen. Theoretisch funktioniert das mit den verschiedenen Wertenfür die Eigenschaft font-weight. Hier eine recht klare font-weight-Deklaration:

b {font-weight: bold;}

Nach dieser Regel soll das Element b in einem fetten Schriftschnitt dargestellt werden.Anders gesagt: Das Schriftgewicht für b-Elemente ist höher als für das übrige Dokument.Das entspricht natürlich unseren Gewohnheiten, weil das Element b bekanntermaßendafür sorgt, dass Text fett dargestellt wird.

Eigentlich wird aber ein Schriftschnitt mit einer höheren Gewichtung für die Darstellungdes b-Elements verwendet. So werden bei einem Absatz, der teilweise fett gedruckterscheinen soll, zwei Varianten des gleichen Fonts verwendet: Times und TimesBold. Dereinfache Text wird in Times dargestellt, während der als »fett« markierte Text stattdessenTimesBold verwendet.

Wie Schriftgewichtung funktioniertDamit Sie verstehen, wie ein Benutzerprogramm das Schriftgewicht eines Fonts ermittelt(ohne dabei weiter auf dessen Vererbung einzugehen), ist es am einfachsten, dies mitHilfe der Schlüsselwörter 100 bis 900 zu tun. Mit Hilfe dieser numerischen Schlüsselwör-

font-weight

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

Startwert: normal


Vererbt: ja

Berechneter Wert: ein numerischer Wert (100 usw.) oder ein numerischer Wert plus einer derrelativen Werte (bolder oder lighter)


ter soll ein häufiges Merkmal bei der Entwicklung von Zeichensätzen wiedergegeben wer-den, bei dem die Fonts in neun »Gewichtsklassen« eingeteilt werden. Der SchriftstandardOpenType arbeitet beispielsweise mit einer numerischen Skala, die aus neun Wertenbesteht. Enthält ein Zeichensatz diese Gewichtungen bereits von sich aus, werden dieZahlen direkt auf die vordefinierten Gewichtsebenen abgebildet. Hierbei gilt 100 als»leichteste« und 900 als »schwerste« Variante.

Tatsächlich haben diese Zahlen jedoch kein eindeutiges Gewicht. Die CSS-Spezifikationbesagt nur, dass jede Zahl mindestens das Schriftgewicht der vorangehenden Zahl habenmuss. Die Angaben 100, 200, 300 und 400 könnten also alle auf den gleichen relativ leich-ten Schriftschnitt abgebildet werden; auf 500 und 600 passt die gleiche etwas schwerereVariante, während 700, 800 und 900 alle im gleichen sehr schweren Schriftschnitt darge-stellt werden. Solange kein Schlüsselwort auf eine Variante passt, die leichter ist als dasvorangehende Schlüsselwort, ist alles in Ordnung.

Tatsächlich werden diese Zahlen den Namen bestimmter Schriftgewichtungen zugeord-net, wobei wir die anderen Werte für font-weight hier nicht weiter beachten. Die Zahl 400ist laut Definition gleichbedeutend mit dem font-weight-Wert normal, während 700 diegleiche Bedeutung hat wie bold. Die übrigen Zahlen passen zu keinem anderen Wert fürfont-weight, können aber auf andere übliche Namen für Font-Varianten passen. Wenneine Zeichensatzfamilie einen Schriftschnitt mit dem Beinamen »Normal«, »Regular«,»Roman« oder »Book« enthält, wird er auf die Zahl 400 abgebildet, während Schrift-schnitte mit dem Beinamen »Medium« der Zahl 500 zugeteilt werden. Ist »Medium«jedoch der einzige verfügbare Schriftschnitt, wird er nicht 500, sondern 400 zugeteilt.

Wenn eine Schriftfamilie weniger als die neun Gewichte enthält, hat der Browser nochmehr zu tun und muss zusätzlich die Lücken füllen. Hierbei geht er nach folgendemSchema vor:

• Gibt es keinen eigenen Schriftschnitt für die Zahl 500, erhält diese Zahl das gleicheGewicht wie 400.

• Gibt es keinen eigenen Schriftschnitt für 300, bekommt diese Zahl die nächstleich-tere Variante nach 400 zugewiesen. Existiert keine leichtere Variante, erhält 300 diegleiche Variante wie 400. In diesem Fall ist das meistens der Schnitt mit dem Namen»Normal« oder »Medium«. Die gleiche Methode wird für die Zahlen 200 und 100angewandt.

• Gibt es für 600 keinen eigenen Schriftschnitt, erhält diese Zahl die nächstschwerereVariante nach 400. Gibt es keine schwerere Variante, erhält 600 das gleiche Gewichtwie 500. Die gleiche Methode wird auch für 700, 800 und 900 benutzt.

Zum besseren Verständnis dieses Gewichtungsschemas wollen wir uns drei Beispiele fürdie Verteilung der Schriftgewichte ansehen. Für unser erstes Beispiel benutzen wir dieOpenType-Schrift Karrank%, die bereits Schriftschnitte für alle neun Gewichte enthält.Die Zahlen werden hierbei den verschiedenen Stufen zugeteilt, wobei die Schlüsselwörternormal und bold zusätzlich auf die Zahlen 400 bzw. 700 abgebildet werden.


Für unser zweites Beispiel nehmen wir die Schriftfamilie Zurich, über die wir zu Beginndieses Abschnitts schon einmal gesprochen haben. Eigentlich müsste die Zuweisung derWerte für font-weight nach dem in Tabelle 5-1 gezeigten Prinzip funktionieren.

Die ersten drei Zahlenwerte werden dem leichtesten Schriftschnitt zugeteilt. Der Schnitt»Regular« erhält wie erwartet außerdem das Schlüsselwort normal und das numerischeGewicht 400. Es gibt einen Schriftschnitt namens »Medium«, der entsprechend denRegeln der Zahl 500 zugewiesen wird. Für 600 gibt es nichts, was zugewiesen werdenkönnte. Daher wird 600 ebenfalls auf den Schriftschnitt »Bold« abgebildet – die gleicheVariante, die auch für 700 bzw. bold verwendet wird. Schließlich werden die Schnitte»Black« und »UltraBlack« noch den Zahlen 800 bzw. 900 zugeteilt. Beachten Sie, dass dieletzte Zuweisung nur dann stattfindet, wenn die Schriftschnitte für diese beiden Wertebereits zugewiesen wären. Ansonsten hätte das Benutzerprogramm sie auch einfach igno-rieren können und ihnen stattdessen eine der Varianten von »Black« zuweisen können.

Zum Schluss wollen wir uns noch eine vereinfachte Version der Schrift »Times« ansehen.In Tabelle 5-2 gibt es nur zwei Gewichtsvarianten: »TimesRegular« und »TimesBold«.

Die Zuweisungen von normal und bold sind noch recht leicht nachzuvollziehen. Das Glei-che gilt für die Zahlen 100 bis 300, denen der Schnitt »Regular« zugewiesen wird, weil eskeinen leichteren Schriftschnitt gibt. Auch 400 wird wie erwartet »Regular« zugewiesen;was aber ist mit 500? Für diese Zahl wird der Schnitt »Regular« (bzw. normal) benutzt,weil es keinen »Medium«-Schnitt gibt. 700 erhält wie immer das Schlüsselwort bold, wäh-rend es für 800 und 900 keine schwereren Schnitte gibt und ihnen daher der nächstleich-tere Schriftschnitt, nämlich »Bold«, zugewiesen wird. Schließlich wird 600 noch demnächstschwereren Schnitt zugewiesen – ebenfalls »Bold«.

Tabelle 5-1: Hypothetische Zuweisung der Schriftgewichte für eine bestimmte Zeichensatzfamilie

Schriftschnitt Zugewiesenes Schlüsselwort Zugewiesene Zahl(en)

Zurich Light 100, 200, 300

Zurich Regular normal 400

Zurich Medium 500

Zurich Bold bold 600, 700

Zurich Black 800

Zurich UltraBlack 900

Tabelle 5-2: Hypothetische Gewichtszuweisungen für »Times«

Schriftschnitt Zugewiesenes Schlüsselwort Zugewiesene Zahlen

TimesRegular normal 100, 200, 300, 400, 500

TimesBold bold 600, 700, 800, 900


Die Werte von font-weight werden vererbt. Wenn Sie einem Absatz also den Wert boldzuweisen, erben alle Kindelemente diese Einstellung (siehe Abbildung 5-4):

p.one {font-weight: bold;}

Das verläuft noch alles in geregelten Bahnen. Es wird aber interessant, wenn Sie die letz-ten zwei Werte benutzen, die wir hier besprechen: bolder und lighter. Im Allgemeinenhaben diese Schlüsselwörter die erwartete Wirkung: Sie sorgen dafür, dass ein Element,bezogen auf das Schriftgewicht seines Elternelements, schwerer oder leichter dargestelltwird. Nehmen wir uns zuerst einmal bolder vor.

Das Schriftgewicht erhöhenWenn Sie für ein Element das Schriftgewicht bolder festlegen, muss der Browser zuerstermitteln, welcher Wert font-weight vom Elternelement vererbt wurde. Dann sucht dasBenutzerprogramm den Zahlenwert für das Schriftgewicht, das eine Stufe schwerer alsdas geerbte Gewicht ist. Steht kein schwereres Gewicht zur Verfügung, setzt das Benut-zerprogramm das Gewicht auf den nächstmöglichen numerischen Wert. Ist der gegen-wärtige Wert bereits 900, bleibt er unverändert. Sie könnten es also mit den folgenden inAbbildung 5-5 gezeigten Situationen zu tun bekommen:

p {font-weight: normal;}

p em {font-weight: bolder;} /* ergibt ein höheres Schriftgewicht, entsprechend dem */

/* Wert '700' */

h1 {font-weight: bold;}

h1 b {font-weight: bolder;} /* existiert kein fetterer Schriftschnitt, wird der */

/* Wert '800' benutzt */

div {font-weight: 100;} /* vorausgesetzt Schriftschnitt 'Light' existiert; */

/* siehe Erklärung */

div strong {font-weight: bolder;} /* ergibt "normales" Schriftgewicht, Wert '400' */

Abbildung 5-4: Vererbte Schriftgewichte

Abbildung 5-5: Text mit größerem Schriftgewicht darstellen


Im ersten Beispiel bewegt sich das Benutzerprogramm auf der Gewichtungsskala vonnormal nach bold. Das entspricht einem Sprung von 400 auf 700. Im zweiten Beispiel hatder Text des Elements h1 bereits den Wert bold. Existiert kein schwererer Schriftschnitt,setzt das Benutzerprogramm das Gewicht des mit b markierten Texts innerhalb eines h1-Elements auf den Wert 800, also den nächsten Schritt nach 700 (das numerische Äquiva-lent zu bold). Da 800 der gleiche Schriftschnitt zugewiesen wurde wie 700, gibt es keinensichtbaren Unterschied zwischen fett gedrucktem und normalem h1-Text, auch wenn dieSchriftgewichte sich unterscheiden.

Im letzten Beispiel erhalten Absätze den leichtesten Schriftschnitt, der möglich ist. Wirgehen davon aus, dass hierfür eine Variante »Light« existiert. Außerdem gibt es für dieseSchriftfamilie noch die Schnitte »Regular« und »Bold«. Demnach wird mit em markierterText als normal dargestellt, da dies der nächstschwerere Schnitt in der Schriftfamilie ist.Was würde aber passieren, wenn die Schrift nur die Schnitte »Regular« und »Bold« ent-hielte? In diesem Fall würden die Deklarationen folgendermaßen ausgewertet:

/* In diesem Beispiel gibt es nur die Schriftschnitte 'Regular' und 'Bold' */

p {font-weight: 100;} /* sieht aus wie als 'normal' markierter Text */

p span {font-weight: bolder;} /* wird auf '700' abgebildet */

Wie Sie sehen, erhält hier das Gewicht 100 den Schriftschnitt normal, obwohl das Schrift-gewicht von font-weight weiterhin 100 ist. Aus diesem Grund erbt von einem p-Element»abstammender« Text in einem span-Element den Wert 100. Von diesem Wert ausge-hend, wird nun das nächsthöhere Schriftgewicht berechnet – der Schriftschnitt »Bold«mit einem Gewicht von 700.

Um zu zeigen, wie das alles funktioniert, wollen wir jetzt noch einen Schritt weitergehenund zwei weitere Regeln und etwas Code hinzufügen. (Die Ergebnisse finden Sie inAbbildung 5-6.)


p {font-weight: 100;} /* sieht aus wie als 'normal' markierter Text */

p span {font-weight: 400;} /* und dieser hier auch */

strong {font-weight: bolder;} /* schwerer als das Elternelement */

strong b {font-weight: bolder;} /*und noch einmal schwerer */

<p>

Dieser Absatz enthält Elemente mit zunehmender Gewichtung: Hier

haben wir ein <span>span-Element, das ein <strong>stark (strong)

hervorgehobenes Element enthält, das wiederum ein <b>als "fett"

(bold) markiertes Element</b></strong></span> enthält.

</p>

Abbildung 5-6: Zunehmende Gewichtung


Bei den letzten zwei verschachtelten Elementen wurde der berechnete Wert für font-weight auf Grund der freizügigen Benutzung des Schlüsselworts bolder erhöht. Wenn Siestattdessen numerische font-weight-Werte für den Text im Absatz verwendet hätten,würden Sie die hier gezeigten Ergebnisse erhalten:

<p>

100 <span> 400 <strong> 700 <b> 800 </b></strong></span>.

</p>

Die ersten beiden Erhöhungsschritte der Schriftgewichtung sind recht steil, weil sieSprünge von 100 auf 400 und von 400 auf bold (700) bedeuten. Nach 700 gibt es keinenschwerer wiegenden Schriftschnitt mehr, weshalb das Benutzerprogramm den Wert vonfont-weight einfach um einen Schritt auf 800 erhöht. Hätten Sie zusätzlich innerhalb desb-Elements noch ein strong-Element eingefügt, sähe die Interpretation des Benutzerpro-gramms nun so aus:

<p>

100 <span> 400 <strong> 700 <b> 800 <strong> 900

</strong></b></strong></span>.

</p>

Hätten Sie innerhalb des innersten strong ein weiteres b-Element eingefügt, wäre dessenWert ebenfalls 900, weil es keine höheren Werte für font-weight geben kann. Wenn wirdavon ausgehen, dass es nur zwei verfügbare Schriftschnitte gibt, würde der Text entwe-der als »Regular« oder »Bold« dargestellt (siehe Abbildung 5-7).

<p>

regular <span> regular <strong> bold <b> bold

<strong> bold </strong></b></strong></span>.

</p>

Das Schriftgewicht verringernWie erwartet, funktioniert das Schlüsselwort lighter auf die gleiche Weise, nur dass sichdas Benutzerprogramm in der Gewichtungsskala abwärts statt aufwärts bewegt. Durcheine kleine Änderung des vorigen Beispiels können Sie das sehr deutlich sehen:


p {font-weight: 900;} /* so fett (schwer) wie möglich, wird als 'bold' interpretiert */

p span {font-weight: 700;} /* wird ebenfalls als 'bold' interpretiert */

strong {font-weight: lighter;} /* niedrigeres Gewicht als das Elternelement */

b {font-weight: lighter;} /* und noch leichter */

<p>

900 <span> 700 <strong> 400 <b> 300 <strong> 200

</strong></b></strong></span>.

Abbildung 5-7: Sichtbares Schriftgewicht mit Deskriptoren


</p>



<p>

bold <span> bold <strong> regular <b> regular

<strong> regular </strong></b></strong></span>.

</p>

Abgesehen von der Tatsache, dass dies alles überhaupt nicht intuitiv ist, hat der Hauptab-satz in Abbildung 5-8 ein Schriftgewicht von 900. Da der mit strong markierte Text hierlighter dargestellt werden soll, wird das normale Schriftgewicht von 400 (bzw. normal)auf der numerischen Skala verwendet. Einen Schritt weiter haben wir 300, das genausodargestellt wird wie normal, weil kein leichterer Schriftschnitt existiert. Von hier aus kanndas Benutzerprogramm das Schriftgewicht nur um jeweils einen Schritt herabsetzen, bisder Wert 100 erreicht ist (was in unserem Beispiel aber nicht der Fall ist). Der zweite Textzeigt, welche Textabschnitte als »bold« oder »regular« dargestellt werden.

SchriftgrößeDie Methoden zum Festlegen der Schriftgröße sind zwar beide recht bekannt, verhaltensich aber auch sehr unterschiedlich zueinander.

Ähnlich wie bei den Schlüsselwörtern bolder und lighter für die Eigenschaft font-weightgibt es bei font-size die Schlüsselwörter larger und smaller für die relative Angabe derSchriftgröße. Wie bei den relativen Schriftgewichten sorgen diese Schlüsselwörter dafür,dass der berechnete Wert von font-size auf einer Werteskala erhöht oder verringertwird. Dieses Prinzip müssen Sie verstanden haben, bevor Sie die Schlüsselwörter largerund smaller richtig anwenden können. Daher wollen wir uns zuerst damit beschäftigen,wie die Schriftgröße an sich beschrieben und umgesetzt wird.

Abbildung 5-8: Herabsetzen der Schriftgewichtung

font-size

Werte: xx-small | x-small | small | medium | large | x-large | xx-large | smaller |larger | <Höhe> | <Prozentwert> | inherit

Startwert: medium


Vererbt: ja

Prozentwerte: berechnet unter Berücksichtigung der Schriftgröße des Elternelements

Berechneter Wert: eine absolute Höhenangabe

Schriftgröße | 113

Tatsächlich wird das Verhältnis zwischen der Eigenschaft font-size und der tatsächli-chen Darstellung der Schrift vom Designer der Schrift festgelegt. Diese Beziehung wird alsGeviert (im Englischen auch als »em-square« oder »em-box« bezeichnet) in der Schriftselbst festgelegt. Dieses Geviert und damit auch die Schriftgröße müssen sich nicht aufirgendwelche Grenzen der einzelnen Zeichen der Schrift beziehen. Stattdessen bezieht essich auf den Abstand zwischen den Grundlinien, ohne zusätzlichen Durchschuss (in CSS:line-height). Es ist durchaus möglich, dass die Zeichensätze eines Fonts über den Stan-dardabstand zwischen zwei Grundlinien hinausgehen. Aus diesem Grund sind vieleFonts so definiert, dass alle enthaltenen Zeichen kleiner als ihre Gevierte sind. Einigemögliche Beispiele sehen Sie in Abbildung 5-9.

Die Funktion von font-size besteht also darin, eine Größe für das Geviert (die em-Box)anzugeben. Hiermit ist jedoch nicht garantiert, dass die dargestellten Zeichen tatsächlichdie angegebene Größe haben.

Absolute GrößenangabenNachdem wir das geklärt haben, wenden wir uns nun den Schlüsselwörtern für die absolu-ten Größenangaben zu. Für font-size gibt es davon sieben Stück: xx-small, x-small,small, medium, large, x-large und xx-large. Diese Angaben sind nicht präzise, sondernrelativ zueinander definiert (siehe Abbildung 5-10).

p.one {font-size: xx-small;}

p.two {font-size: x-small;}

p.three {font-size: small;}

p.four {font-size: medium;}

Abbildung 5-9: Eine Schrift, deren Geviert kleiner ist als einige Zeichen, dann eine Schrift, deren Geviert größer ist als alle Zeichen, und eine Schrift, deren Geviert gerade groß genug ist, um alle Zeichen ganz zu umgeben


p.five {font-size: large;}

p.six {font-size: x-large;}

p.seven {font-size: xx-large;}

Nach der Spezifikation für CSS1 sollte der Unterschied (oder der Skalierungsfaktor) zwi-schen einer absoluten Größe und der nächsten aufwärts 1,5 und abwärts 0,66 betragen.Wenn die Angabe medium also 10px entspricht, sollte large einer Höhe von 15px entspre-chen. Andererseits ist ein Skalierungsfaktor von 1,5 nicht zwingend. Er kann sich vonBenutzerprogramm zu Benutzerprogramm unterscheiden; in der Spezifikation von CSS2wurde er außerdem auf einen Faktor zwischen 1,0 und 1,2 geändert.

Wenn wir für medium von einer Größe von 16px ausgehen, erhalten wir für die verschiede-nen Skalierungsfaktoren die in Tabelle 5-3 angegebenen absoluten Größen (die natürlichnur Näherungswerte sind).

Die Situation wird noch komplizierter, weil die verschiedenen Benutzerprogramme ihren»Standard-Schriftgrößen« unterschiedliche absolute Schlüsselwörter zuordnen, wie bei-spielsweise die Version-4-Browser: Navigator 4 benutzt für Text ohne Stildefinitionen dieAngabe medium, während Internet Explorer 4 von der Angabe small für Text ohne Stilan-gaben ausgeht. Trotz der Tatsache, dass der Standardwert für font-style eigentlich

Abbildung 5-10: Absolute Schriftgrößen

Tabelle 5-3: Skalierungsfaktoren und ihre Entsprechungen in Pixeln

Schlüsselwort Skalierung: 1,5 Skalierung: 1,2

xx-small 5px 9px

x-small 7px 11px

small 11px 13px

medium 16px 16px

large 24px 19px

x-large 36px 23px

xx-large 54px 28px


medium sein sollte, ist die Denkweise bei IE4 gar nicht einmal so falsch, wie es scheint.1

Zum Glück wurde das Problem bei IE6 behoben: Zumindest wenn der Browser im Stan-dardmodus ist, wird medium als Standard verwendet.

Relative SchriftgrößenVerglichen mit all dem, sind die Schlüsselwörter larger und smaller leicht zu verstehen:Sie sorgen dafür, dass der Wert für die Schriftgröße um eine Einheit auf der Skala fürabsolute Größen verschoben wird. Dies geschieht relativ zum jeweiligen Elternelementund unter Benutzung des gleichen Skalierungsfaktors. Wenn der Browser für die Berech-nung der absoluten Größen also einen Faktor von 1,2 verwendet, sollte er diesen auch beider Anwendung der Schlüsselwörter für relative Größen benutzen:

p {font-size: medium;}

strong, em {font-size: larger;}

<p>Dieser Absatz enthält ein <strong>stark hervorgehobenes ("strong") Element,

das seinerseits <em>ein hervorgehobenes ("em") Element enthält, das wiederum

<strong>ein stark hervorgehobenes Element</strong></em> enthält</strong>.</p>

<p> medium <strong>large <em> x-large

<strong>xx-large</strong></em></strong></p>

Im Gegensatz zu den relativen Werten für das Schriftgewicht sind die Werte für relativeSchriftgrößen nicht unbedingt an die Grenzen des Bereichs für absolute Größen gebun-den. Eine Schriftgröße kann also auch größer oder kleiner als die für xx-small und xx-large festgelegten Größen angegeben werden. Zum Beispiel:

h1 {font-size: xx-large;}

em {font-size: larger;}

<h1>Eine Überschrift mit einer eingefügten <em>Hervorhebung</em> </h1>

<p>Dieser Absatz enthält ebenfalls eine <em>Hervorhebung</em>.</p>

Wie in Abbildung 5-11 zu sehen, ist der hervorgehobene Text im h1-Element etwas grö-ßer als der für xx-large definierte. Wie weit skaliert wird, ist Sache des Browsers, wobeiein Skalierungsfaktor von 1,2 bevorzugt werden sollte. Der mit em markierte Text imAbsatz wird selbstverständlich um einen Wert in der Skala für absolute Größenangabenerhöht (large).

Benutzerprogramme sind nicht verpflichtet, die Schriftgröße über dieGrenzen der Schlüsselwörter für absolute Größen hinauszuverschieben.

1 Beachten Sie, dass analog zu den sieben möglichen Größen für font (z.B. <font size="5">) sieben Schlüssel-wörter für absolute Größen existieren. Da die Standard-Schriftgröße traditionellerweise 3 beträgt, erscheint essinnvoll, dass in CSS ebenfalls das dritte Schlüsselwort für absolute Größen benutzt wird, um die Standard-Schriftgröße zu bezeichnen. Da das Schlüsselwort aber small ist, lässt sich auch das Verhalten von IE4 erklären.


Prozentwerte und SchriftgrößenAuf eine Art verhalten sich Prozentwerte ähnlich wie die Schlüsselwörter für relativeSchriftgrößen. Die Berechnung von Prozentwerten geschieht immer auf Basis der vomElternelement geerbten Größe. Im Gegensatz zu den Schlüsselwörtern für relative Grö-ßen bieten Prozentwerte aber eine wesentlich feinere Kontrolle über die berechneteSchriftgröße. Nehmen wir zum Beispiel folgenden Code, der in Abbildung 5-12 darge-stellt ist:

body {font-size: 15px;}


em {font-size: 120%;}

strong {font-size: 135%;}

small, .fnote {font-size: 75%;}

<body>

<p>Dieser Absatz enthält eine <em>Hervorhebung</em> und eine <strong>starke

Hervorhebung</strong>, die beide größer als ihr Elternelement sind. Der

<small>klein (small)</small> dargestellte Text ist dagegen um ein Viertel kleiner.</p>

<p class="fnote">Dies ist eine 'Fußnote', die kleiner als normaler (regular) Text

dargestellt wird.</p>

<p> 12px <em> 14.4px </em> 12px <strong> 16.2px </strong> 12px

<small> 9px </small> 12px </p>

<p class="fnote"> 10.5px </p>

</body>

In diesem Beispiel werden die exakten Pixelwerte gezeigt. In der Praxis wird ein Web-browser die Werte zum nächsten ganzzahligen Wert aufrunden, wie etwa 14px. Einigeweiterentwickelte Benutzerprogramme können per Anti-Aliasing gegebenenfalls auch

Abbildung 5-11: Relative Schriftgrößen an den Grenzen der absoluten Größenangaben


Pixelwerte mit Nachkommastellen darstellen bzw. beim Druck des Dokuments berück-sichtigen. Bei anderen Werten für font-size ist es dem Benutzerprogramm überlassen,Werte mit Nachkommastellen zu erhalten (oder auch nicht).

Zufällig definiert CSS bei der Größenangabe für Zeichensätze die Längeneinheit em alsgleichwertig mit Prozentwerten, wobei 1em einem Prozentwert von 100% entspricht. Dem-nach würden die folgenden beiden Regeln identische Ergebnisse liefern (sofern beideAbsätze vom gleichen Elternelement abstammen):

p.one {font-size: 166%;}

p.two {font-size: 1.6em;}

Bezüglich der Vererbung von berechneten Werten usw. gelten bei Angaben in em die glei-chen Regeln wie für Prozentangaben.

Schriftgröße und VererbungIn Abbildung 5-12 ist außerdem zu sehen, dass in CSS trotz der Vererbung von font-sizenicht die Prozentwerte, sondern die berechneten Werte vererbt werden. Beträgt demnachder Wert eines strong-Elements 12px und wird dieser Wert durch die Deklaration 135%modifiziert, so ergibt sich eine neue Größe von 16.2px (die vermutlich auf 16px gerundetwird). Für den als »Fußnote« (class="fnote") markierten Absatz wird der Prozentwert aufGrund der vom body-Element geerbten Angabe für font-size berechnet, also 15px. Wirddieser Wert mit 75% multipliziert, ergibt sich ein Wert von 10.5px.

Wie bei den Schlüsselwörtern für relative Größen wird auch bei den Prozentwerten eineautomatische Steigerung der dargestellten Schriftgröße vorgenommen. Das folgendeMarkup wird daher angezeigt wie in Abbildung 5-13:


em {font-size: 120%;}

strong {font-size: 135%;}

small {font-size: 75%;}

<p>Dieser Absatz enthält sowohl eine <em>Hervorhebung wie auch eine <strong>starke

Hervorhebung</strong></em>. Beide sind größer als der Rest des Absatzes. </p>

<p> 12px <em>14.4px <strong> 19.44px </strong></em> 12px </p>

Abbildung 5-12: Zusätzliche Verwendung von Prozentwerten


Der Größenwert für das als strong markierte Element in Abbildung 5-13 wird folgender-maßen berechnet:

12 px × 120% = 14.4px 14.4px × 135% = 19.44px (vermutlich gerundet auf 19px)

Es gibt allerdings noch ein anderes Szenario, bei dem sich der Endwert leicht vom obigenBeispiel unterscheidet. Hierbei rundet das Benutzerprogramm die Pixelgrößen, die dannwie üblich an die Kindelemente vererbt werden. Obwohl dieses Verhalten nicht der Spe-zifikation entspricht, wollen wir einmal davon ausgehen, dass das Benutzerprogrammsich so verhält. Demnach hätten Sie nun:

12px × 120% = 14.4px [14.4px ≈ 14px]14px × 135% = 18.9px [18.9px ≈19px]

Selbst wenn man davon ausgeht, dass das Benutzerprogramm nach jedem Schritt rundet,ist das Endergebnis das Gleiche wie beim vorigen Beispiel, nämlich 19. Je mehr Prozent-werte miteinander multipliziert werden, desto stärker wächst allerdings auch die Gefahr,dass Rundungsfehler auftreten.

Das Problem der schlecht gesteuerten Skalierung kann aber auch noch eine andere Rich-tung nehmen. Stellen wir uns einmal ein Dokument vor, das eine Reihe von ungeordne-ten Listen enthält, die stark ineinander verschachtelt sind. Einige dieser Listen haben biszu vier Verschachtelungsebenen. Stellen Sie sich einmal die Auswirkungen der unten ste-henden Regel auf solch ein Dokument vor:

ul {font-size: 80%;}

Wenn wir von vier Verschachtelungsebenen ausgehen, hätte die Liste auf der unterstenEbene eine berechnete Schriftgröße (font-size) von 40,96% des Elternelements aus derobersten Liste. Jede verschachtelte Liste hätte eine Größe von 80% bezogen auf das jewei-lige Elternelement, wodurch die einzelnen Einträge immer schwerer zu lesen wären. Einähnliches Problem kann auftreten, wenn Sie ein Dokument mit verschachtelten Tabellenfür das Layout benutzen. Sie würden dann eine Regel wie diese hier schreiben:

td {font-size: 0.8em;}

Und würden auch hier eine nahezu unlesbare Seite erhalten.

Abbildung 5-13: Zu beachtende Punkte bei der Vererbung


LängeneinheitenDie Schriftgröße (font-size) kann auch mit einer der in Kapitel 4 besprochenen Einheitenfestgelegt werden. Alle folgenden font-size-Deklarationen sollten gleichbedeutend sein:

p.one {font-size: 36pt;} /* ausgehend von einer Auflösung von 72 dpi, sind diese */

/* Regeln alle gleichbedeutend */

p.two {font-size: 3pc;}

p.three {font-size: 0.5in;}

p.four {font-size: 1.27cm;}

p.five {font-size: 12.7mm;}

Bei der in Abbildung 5-14 gezeigten Darstellung wird davon ausgegangen, dass dasBenutzerprogramm weiß, wie viele Punkte pro Inch (dpi) das Ausgabemedium darstellt.Dies kann sich aber von Benutzerprogramm zu Benutzerprogramm unterscheiden. Teil-weise basieren diese Einstellungen auf den Vorlieben des Benutzers, teilweise aber auchauf den Annahmen des Programmierers, der das Benutzerprogramm geschrieben hat.Nichtsdestotrotz sollten die fünf Zeilen jeweils gleich groß dargestellt werden. Selbstwenn das Ergebnis also nicht ganz der Realität entspricht (so muss die tatsächliche Größevon p.three nicht zwingend ein halbes Inch betragen), sollten die Verhältnisse der Maß-einheiten untereinander stimmen.

Es gibt noch einen weiteren Wert, der möglicherweise die gleiche Größe wie die inAbbildung 5-14 gezeigten Beispiele hat, nämlich 36px. Dies würde der gleichen physikali-schen Entfernung entsprechen, sofern die Auflösung tatsächlich 72 Pixel pro Inchbeträgt. Allerdings gibt es nur noch wenige Monitore, die diese Einstellung noch benut-zen. Die meisten sind auf wesentlich höhere Werte zwischen 96ppi und 120ppi einge-stellt. Bei vielen älteren Macintosh-Webbrowsern werden Punkte und Pixel behandelt, als

Abbildung 5-14: Verschiedene Schriftgrößen-Angaben


gäbe es dabei keinen Unterschied. Auf alten Macs werden die Angaben 14pt und 14pxdaher vermutlich gleich dargestellt. Für andere Plattformen wie Windows, aber auch beiMac OS X gilt das aber nicht. Die oben beschriebenen Eigenheiten sind der Hauptgrundfür die Schwierigkeiten bei der Verwendung von Punkten als Maßeinheit beim Doku-mentdesign.

Die Unterschiede zwischen den Betriebssystemen sind der Hauptgrund, warum die meis-ten Autoren Schriftgrößen meistens in Pixeln angeben. Dieser Ansatz ist besondersattraktiv, wenn Bilder und Text gemeinsam auf einer Webseite dargestellt werden sollen.In diesem Fall kann der Text (zumindest theoretisch) auf die gleiche Höhe wie das Grafik-element eingestellt werden, indem Sie eine Deklaration wie font-size: 11px; oder etwasÄhnliches verwenden (siehe Abbildung 5-15):

Es ist sicher möglich, Pixel als Maßeinheit für font-size zu verwenden, um »konsistente«Ergebnisse mit font-size zu erzielen (oder einer anderen beliebigen Längenangabe), aberleider gibt es einen großen Nachteil: Bei Internet Explorer für Windows bis hin zur Ver-sion 6.0 kann die Textgröße vom Benutzer nur unter Schwierigkeiten verändert werden,wenn sie in Pixeln angegeben wurde. Andere Browser, wie Mozilla, Netscape 6 undhöher, Internet Explorer 5 und höher (Mac und Opera), gestatten ihren Benutzern alle dieGrößenänderung von Text, egal welche Größe der Autor festgelegt hatte. Daher ist dieBenutzung von Pixeln zum Einrichten der Textgröße genauso wenig eine Garantie für dieBeständigkeit wie die anderen Methoden. Die anderen in diesem Kapitel gezeigtenLösungsmöglichkeiten, wie Schlüsselwörter und Prozentwerte, sind wesentlich robuster(und benutzerfreundlicher), da sie bei der Skalierung von Text die Standardeinstellungdes Benutzers berücksichtigen.

Schriftschnitte und SchriftvariantenVermutlich sind Sie erleichtert, wenn Sie erfahren, dass die hier besprochenen Eigen-schaften wesentlich leichter verständlich und lange nicht so komplex sind wie das bisherGesagte. Zuerst befassen wir uns mit font-style, danach mit font-variant, um das Kapi-tel schließlich mit der font-Eigenschaft zu beenden.

SchriftschnitteDie Eigenschaft font-style ist sehr einfach. Sie wird benutzt, um zwischen normalem(normal), kursivem (italic) und geneigtem (oblique) Text zu wählen. Das ist schon alles!

Abbildung 5-15: Mit Angaben in Pixeln die Größe von Text und Bildern aufeinander abstimmen

Schriftschnitte und Schriftvarianten | 121

Die einzige Schwierigkeit besteht vermutlich in der Unterscheidung zwischen kursivemund geneigtem Text und im Verständnis, warum manche Browser Ihnen hier keine Wahllassen.

Wie Sie sehen, wird für font-style der Startwert normal verwendet. Das bezieht sich auf»aufrechten« Text, der sich vermutlich einfach als »Text, der nicht kursiv oder anderwei-tig geneigt ist« beschreiben lässt. So ist beispielsweise der größte Teil des Texts in diesemBuch aufrecht. Fehlt also nur die Erklärung des Unterschieds zwischen kursivem (italic)und geneigtem (oblique) Text. Hierfür ist es vermutlich das Beste, wenn Sie sich einfachAbbildung 5-16 ansehen, in der die Unterschiede recht deutlich werden.

Einfach gesagt, ist kursiver Text ein eigenständiger Schriftschnitt. Hierbei sorgen kleinereÄnderungen an der Struktur der einzelnen Buchstaben für ein verändertes Aussehen. Dasgilt besonders für Serifenschriften, bei denen – abgesehen von der Neigung der Buchsta-ben – die Serifen für eine Kursivschrift verändert wurden. Geneigter Text ist dagegen ein-fach nur eine abgeschrägte Version des normalen aufrechten Texts. Schriftschnitte, dieals »Italic«, »Cursive« und »Kursiv« gekennzeichnet sind, werden normalerweise für dasSchlüsselwort italic benutzt. Dagegen werden für Schriftschnitte, die als obliquebezeichnet werden, Namen wie »Oblique«, »Slanted« und »Incline« zum Einsatz kom-men.

Wenn Sie möchten, dass ein Dokument für bestimmte Teile Kursivschrift benutzt, ohnedabei irgendwelche Besonderheiten festzulegen, könnten Sie die folgenden Stildefinitio-nen verwenden:

p {font-style: normal;}

em, i {font-style: italic;}

Durch diese Regel würde der normale Text in einem Absatz mit einem aufrechten Schrift-schnitt dargestellt, während die als em und i markierten Elemente wie üblich eine Kursiv-

font-style

Werte: italic | oblique | normal | inherit

Startwert: normal


Vererbt: ja


Abbildung 5-16: Kursiver und geneigter Text im Detail


schrift verwenden. Vielleicht möchten Sie aber auch einen feinen Unterschied zwischenem und i einstellen:

p {font-style: normal;}

em {font-style: oblique;}

i {font-style: italic;}

Wenn Sie sich Abbildung 5-17 genau ansehen, werden Sie feststellen, dass es trotz dergenauen Definition keinen erkennbaren Unterschied zwischen den mit em und mit i mar-kierten Elementen gibt. In der Praxis hat nicht jede Schrift einen geneigten und einen kur-siven Schnitt – und selbst wenn doch, so wissen die Webbrowser selten etwas damitanzufangen.

In beiden Fällen können verschiedene Dinge passieren. Gibt es keine Kursivschrift, abereine geneigte Schrift, kann diese anstelle der kursiven Schrift benutzt werden. Gibt esdagegen eine Kursivschrift, aber keinen separaten geneigten Schriftschnitt, so muss dasBenutzerprogramm gemäß der Spezifikation keine Kursivschrift als Ersatz benutzen. Alsletzte Möglichkeit kann das Benutzerprogramm einfach eine geneigte Variante erzeugen,indem es eine abgeschrägte Version der aufrechten Schrift berechnet. Und genau das pas-siert in der digitalen Welt am häufigsten, denn es ist recht einfach, eine Schrift mittelseiner einfachen Berechnung abzuschrägen.

Abhängig vom Betriebssystem, kann es außerdem passieren, dass ein Schriftschnitt, derals italic dargestellt werden soll, abhängig von seiner Größe plötzlich von kursiv auf diegeneigte Version umspringt. Das passiert beispielsweise bei der Schrift Times auf Macin-tosh-Rechnern, die mit Mac OS 9 (bzw. der Classic-Umgebung) arbeiten (sieheAbbildung 5-18). Der Größenunterschied beträgt nur einen Pixel.

Hierfür gibt es leider nur wenig Abhilfe, abgesehen von einem besseren Umgang mitSchriften durch Betriebssysteme wie Mac OS X und Windows XP. Normalerweise wer-den kursive und geneigte Schriftschnitte in Webbrowsern genau gleich dargestellt.

Und trotzdem kann font-style nützlich sein. So gibt es die typographische Konvention,nach der Zitatblöcke (block quotes) kursiv dargestellt werden, während besonders her-

Abbildung 5-17: Weitere Schriftschnitte

Abbildung 5-18: Gleiche Schrift, gleicher Schnitt, verschiedene Größen

Schriftschnitte und Schriftvarianten | 123

vorgehobener Text innerhalb des Zitats aufrecht steht. Um diesen in Abbildung 5-19gezeigten Effekt zu erreichen, könnten Sie die folgenden Stildefinitionen verwenden:

blockquote {font-style: italic;}

blockquote em, blockquote i {font-style: normal;}

Variationen von SchriftenNeben verschiedenen Größen und Schnitten können Schriften in unterschiedlichen Vari-anten auftreten. Eine sehr häufig verwendete Variante kann daher auch in CSS ausge-drückt werden.

Die Eigenschaft font-variant hat außer inherit nur zwei mögliche Werte: den Standard-wert normal, der einfachen Text beschreibt, und small-caps, der dafür sorgt, dass dieserText in Kapitälchen dargestellt wird. Wenn Sie diesen Effekt nicht kennen: ER SIEHT

UNGEFÄHR SO AUS. Anstelle von Groß- und Kleinbuchstaben benutzt ein Kapitälchen-Font Großbuchstaben unterschiedlicher Größe (siehe Abbildung 5-20):

h1 {font-variant: small-caps;}

h1 code, p {font-variant: normal;}

<h1>Die Verwendung von <code>font-variant</code> im Web</h1>

<p>

Die Eigenschaft <code>font-variant</code> ist sehr interessant...

</p>

Wie Ihnen bei der Darstellung des h1-Elements vielleicht auffällt, wird ein Großbuch-stabe im Quellcode durch einen großen Großbuchstaben wiedergegeben, während Klein-

Abbildung 5-19: Übliche typographische Konventionen mit CSS umgesetzt

font-variant

Werte: small-caps | normal | inherit

Startwert: normal


Vererbt: ja



buchstaben als kleinere Großbuchstaben dargestellt werden. Dieses Verhalten ist derAnweisung text-transform: uppercase recht ähnlich, wobei der einzige echte Unterschieddarin besteht, dass die Großbuchstaben eine andere Größe haben als die anderen Buch-staben. Der Grund, dass small-caps (also Kapitälchen) mittels einer Schrift-Eigenschaftdeklariert werden, liegt darin, dass einige Schriften einen eigenen Kapitälchen-Schrift-schnitt besitzen, der über diese spezielle Eigenschaft ausgewählt werden kann.

Für den Fall, dass ein solcher Schriftschnitt nicht existiert, bietet die Spezifikation zweiMöglichkeiten. Die erste besteht darin, durch das Benutzerprogramm einen Kapitälchen-font erzeugen zu lassen, indem es eigenständig Großbuchstaben skaliert. Die zweite Mög-lichkeit besteht darin, einfach alle Buchstaben groß zu schreiben, als sei die Deklarationtext-transform: uppercase; verwendet worden. Das ist sicherlich keine ideale Lösung,aber sie ist zumindest erlaubt.

Vor IE6 verwendete Internet Explorer einfach Großbuchstaben. Die meis-ten anderen Browser zeigen als Kapitälchen markierten Text korrekt an.

Zeichensätze dehnen und die Darstellungsgröße anpassenIn CSS2 gibt es zwei Zeichensatz-Eigenschaften, die aber nicht in CSS2.1 übernommenwurden. Zwar waren sie seit Jahren Teil der Spezifikation, aber kein Browser hat siejemals übernommen. Die erste Eigenschaft ermöglicht die horizontale Dehnung von Zei-chensätzen, während die zweite eine intelligente Skalierung von Ersatz-Fonts gestattet,wenn die erste Wahl des Autors nicht zur Verfügung steht. Als Erstes beschäftigen wiruns mit der Dehnung.

Abbildung 5-20: Die Verwendung von Kapitälchen

font-stretch

Werte: normal | wider | narrower | ultra-condensed | extra-condensed | condensed |semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit

Startwert: normal


Vererbt: ja

Zeichensätze dehnen und die Darstellungsgröße anpassen | 125

Wie zu erwarten, kann mit dieser Eigenschaft die Zeichenbreite einer Schrift angepasstwerden. Das funktioniert ähnlich den Schlüsselwörtern für die absolute Schriftgröße (z.B.xx-large) für die Eigenschaft font-size. Auch hier gibt es eine Reihe von absoluten Wer-ten sowie zwei Werte, mit denen die Zeichenbreite abhängig vom Elternelement gesteuertwerden kann. So könnte ein Autor den Text in einem stark hervorgehobenen (strong)Element zusätzlich betonen, indem er die Zeichenbreite im Verhältnis zum Elternelementerhöht (siehe Abbildung 5-21):

strong {font-stretch: wider;}

Abbildung 5-21 wurde mit Photoshop erstellt, weil font-stretch beimSchreiben dieses Buches von keinem Browser unterstützt wird.

Etwas komplizierter ist die ähnlich schlecht unterstützte Anpassung der Schriftgröße.

Mit Hilfe dieser Eigenschaft soll die Lesbarkeit erhalten werden, wenn der benutzte Zei-chensatz nicht die erste Wahl des Autors ist. Da sich die Schriften in ihrem Aussehenunterscheiden können, kann eine Schrift bei einer bestimmten Größe noch gut lesbarsein, während eine andere kaum noch zu erkennen ist.

Bei der Lesbarkeit einer Schrift spielen Faktoren wie die Größe und die x-Höhe eine großeRolle. Dividiert man den Wert von font-size durch die x-Höhe, erhält man das sogenannte Ansichtsverhältnis (aspect value). Zeichensätze mit einem höheren Ansichtsver-hältnis erscheinen hierbei lesbarer, während Schriften mit einem kleinen Ansichtsverhält-nis schneller unlesbar werden.

Ein gutes Beispiel hierfür ist der Vergleich zwischen den Schriften Verdana und Times.Sehen Sie sich dafür Abbildung 5-22 und die folgenden Regeln an, die beide Schriften miteiner Größe (font-size) von 10px darstellen:


p.cl1 {font-family: Verdana, sans-serif;}

p.cl2 {font-family: Times, serif; }

Abbildung 5-21: Die Breite von Zeichen verändern

font-size-adjust

Werte: <Zahl> | none | inherit

Startwert: none


Vererbt: ja


Der in Times geschriebene Text ist wesentlich schwerer zu lesen als der in Verdana. Dasliegt teilweise daran, dass hier eine Pixel-basierte Darstellung gewählt wurde, aber auchdaran, dass Times bei kleinen Schriftgrößen einfach schwerer zu lesen ist.

Wie sich zeigt, liegt das Ansichtsverhältnis zwischen x-Höhe und der eigentlichen Zei-chengröße für Verdana bei 0,58, während es bei Times 0,46 beträgt. In diesem Fall kön-nen Sie das Verhältnis von Verdana selbst einstellen, wodurch das Benutzerprogramm dietatsächliche Größe des dargestellten Textes entsprechend anpasst. Hierfür wird folgendeFormel verwendet:

Deklarierte Schriftgröße (font-size) × (Wert von font-size-adjust ÷ Ansichtsverhältnis der verfügbaren Schrift) = angepasste Schriftgröße (font-size)

Wird Times anstelle von Verdana benutzt, müsste also folgende Anpassung vorgenom-men werden:

10px × (0,58 ÷ 0,46) = 12,6px

Das Ergebnis sehen Sie in Abbildung 5-23:

p {font: 10px Verdana, sans-serif; font-size-adjust: 0.58;}

p.cl1 {font-family: Times, serif; }

Abbildung 5-23 wurde mit Photoshop verändert, weil bisher kaum einBrowser die Eigenschaft font-size-adjust unterstützt.

Damit ein Browser diese Größenanpassungen intelligent vornehmen kann, müssen Sienatürlich das Ansichtsverhältnis für die eigentlich gewünschte Schrift kennen. In CSS2gibt es keine Möglichkeit, diesen Wert auf einfache Weise zu ermitteln, außerdem stellenviele Schriften diese Information überhaupt nicht zur Verfügung.

Abbildung 5-22: Verdana und Times im Vergleich

Abbildung 5-23: Die Schriftgröße von Times anpassen

Die Eigenschaft font | 127

Die Eigenschaft fontAlle hier gezeigten Eigenschaften sind natürlich sehr anspruchsvoll und ihre Benutzungkann schnell recht mühsam werden:

h1 {font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 30px;

font-weight: 900; font-style: italic; font-variant: small-caps;}

h2 {font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 24px;

font-weight: bold; font-style: italic; font-variant: normal;}

Ein Teil dieses Problems kann durch eine Gruppierung der Selektoren behoben werden.Noch einfacher wäre es aber, einfach alles mit einer einzigen Eigenschaft ausdrücken zukönnen. Und hier kommt die Eigenschaft font ins Spiel, die als eine Art Kurzschrift fürdie anderen Eigenschaften (und noch für einige Dinge mehr) benutzt werden kann.

Im Allgemeinen kann eine font-Eigenschaft alle Werte der bereits erwähnten Schrift-Eigenschaften enthalten oder aber einen »Systemzeichensatz«-Wert (beschrieben imAbschnitt »Die Benutzung von Systemzeichensätzen«). Demnach könnte man das obigeBeispiel folgendermaßen abkürzen:

h1 {font: italic 900 small-caps 30px Verdana, Helvetica, Arial, sans-serif;}

h2 {font: bold normal italic 24px Verdana, Helvetica, Arial, sans-serif;}

Die Ausgabe bliebe die gleiche (siehe Abbildung 5-24).

Ich sage hier »könnte« abgekürzt werden, weil es dank der relativ lockeren Schreibweisefür font noch ein paar andere Möglichkeiten gibt. Wenn Sie sich das vorige Beispiel

font

Werte: [[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>] | caption | icon | menu | message-box |small-caption | status-bar | inherit

Startwert: hängt von den einzelnen Elementen ab


Vererbt: ja

Prozentwerte: werden für <font-size> abhängig vom Elternelement und für <line-height>abhängig von <font-size> berechnet

Berechneter Wert: siehe die einzelnen Eigenschaften (font-style usw.)

Abbildung 5-24: Typische Regeln für Zeichensätze


genau ansehen, werden Sie feststellen, dass die ersten drei Werte in unterschiedlicher Rei-henfolge auftauchen. In der Regel für h1 sind dies, der Reihe nach, die Werte für font-style, font-weight und font-variant. In der zweiten Regel ist die Reihenfolge dagegenfont-weight, font-variant und font-style. Das ist in Ordnung, weil die drei Angaben inbeliebiger Reihenfolge vorgenommen werden können. Hat eine dieser »Teil«-Eigenschaf-ten den Wert normal, kann dieser auch weggelassen werden. Demnach sind die folgendenRegeln gleichbedeutend:

h1 {font: italic 900 small-caps 30px Verdana, Helvetica, Arial, sans-serif;}

h2 {font: bold italic 24px Verdana, Helvetica, Arial, sans-serif;}

In diesem Beispiel haben wir in der h2-Regel den Wert normal weggelassen, und der Effektist trotzdem der gleiche wie im vorigen Beispiel.

Hierbei ist es wichtig zu erkennen, dass diese Beliebigkeitsregel nur für die ersten dreiWerte von font gilt. Die letzten zwei Parameter sind in ihrem Verhalten wesentlich stär-ker reglementiert. So müssen die Werte für font-size und font-family in genau dieserReihenfolge und als letzte Werte der Deklaration definiert werden, und zwar ohne Aus-nahme. Außerdem müssen diese beiden Werte in einer font-Deklaration immer angege-ben werden. Wird ein Wert weggelassen, ist die gesamte Regel ungültig und wird sehrwahrscheinlich vom Benutzerprogramm ignoriert. Daher ergeben die folgenden Regelndas in Abbildung 5-25 gezeigte Ergebnis:

h1 {font: normal normal italic 30px sans-serif;} /* kein Problem */

h2 {font: 1.5em sans-serif;} /* auch in Ordnung; weggelassene Werte werden */

/* auf 'normal' gesetzt */

h3 {font: sans-serif;} /* UNGÜLTIG--kein Wert für 'font-size' angegeben */

h4 {font: light 14px;} /* UNGÜLTIG--kein Wert für 'font-family' angegeben */

Die Zeilenhöhe angebenBisher kennen wir nur fünf mögliche Werte für font; das ist aber noch nicht alles. Sie kön-nen mit font auch die Zeilenhöhe (line-height) einstellen, auch wenn es sich hierbeieigentlich um eine Text-Eigenschaft und keine Schrift-Eigenschaft handelt. Dieser Wert

Abbildung 5-25: Schriftgröße und -familie müssen immer angegeben werden

Die Eigenschaft font | 129

wird als Zusatz zum Wert von font-size angegeben und von dessen Wert mit einemSchrägstrich (/) getrennt:


h2 {font: bold italic 200%/1.2 Verdana, Helvetica, Arial, sans-serif;}

Diese in Abbildung 5-26 dargestellten Regeln sorgen dafür, dass alle mit h2 markiertenElemente fett und kursiv dargestellt werden (als Schriftfamilie wird eine der serifenlosenSchriften festgelegt), die Schriftgröße (font-size) wird auf 24px eingestellt (doppelt sogroß wie der Wert für body), die Zeilenhöhe (line-height) erhält den Wert 1.2.

Die Angabe eines Wertes für line-height ist absolut optional, wie auch die ersten dreiWerte für font. Wenn Sie einen Wert für line-height angeben, sollten Sie daran denken,dass der Wert für font-size immer vor line-height stehen muss und dass beide Wertedurch einen Schrägstrich voneinander getrennt werden.

Vielleicht wiederhole ich mich, aber das ist einer der häufigsten Fehler von CSS-Autoren.Ich kann es gar nicht oft genug sagen: Die für font nötigen Werte sind font-size undfont-family und müssen in genau dieser Reihenfolge angegeben werden. Alles andere istoptional.

Die Eigenschaft line-height wird im folgenden Kapitel besprochen.

Die Kurzschrift richtig einsetzenVergessen Sie nicht, dass font eine »Kurzschrift«-Eigenschaft ist und sich deshalb beiunvorsichtiger Benutzung unerwartet verhalten kann. Nehmen wir beispielsweise die fol-genden in Abbildung 5-27 dargestellten Regeln:

h1, h2, h3 {font: italic small-caps 250% sans-serif;}

h2 {font: 200% sans-serif;}

h3 {font-size: 150%;}

<h1>Dies ist ein h1-Element</h1>



Abbildung 5-26: Zusätzliche Angabe der Zeilenhöhe mit line-height


Ist Ihnen aufgefallen, dass das h2-Element weder kursiv noch in Kapitälchen dargestelltwird und dass auch keines der Elemente fett gedruckt erscheint? Dieses Verhalten ist kor-rekt. Wird die Kurzschrift-Eigenschaft font benutzt, werden alle weggelassenen Werteauf ihren Standardwert zurückgesetzt. Das vorige Beispiel hätte man demnach auch wiefolgt schreiben können:

h1, h2, h3 {font: italic normal small-caps 250% sans-serif;}

h2 {font: normal normal normal 200% sans-serif;}

h3 {font-size: 150%;}

Diese Anweisungen weisen den mit h2 markierten Elementen für den Schriftschnitt unddie zu benutzende Variante den Wert normal zu. Der Wert von font-weight wird für alleElemente ebenfalls auf normal gesetzt. Das ist für Kurzschrift-Eigenschaften das erwarteteVerhalten. Überschriften der dritten Ebene (h3) haben dagegen ein besseres Schicksal,weil hier die Eigenschaft font-size benutzt wurde, die keine Kurzschrift-Eigenschaft istund daher nur auf ihren eigenen Wert Auswirkungen hat.

Die Benutzung von SystemzeichensätzenWenn eine Webseite das Aussehen des Betriebssystems nachahmen soll, können die Sys-temzeichensatz-Werte für font recht praktisch sein. Diese werden benutzt, um dieSchriftgröße, -familie, -gewichtung, den Schriftschnitt und die Varianten der Elemente andas Erscheinungsbild des verwendeten Betriebssystems anzupassen. Die möglichenWerte sind:

caption Der für Beschriftungen von Kontrollelementen wie Buttons benutzte Zeichensatz

icon Der für die Beschriftung von Icons benutzte Zeichensatz

menu Der für Aufklappmenüs und Menülisten benutzte Zeichensatz

message-box Der für Dialogboxen benutzte Zeichensatz

small-caption Der für die Beschriftung von kleinen Kontrollelementen benutzte Zeichensatz

Abbildung 5-27: Veränderungen bei der Benutzung von Kurzschrift-Eigenschaften

Schriftenvergleich | 131

status-bar Der für Statusbalken von Fenstern benutzte Zeichensatz

Um einem Button den gleichen Zeichensatz zuzuweisen, der auch vom Betriebssystemdes Benutzers verwendet wird, können Sie beispielsweise die folgende Regel verwenden:

button {font: caption;}

Mit diesen Werten ist es möglich, webbasierte Anwendungen zu erstellen, die in ihremAussehen stark den Programmen ähneln, die der Benutzer nativ auf seinem Rechner aus-führt.

Beachten Sie, dass Systemzeichensätze nur als Ganzes definiert werden können, alsoindem die Schriftfamilie, Größe, Gewichtung, Schnitt usw. zusammen angegeben wer-den. Aus diesem Grund sieht die Beschriftung des Buttons aus wie die eines vom Betriebs-system erzeugten Button. Dies geschieht unabhängig von der Größe der Elemente, dieden Button umgeben. Sie können die einzelnen Werte allerdings nach dem Festlegen desSystem-Fonts noch verändern. So könnten Sie mit der folgenden Regel dafür sorgen, dassdie Schrift des Buttons die gleiche Schriftgröße benutzt wie dessen Elternelement:

button {font: caption; font-size: 1em;}

Wenn Sie versuchen, einen nicht vorhandenen Systemzeichensatz zu verwenden, kanndas Benutzerprogramm vielleicht einen Näherungswert benutzen, indem es beispiels-weise die Größe eines caption-Fonts reduziert, um einen small-caption-Font darzustel-len. Ist auch die Verwendung eines Näherungswerts nicht möglich, so sollte das Benut-zerprogramm einen eigenen Standardzeichensatz benutzen. Wird ein System-Fontgefunden, dessen Werte nicht alle gelesen werden können, sollte das Benutzerprogrammebenfalls den Standardwert benutzen. So könnte es sein, dass das Benutzerprogrammzwar einen Zeichensatz für status-bar findet, aber keine Informationen über dessen Dar-stellung in Kapitälchen. In diesem Fall wird das Benutzerprogramm für die Eigenschaftsmall-caps den Wert normal einsetzen.

Stildefinitionen für Benutzerprogramme werden in Kapitel 13 eingehendbehandelt.

SchriftenvergleichWie wir bereits wissen, bietet CSS die Möglichkeit, Schriftenfamilien, -gewichtungen und-varianten miteinander zu vergleichen. Dieser Schriftenvergleich ist recht kompliziert. Eingenaues Verständnis der Funktionsweise ist aber nur für Autoren wichtig, die Benutzer-programmen bei der Schriftauswahl für die Darstellung ihrer Dokumente helfen wollen.Ich habe dieses Thema für das Ende dieses Kapitels aufgehoben, weil man nicht unbe-dingt wissen muss, wie die Schrifteigenschaften im Innern funktionieren. Falls dieses


Thema Sie also nicht interessiert, können Sie ohne Probleme gleich mit dem nächstenKapitel weitermachen, ansonsten kommen wir jetzt zur Funktionsweise des Schriftenver-gleichs. Dabei geht das Benutzerprogramm in mehreren Schritten vor:

1. Das Benutzerprogramm erzeugt eine Datenbank der Schrifteigenschaften bzw. greiftauf eine solche Datenbank zu. In dieser Datenbank sind die CSS-Eigenschaften allerSchriften verzeichnet, die vom Benutzerprogramm verwendet werden können. Dassind normalerweise alle auf dem Rechner installierten Schriften, obwohl es auchnoch andere geben kann (z.B. wenn das Benutzerprogramm eigene eingebauteSchriften besitzt). Findet das Benutzerprogramm zwei identische Schriften, wird eineder beiden einfach ignoriert.

2. Als Nächstes teilt das Benutzerprogramm ein Element, für das Schrifteigenschaftendefiniert wurden, in seine Bestandteile auf und erzeugt daraus eine Liste der Eigen-schaften, die für die Darstellung des Elements nötig sind. Basierend auf dieser Liste,trifft das Benutzerprogramm eine erste Wahl, welche Schriftfamilie benutzt werdensoll. Wenn es eine vollständige Übereinstimmung gibt, kann das Benutzerprogrammdiesen Zeichensatz benutzen. Ansonsten ist etwas mehr Arbeit nötig.

a. Als Erstes wird versucht, einen Treffer für den Wert von font-style zu erzielen.Für das Schlüsselwort italic wird beispielsweise versucht, einen Zeichensatzmit der Bezeichnung »italic« oder »oblique« zu finden.

b. Der nächste Versuch, etwas Passendes zu finden, geschieht anhand des Wertesvon font-variant. Alle Fonts, die nicht als »small-caps« markiert sind, werdendabei als normal angesehen. Um einen Treffer für den Wert small-caps zu erzie-len, muss ein Zeichensatz entweder mit »small-caps« benannt sein, die Syntheseeines Kapitälchen-Fonts ermöglichen oder Großbuchstaben anstelle von Klein-buchstaben enthalten.

c. Der folgende Vergleich wird anhand des Wertes von font-weight durchgeführt.Auf Grund der Behandlung von font-weight in CSS erzielt dieser Vergleichimmer einen Treffer (siehe weiter vorn in diesem Kapitel).

d. Danach geht es um den Wert von font-size. Um hierfür einen Treffer zu erzie-len, muss sich der Wert innerhalb eines gewissen Toleranzbereichs befinden. Dader Toleranzbereich vom Benutzerprogramm festgelegt wird, kann es sein, dassdas eine Programm eine Toleranz von 20% gestattet, während bei einem ande-ren die Abweichung zwischen der angegebenen Größe und der tatsächlich ver-wendeten vielleicht nur 10% betragen darf.

3. Wurde in Schritt 2 kein Treffer erzielt, versucht das Benutzerprogramm in der glei-chen Schriftfamilie einen alternativen Zeichensatz zu finden. Wird etwas gefunden,wird Schritt 2 für diesen Font wiederholt.

4. Wurde ein allgemeiner Treffer erzielt, der aber nicht alles enthält, was für die Dar-stellung des betreffenden Elements gebraucht wird (vielleicht fehlt das Copyright-

Schriftenvergleich | 133

Zeichen), wiederholt das Benutzerprogramm Schritt 3. Das bedeutet sowohl eineweitere Suche nach einem alternativen Zeichensatz als auch eine Wiederholung vonSchritt 2.

5. Wurde auch mit allen alternativen Zeichensätzen kein Treffer erzielt, wählt dasBenutzerprogramm den Standard-Font für die angegebene Schriftenfamilie und tutsein Bestes, um das Element korrekt darzustellen.

Der gesamte Prozess ist lang und mühsam, aber er hilft uns zu verstehen, nach welchenKriterien ein Benutzerprogramm die Zeichensätze auswählt. Im folgenden Beispiel solldas Dokument in Times oder einer anderen Serifenschrift dargestellt werden:

body {font-family: Times, serif;}

Für jedes Element muss das Benutzerprogramm nun die für das Element verwendetenZeichen untersuchen und herausfinden, ob Times die zur Darstellung benötigten Zeichenenthält. In den meisten Fällen funktioniert das ohne Probleme. Es kann aber auch sein,dass mitten in einem Absatz ein chinesisches Schriftzeichen steht. Da Times diesesSchriftzeichen nicht selbst enthält, muss das Benutzerprogramm dessen Darstellungirgendwie umgehen oder einen anderen Zeichensatz finden, mit dem das betreffende Ele-ment dargestellt werden kann. Natürlich ist es sehr unwahrscheinlich, dass eine westlicheSchrift zufällig chinesische Schriftzeichen enthält. Gäbe es jedoch einen solchen Font(nennen wir ihn einmal AsiaTimes), könnte das Benutzerprogramm diese Schrift für dieDarstellung des gesamten Elements benutzen – oder einfach nur des einen Zeichens. Ent-weder wird also der ganze Absatz in AsiaTimes dargestellt oder aber er wird in Times aus-gegeben – bis auf das eine chinesische Zeichen, für das AsiaTimes verwendet wird.

Regeln für SchriftschnitteMit CSS2 wurde eine Methode eingeführt, die mit der Regel @font-face eine wesentlichgrößere Kontrolle über den Prozess des Schriftvergleichs bot. Da dieser Standard bis zumFrühjahr 2003 aber von keinem Webbrowser vollständig implementiert war, wurde@font-face aus der Spezifikation für CSS2.1 wieder entfernt. Ich werde diesem Themahier nicht allzu viel Zeit widmen, da die verschiedenen Aspekte dieser Regel sehr kompli-ziert sind und schon für sich genommen ein ganzes Kapitel (wenn nicht ein ganzes Buch)füllen würden.

Es gibt vier mögliche Wege, um eine Schrift zu finden, die in einem Dokument benutztwerden soll. Da zukünftige CSS-Versionen dieses Verfahren eventuell einsetzen und diemeisten Programme zum Rendern von SVG-Dateien den CSS2-Schriftvergleich zumin-dest teilweise unterstützen, werden wir hier trotzdem einen kurzen Blick darauf werfen.Sollten Sie @font-face implementieren müssen, finden Sie die nötigen Informationen inder Spezifikation für CSS2 bzw. der aktuellsten Version von CSS (wie beispielsweise demCSS3-WebFonts-Modul). Die folgenden Beschreibungen sind bestenfalls unvollständig.


Vergleich des Zeichensatznamens

Um den richtigen Schriftnamen zu finden, verwendet das Benutzerprogramm eine Schriftmit dem gleichen Namen wie der angeforderte Font. Hierbei kann es sein, dass sich dieMaße und das Erscheinungsbild nicht mit dem angeforderten Font decken. DieseMethode wurde weiter vorn in diesem Abschnitt bereits beschrieben.

Intelligenter Schriftenvergleich

In diesem Fall verwendet das Benutzerprogramm einen Font, der dem angefordertenmöglichst ähnlich sieht. Die zwei Schriften müssen sich nicht exakt gleichen, sind sich inihrem Erscheinungsbild aber so ähnlich wie möglich.

Für den Vergleich werden verschiedene Informationen verwendet, wie die allgemeineSchriftart (Symbol oder Text), die Art der Serifen, die Gewichtung, Höhe der Großbuch-staben, x-Höhe, Ober- und Unterlänge, Neigung und so weiter. Um einen Font zu finden,der der angeforderten Schrift möglichst ähnlich ist, könnte der Autor beispielsweiseschreiben:

@font-face {font-style: normal; font-family: "Times"; slope: -5;}

Kann Times nicht benutzt werden, ist es die Aufgabe des Benutzerprogramms, eine nor-male (aufrechte) Serifenschrift zu finden, die möglichst eine Rechtsneigung von 5 Gradaufweisen muss.

Font-Synthese

Es ist auch möglich, dass das Benutzerprogramm eine Schrift nach Bedarf erzeugt, um diein der @font-face-Regel angegebenen Maße und das Erscheinungsbild möglichst genauabzubilden. Über diesen Prozess sagt die Spezifikation:

In diesem Fall erzeugt das Benutzerprogramm einen Font, der nicht nur das Erscheinungs-bild möglichst genau wiedergibt, sondern auch die Maße der angeforderten Schrift. Um diebenötigte Schrift zu erzeugen, werden die Informationen des normalen Schriftvergleichsherangezogen. Normalerweise werden aber wesentlich genauere Angaben als für die ver-schiedenen Vergleichsmethoden benötigt. Insbesondere werden für die Font-Synthesegenaue Maßangaben, eine akkurate Übersetzung von Zeichen in Glyphen und Informatio-nen über die Positionierung benötigt, wenn sämtliche Layout-Angaben des angegebenenFonts bewahrt werden sollen.

Wenn diese Dinge für Sie einen Sinn ergeben, brauchen Sie vermutlich keine Erklärungs-hilfe mehr von mir. Falls Sie diese Dinge nicht verstehen, werden Sie vermutlich auch nieBedarf dafür haben.

Herunterladbare Zeichensätze

Bei diesem Verfahren kann das Benutzerprogramm einen entfernt gespeicherten Zeichen-satz herunterladen, um ihn im Dokument zu benutzen. Die Anweisung, um einen Fontherunterzuladen, sieht in etwa so aus:

Zusammenfassung | 135

@font-face {font-family: "Scarborough Fair";

src: url(http://www.example.com/fonts/ps/scarborough.ps);}

Danach können Sie den Zeichensatz im gesamten Dokument verwenden.

Selbst wenn ein Benutzerprogramm das Herunterladen von Zeichensätzen ermöglicht,kann es einige Zeit dauern, die Schriftdatei zu übertragen (da diese Dateien recht großsein können), wodurch die letztendliche Darstellung des Dokuments um einige Zeit ver-zögert werden kann.

ZusammenfassungObwohl Autoren nicht darauf zählen können, dass die von ihnen ausgewählten Zeichen-sätze auch tatsächlich für die Darstellung des Dokuments verwendet werden, können siezumindest allgemeine Schriftfamilien festlegen. Dieses Verfahren wird recht gut unter-stützt, da Benutzerprogramme, die Autoren (oder sogar den Lesern) keine Möglichkeitzur Schriftauswahl bieten, sehr schnell an Beliebtheit verlieren.

Die anderen Bereiche der Schriftenmanipulation werden unterschiedlich gut unterstützt.Die Möglichkeit, die Größe von Schriften anzupassen, lag bei den Implementierungenaus dem letzten Jahrhundert irgendwo zwischen frustrierend vereinfachend und fast rich-tig. Die Frustration der Autoren bestand hierbei gar nicht einmal in der Art der Unterstüt-zung, sondern darin, wie die Verwendung von Punkten als Maßeinheit in verschiedenenMedien, Betriebssystemen und Benutzerprogrammen sehr unterschiedliche Ergebnissehervorbringen konnte. Die Verwendung von Punkten als Maßeinheit birgt viele Gefahrenund die Verwendung von expliziten Längenangaben für das Webdesign ist allgemeinkeine gute Idee. Um die Größe von Zeichensätzen zu ändern, ist es am besten, Prozent-werte, em- oder ex-Einheiten zu verwenden, da diese in allen üblichen Darstellungsme-dien gut skalierbar sind.

Der zweite Anlass zur Frustration ist sehr wahrscheinlich die mangelnde Unterstützungfür das Herunterladen von Zeichensätzen, die in einem Dokument benutzt werden sollen.Autoren sind also auch weiterhin davon abhängig, welche Fonts beim Benutzer installiertsind. Es ist also nicht möglich vorherzusagen, welches Aussehen der Text am Ende tat-sächlich hat.

Trotz allem gibt es aber auch Möglichkeiten, um Text mit Stilen zu versehen, ohne dabeidie Schriften selbst zu verändern. Diese Möglichkeiten sind Thema des nächsten Kapitels.

136 | Kapitel 6: Texteigenschaften

KAPITEL 6

Texteigenschaften

Sicher geht es beim Webdesign zu einem großen Teil darum, die richtigen Farben auszu-wählen und Ihren Seiten das coolste Aussehen zu geben. Die meiste Zeit verbringen Sieaber vermutlich damit festzulegen, an welcher Stelle Ihr Text steht und wie er dargestelltwird. Diese Überlegungen waren der Ausgangspunkt für HTML-Tags wie <FONT> und<CENTER>, mit denen ein gewisses Maß an Kontrolle über das Aussehen und die Platzie-rung des Textes möglich war.

Weil Text so wichtig ist, gibt es eine große Anzahl von CSS-Eigenschaften, mit denen sichdie Darstellung von Text steuern lässt. Was ist also der Unterschied zwischen Text undSchriften? Ganz einfach. Text ist der Inhalt und Schriften werden benutzt, um den Inhaltdarzustellen. Mit Hilfe von Texteigenschaften können Sie die Textposition im Verhältniszum Rest einer Zeile bestimmen, Text hochgestellt darstellen, ihn unterstreichen und dieGroß- und Kleinschreibung beeinflussen. Sie können in begrenztem Umfang sogar dieTabulatortaste einer Schreibmaschine simulieren.

Einrückung und horizontale AusrichtungZu Beginn wollen wir besprechen, wie Sie die horizontale Textpositionierung innerhalbeiner Zeile beeinflussen können. Das sind im Prinzip Entscheidungen, die Sie beim Erstel-len eines Newsletters oder eines Berichts auch treffen müssen.

Text einrückenDas Einrücken der ersten Textzeile eines Absatzes auf einer Webseite ist eine der belieb-testen Formen der Textformatierung. (Das Entfernen der Leerzeile zwischen zwei Absät-zen, zu dem wir in Kapitel 7 kommen, belegt einen knappen zweiten Platz.) Auf manchenSites wird der eingerückte Text durch das Einfügen eines kleinen transparenten Bildes vordem ersten Buchstaben des Absatzes simuliert. Andere Sites verwenden stattdessen dasüberhaupt nicht standardkonforme SPACER-Tag. Dank CSS gibt es mittlerweile aber einebessere Methode, um Text einzurücken: die Eigenschaft text-indent.

Einrückung und horizontale Ausrichtung | 137

Durch die Verwendung von text-indent kann die erste Zeile eines beliebigen Elementsum den angegebenen Abstand eingerückt werden – und es sind sogar negative Wertemöglich. Am häufigsten wird diese Eigenschaft aber selbstverständlich eingesetzt, um dieerste Zeile von Absätzen einzurücken:

p {text-indent: 3em;}

Diese Regel sorgt dafür, dass die erste Zeile aller Absätze um drei em-Einheiten einge-rückt wird (siehe Abbildung 6-1).

Im Prinzip können Sie text-indent auf ein beliebiges Block-Element anwenden, nichtaber auf Inline- oder ersetzte Elemente (z.B. Bilder). Befindet sich trotzdem ein Bild in derersten Zeile eines Block-Elements, wird es zusammen mit dem Rest des Texts verscho-ben.

Wenn Sie die erste Zeile eines Inline-Elements »einrücken« wollen, kön-nen Sie den gleichen Effekt mit Hilfe des linken Innen- oder Außenab-stands erzielen.

Sie können für text-indent auch negative Werte angeben, was ein paar interessanteEffekte zur Folge hat. Die häufigste Verwendung ist die so genannte »hängende« Einrü-ckung, bei der die erste Zeile links aus dem Rest des Elements »heraushängt«.

p {text-indent: -4em;}

Seien Sie beim Setzen eines negativen Werts für text-indent aber vorsichtig: Die erstendrei Wörter unseres Beispiels (»Bei diesem Element«) werden möglicherweise von der lin-ken Seite des Browserfensters abgeschnitten. Um solche Probleme bei der Darstellung zu

text-indent

Werte: <Entfernung> | <Prozentwert> | inherit

Startwert: 0

Anwendung auf: Block-Elemente

Vererbt: ja

Prozentwerte: beziehen sich auf die Breite des umschließenden Blocks

Berechneter Wert: bei Prozentwerten wie angegeben; bei Entfernungsangaben die absolute Ent-fernung

Abbildung 6-1: Text einrücken


vermeiden und die negative Einrückung wieder auszugleichen, empfehle ich die Verwen-dung eines Außenabstands oder von Innenabständen (»padding«):

p {text-indent: -4em; padding-left: 4em;}

Negative Einrückungen können aber auch von Vorteil sein. Nehmen wir einmal das fol-gende Beispiel, in dem ein umflossenes Bild eingebunden wird (siehe Abbildung 6-2):

p.hang {text-indent: -25px;}

<img src="star.gif" style="width: 60px; height: 60px;

float: left;" alt="Bild von einem fünfzackigen Stern."/>

<p class="hang"> Dieser Absatz enthält negativ eingerückten Text,

der das umflossene Bild vor dem Text überlappt. Die folgenden Zeilen

überlappen das Bild dagegen nicht, weil sie nicht eingerückt sind.</p>

Mit dieser einfachen Methode können Sie bereits eine ganze Reihe interessanter Designsumsetzen:

div {width: 400px;}

Für text-indent können beliebige Entfernungseinheiten oder auch Prozentwerte benutztwerden. Im folgenden Fall beziehen sich die Prozentwerte auf die Breite des Elternele-ments des Elements, das eingerückt werden soll. Wenn Sie also festlegen, dass die Einrü-ckung eines Elements 10% betragen soll, wird es um 10% der Breite seinesElternelements eingerückt (siehe Abbildung 6-3):

p {text-indent: 10%;}

<div>

<p>Dieser Absatz befindet sich innerhalb eines DIV-Elements von

400px Breite. Demnach wird die erste Zeile des Absatzes um 40px

(400 * 10% = 40) eingerückt. Das liegt daran, dass Prozentwerte

relativ zur Breite des Elternelements berechnet werden.</p>

</div>

Abbildung 6-2: Ein umflossenes Bild und negativ eingerückter Text

Abbildung 6-3: Texteinrückung mit Prozentwerten


Beachten Sie, dass sich diese Einrückung auch bei explizit eingefügten Zeilenumbrüchen(br) nur auf die erste Zeile des Elements auswirkt. Obwohl der Absatz im folgenden Bei-spiel nur eine Breite von 200 Pixeln hat, wird die erste Zeile um 50 Pixel eingerückt (sieheAbbildung 6-4). In diesem Fall beträgt der geerbte Wert für text-indent nun 10%:

div {width: 500px; text-indent: 10%;}

p {width: 200px;}

<div>

Die erste Zeile dieses DIV-Elements wird um 50 Pixel eingerückt.

<p>

Dieser Absatz hat eine Breite von 200 Pixeln und wird

ebenfalls um 50 Pixel eingerückt, weil die berechneten

Werte für 'text-indent' im Gegensatz zu den deklarierten

Werten vererbt werden.

</p>

</div>

In CSS-Versionen vor 2.1 wurde bei text-indent immer der berechneteWert anstelle des deklarierten Werts vererbt.

Horizontale AusrichtungNoch einfacher als text-indent ist die Eigenschaft text-align, die festlegt, wie die Text-zeilen eines Elements zueinander ausgerichtet werden. Die ersten drei Werte sind rechtklar, während der vierte und fünfte etwas komplizierter sind.

Was diese Werte im Einzelnen bewirken, lässt sich am einfachsten anhand vonAbbildung 6-5 veranschaulichen.

Wie man sieht, sorgen die Werte left, right und center dafür, dass der Text innerhalbvon Elementen analog den englischen Worten (links, rechts, zentriert) ausgerichtet wird.Die Eigenschaft text-align wirkt nur auf Block-Elemente wie z.B. Absätze. Aus diesemGrund kann ein Anker per text-align nur zentriert werden, wenn auch der Rest der Zeilemit zentriert wird (was Sie vermutlich nicht wollen, da dies zu Textüberschneidungenführen kann).

Abbildung 6-4: Vererbte Texteinrückung


In westlichen Sprachen, die von links nach rechts gelesen werden, ist left der Standard-wert für text-align. Die Zeilenanfänge haben einen gemeinsamen linken Rand, währendder rechte Rand »ausgefranst« erscheint (auch als »left-to-right«-Text (ltr) bezeichnet).Bei Sprachen wie Hebräisch oder Arabisch ist die Standardausrichtung dagegen right,weil diese von rechts nach links gelesen werden. Erwartungsgemäß sorgt der Wert centerdafür, dass die einzelnen Textzeilen innerhalb des Elements zentriert dargestellt werden.

Auch wenn die Versuchung groß ist, sollten Sie jetzt nicht glauben, dass text-align:center das Gleiche ist wie das Element <CENTER>. Tatsächlich ist der Unterschied sogarrecht groß, denn mit <CENTER> wurde nicht nur Text zentriert, sondern ganze Elementewie etwa Tabellen. text-align kontrolliert dagegen nicht die Ausrichtung von Elementen,sondern nur von deren eingebetteten Inhalten. In Abbildung 6-5 ist dies deutlich zusehen. Die Elemente selbst werden nicht verschoben, sondern nur der enthaltene Text.

text-align

CSS2.1-Werte: left | center | right | justify | inherit

CSS2-Werte: left | center | right | justify | <string> | inherit

Startwert: abhängig vom Benutzerprogramm; kann auch von der Schreibrichtungabhängig sein


Vererbt: ja


Hinweis: CSS2 enthält außerdem noch den Wert <string>, der auf Grund mangelnderImplementierung aus CSS2.1 wieder entfernt wurde.

Abbildung 6-5: Verhaltensweisen der Eigenschaft text-align


Die Zentrierung von Block-Elementen oder Tabellen erfolgt über die kor-rekte Einstellung ihrer rechten und linken Ränder. Details hierzu findenSie in Kapitel 7.

Der letzte mögliche Wert, justify (Blocksatz), wirft einige Fragen auf. Bei Text im Block-satz werden beide Enden einer Zeile mit den inneren Rändern des Elternelements bündigdargestellt (siehe Abbildung 6-6). Hierbei werden die Abstände zwischen den einzelnenWörtern und Buchstaben so angepasst, dass jede Zeile exakt gleich lang ist. Text imBlocksatz kommt häufig bei gedruckten Dokumenten vor (wie beispielsweise diesemBuch). Unter CSS gibt es dabei allerdings noch ein paar Dinge zu beachten.

Nicht CSS, sondern das Benutzerprogramm legt fest, wie Text im Blocksatz »gedehnt«werden soll, um den Platz zwischen dem linken und dem rechten Rand des Elternpro-gramms auszufüllen. Manche Browser fügen hierfür zusätzliche Leerzeichen zwischenden einzelnen Wörtern ein, während andere den zusätzlichen Leerraum zwischen deneinzelnen Buchstaben aufteilen. Andere Benutzerprogramme verringern den Leerraumeiniger Zeilen und schieben so den Text mehr als üblich zusammen. Alle diese Möglich-keiten wirken sich auf die Erscheinung eines Elements aus, inklusive dessen Höhe, jenachdem, auf wie viele Zeilen sich die Blocksatzmethode des Browsers auswirkt.

CSS legt auch nicht fest, wie die Worttrennung stattfinden soll.1 Im Blocksatz werdenWörter oft getrennt, um lange Wörter über zwei Zeilen zu umbrechen. Da dieses Verhal-ten in CSS jedoch nicht weiter festgelegt ist, trennen Benutzerprogramme Wörter ehernicht von sich aus. Daher erscheint Text im Blocksatz in CSS wesentlich weniger attraktivals im Druck, insbesondere, wenn die Elemente so schmal sind, dass nur wenige Wörter

Abbildung 6-6: Text im Blocksatz

1 Die Worttrennung wird in CSS nicht festgelegt, weil sie in verschiedenen Sprachen nach verschiedenen Regelnstattfindet. Anstatt sich also starr an einen Regelsatz zu halten, der sehr wahrscheinlich unvollständig wäre,vermeidet die Spezifikation dieses Problem einfach.


auf eine Zeile passen. Selbstverständlich können Sie trotzdem schmale Designelementebenutzen, nur sollten Sie sich über die möglichen Nachteile im Klaren sein.

Vertikale AusrichtungNach der horizontalen Ausrichtung wollen wir uns nun der vertikalen Ausrichtungzuwenden. Da der Zeilenaufbau detailliert in Kapitel 7 behandelt wird, gebe ich Ihnenhier nur einen kurzen Überblick darüber.

ZeilenhöheDie Eigenschaft line-height bezieht sich auf den Abstand der Grundlinien zweier Text-zeilen und nicht auf die Größe einer Schrift. Sie legt fest, um welchen Wert die Höhe einesElements vergrößert oder verringert wird. Im einfachsten Fall ist line-height einfach eineMethode, um den vertikalen Raum zwischen zwei Textzeilen zu vergrößern (oder zu ver-kleinern). Diese Sichtweise ist jedoch irreführend, was die Funktionsweise von line-height angeht. line-height kontrolliert den so genannten Durchschuss (Leading), alsoden zusätzlichen Raum zwischen zwei Textzeilen ober- und unterhalb der Schriftgröße.Der Durchschuss ist also die Differenz zwischen dem Wert für line-height und derSchrifthöhe.

Bei der Anwendung auf ein Block-Element definiert line-height die minimale Entfernungzwischen den Textgrundlinien innerhalb des betreffenden Elements. Beachten Sie, dasshier ein Minimum und kein absoluter Wert definiert wird und dass die Grundlinien einesTexts weiter auseinander geschoben werden können, als dies der Wert von line-heighteigentlich vorsieht. (Der Schleier über diesem subtilen Mysterium wird in Kapitel 7 gelüf-tet.)

Der Aufbau einer Zeile

Jedes Element einer Textzeile erzeugt einen Inhaltsbereich (content area), der von derSchriftgröße abhängig ist. Der Inhaltsbereich kann seinerseits eine Inline-Box erzeugen,die die gleiche Größe hat wie der Inhaltsbereich, sofern keine anderen Faktoren zur Gel-

line-height

Werte: <Höhe> | <Prozentwert> | <Zahl> | normal | inherit

Startwert: normal

Anwendung auf: alle Elemente (Details zu ersetzten und Block-Elementen finden Sie im Text)

Vererbt: ja

Prozentwerte: relativ zur Schriftgröße des Elements

Berechneter Wert: für Höhen- und Prozentwerte der absolute Wert; ansonsten wie angegeben

Vertikale Ausrichtung | 143

tung kommen. Einer dieser Faktoren ist beispielsweise der von line-height erzeugteDurchschuss.

Um den Durchschuss für ein gegebenes Element zu ermitteln, müssen Sie nur den berech-neten Wert von font-size von dem berechneten Wert von line-height subtrahieren. DasErgebnis ist der Wert für den tatsächlichen Durchschuss. Dieser wird dann halbiert undzu gleichen Teilen der Ober- bzw. Unterseite des Inhaltsbereichs zugerechnet.

Wurde beispielsweise die Schriftgröße (und damit der Inhaltsbereich) mit 14 Pixeln ange-geben und der berechnete Wert für line-height mit 18 Pixeln, so beträgt die Differenz 4Pixel. Dieser Wert wird halbiert und je zur Hälfte der Ober- und Unterseite zugeschlagen.Dies erzeugt durch die zwei zusätzlichen Pixel ober- und unterhalb des Inhaltsbereichseine Inline-Box von 18 Pixeln Höhe. Vielleicht hätten wir die Funktionsweise von line-height auch einfacher erklären können, allerdings gibt es sehr gute Gründe, hier sehrgründlich vorzugehen.

Nachdem alle Inline-Boxen für eine gegebene Inhaltszeile erzeugt wurden, werden ihreGrößen für die Erzeugung der Zeilenbox herangezogen. Die Zeilenbox ist gerade so groß,dass die Oberkante der höchsten Inline-Box und die Unterkante der am tiefsten liegendenInline-Box umschlossen werden können. In Abbildung 6-7 sehen Sie ein Diagramm fürdiesen Prozess.

Die Werte für line-height

Als Nächstes wollen wir uns mit den möglichen Werten für line-height befassen. WennSie den Standardwert normal benutzen, muss das Benutzerprogramm den vertikalenRaum zwischen den Zeilen berechnen. Die Werte können sich von Benutzerprogramm zuBenutzerprogramm unterscheiden, betragen aber in der Regel das 1,2fache der Schrift-größe, wodurch die Zeilenboxen eines Elements größer sind als dessen Wert für font-size.

Die meisten Werte sind einfach Höhenangaben (z.B. 18px oder 2em). Beachten Sie aber,dass die Messungen von Browsern (oder Betriebssystemen) selbst bei korrekten Höhen-angaben falsch sein können, wodurch die Darstellung vielleicht nicht genau den angege-benen vier Zentimetern entspricht. Weitere Details hierzu finden Sie in Kapitel 4.

Abbildung 6-7: Diagramm einer Zeilenbox


em, ex und Prozentwerte werden anhand des Wertes von font-size des Elements berech-net. Die Ergebnisse des unten stehenden Beispiels sehen Sie in Abbildung 6-8:

body {line-height: 14px; font-size: 13px;}

p.cl1 {line-height: 1.5em;}

p.cl2 {font-size: 10px; line-height: 150%;}

p.cl3 {line-height: 0.33in;}

<p>Dieser Absatz erbt einen 'line-height'-Wert von 14px vom body-Element sowie

die Angabe 13px für 'font-size'.</p>

<p class="cl1">Der Wert für 'line-height' für diesen Absatz beträgt 21px (14 * 1.5).

Er hat deshalb eine etwas größere Zeilenhöhe als üblich.</p>

<p class="cl2">Der Wert für 'line-height' für diesen Absatz beträgt 15px (10 * 150%).


<p class="cl3">Der Wert für 'line-height' für diesen Absatz beträgt 0.33in.


line-height und Vererbung

Wird der Wert von line-height von einem Element an ein anderes vererbt, werden dieDinge etwas komplizierter. Die Werte für line-height werden vererbt, wie sie für dasElternelement berechnet wurden – nicht für das Kindelement. Die Ergebnisse der folgen-den Regeln sehen Sie in Abbildung 6-9. Diese Darstellung entspricht vermutlich nichtganz dem, was sich der Autor vorgestellt hat:


div {line-height: 1em;} /* berechneter Wert: '10px' */


<div>

<p>Der Wert für 'font-size' für diesen Absatz beträgt 18px. Der geerbte Wert für

'line-height' beträgt aber nur 10px. Hierdurch kann es passieren, dass sich die

Textzeilen leicht überschneiden.</p>

</div>

Abbildung 6-8: Einfache Berechnungen mit der Eigenschaft line-height


Warum stehen die Zeilen so nah beieinander? Weil der berechnete Wert von 10px fürline-height für den Absatz vom Elternelement div geerbt wurde. Eine Lösung für dasProblem mit kleinen Werten für line-height besteht darin, für jedes Element einen eige-nen Wert für line-height anzugeben, was aber nicht besonders praktisch ist. Besserbenutzen Sie für den Skalierungsfaktor einen Zahlenwert:


div {line-height: 1;}


Durch die Angabe einer Zahl sorgen Sie dafür, dass der Skalierungsfaktor vererbt wird.Die Zahl wird also auf das Element selbst und alle seine Kindelemente angewendet.Dadurch wird der Wert für line-height für jedes Element bezogen auf dessen eigenefont-size berechnet (siehe Abbildung 6-10):

div {line-height: 1.5;}


<div>

<p>Der 'font-size'-Wert für diesen Absatz beträgt 18px. Da der Wert für 'line-height'

des Elternelements div mit 1.5 angegeben wurde, beträgt der Wert für 'line-height' in

diesem Absatz nun 27px (18 * 1.5).</p>

</div>

Auch wenn es so aussieht, als ob line-height zusätzlichen Platz ober- und unterhalb jederTextzeile einfügt, werden eigentlich nur der obere und untere Teil des Inhaltsbereichserweitert (oder verkleinert), um die Inline-Box zu erzeugen. Für das folgende Beispielnehmen wir für font-size den Standardwert von 12pt an. Sehen Sie sich hierzu Folgendesan:

p {line-height: 16pt;}

Da die »eingebettete« (Inline-)Textzeile eine Höhe von 12 Punkten hat, wird nach deroben stehenden Regel zusätzlich ein Leerraum von 4 Punkten Höhe um jede Textzeile desAbsatzes eingefügt. Dieser Leerraum wird wieder halbiert und gleichmäßig auf die Ober-und Unterseite jeder Zeile verteilt. Als indirekte Auswirkung der Verteilung des zusätzli-

Abbildung 6-9: Geringe Zeilenhöhe, große Schriftgröße, kleines Problem

Abbildung 6-10: Die Verwendung von Skalierungsfaktoren für line-height zur Behebung von Vererbungsproblemen


chen Zwischenraums hat der Raum zwischen den Grundlinien nun eine Höhe von 16Punkten.

Wenn Sie als Wert für line-height den Wert inherit angeben, so verwendet das Elementden für das Elternelement berechneten Wert. Die einzigen Unterschiede zur standardmä-ßigen Vererbung bestehen dabei in der Spezifität und in der Auflösung der Kaskadierung.Genaue Details hierzu finden Sie in Kapitel 3.

Nach diesem groben Überblick über das Zeilen-Layout wollen wir uns jetzt damit befas-sen, wie Elemente relativ zur Zeilenbox vertikal angeordnet werden können.

Vertikale TextausrichtungWenn Sie jemals die Elemente sup und sub (für Super- und Subskript-Elemente) benutzthaben oder die Darstellung eines Bildes mit Markup-Code wie <img src="foo.gif"align="middle"> gesteuert haben, so wissen Sie im Prinzip schon, was vertikale Ausrich-tung bedeutet. In CSS gilt die Eigenschaft vertical-align nur für Inline- und ersetzte Ele-mente sowie für Bilder und Formular-Eingabefelder. Dabei werden die Werte vonvertical-align nicht vererbt.

Als Wert für vertical-align kann eines von acht Schlüsselwörtern, ein Prozentwert odereine Höhenangabe verwendet werden. Die Schlüsselwörter kennen Sie teilweise schon:baseline (Standardwert), sub, super, bottom, text-bottom, middle, top und text-top. Wirwerden die Schlüsselwörter hier im Bezug auf Inline-Elemente besprechen.

Vergessen Sie nicht: vertical-align hat keinen Einfluss auf die Ausrich-tung des Inhalts in einem Block-Element. Allerdings können Sie vertical-align benutzen, um die vertikale Ausrichtung von Elementen innerhalbvon Tabellenzellen zu steuern. Details hierzu finden Sie in Kapitel 11.

vertical-align

Werte: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <Pro-zentwert> | <Höhe> | inherit

Startwert: baseline

Anwendung auf: Inline-Elemente und Tabellenzellen

Vererbt: nein

Prozentwerte: beziehen sich auf den Wert für line-height des betreffenden Elements

Berechneter Wert: für Prozent- und Höhenangaben die absolute Höhe; ansonsten wie angege-ben

Hinweis: bei der Anwendung auf Tabellenzellen werden nur die Werte baseline, top,middle und bottom erkannt


Ausrichtung an der Grundlinie

vertical-align: baseline erzwingt die vertikale Ausrichtung eines Elements an derGrundlinie seines Elternelements. Für die meisten Browser ist dies das Standardverhal-ten, denn die meisten Leute gehen ohnehin davon aus, dass die Unterkante von Textele-menten auf der Grundlinie dargestellt wird.

Besitzt ein vertikal ausgerichtetes Element keine Grundlinie – ein Bild, ein Formular-Ein-gabefeld oder ein anderes ersetztes Element –, wird die Unterkante dieses Elements ander Grundlinie seines Elternelements ausgerichtet (siehe Abbildung 6-11):

img {vertical-align: baseline;}

<p>Die Unterkante des Bildes in diesem Absatz <img src="dot.gif" alt="A dot" />

wurde an der Grundlinie des Textes ausgerichtet.</p>

Diese Ausrichtungsregel ist wichtig, weil einige Webbrowser die Unterkante eines ersetz-ten Elements immer an der Grundlinie ausrichten, selbst wenn die Zeile keinen anderenText enthält. Nehmen wir einmal an, eine Tabellenzelle enthielte nur ein Bild. Selbstwenn sich das Bild bereits auf der Grundlinie befindet, kann es manchen Browsern pas-sieren, dass der Platz unterhalb der Grundlinie für einen Zwischenraum unterhalb desBildes sorgt. Andere Browser umgeben das Bild mit der Tabellenzelle wie mit einer Vaku-umverpackung, so dass kein Zwischenraum zu sehen ist. Trotz seines schlechten Rufs beivielen Autoren ist das Zwischenraum-Verhalten laut der CSS Working Group korrekt.

Eine detailliertere Erklärung zu diesen Zwischenräumen und möglicheLösungen finden Sie in meinem Artikel »Images, Tables, and MysteriousGaps« unter http://devedge.netscape.com/viewsource/2002/img-table/. Einedetaillierte Betrachtung zu diesem Aspekt der Darstellung von Inline-Ele-menten finden Sie auch in Kapitel 7.

Tief- oder hochstellen

Die Deklaration vertical-align: sub sorgt dafür, dass ein Element als Subskript darge-stellt wird; das heißt, seine Grundlinie (bzw. bei ersetzten Elementen die Unterkante)wird im Verhältnis zur Grundlinie seines Elternelements tiefer dargestellt. Die Spezifika-tion legt nicht fest, um welche Größenordnung die Versetzung stattfinden soll, daherkann sich die Darstellung in den verschiedenen Benutzerprogrammen unterscheiden.

super ist das Gegenteil von sub. Es erhöht die Grundlinie des Elements (bzw. die Unter-kante eines ersetzten Elements) im Verhältnis zur Grundlinie des Elternelements. Auchhier kann die Anhebung je nach Benutzerprogramm variieren.

Abbildung 6-11: Grundlinienausrichtung eines Bildes


Beachten Sie, dass sub und super die Schriftgröße des Elements hierbei nicht ändern, sodass Subskript- oder Superskript-Text nicht automatisch kleiner (oder größer) dargestelltwird. Stattdessen ist festgelegt, dass Textteile eines tief- oder hochgestellten Elementsstandardmäßig die gleiche Größe haben sollen wie der Text des Elternelements (sieheAbbildung 6-12):

span.raise {vertical-align: super;}

span.lower {vertical-align: sub;}

<p>Dieser Absatz enthält <span class="raise">hochgestellten</span>

und <span class="lower">tiefgestellten</span> Text.</p>

Wenn Sie wollen, dass als Subskript oder Superskript definierter Text klei-ner als das Elternelement dargestellt wird, können Sie hierfür die Eigen-schaft font-size einsetzen, die in Kapitel 5 besprochen wird.

Ganz unten

vertical-align: bottom richtet die Unterkante der Inline-Box des Elements bündig mitder Unterkante der Zeilenbox aus. So erzeugt folgender Code die in Abbildung 6-13gezeigte Darstellung:

.feeder {vertical-align: bottom;}

<p>Wie Sie deutlich sehen können, enthält dieser Absatz

ein <img src="tall.gif" alt="hohes" class="feeder" /> Bild und

ein <img src="short.gif" alt="niedriges" class="feeder" /> Bild

und etwas Text, der nicht hoch ist.</p>

Die zweite Zeile des Absatzes in Abbildung 6-13 enthält zwei Inline-Elemente, derenUnterkanten gleich zueinander und unterhalb der Text-Grundlinie ausgerichtet sind.

Die Anweisung vertical-align: text-bottom bezieht sich auf die Unterkante des Textesin der jeweiligen Zeile. Um diesen Wert korrekt umzusetzen, werden ersetzte Elemente

Abbildung 6-12: Ausrichtung als Superskript und Subskript

Abbildung 6-13: Ausrichtung an der Unterkante


und alle anderen Arten von Nicht-Text-Elementen ignoriert und stattdessen eine »Stan-dard«-Textbox angenommen. Die Größe dieser Box basiert auf dem Wert für font-sizedes Elternelements. Die Inline-Box des auszurichtenden Elements wird dann bündig zurUnterkante dieser Standard-Textbox dargestellt. Mit dem unten stehenden Code bekom-men Sie demnach die in Abbildung 6-14 dargestellte Situation:

img.tbot {vertical-align: text-bottom;}

<p>Hier haben wir ein <img src="tall.gif" style="vertical-align: middle;" alt="hohes" />

Bild und dann ein <img src="short.gif" class="tbot" alt="niedriges" /> Bild.</p>

Hoch hinaus

Die Verwendung von vertical-align: top erzeugt einen gegenteiligen Effekt wie bottom.Entsprechend ist vertical-align: text-top das Gegenteil von vertical-align: text-bottom. In Abbildung 6-15 sehen Sie, wie der unten stehende Code dargestellt wird:

.up {vertical-align: top;}

.textup {vertical-align: text-top;}

<p>Hier haben wir ein <img src="tall.gif" alt="hohes"> Bild und dann

<span class="up">etwas Text,</span> der vertikal ausgerichtet wurde.</p>

<p>Hier haben wir ein <img src="tall.gif" class="textup" alt="hohes"> Bild, das

vertikal ausgerichtet wurde, und dann ein <img src="short.gif" class="textup"

alt="niedriges" />Bild, das auf ähnliche Weise ausgerichtet wurde.</p>

Natürlich hängt die exakte Position dieser Ausrichtung von der Größe der Elemente aufdieser Zeile und der Schriftgröße des Elternelements ab.

Abbildung 6-14: Ausrichtung an der Text-Unterkante

Abbildung 6-15: Ausrichtung mit top und text-top


Mittendrin

Und dann gibt es den Wert middle (mittig), der normalerweise (aber nicht immer) auf Bil-der angewendet wird und mit ziemlicher Sicherheit genau das tut, was Sie erwarten.Beträgt die Schriftgröße (font-size) des Elternelements 1ex, richtet middle die Inline-Boxeines Elements 0.5ex oberhalb der Grundlinie des Elternelements aus. In Abbildung 6-16ist das detailliert zu sehen.

Da die meisten Benutzerprogramme 1ex als die Hälfte von 1em betrachten, wird der ver-tikale Mittelpunkt eines Elements normalerweise 1/4em oberhalb der Grundlinie desElternelements ausgerichtet. Verlassen Sie sich aber nicht auf dieses Verhalten, denn esgibt auch Benutzerprogramme, die die genaue x-Höhe für jedes Element berechnen.(Weitere Details zur x-Höhe finden Sie in Kapitel 5.)

Prozentwerte

Mit Prozentwerten lässt sich valign="middle" nicht simulieren. Stattdessen wird dieGrundlinie des Elements (oder die Unterkante des ersetzten Elements) um den deklarier-ten Wert – bezogen auf die Grundlinie des Elternelements – angehoben oder abgesenkt.Hierbei wird für die Berechnung des Prozentwerts der line-height-Wert des Elementsselbst und nicht der seines Elternelements herangezogen. Ein positiver Prozentwerterhöht das Element, ein negativer verschiebt es nach unten. Wie in Abbildung 6-17 zusehen, ist bei der Verwendung von Prozentwerten Vorsicht geboten, da es sonst passierenkann, dass der Text scheinbar auf unterschiedlichen Zeilen steht:

sub {vertical-align: -100%;}

sup {vertical-align: 100%;}

<p>Wir können <sup>zu neuen Höhen aufsteigen</sup> oder

<sub>in tiefe Verzweiflung versinken...</sub></p>

Abbildung 6-16: Detaillierte Darstellung der mittigen Ausrichtung

Abbildung 6-17: Spaß mit Prozentwerten

Wort- und Buchstabenabstände | 151

Lassen Sie uns die Prozentwerte noch einmal genauer betrachten. Nehmen wir folgendesBeispiel:

<div style="font-size: 14px; line-height: 18px;">

Ich hatte das Gefühl, dass ich für meine Anstrengungen zumindest eine

kleine <span class="vertical-align: 50%;">(Gehalts-)Erhöhung</span> verdient hätte.

</div>

Die Grundlinie des span-Elements soll um 50% nach oben verschoben werden. Das ent-spricht 18px, also der Hälfte des geerbten Wertes für line-height, und nicht sieben Pixeln.

Ausrichtung nach Höhenangabe

Zum Schluss wollen wir uns die vertikale Ausrichtung anhand einer festen Höhenangabeansehen. Hier verhält sich vertical-align wie erwartet und verschiebt ein Element umdie angegebene Entfernung nach oben oder nach unten. Die Angabe vertical-align:5px; verschiebt ein Element demnach von seiner nicht ausgerichteten Position um fünfPixel nach oben. Diese einfache Form der Ausrichtung gab es in CSS1 noch nicht; siewurde erst mit CSS2 eingeführt.

Hierbei sollte man daran denken, dass vertikal ausgerichteter Text nicht Teil einer ande-ren Zeile wird und sich auch nicht mit dem Text aus anderen Zeilen überschneidet. SehenSie hierzu Abbildung 6-18. Der Text in der Mitte des Absatzes wurde vertikal verschoben.

Wie Sie sehen, kann ein vertikal ausgerichtetes Element die Zeilenhöhe beeinflussen.Erinnern Sie sich hierbei an die Zeilenbox, die genau so groß ist, dass die Oberkante derhöchsten Inline-Box und die Unterkante der niedrigsten Inline-Box gerade hineinpassen.Diese Regel gilt selbstverständlich auch für Inline-Boxen, die durch vertikale Ausrichtungnach oben oder unten verschoben wurden.

Wort- und BuchstabenabständeNach der Ausrichtung wollen wir uns nun damit befassen, wie Sie die Abstände zwischeneinzelnen Wörtern und Buchstaben verändern können. Wie üblich haben auch dieseEigenschaften einige nicht intuitive Aspekte.

Abbildung 6-18: Durch vertikale Ausrichtung können einzelne Zeilen höher werden


Wortabstände

Der Wert für word-spacing kann positiv oder negativ sein. Die angegebene Breite wirddem Standardabstand zwischen zwei Wörtern hinzugefügt. Demnach wird word-spacingverwendet, um den Abstand zwischen zwei Wörtern zu modifizieren. Aus diesem Grundentspricht der Standardwert normal dem Setzen des absoluten Wertes null (0).

Setzen Sie die Breite auf einen positiven Wert, erhöht sich der Abstand zwischen zweiWörtern. Ein negativer Wert für word-spacing rückt die Wörter näher zusammen:

p.spread {word-spacing: 0.5em;}

p.tight {word-spacing: -0.5em;}

p.base {word-spacing: normal;}

p.norm {word-spacing: 0;}

<p class="spread">Die Wortabstände in diesem Absatz werden um 0,5em größer.</p>

<p class="tight">Die Wortabstände in diesem Absatz werden um 0,5em geringer.</p>

<p class="base">Die Wortabstände in diesem Absatz bleiben normal.</p>

<p class="norm">Die Wortabstände in diesem Absatz bleiben normal.</p>

Eine Änderung der Standardeinstellung hat den in Abbildung 6-19 gezeigten Effekt.

Bisher jetzt habe ich Ihnen noch keine Definition des Begriffs »Wort« geliefert. Im ein-fachsten Sinne von CSS ist ein »Wort« einfach eine beliebige Zeichenkette aus Nicht-Whitespace-Zeichen, die von einer beliebigen Anzahl Whitespace-Zeichen umgeben ist.Diese Definition hat jedoch keine echte semantische Bedeutung – es wird einfach davonausgegangen, dass ein Wort von einem oder mehreren Whitespace-Zeichen umgebenwird. Von einem CSS-fähigen Benutzerprogramm kann jedoch nicht erwartet werden,dass es entscheiden kann, was in einer gegebenen Sprache ein gültiges Wort ist oder

word-spacing

Werte: <Breite> | normal | inherit

Startwert: normal


Vererbt: ja

Berechneter Wert: für normal die absolute Breite 0; ansonsten die absolute Breite

Abbildung 6-19: Wortabstände ändern

Wort- und Buchstabenabstände | 153

nicht. Nach dieser Definition ist es eher unwahrscheinlich, dass word-spacing bei Spra-chen korrekt funktioniert, die Piktogramme oder nicht-lateinische Schriftzeichen verwen-den. Diese Eigenschaft ermöglicht es Ihnen, fast unlesbare Dokumente zu erstellen (sieheAbbildung 6-20). Benutzen Sie word-spacing daher mit äußerster Vorsicht.

Buchstabenabstände

Viele der bei word-spacing auftretenden Eigenheiten gelten auch für letter-spacing. Dereinzig wirkliche Unterschied besteht darin, dass letter-spacing den Abstand zwischeneinzelnen Zeichen oder Buchstaben modifiziert.

Wie bei word-spacing kann auch für letter-spacing ein beliebiger Wert für die Breiteangegeben werden. Das Standard-Schlüsselwort für letter-spacing ist normal (was dengleichen Effekt hat wie letter-spacing: 0). Jede Breitenangabe erhöht oder verringert denBuchstabenabstand um den angegebenen Wert. Die Darstellung für die folgenden Anwei-sungen finden Sie in Abbildung 6-21:

p {letter-spacing: 0;} /* entspricht dem Schlüsselwort 'normal' */

p.spacious {letter-spacing: 0.25em;}

p.tight {letter-spacing: -0.25em;}

<p>Die Buchstaben in diesem Absatz haben einen normalen Abstand.</p>

<p class="spacious">Die Buchstaben in diesem Absatz sind etwas weiter voneinander

entfernt.</p>

<p class="tight">Die Buchstaben in diesem Absatz stehen etwas näher beieinander.</p>

Abbildung 6-20: Sehr große Wortabstände

letter-spacing

Werte: <Breite> | normal | inherit

Startwert: normal


Vererbt: ja

Berechneter Wert: bei Breitenangaben die absolute Breite; ansonsten normal

Abbildung 6-21: Verschiedene Arten von Buchstabenabständen


Die Verwendung von letter-spacing, um eine Hervorhebung noch zu verstärken, ist einezeitsparende Technik. Sie könnten beispielsweise die folgende Deklaration schreiben, umden in Abbildung 6-22 gezeigten Effekt zu erzielen:

strong {letter-spacing: 0.2em;}

<p>Dieser Absatz enthält <strong>stark hervorgehobenen Text</strong>,

dessen Buchstabenbreite erhöht wurde, um die Hervorhebung zu verstärken.</p>

Abstände und AusrichtungSowohl word-spacing als auch letter-spacing können vom Wert der Eigenschaft text-align beeinflusst werden. Wenn ein Element im Blocksatz (text-align: justify) darge-stellt wird, werden die Wort- und Buchstabenabstände variiert, damit der Text diegesamte Zeilenbreite ausfüllt. Dadurch können wiederum die vom Autor per word-spacingund letter-spacing deklarierten Abstände verändert werden. In CSS ist nicht festgelegt,wie die Abstände berechnet werden sollen; die Benutzerprogramme erledigen das selbst.

Wie üblich erbt ein Kindelement den berechneten Wert des Elternelements. Es ist nichtmöglich, einen Skalierungsfaktor für word-spacing oder letter-spacing anzugeben, derdann anstelle des berechneten Werts vererbt wird (wie etwa bei line-height). Das könntezu Problemen wie den in Abbildung 6-23 gezeigten führen:

p {letter-spacing: 0.25em; font-size: 20px;}


<p>Dieser Absatz mit großen Abständen enthält <small>winzigen Text, der die

gleichen Abstände hat wie der Rest</small>, obwohl der Autor vermutlich die

Abstände im Verhältnis zur Textgröße dargestellt haben wollte.</p>

Die einzige Möglichkeit, um Buchstabenabstände im Verhältnis zur Textgröße darzustel-len, funktioniert nach folgender Methode:

p {letter-spacing: 0.25em;}

small {font-size: 50%; letter-spacing: 0.25em;}

Abbildung 6-22: Die Verwendung von letter-spacing, um eine Hervorhebung zu verstärken

Abbildung 6-23: Vererbte Buchstabenabstände

Text-Umwandlungen | 155

Text-UmwandlungenAls Nächstes befassen wir uns mit der Möglichkeit, die Groß- und Kleinschreibung vonText mittels der Eigenschaft text-transform zu beeinflussen.

Der Standardwert none führt keine Änderungen am Text durch und verwendet die Groß-und Kleinschreibung des Quelldokuments. Die Werte uppercase (Großschreibung) undlowercase (Kleinschreibung) sorgen dafür, dass der Text vollständig in Groß- bzw. Klein-buchstaben umgewandelt wird. Der Wert capitalize sorgt dafür, dass jeweils der ersteBuchstabe eines Worts großgeschrieben wird. In Abbildung 6-24 sehen Sie, wie sich dieverschiedenen Einstellungen auf den Text auswirken:

h1 {text-transform: capitalize;}

strong {text-transform: uppercase;}

p.cummings {text-transform: lowercase;}

p.raw {text-transform: none;}

<h1>Eine Haupt-Überschrift zu BeginN</h1>

<p>

Standandardmäßig wird Text mit der Groß- und Kleinschreibung des Quelldokuments

dargestellt. Es ist aber <strong>möglich, dies zu ändern</strong>, indem man

die Eigenschaft 'text-transform' benutzt.

</p>

<p class="cummings">

So könnte man beispielsweise TEXT Erstellen, der von dem Dichter

e.e.cummings Geschrieben Sein Könnte.

</p>

<p class="raw">

Wenn Sie ausdrücklich festlegen wollen, dass keine Text-Transformation

stattfinden soll, so können Sie auch dies tun.

</p>

Die verschiedenen Benutzerprogramme haben eigene Methoden, die Wortanfänge zuermitteln und damit auch, welche Buchstaben großgeschrieben werden sollen. So könnteder Text »Haupt-Überschrift« im h1-Element aus Abbildung 6-24 auf zwei Arten darge-stellt werden: entweder als »Haupt-überschrift« oder »Haupt-Überschrift«. CSS legt nichtfest, welche Schreibweise richtig ist; also ist beides möglich.

Vermutlich ist Ihnen auch schon aufgefallen, dass der letzte Buchstabe im h1-Element ausAbbildung 6-24 weiterhin als Großbuchstabe dargestellt wird. Dieses Verhalten ist kor-

text-transform

Werte: uppercase | lowercase | capitalize | none | inherit

Startwert: none


Vererbt: ja



rekt, denn wenn text-transform den Wert capitalize erhält, erwartet CSS vom Benutzer-programm nur, dass der erste Buchstabe jedes Worts großgeschrieben wird; der Rest desWorts kann ignoriert werden.

Als CSS-Eigenschaft ist text-transform scheinbar nicht so wichtig. Wenn Sie aber plötz-lich alle h1-Elemente großgeschrieben darstellen wollen, kann diese Eigenschaft sehrnützlich sein. Anstatt den gesamten Inhalt der h1-Elemente selbst zu ändern, brauchenSie nur eine text-transform-Regel zu verwenden, und die Arbeit wird für Sie getan:

h1 {text-transform: uppercase;}

<h1>Dies ist ein H1-Element</h1>

Die Verwendung von text-transform bietet zwei große Vorteile: Einerseits brauchen Sienur eine einzige Regel zu schreiben, um die Änderungen wirksam werden zu lassen.Andererseits sind die Änderungen sogar noch einfacher, wenn der ursprüngliche Zustandwiederhergestellt werden soll (siehe Abbildung 6-25):

h1 {text-transform: capitalize;}

<h1>Dies ist ein H1-Element</h1>

Text-AusschmückungWir kommen nun zur Eigenschaft text-decoration, die uns eine ganze Menge interessan-ter Möglichkeiten bietet.

Wie Sie vielleicht erwarten, sorgt der Wert underline dafür, dass das entsprechende Ele-ment unterstrichen wird, wie es das Element U in HTML auch tun würde. Der Wertoverline hat den gegenteiligen Effekt. Damit wird eine Linie oberhalb des Textes gezo-gen. Der Wert line-through zeichnet eine Linie direkt durch die Textmitte, auch bekannt

Abbildung 6-24: Verschiedene Arten der Text-Transformation

Abbildung 6-25: Ein H1-Element transformieren

Text-Ausschmückung | 157

als durchgestrichener Text (strikethrough), entsprechend den HTML-Elementen S undstrike. Mit dem Wert blink veranlassen Sie den Text zu blinken, wie das mit dem vielgeschmähten Tag blink möglich war, das von Netscape unterstützt wurde. In Abbildung6-26 sehen Sie Beispiele für die verschiedenen Werte:

p.emph {text-decoration: underline;}

p.topper {text-decoration: overline;}

p.old {text-decoration: line-through;}

p.annoy {text-decoration: blink;}

p.plain {text-decoration: none;}

Es ist leider nicht möglich, den Effekt des Wertes blink in gedrucktemText darzustellen; er ist aber (vielleicht zu) leicht vorstellbar. Wie derZufall will, wird von Benutzerprogrammen nicht erwartet, dass sie blinkunterstützen. Internet Explorer hat dies nie getan – zumindest bis zum jet-zigen Zeitpunkt.

Mit dem Wert none wird jede Art der Ausschmückung abgeschaltet, die ansonsten auf dasElement angewendet worden wäre. Standardmäßig wird Text, bis auf wenige Ausnah-men, nicht ausgeschmückt dargestellt. So werden Links beispielsweise standardmäßigunterstrichen dargestellt. Wenn Sie diese Unterstreichung unterdrücken wollen, könntenSie das mit folgender CSS-Regel erreichen:

a {text-decoration: none;}

Wenn Sie die Unterstreichungen von Links auf diese Weise abschalten, unterscheidensich Anker und normaler Text nur noch durch ihre Farbe.

text-decoration

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

Startwert: none


Vererbt: nein


Abbildung 6-26: Verschiedene Arten der Text-Ausschmückung


Auch wenn ich persönlich kein Problem damit habe, sind viele Benutzergenervt, wenn die Unterstreichung von Links unterbunden wurde. Letzt-endlich ist es eine Geschmacksfrage. Sie sollten aber bedenken, dass es fürBenutzer schwer sein kann, die Hyperlinks in Ihrem Dokument zu finden,wenn keine ausreichende farbliche Unterscheidung stattfindet.

Sie können die Ausschmückungen auch zu einer gemeinsamen Regel zusammenfassen.Wenn Hyperlinks beispielsweise unter- und überstrichen dargestellt werden sollen, kön-nen Sie das mit der folgenden Regel angeben:

a:link, a:visited {text-decoration: underline overline;}

Seien Sie aber vorsichtig. Wenn zwei Ausschmückungsregeln auf das gleiche Elementangewendet werden sollen, wird der Wert des Gewinners den des Verlierers komplettersetzen:

h2.stricken {text-decoration: line-through;}

h2 {text-decoration: underline overline;}

Nach diesen Regeln soll jedes h2-Element der Klasse stricken durchgestrichen dargestelltwerden. Die Unter- und Überstreichungen gehen verloren, weil Kurzschrift-Regeln einan-der ersetzen, anstatt gemeinsam benutzt zu werden.

Seltsame AusschmückungenWir wollen uns jetzt mit der weniger üblichen Seite von text-decoration befassen. Dererste Punkt dabei ist, dass text-decoration nicht vererbt wird. Keine Vererbung bedeutet,dass alle für den Text gezeichneten Dekorationslinien – unterhalb, oberhalb oder durchden Text – die gleiche Farbe erhalten wie das Elternelement. Das stimmt selbst dann,wenn die Nachfahren eine andere Farbe besitzen (siehe Abbildung 6-27):

p {text-decoration: underline; color: black;}

strong {color: gray;}

<p>Dieser Absatz wird schwarz dargestellt, wie auch seine Unterstreichungen.

Er enthält etwas <strong>stark hervorgehobenen Text</strong>, der ebenfalls

mit einer schwarzen Unterstreichung versehen wird.</p>

Das ist so, weil der Wert von text-decoration nicht vererbt wird und das strong-Elementdemnach den Standardwert none annimmt. Aus diesem Grund hat strong keine Unter-streichung. Trotzdem ist klar und deutlich eine Linie unterhalb des strong-Elements zusehen. Es scheint also etwas kindisch, zu sagen, es gäbe keine Unterstreichung. Und

Abbildung 6-27: Farbkonsistenz bei Unterstreichungen

Text-Ausschmückung | 159

trotzdem stimmt es. Was Sie sehen, ist die Unterstreichung des Absatzes, die sich überdas strong-Element erstreckt. Noch deutlicher wird dieses Phänomen, wenn Sie die Stil-definitionen für das stark hervorgehobene Element wie folgt abändern:


strong {color: gray; text-decoration: none;}

<p>Dieser Absatz wird schwarz dargestellt, wie auch seine Unterstreichungen.

Er enthält etwas <strong>stark hervorgehobenen Text</strong>, der ebenfalls

mit einer schwarzen Unterstreichung versehen wird.</p>

Das Ergebnis ist das gleiche wie in Abbildung 6-27, wobei wir dieses Mal nur ausdrück-lich deklariert haben, was bereits Stand der Dinge war. Es gibt also keine Möglichkeit,Unterstreichungen (bzw. Über- oder Durchstreichungen) innerhalb eines Elements abzu-schalten.

Wenn Sie text-decoration mit vertical-align kombinieren, können noch seltsamereDinge passieren (siehe Abbildung 6-28). Das Element sup hat keine eigenen Ausschmü-ckungs-Deklarationen. Weil seine Grundlinie aber innerhalb eines Elements, das miteiner Überstreichung versehen ist, nach oben verschoben wurde, läuft die Überstreichungnun durch die Mitte des sup-Elements:

p {text-decoration: overline; font-size: 12pt;}

sup {vertical-align: 50%; font-size: 12pt;}

Vermutlich werden Sie bereits jetzt schwören, niemals Text-Ausschmückungen zu ver-wenden, weil diese so viele Probleme verursachen können. Tatsächlich habe ich Ihnenaber nur die einfachsten Dinge gezeigt, die passieren können. Schließlich haben wir nurerforscht, wie die Dinge sich gemäß der Spezifikation verhalten sollten. Tatsächlich schal-ten manche Browser die Unterstreichungen von Kindelementen ab, obwohl sie das nichtsollten. Der Grund für diese Missachtung der Spezifikation liegt einfach darin, dass Auto-ren etwas anderes erwarten. Nehmen Sie zum Beispiel diese Regeln:


strong {color: silver; text-decoration: none;}

<p>Dieser Absatz und seine Unterstreichungen werden schwarz dargestellt. Er enthält

außerdem etwas <strong>fettgedruckten Text</strong>, der nicht schwarz unterstrichen ist.

</p>

In Abbildung 6-29 sehen Sie die Darstellung eines Browsers, der die Unterstreichungenfür das strong-Element abgeschaltet hat.

Abbildung 6-28: Seltsames und doch korrektes Verhalten bei der Text-Ausschmückung


Man muss hier allerdings aufpassen, weil einige Browser sich an die Spezifikation halten.Zukünftige Browser-Versionen (oder andere Benutzerprogramme) halten sich eines Tageswomöglich sogar präzise an die Spezifikation. Wenn Sie glauben, es reiche aus, Text-Aus-schmückungen mit none zu unterdrücken, kann dies in Zukunft, vielleicht aber auchschon in der Gegenwart, zu Problemen führen. Andererseits kann es natürlich auch sein,dass in zukünftigen CSS-Versionen Mittel zur Verfügung stehen, um Ausschmückungenauch ohne die fehlerhafte Verwendung von none abzuschalten; es besteht also noch Hoff-nung.

Es gibt immerhin eine Möglichkeit, die Farbe zu ändern, ohne die Spezifikation dabei zuverletzen. Wenn Sie für ein Element eine Textausschmückung festlegen, bedeutet dies,dass die Ausschmückungen für das gesamte Element die gleiche Farbe bekommen, selbstwenn die Kindelemente andere Farben haben. Um die Ausschmückungsfarbe für ein Ele-ment anzupassen, müssen Sie dessen Dekoration explizit festlegen, wie hier gezeigt:


strong {color: silver; text-decoration: underline;}

<p>Dieser Absatz und seine Unterstreichungen werden schwarz dargestellt. Er enthält

außerdem etwas <strong>fett gedruckten Text</strong>, der eigentlich durch sein

Elternelement schwarz unterstrichen ist. Diese Unterstreichung wird jedoch von der grauen

Unterstreichung des Elements selbst überlagert.</p>

In Abbildung 6-30 wird das strong-Element grau und unterstrichen dargestellt. Die graueUnterstreichung »überschreibt« visuell die schwarze Unterstreichung des Elternelements,wodurch die Farbe der Unterstreichung mit der des strong-Elements übereinstimmt.

TextschattenIn CSS2 gibt es eine Eigenschaft, mit der Texte mit Schatten versehen werden können. Daes zur Endfassung von CSS2.1 jedoch keinen Browser gab, der diese Eigenschaft vollstän-dig unterstützte, wurde sie wieder aus der Spezifikation gestrichen. Wenn Sie sich überle-gen, wie viel Aufwand es für einen Browser bedeutet, die Textumrisse eines Elements und

Abbildung 6-29: Wie manche Browser sich tatsächlich verhalten

Abbildung 6-30: Das Standardverhalten bei Unterstreichungen verändern

Textschatten | 161

einen oder mehrere Schatten zu berechnen, die zueinander passen müssen, ohne sichdabei zu überschneiden, ist das Fehlen von Schatten in der Spezifikation vielleicht ver-ständlich.

Standardmäßig werden Texte natürlich ohne Schatten dargestellt. Andererseits ist eszumindest theoretisch möglich, einen oder mehrere Schatten zu definieren. Jeder Schat-ten wird durch eine Farbe und drei Längenangaben definiert. Mit der Farbangabe wirdselbstverständlich die Farbe des Schattens festgelegt. Sie könnten also grüne, lila odersogar weiße Schatten definieren.

Die ersten beiden Längenangaben legen fest, wie weit der Schatten vom Text selbst ent-fernt sein soll. Der optionale dritte Werte definiert einen Weichzeichnungsradius für denSchatten. Um einen grünen Schatten zu definieren, der sich fünf Pixel rechts und ein hal-bes em unterhalb des Textes befinden soll, ohne weichgezeichnet zu werden, könnten Sieschreiben:

text-shadow: green 5px 0.5em;

Negative Längenangaben sorgen dafür, dass der Schatten links bzw. oberhalb des Origi-naltexts dargestellt wird.

Als Weichzeichnungsradius gilt die Entfernung zwischen dem Umriss des Schattens unddem äußeren Rand des Weichzeichnungseffekts. Ein Radius von zwei Pixeln hätte eineWeichzeichnung zur Folge, die den Raum zwischen dem Rand des Schattens und demRand des Weichzeichnungseffekts einnehmen würde. Die genaue Weichzeichnungsme-thode ist nicht weiter festgelegt. Das Benutzerprogramm kann also eine Reihe verschiede-ner Effekte verwenden. Die folgenden Stildefinitionen könnten also auf eine der inAbbildung 6-31 gezeigten Arten dargestellt werden:

p.cl1 {color: black; text-shadow: silver 2px 2px 2px;}

p.cl2 {color: white; text-shadow: 0 0 4px black;}

p.cl3 {color: black; text-shadow: 1em 1em 5px gray, -1em -1em silver;}

Abbildung 6-31 wurde mit Photoshop erstellt, weil die Webbrowser Schat-tenwürfe zu diesem Zeitpunkt noch nicht unterstützen.

text-shadow

Werte: none | [<Farbe> || <Länge> <Länge> <Länge>? ,]* [<Farbe> || <Länge><Länge> <Länge>?] | inherit

Startwert: none


Vererbt: nein


Mit Leerraum umgehenZum Abschluss dieses Kapitels wollen wir uns mit der Eigenschaft white-space befassen,die großen Einfluss auf die letztendliche Darstellung von Textelementen nehmen kann.

Mit dieser Eigenschaft können Sie beeinflussen, wie ein Browser mit den Zwischenräu-men zwischen Wörtern und Textzeilen umgeht. Meistens reduziert XHTML alle hinter-ander stehenden Leerzeichen auf ein einziges. Bei folgendem Code stellen Webbrowserzwischen den einzelnen Wörtern nur ein einzelnes Leerzeichen dar; die Zeilenumbrüchezwischen den Elementen werden ignoriert.

<p>Dieser Absatz enthält eine

ganze Reihe von Leerzeichen.</p>

Dieses Verhalten lässt sich mit der unten stehenden Deklaration explizit festlegen:

p {white-space: normal;}

Mit dieser Regel werden Browser angewiesen, sich so zu verhalten wie sonst auch – über-flüssige Leerzeichen und Zeilenumbrüche werden einfach ignoriert.

Setzen Sie den Wert von white-space jedoch auf pre, werden die Leerräume des betroffe-nen Elements behandelt, als wären sie mit dem XHTML-Tag pre markiert worden; Leer-zeichen werden also nicht ignoriert (siehe Abbildung 6-32):

p {white-space: pre;}

<p>Dieser Absatz enthält eine

ganze Reihe von Leerzeichen.</p>

Abbildung 6-31: Überall Schatten

white-space

Werte: normal | nowrap | pre | pre-wrap | pre-line | inherit

Startwert: normal

Anwendung auf: alle Elemente (CSS2.1); Block-Elemente (CSS1 und CSS2)

Vererbt: nein


Textschatten | 163

Erhält white-space den Wert pre, respektiert der Browser zusätzliche Leerzeichen undsogar Zeilenumbrüche. Bezogen auf dieses Verhalten (aber sonst nicht), verhält sich dieDarstellung wie bei einem XHTML-pre-Element.

Das Gegenteil ist der Wert nowrap, der verhindert, dass Text in einem Block-Elementumbrochen wird, es sei denn, Sie benutzen explizit ein <br/>-Element. Die Verwendungvon nowrap in CSS zeigt ein sehr ähnliches Verhalten wie das Abschalten von Umbrüchenin einer Tabellenzelle in HTML 4 mit dem Element <td nowrap>. Die Eigenschaft white-space kann im Gegensatz zu diesem Element jedoch auf ein beliebiges Block-Elementangewendet werden. Die Auswirkungen des unten gezeigten Codes sehen Sie inAbbildung 6-33:

<p style="white-space: nowrap;">Dieser Absatz darf nicht umbrochen werden.

Die einzige Möglichkeit, einen Umbruch einzufügen, besteht also darin, ein

Linebreak-Element (<br>) einzufügen. Ohne ein solches Element wird

die Zeile für immer weitergeführt. Hierdurch ist der Benutzer gezwungen,

horizontal hin- und herzuscrollen, um auch die Textteile lesen

</br>zu können, die nicht mehr im Browserfenster zu sehen sind.

</p>

Sie können white-space auch einsetzen, um das Attribut nowrap bei Tabellenzellen zuersetzen:

td {white-space: nowrap;}

<table><tr>

<td>Der Inhalt dieser Zelle wird nicht umbrochen.</td>

<td>Und der Inhalt dieser Zelle auch nicht.</td>

<td>Und weder diese noch irgendeine andere in dieser Tabelle.</td>

<td>CSS verhindert jeden Umbruch.</td>

</tr></table>

Mit CSS2.1 kamen zusätzlich die Werte pre-wrap und pre-line hinzu, die in früherenVersionen von CSS noch nicht zu finden waren. Mit Hilfe dieser Werte können Autorendie Behandlung von Leerzeichen noch genauer kontrollieren.

Wird ein Element mit pre-wrap gekennzeichnet, so werden die Leerzeichen in diesem Ele-ment übernommen, wie der Autor sie eingegeben hat; für Zeilenumbrüche gilt das Stan-dardverhalten. Explizit angegebene Umbrüche werden dagegen behandelt wie üblich.Das Gegenteil von pre-wrap ist pre-line, wodurch Leerzeichen zusammengefasst werden,

Abbildung 6-32: Leerzeichen im Code bei der Darstellung berücksichtigen

Abbildung 6-33: Zeilenumbrüche mit Hilfe der Eigenschaft white-space verhindern


während vom Autor eingegebene Zeilenumbrüche berücksichtigt werden (sieheAbbildung 6-34):

<p style="white-space: pre-wrap;">

This paragraph has a great many s p a c e s within its textual

content, but their preservation will not prevent line

wrapping or line breaking.

</p>

<p style="white-space: pre-line;">

This paragraph has a great many s p a c e s within its textual

content, but their collapse will not prevent line

wrapping or line breaking.

</p>

Eine Zusammenfassung der möglichen Werte für white-space und das entsprechendeVerhalten sehen Sie in Tabelle 6-1.

TextrichtungWenn Sie ein Buch auf Englisch oder in einer anderen Sprache lesen, lesen Sie normaler-weise von links nach rechts und von oben nach unten, entsprechend der Textrichtung.Diese Textrichtung gilt jedoch nicht für alle Sprachen. Es gibt viele Sprachen, die vonrechts nach links gelesen werden, zum Beispiel Hebräisch oder Arabisch. Daher wurdemit CSS2 eine Eigenschaft eingeführt, mit der Sie die Textrichtung festlegen können.

Mit der Eigenschaft direction bestimmen Sie die Schreibrichtung von Text innerhalbeines Block-Elements, die Richtung bei der Darstellung von Tabellenspalten, die Rich-tung, in der Inhalt über den Rand seiner Elementbox hinausragt, und die Position derletzten Zeile bei einem Element, das im Blocksatz dargestellt wird. Bei Inline-Elementenwird die Ausrichtung nur geändert, wenn die Eigenschaft unicode-bidi entweder den

Abbildung 6-34: Zwei Arten, mit Leerzeichen und Zeilenumbrüchen umzugehen

Tabelle 6-1: Mögliche Werte und Verhaltensweisen von white-space

Wert Leerzeichen Zeilenumbrüche Automatische Zeilenumbrüche

normal zusammengefasst ignoriert erlaubt

nowrap zusammengefasst ignoriert verhindert

pre erhalten berücksichtigt verhindert

pre-wrap erhalten berücksichtigt erlaubt

Textschatten | 165

Wert embed oder override hat. (Näheres zu unicode-bidi finden Sie weiter hinten in die-sem Kapitel.)

Vor CSS3 gab es keine Möglichkeit, die Textrichtung für Sprachen festzu-legen, die von oben nach unten geschrieben werden. Während dieses Buchgeschrieben wird, besitzt das CSS3-Textmodul Kandidatenstatus für dieAufnahme in die Spezifikation. Dieses Modul nimmt sich dieser Problema-tik mit einer neuen Eigenschaft namens writing-mode an.

Auch wenn der Standardwert für die Textrichtung ltr ist, wird von einem Browser erwar-tet, dies automatisch auf rtl zu ändern, sobald der Text in einer »Rechts-nach-links«-Sprache dargestellt werden soll. Dazu kann ein Browser beispielsweise die folgendeinterne Regel anwenden:

*:lang(ar), *:lang(he) {direction: rtl;}

Tatsächlich ist die Regel wohl wesentlich länger, damit alle Rechts-nach-links-Sprachenberücksichtigt werden, nicht nur Arabisch und Hebräisch. Als Beispiel reicht das obenStehende jedoch aus. Neben dem Versuch von CSS, die Schreibrichtung zu beeinflussen,gibt es eine wesentlich robustere Methode für diesen Zweck. Über die Eigenschaftunicode-bidi können Autoren auf einige Fähigkeiten von Unicode zugreifen.

Wir werden hier einfach die Beschreibungen aus der Spezifikation von CSS2.1 wiederge-ben, die die einzelnen Werte recht gut darstellen:

normal

Die Textrichtung entspricht dem Wert von direction. Bei Inline-Elementen funktio-niert die Neuanordnung über die Grenzen von Elementen hinweg.

direction

Werte: ltr | rtl | inherit

Startwert: ltr


Vererbt: ja


unicode-bidi

Werte: normal | embed | bidi-override | inherit

Startwert: normal


Vererbt: nein



embed

Bezogen auf den Bidirektional-Algorithmus, wird bei Inline-Elementen eine zusätzli-che Einbettungsebene angelegt. Die Schreibrichtung für diese Einbettungsebene wirddurch die Eigenschaft direction festgelegt. Innerhalb des Elements wird die Schreib-richtung implizit vorgenommen. Das entspricht der Einfügung der Zeichen LRE(U+202A; für direction: ltr) bzw. RLE (U+202B; für direction: rtl) zu Beginn desElements und des Zeichens PDF (U+202C) am Ende des Elements.

bidi-override

Damit können Standardwerte für Inline-Elemente überschrieben werden. Bei Block-Elementen können hiermit deren Inline-Nachkommen, die sich im gleichen Blockbefinden, überschrieben werden. Das heißt, innerhalb des Elements wird die Neuan-ordnung gemäß des in der direction-Eigenschaft festgelegten Wertes vorgenommen;der implizite Teil des Bidirektional-Algorithmus wird ignoriert. Dies entspricht derEinfügung der Zeichen LRO (U+202D; für direction: ltr) bzw. RLO (U+202E; fürdirection: rtl) am Anfang des Elements und PDF (U+202C) am Ende des Elements.

ZusammenfassungAuch ohne das Erscheinungsbild des verwendeten Zeichensatzes zu verändern, gibt esviele Möglichkeiten, um die Darstellung von Text zu beeinflussen. Hierzu gehören natür-lich auch die klassischen Effekte wie z.B. Unterstreichungen. Zusätzlich bietet CSS aberauch die Möglichkeit, Text mit Überstreichungen und Durchstreichungen zu versehen,die Zwischenräume zwischen Buchstaben und Wörtern zu verändern, die erste Zeileeines Absatzes (oder eines anderen Block-Elements) einzurücken, Text linksoder rechts-bündig auszurichten und vieles mehr. Sie können sogar einstellen, wie groß die Zeilenab-stände sein sollen, auch wenn das komplizierter ist als gedacht, wie Sie in Kapitel 7 sehenwerden.

Diese Verhaltensweisen werden alle recht gut oder aber überhaupt nicht unterstützt. Zuden schwierigeren Aufgaben gehört dabei die Darstellung von Text im Blocksatz. Diemeisten Benutzerprogramme des 20. Jahrhunderts sind bei der Darstellung der Text-Aus-schmückung, der vertikalen Ausrichtung sowie bei der Berechnung der Zeilenhöhe fehler-haft. Andererseits funktionieren Dinge wie die Behandlung von Zeichen- und Wortab-ständen recht zuverlässig, sofern sie unterstützt werden, und auch die Einrückung vonText wird mit nur wenigen Ausnahmen korrekt gehandhabt.

Ich habe bereits an einigen Stellen in diesem Kapitel darauf hingewiesen, dass die Darstel-lung von Zeilen etwas komplizierter ist, als in diesem Kapitel beschrieben. Die Details zudiesem Prozess und vieles mehr finden Sie im folgenden Kapitel.

| 167

KAPITEL 7

Grundlagen der visuellen Formatierung

In den vorigen Kapiteln haben wir zum großen Teil darüber gesprochen, wie CSS mitTexten und Schriften in einem Dokument umgeht. In diesem Kapitel wollen wir uns nunmit der theoretischen Seite der visuellen Darstellung befassen. Dabei wollen wir viele Fra-gen beantworten, die wir zuvor übersprungen haben, um besser zeigen zu können, wieCSS implementiert ist.

Warum ist für die theoretischen Grundlagen der visuellen Darstellung in CSS ein ganzesKapitel nötig? Weil bei einem so offenen und mächtigen Modell wie CSS kein Buch auchnur ansatzweise alle möglichen Kombinationen von Eigenschaften und Effekten abde-cken kann. Offensichtlich werden Sie selbst auf die Suche nach neuen Anwendungen fürCSS gehen und eigene Effekte für Ihre Dokumente entdecken.

Im Laufe Ihrer Erkundungen von CSS werden Sie immer auf scheinbar unerklärliche Ver-haltensweisen bei Benutzerprogrammen stoßen. Mit einem guten Verständnis der Funk-tionsweise der visuellen Darstellung in CSS sind Sie aber in der Lage zu unterscheiden, obein bestimmtes Verhalten eine korrekte (wenn auch unerwartete) Konsequenz der Dar-stellungsprinzipien in CSS ist oder ob Sie es mit einem Programmierfehler zu tun haben,der an den Hersteller weitergegeben werden sollte.

Einfache BoxenCSS geht davon aus, dass jedes Element eine oder mehrere rechteckige Boxen erzeugt, dieElement-Boxen genannt werden. (In zukünftigen Versionen ist es vielleicht sogar möglich,Boxen mit anderen Formen zu verwenden. Im Moment ist die Welt aber noch rechteckig.)Im Kern besitzt jede Box einen Inhaltsbereich (content area). Dieser wird umgeben vonoptionalen Innenabständen (padding), Rahmen (borders) und Außenabständen (mar-gins). Diese Teile werden als optional angesehen, weil sie alle eine Breite von null Einhei-ten haben können, also sozusagen nicht vorhanden sind. Ein Beispiel für einenInhaltsbereich sehen Sie in Abbildung 7-1, zusammen mit den umgebenden Bereichen ausRahmen, Innen- und Außenabstand.

168 | Kapitel 7: Grundlagen der visuellen Formatierung

Außenabstände, Rahmen und Innenabstände können mit verschiedenen CSS-Eigenschaf-ten wie margin-left oder border-bottom an die eigenen Bedürfnisse angepasst werden.Der Hintergrund des Inhalts – eine Farbe oder ein (möglicherweise gekacheltes) Bild –wird ebenfalls auf die Innenabstände angewendet. Die Außenabstände sind immer trans-parent, wodurch der Hintergrund des Elternelements immer sichtbar bleibt. Innenab-stände können keinen negativen Wert haben, Außenabstände dagegen schon. DieAuswirkungen von negativ definierten Außenabständen werden wir uns später in diesemKapitel genauer ansehen.

Rahmen werden mit Hilfe von festgelegten Stildefinitionen wie solid oder inset erzeugt;ihre Farbe definiert man mit der Eigenschaft border-color. Wenn keine eigene Farbe fest-gelegt wurde, wird die Vordergrundfarbe des Element-Inhalts verwendet. Wenn bei-spielsweise der Text in einem Absatz weiß dargestellt wird, sind auch die Rahmen desAbsatzes weiß, solange der Autor nicht ausdrücklich eine andere Farbe definiert. Entste-hen im Rahmen durch eine bestimmte Definition Zwischenräume, so ist durch diese derHintergrund des Elements zu sehen. Der Rahmen hat also den gleichen Hintergrund wieder Inhalt und der Innenabstand. Die Breite des Rahmens kann keinen negativen Wertannehmen.

Die verschiedenen Teile der Element-Box können mit einer Anzahl vonEigenschaften wie width oder border-right beeinflusst werden. Viele dieserEigenschaften werden wir in diesem Kapitel anwenden, obwohl wir sieeigentlich noch nicht kennen. Die Definitionen für die verschiedenenEigenschaften finden Sie in Kapitel 8, das auf den hier vorgestellten Kon-zepten aufbaut.

Sie werden bei der Formatierung der verschiedenen Elemente einige Unterschiede fest-stellen. Block-Elemente werden anders behandelt als Inline-Elemente, während umflos-sene und positionierte Elemente ebenfalls ihre eigenen Verhaltensweisen besitzen.

Der umgebende BlockDer Aufbau eines Elements hängt jeweils von seinem umgebenden Block ab, der imwahrsten Sinne des Wortes den »Layout-Kontext« für das Element bildet. In CSS2.1 wird

Abbildung 7-1: Inhaltsbereich und die umgebenden Bereiche

Einfache Boxen | 169

eine Reihe von Regeln definiert, nach denen der umgebende Block eines Elements zubestimmen ist. Ich werde hier nur auf die Regeln eingehen, die für die Themen diesesKapitels von Bedeutung sind, und den Rest später erklären.

Bei Elementen mit normaler westlicher Textrichtung wird der umgebende Block durchdie Inhaltskante (content edge) des in der Dokumenthierarchie nächsthöheren Elementsfestgelegt. Das kann ein Block-Element, die nächsthöhere Tabellenzelle oder der Inline-Block der Box eines Vorfahren-Elements sein. Nehmen wir beispielsweise folgenden Mark-up-Code:

<body>

<div>

<p>Dies ist ein Absatz.</p>

</div>

</body>

In diesem Beispiel bildet das div-Element den umgebenden Block für das p-Element, da esdas in der Hierarchie am nächsten gelegene Block-Element, die am nächsten gelegeneTabellenzelle oder der am nächsten gelegene Inline-Block ist (in unserem Fall die Boxeines Block-Elements). Auf ähnliche Weise ist body der umgebende Block für das div-Ele-ment. Demnach hängt das Layout für das p-Element von div ab, welches wiederum vomLayout von body abhängt.

Um Inline-Elemente brauchen Sie sich nicht zu kümmern, da deren Layout nicht direktvon den umgebenden Blöcken abhängt. Wir werden später in diesem Kapitel darauf kom-men.

Eine kurze AuffrischungLassen Sie uns schnell noch einmal einen Blick auf die hier besprochenen Elemente undeinige wichtige Begriffe werfen, die für das Verständnis der Erklärungen in diesem Kapitelnötig sind:

Normaler TextflussIn westlichen Sprachen und der bekannten HTML-Textdarstellung versteht manhierunter eine Schreibrichtung von links nach rechts und von oben nach unten. DieSchreibrichtung kann in nicht-westlichen Sprachen unterschiedlich verlaufen. Diemeisten Elemente werden im normalen Textfluss dargestellt. Die einzige Möglichkeitfür ein Element, den normalen Fluss zu verlassen, besteht darin, es als umflossen(floated) positioniert (positioned) (siehe Kapitel 10) zu definieren. In diesem Kapitelbehandeln wir jedoch nur Elemente im normalen Textfluss.

Nicht-ersetztes ElementHierbei handelt es sich um ein Element, dessen Inhalt im Dokument selbst enthaltenist. So ist ein Absatz beispielsweise ein nicht-ersetztes Element, dessen Textinhalt imElement selbst (dem Absatz) enthalten ist.


Ersetztes ElementDabei handelt es sich um ein Element, das als Platzhalter für etwas anderes benutztwird. Das klassische Beispiel für ein ersetztes Element ist das Element img, das ein-fach auf eine Bilddatei verweist, die in den Fluss des Dokuments eingebettet wird,sobald ein img-Element gefunden wird. Die meisten Formularelemente werden eben-falls ersetzt (z.B. <input type="radio">).

Block-ElementHierbei handelt es sich beispielsweise um einen Absatz, eine Überschrift oder ein div-Element. Diese Elemente erzeugen »zusätzliche Zeilen« ober- und unterhalb ihrerBoxen, wenn sie sich im normalen Textfluss befinden. Block-Elemente werden imnormalen Fluss demnach übereinander angeordnet. Durch die Deklaration display:block kann ein Element explizit dazu angewiesen werden, eine Box für ein Block-Ele-ment zu erzeugen.

Inline-ElementDas sind Elemente wie strong oder span. Diese Elemente erzeugen keine zusätzlichen»Zeilenumbrüche« um sich herum. Sie gelten außerdem als Nachfahren eines Block-Elements. Mit der Anweisung display: inline kann ein Element explizit dazu veran-lasst werden, eine Inline-Box zu erzeugen.

WurzelelementDieses Element bildet die Spitze des Dokumentbaums. Bei HTML-Dokumenten istdies das Element html. In XML-Dokumenten hängt es von den Konventionen derSprache selbst ab.

Block-ElementeDas Verhalten von Block-Elementen entspricht nicht immer den Erwartungen. Die Plat-zierung von Elementen entlang der horizontalen und vertikalen Achsen ist beispielsweisenicht einheitlich geregelt. Für ein vollständiges Verständnis der Behandlung von Block-Elementen ist die Kenntnis von einer Reihe von Begrenzungen und Bereichen notwendig,die in Abbildung 7-2 detailliert dargestellt werden.

In der Regel wird die Breite (width) eines Elements definiert als der Abstand zwischen derrechten und der linken Innenkante, während die Höhe (height) als Abstand zwischen derinneren Ober- und Unterkante festgelegt ist. Beide Eigenschaften lassen sich für jedes Ele-ment festlegen.

Die verschiedenen Breiten, Höhen, Innen- und Außenabstände bestimmen gemeinsam,wie ein Dokument letztendlich dargestellt wird. In den meisten Fällen werden Breite undHöhe eines Dokuments automatisch vom Browser ermittelt und hängen dabei vom ver-fügbaren Darstellungsbereich und anderen Faktoren ab. Unter CSS können Sie selbstver-ständlich eine direktere Kontrolle über die Größe der einzelnen Elemente und derenDarstellung ausüben. Für die vertikale und horizontale Darstellung können Sie aus einerReihe von Effekten auswählen, die wir hier detailliert behandeln werden.

Block-Elemente | 171

Horizontale FormatierungDie horizontale Formatierung ist komplexer, als Sie vielleicht denken. Das hängt teilweisedamit zusammen, wie sich der Wert für width auf den Inhaltsbereich und nicht auf diegesamte sichtbare Element-Box auswirkt. Betrachten Sie folgendes Beispiel:

<p style="width: 200px;">Welche Breite?</p>

Diese Codezeile legt für den Inhalt des Absatzes eine Breite von 200 Pixeln fest. Wenn Siedem Element eine eigene Hintergrundfarbe gegeben hätten, wäre das leicht zu sehen. DieWerte für Rahmen, Innen- und Außenabstände werden zu diesem Wert addiert. Zum Bei-spiel so:

<p style="width: 200px; padding: 10px; margin: 20px;">Welche Breite?</p>

Die sichtbare Box des Elements hat nun eine Breite von 220 Pixeln, da Sie dem Elementlinks und rechts einen Innenabstand von jeweils 10 Pixeln Breite zugewiesen haben. DieAußenabstände fügen auf beiden Seiten noch einmal je 20 Pixel hinzu, wodurch dieGesamtbreite der Element-Box nun 260 Pixel beträgt.

Es ist sehr wichtig, diese versteckten Erweiterungen von width zu verstehen. Die meistenBenutzer stellen sich vor, width würde sich auf die gesamte sichtbare Element-Box bezie-hen und dass der Wert für die Breite Innenabstände und Rahmen mit einschließt und sichauf den Abstand zwischen dem linken und rechten äußeren Rand des Elements bezieht.Das ist in CSS jedoch nicht der Fall. Merken Sie sich diese Tatsache gut, wenn Sie spätereVerwirrung vermeiden wollen.

Abbildung 7-2: Das vollständige Box-Modell


Während dieses Buch geschrieben wird, enthält das Box-Model-Modul ausCSS3 Vorschläge dazu, wie ein Autor selbst wählen kann, ob sich die Brei-tenangabe auf den Inhalt oder die gesamte Breite der sichtbaren Boxbezieht.

Ähnlich leicht verständlich ist die Regel, nach der bei normalem Textfluss die Summealler horizontalen Teile einer Block-Element-Box dem Wert für width des Elternelementsentspricht. Nehmen Sie beispielsweise zwei Absätze innerhalb eines div-Elements, dessenAußenabstände mit 1em festgelegt wurden. Die Breite des Inhalts (also der Wert für width)eines Absatzes plus die linken und rechten Innenabstände, Rahmen und Außenabständeergeben zusammen immer den Wert für width für den Inhaltsbereich des div-Elements.

Nehmen wir an, der Wert width des div-Elements beträgt 30em, so beträgt die Gesamt-breite für Inhaltsbereich, Innen- und Außenabstände und Rahmen jedes Absatzes eben-falls 30em. Der »leere« Raum um die Absätze in Abbildung 7-3 besteht eigentlich aus ihrenInnenabständen. Hätte das div-Element noch eigene Innenabstände, wäre der »leere«Raum sogar noch größer; das ist hier aber nicht der Fall. Zu Innenabständen später mehr.

Horizontale Eigenschaften

Die »sieben Eigenschaften« für horizontale Formatierung lauten: margin-left, border-left, padding-left, width, padding-right, border-right und margin-right. Diese Eigen-schaften beziehen sich auf die horizontale Darstellung von Block-Elementen, wie im Dia-gramm in Abbildung 7-4 zu sehen.

Die Werte dieser sieben Eigenschaften müssen zusammen die Breite des umschließendenBlocks für das entsprechende Element ergeben. Dies entspricht normalerweise dem Wertfür width für dessen Elternelement (weil die Elternelemente von Block-Elementen fastimmer selbst Block-Elemente sind).

Nur drei dieser sieben Eigenschaften können den Wert auto annehmen: der width-Wertfür den Inhalt eines Elements sowie dessen linker und rechter Außenabstand. Den übri-

Abbildung 7-3: Die Gesamtbreite von Element-Boxen ist immer so groß wie die Breite ihres Elternelements


gen Eigenschaften muss entweder ein expliziter Wert zugewiesen werden oder sie neh-men den Standardwert null an. In Abbildung 7-5 sehen Sie, welche Teile der Box denWert auto annehmen können und welche nicht.

Der Wert für width muss entweder auto oder ein anderer, nicht-negativer Wert sein.Wenn Sie auto für die horizontale Formatierung benutzen, können verschiedene Effekteauftreten.

CSS gestattet es Browsern, einen Minimalwert für width festzulegen. DieBreite eines Block-Elements darf diesen Wert nicht unterschreiten. Der tat-sächliche Wert ist in der Spezifikation nicht festgelegt und demnach Brow-ser-abhängig.

Die Verwendung von auto

Wenn Sie width, margin-left oder margin-right den Wert auto zuweisen und den übrigenbeiden Eigenschaften explizite Werte geben, dann legt die Eigenschaft mit dem Wert autofest, wie viel Platz benötigt wird, um die Breite der Element-Box an den Wert für width

Abbildung 7-4: Die »sieben Eigenschaften« für horizontale Formatierung

Abbildung 7-5: Horizontale Eigenschaften, die den Wert auto annehmen können


des Elternelements anzupassen. Anders ausgedrückt: Vorausgesetzt der rechte Außenab-stand (margin-right) und die Breite (width) wurden mit jeweils 100px angegeben und derlinke Außenabstand (margin-left) erhält den Wert auto, so erhält dieser eine Breite von200 Pixeln, um die Gesamtbreite 400 Pixel zu erreichen:

p {margin-left: auto; margin-right: 100px;

width: 100px;} /* 'auto' für den linken Außenabstand ergibt 200px */

Der Wert auto kann also benutzt werden, um den Unterschied zwischen der nötigenGesamtbreite und dem Rest zu ermitteln. Was passiert aber, wenn alle drei Eigenschaftenden Wert 100px bekommen und keine den Wert auto?

Haben alle drei Eigenschaften einen anderen Wert als auto oder wurden sie zu sehr einge-schränkt (in der CSS-Fachsprache auch als overconstrained bezeichnet), so weist dasBenutzerprogramm margin-right automatisch den Wert auto zu. Die Breite des rechtenAußenabstands wird dann nach der Regel ermittelt, dass auto den nötigen Platz zwischender Gesamtbreite des Elements und der Breite des umschließenden Blocks »ausfüllt«. DasErgebnis des unten stehenden Codes sehen Sie in Abbildung 7-6:

p {margin-left: 100px; margin-right: 100px;

width: 100px;} /* rechter Außenabstand erhält zwangsweise den Wert 200px */

Die zwangsweise Zuweisung von auto für den Wert von margin-right giltfür »Links-nach-rechts«-Sprachen. In »Rechts-nach-links«-Sprachen ver-hält sich die Regel genau umgekehrt und der linke Außenabstand erhältstattdessen den Wert auto.

Wenn beiden Außenabständen und width der Wert auto zugewiesen wurde, wird derWert von width so eingestellt, dass der nötige Gesamtwert (die Breite des Inhaltsbereichsdes Elternelements) erreicht wird. Die Ergebnisse der folgenden Regel werden inAbbildung 7-7 dargestellt:

p {margin-left: 100px; margin-right: 100px; width: auto;}

Abbildung 7-6: Die Einstellungen von margin-right überschreiben

Abbildung 7-7: Automatische Anpassung für width


Das in Abbildung 7-7 gezeigte Beispiel ist der häufigste Fall, da das Resultat einem expli-ziten Setzen der Außenabstände entspricht, ohne dabei einen Wert für width anzugeben.Daher zeigt die Darstellung nach der folgenden Regel keine Unterschiede zu Abbil-dung 7-7:

p {margin-left: 100px; margin-right: 100px;} /* das Gleiche wie vorhin */

Mehr als ein auto

Jetzt wollen wir sehen, was passiert, wenn zwei der drei Eigenschaften (width, margin-left oder margin-right) den Wert auto erhalten. Wurden beide Außenabstände mit autodefiniert, wie im unten stehenden Codebeispiel zu sehen, dann werden beide gleich breitdargestellt, wodurch das Element innerhalb seines Elternelements zentriert dargestelltwird, wie in Abbildung 7-8 zu sehen:

p {width: 100px; margin-left: auto; margin-right: auto;}

Die korrekte Methode, um ein Element zu zentrieren, besteht also darin, beiden Außen-abständen den gleichen Wert zuzuweisen, und nicht in der Benutzung von text-align.(text-align bezieht sich nur auf den Inline-Inhalt eines Block-Elements. Wenn einemElement also für text-align der Wert center zugewiesen wird, sollte das Element selbstdadurch nicht zentriert werden.)

Tatsächlich sind nur Browser, die nach dem Februar 1999 veröffentlichtwurden, in der Lage, die automatische Zentrierung anhand der Außenab-stände korrekt umzusetzen, und selbst diese machen nicht immer allesrichtig. Browser, die mit auto festgelegte Außenabstände nicht korrektbehandeln, verhalten sich unterschiedlich. Am besten geht man davon aus,dass beide Außenabstände einfach auf null gesetzt werden.

Eine andere Möglichkeit, um die Größe eines Elements anzupassen, besteht darin, einender Außenabstände und die Breite auf auto zu setzen. Hierdurch wird der auf autogesetzte Außenabstand auf den Wert null reduziert:

p {margin-left: auto; margin-right: 100px;

width: auto;} /* linker Außenabstand erhält den Wert 0 */

Für width wird nun der Wert benutzt, der nötig ist, um das Element in seinen umgeben-den Block einzupassen.

Abbildung 7-8: Eine explizite Breite festlegen


Und was passiert schließlich, wenn alle drei Eigenschaften den Wert auto erhalten? Einfa-che Antwort: Beide Außenabstände werden auf null gesetzt, während width die nötigeBreite erhält, um den verbleibenden Platz auszufüllen. Das entspricht der Standardsitua-tion, in der keinerlei Werte für die Außenabstände und die Breite angegeben wurden. Dasheißt, die Außenabstände erhalten den Wert null und width erhält den Wert auto.

Da horizontale Außenabstände nicht umbrochen werden, können die Innenabstände,Rahmen und Außenabstände des Elternelements eine Verschiebung der Kindelementebewirken. Die Folgen sehen Sie in Abbildung 7-9:

div {padding: 30px; background: silver;}

p {margin: 20px; padding: 0; background: white;}

Negative Werte für Außenabstände

Bis hierher sind die Dinge noch recht einfach und Sie fragen sich vielleicht, welcheSchwierigkeiten ich gemeint haben könnte. Außenabstände haben aber auch eine nega-tive Seite. Ja, Sie haben richtig gelesen: Es ist möglich, Außenabständen auch einen nega-tiven Wert zuzuweisen. Sofern das Benutzerprogramm dies unterstützt, kann das eineReihe von interessanten Auswirkungen haben.

Laut der CSS-Spezifikation müssen Benutzerprogramme negative Außen-abstände nicht vollständig unterstützen. Dort heißt es: »Negative Wertefür Außenabstände sind erlaubt, können aber durch die Implementierungeingeschränkt werden.« Während dieses Buch geschrieben wird, besitzendie aktuellen Browser, wenn überhaupt, nur wenige Einschränkungen.

Wie bereits gesagt, ergeben die sieben horizontalen Eigenschaften zusammen den Wertfür width des Elternelements. Wenn alle Eigenschaften einen Wert von null oder höherhaben, kann kein Element größer sein als der Inhaltsbereich des Elternelements.

div {width: 400px; }

p.wide {margin-left: 10px; width: auto; margin-right: -50px; }

Abbildung 7-9: Implizite Verschiebung durch die Innen- und Außenabstände des Elternelements


Sie sehen richtig: Das Kindelement ist breiter als sein Elternelement! Und mathematischist das auch korrekt:

10px + 0 + 0 + 440px + 0 + 0 – 50px = 400px

Die Breite von 440px ergibt sich durch die Auswertung von width: auto, also der Zahl, diezum Ausgleichen der übrigen Werte der Gleichung benötigt wird. Obwohl dadurch dasKindelement über sein Elternelement hinausragt, wurde die Spezifikation nicht verletzt,da die Werte der sieben Eigenschaften zusammen den benötigten Gesamtwert ergeben.Das ist semantisch gesehen zwar geschummelt, aber trotzdem korrektes Verhalten.

Als Nächstes wollen wir ein paar Rahmen hinzufügen (siehe Abbildung 7-10):

div {width: 400px; border: 3px solid black;}

p.wide {margin-left: 10px; width: auto; margin-right: -50px;

border: 3px solid gray;}

Als Resultat wird der Wert für width entsprechend verringert:

10px + 3px + 0 + 434px + 0 + 3px – 50px = 400px

Hätten Sie außerdem noch Innenabstände definiert, würde der Wert für width sogar nochweiter sinken.

Umgekehrt ist es auch möglich, dass rechte Außenabstände mit dem Wert auto negativausgewertet werden. Weil die einzelnen Elemente nicht breiter sein dürfen als derumschließende Block, kann es passieren, dass dem rechten Rand ein negativer Wert zuge-wiesen wird, wie im folgenden Beispiel:


p.wide {margin-left: 10px; width: 500px; margin-right: auto;


Die resultierende Gleichung sieht nun so aus:

10px + 3px + 0 + 500px + 0 + 3px – 116px = 400px

Der Wert für den rechten Außenabstand wird auf -116px berechnet. Das kann sogar pas-sieren, wenn Sie ausdrücklich einen eigenen Wert zugewiesen haben und dabei dieDimensionen des Elements zu stark einschränken. In diesem Fall greift nämlich die Regel,dass der rechte Außenabstand automatisch angepasst wird, um die Verhältnisse auszu-

Abbildung 7-10: Breitere Kindelemente durch negative Außenabstände


gleichen. (Außer natürlich in »Rechts-nach-links«-Sprachen, in denen die Regel stattdes-sen auf den linken Außenabstand angewendet wird.)

Im folgenden Beispiel erhält der linke Außenabstand einen negativen Wert (sieheAbbildung 7-11):


p.wide {margin-left: -50px; width: auto; margin-right: 10px;


Wurde für den linken Außenabstand ein negativer Wert festgelegt, ragt der Absatz nichtnur über die Grenzen des div-Elements hinaus, sondern sogar über den Rand des Brow-ser-Fensters selbst!

Bedenken Sie, dass Innenabstände, Rahmen und Inhaltsbreiten keinenegativen Werte annehmen können. Das ist nur für Außenabstände mög-lich.

Prozentwerte

Bei der Verwendung von Prozentwerten für die Breite, Innen- und Außenabstände geltendie gleichen grundsätzlichen Regeln. Es macht keinen Unterschied, ob die Werte mit Län-genangaben oder Prozentwerten deklariert wurden.

Prozentwerte können manchmal recht nützlich sein. Angenommen ein Element soll zweiDrittel der Breite des umgebenden Blocks haben, während der linke und der rechteInnenabstand je 5% einnehmen. Der linke Außenabstand soll ebenfalls 5% bekommen,während der rechte Außenabstand den Rest des Platzes für sich beansprucht. DieseBedingungen könnte man beispielsweise so formulieren:

<p style="width: 67%; padding-right: 5%; padding-left: 5%; margin-right: auto;

margin-left: 5%;">Spielereien mit Prozentwerten</p>

Die Breite des rechten Außenabstands würde in diesem Fall mit 18% berechnet (100% –67% – 5% – 5% – 5%), was der Breite des umgebenden Blocks entspricht.

Abbildung 7-11: Negative Werte für den linken Außenabstand


Benutzen Sie Prozentwerte und Längeneinheiten gemeinsam, wird die Sache schonschwieriger. Sehen Sie sich hierzu einmal folgendes Beispiel an:

<p style="width: 67%; padding-right: 2em; padding-left: 2em; margin-right: auto;

margin-left: 5em;">Verschiedene Längeneinheiten</p>

In diesem Fall kann die Box des Elements folgendermaßen berechnet werden:

5em + 0 + 2em + 67% + 2em + 0 + auto = Breite des umgebenden Blocks

Wenn Sie davon ausgehen, dass der rechte Außenabstand den Wert null erhält, müssteder umgebende Block eine Breite von 27.272727em haben. Wäre er breiter, würde derrechte Außenabstand einen positiven Wert erhalten. Wäre der umgebende Block schma-ler, erhielte der rechte Außenabstand einen negativen Wert.

Noch komplizierter wird die Sache, wenn Sie verschiedene Längeneinheiten miteinandermischen:

<p style="width: 67%; padding-right: 15px; padding-left: 10px; margin-right: auto;

margin-left: 5em;">Noch mehr verschiedene Längeneinheiten</p>

Um die Dinge noch komplizierter zu machen, dürfen für Rahmen keine Prozentwerte,sondern nur explizite Längenwerte angegeben werden. Unter dem Strich heißt das, es istnicht möglich, nur mit Prozentwerten ein vollständig flexibles Elementlayout zu errei-chen, sofern Sie nicht auf die Rahmen verzichten wollen.

Ersetzte Elemente

Bisher haben wir uns mit der Formatierung von nicht-ersetzten Block-Elementen befasst,die sich an der normalen Textrichtung orientieren. Ersetzte Block-Elemente sind in ihrerHandhabung etwas einfacher. Alle Regeln für nicht-ersetzte Elemente gelten auch hier;allerdings gibt es eine Ausnahme: Wenn der Wert für width auf auto eingestellt bleibt,entspricht die Breite des Inhaltsbereichs der Breite des Elements. Das Bild im folgendenBeispiel würde mit einer Breite von 20 Pixeln dargestellt werden. Die Originalgröße desBildes bleibt also erhalten:

<img src="smile.png" style="display: block; width: auto; margin: 0;">

Hätte das Ausgangsbild eine Breite von 100 Pixeln, würde es auch in dieser Breite darge-stellt.

Diese Regel kann außer Kraft gesetzt werden, indem width ein expliziter Wert zugewiesenwird. Sie könnten das obige Beispiel abändern und jeweils einen anderen Wert für dieBreite angeben, wie in Abbildung 7-12 zu sehen:

<img src="smile.png" style="display: block; width: 25px; margin: 0;">



Wie Sie sehen, ändert sich automatisch auch die Höhe des Elements. Wird bei einemersetzten Element der Standardwert für width verändert, so wird der Wert von height ent-sprechend angepasst, sofern height nicht explizit ein eigener Wert zugewiesen wurde.


Das gilt auch umgekehrt: Hat height einen expliziten Wert und width nicht (standardmä-ßig auto), so wird die Breite passend zur Höhe skaliert.

Und wo wir gerade bei der Höhe sind, wollen wir uns gleich einmal um die vertikale For-matierung von Block-Elementen im normalen Textfluss kümmern.

Vertikale FormatierungWie die horizontale Formatierung hat auch die vertikale Formatierung ihre ganz speziel-len Eigenheiten. Die Standardhöhe eines Elements wird durch die Höhe seines Inhaltsbestimmt. Gleichzeitig hat aber auch die Breite des Elements einen Einfluss auf die Höhe;je schmaler ein Absatz wird, desto höher muss er sein, um alle enthaltenen Inline-Ele-mente weiterhin darstellen zu können.

In CSS kann jedem Block-Element eine explizite Höhe zugewiesen werden. Das darausresultierende Verhalten hängt von einer Reihe verschiedener Faktoren ab. Im unten ste-henden Code ist die Höhenangabe beispielsweise größer, als es für die Darstellung desInhalts nötig wäre:

<p style="height: 10em;">

In diesem Fall sorgt die zusätzliche Höhe für einen dem Innenabstand ähnlichen visuellenEffekt. Was passiert aber, wenn der Wert für height geringer ist, als für die Darstellungdes Inhalts nötig, wie in diesem Beispiel?

<p style="height: 3em;">

In diesem Fall muss der Browser den Inhalt darstellen, ohne die Höhe der Elementbox zuverändern. In einem solchen Fall könnte der Browser dem Element einen vertikalenScrollbalken hinzufügen (siehe Abbildung 7-13).

Abbildung 7-12: Die Breite von ersetzten Elementen ändern

Abbildung 7-13: Höhenangaben, die für die Höhe des Inhalts nicht ausreichen


Ist der Inhalt höher als die Höhe seiner Box, hängt das tatsächliche Verhalten des Benut-zerprogramms vom Wert (und der Unterstützung) für die Eigenschaft overflow ab, die inKapitel 10 behandelt wird.

Unter CSS1 war es Benutzerprogrammen erlaubt, andere Werte als auto für height ein-fach zu ignorieren, sofern es sich nicht um ein ersetztes Element handelt (z.B. ein Bild). InCSS2 und CSS2.1 darf der Wert für height jedoch nur noch in bestimmten Situationenignoriert werden, die mit Prozentwerten zu tun haben, auf die wir gleich zu sprechenkommen.

Wie bei width werden Rahmen, Innen- und Außenabstände zum Wert für height addiert.

Eigenschaften für die vertikale Formatierung

Wie bei der horizontalen Formatierung gibt es auch für die vertikale Formatierung siebenEigenschaften. Diese sind: margin-top, border-top, padding-top, height, padding-bottom,border-bottom und margin-bottom, zu sehen im Diagramm in Abbildung 7-14.

Die Werte dieser Eigenschaften müssen zusammen die Höhe des umgebenden Blocks fürdas betreffende Element ergeben. Das entspricht bei Block-Elementen in der Regel demWert für height des Elternelements (weil Block-Elemente fast immer auch Block-Ele-mente als Elternelemente haben).

Nur drei der sieben Eigenschaften können den Wert auto annehmen: die Höhe desInhaltsbereichs (height) sowie der obere und untere Außenabstand. Dem oberen undunteren Innenabstand sowie den Außenabständen müssen spezifische Werte zugewiesen

Abbildung 7-14: Die »sieben Eigenschaften« für die vertikale Formatierung


werden, ansonsten erhalten sie die Standardhöhe null (sofern kein Wert für border-stylefestgelegt wurde). Hat border-style einen bestimmten Wert, erhalten die Außenabständeungefähr den Wert medium. In Abbildung 7-15 wird noch einmal gezeigt, welche Teile derBox den Wert auto annehmen können und welche nicht.

Wird für margin-top und margin-bottom bei normaler Textrichtung der Wert auto angege-ben, wird dieser standardmäßig als 0 ausgewertet. Leider verhindert dieser Wert bei nor-maler Textrichtung eine einfache vertikale Zentrierung von Elementen in ihrem umgeben-den Block. Wenn Sie den oberen und unteren Außenabstand eines Elements auf autosetzen, hat das zur Folge, dass beide Außenabstände aus dem Element entfernt werden (daihr tatsächlicher Wert nun 0 ist).

Bei positionierten Elementen wird der Wert auto für obere und untereAußenabstände anders behandelt. Weitere Details hierzu finden Sie inKapitel 8.

Der Wert für height muss entweder auf auto oder einen anderen, nicht-negativen Wertgesetzt werden.

Höhenangaben mit Prozentwerten

Nachdem Sie wissen, wie Höhenangaben mit absoluten Längenangaben funktionieren,kommen wir als Nächstes zu Höhenangaben mit Prozentwerten. Wird für height eines

Abbildung 7-15: Vertikale Eigenschaften, die den Wert auto annehmen können


Block-Elements bei normaler Textrichtung ein Prozentwert benutzt, so bezieht sich dieserWert auf die Höhe des umgebenden Blocks. Bei folgendem Code würde der Absatz eineHöhe von 3em erhalten:

<div style="height: 6em;">

<p style="height: 50%;">Halb so hoch</p>

</div>

Die einzige Möglichkeit, ein Element vertikal zu zentrieren, besteht darin, den oberenund unteren Außenabstand mit 25% anzugeben, da bei der Verwendung von auto beideAußenabstände eine effektive Höhe von null Einheiten erhalten.

Wenn der Wert für height des umgebenden Blocks jedoch nicht ausdrücklich festgelegtwurde, werden Prozentangaben auf auto zurückgesetzt. Wenn Sie das oben stehende Bei-spiel so abändern, dass der Wert für die Höhe (height) des div-Elements nun auto ist,würde der Absatz exakt die gleiche Höhe erhalten wie das div-Element selbst:

<div style="height: auto;">

<p style="height: 50%;">NICHT halb so hoch; Höhe wurde auf auto zurückgesetzt</p>

</div>

Beide Möglichkeiten sind in Abbildung 7-16 dargestellt. (Die Leerräume zwischen demRahmen des Absatzes und dem Rahmen des div-Elements sind die oberen und unterenInnenabstände des Absatzes.)

Automatische Höheneinstellungen

Bei der Angabe von height: auto wird ein Block-Element im normalen Textfluss geradehoch genug dargestellt, um die einzelnen Boxen des eingebetteten Inhalts (inklusive Text)zu umgeben. Bei der Verwendung von auto wird um den Absatz ein Rahmen ohne Innen-abstände erzeugt. Der untere Teil des Rahmens steht in diesem Fall direkt unterhalb deruntersten Textzeile, während der obere Teil direkt über der obersten Zeile steht.

Gelegentlich hat ein Block-Element, dessen Höhe auf auto gesetzt wurde, bei normalerTextrichtung nur Block-Elemente als Kindelemente. Der höchste Punkt für die Berech-nung der Standardhöhe ist in diesem Fall die Oberkante des oberen Rahmens für das am

Abbildung 7-16: Prozentwerte unter verschiedenen Bedingungen


höchsten gelegene Kindelement. Der tiefste Punkt ist die Unterkante des unteren Rah-mens des am niedrigsten gelegenen Kindelements. Die Standardhöhe ist der Abstand zwi-schen diesen zwei Punkten. Es kann also passieren, dass die Außenabstände derKindelemente aus dem Element, das sie enthält, herausragen. (Dieses Verhalten wird imfolgenden Abschnitt erklärt.) Es gibt aber auch Fälle, in denen das Block-Element wederobere noch untere Innen- und Außenabstände besitzt. In diesem Fall gilt als obersterPunkt für die Berechnung der Standardhöhe die Oberkante des oberen Außenabstandsdes am höchsten gelegenen Kindelements; der unterste Punkt ist entsprechend die Unter-kante des unteren Außenabstands des am niedrigsten gelegenen Kindelements:

<div style="height: auto; background: silver;">

<p style="margin-top: 2em; margin-bottom: 2em;">Ein Absatz!</p>

</div>

<div style="height: auto; border-top: 1px solid; border-bottom: 1px solid;

background: silver;">

<p style="margin-top: 2em; margin-bottom: 2em;">Noch ein Absatz!</p>

</div>

Beide Verhaltensweisen sehen Sie in Abbildung 7-17.

Wenn Sie Innenabstände statt Rahmen verwendet hätten, wären die Auswirkungen aufdie Höhe des div-Elements die gleichen: Die Außenabstände des Absatzes würden weiter-hin eingeschlossen werden.

Vertikale Außenabstände zusammenfassen

Ein weiterer wichtiger Aspekt bei der vertikalen Formatierung ist das Zusammenfassenvon vertikal aneinander grenzenden Außenabständen. Dieses Verhalten gilt nur fürAußenabstände. Innenabstände und Rahmen werden, falls vorhanden, unter keinenUmständen zusammengefasst.

Eine ungeordnete Liste mit mehreren untereinander stehenden Einträgen bietet ein her-vorragendes Beispiel für das Zusammenfassen von Außenabständen. Nehmen wir einmalan, die folgende Regel gilt für eine Liste mit fünf aufeinander folgenden Einträgen:

li {margin-top: 10px; margin-bottom: 15px;}

Jeder Eintrag der Liste soll laut der Regel einen oberen Außenabstand von 10 Pixeln undeinen unteren Außenabstand von 15 Pixeln erhalten. Bei der Darstellung der Liste beträgt

Abbildung 7-17: Automatische Höhenanpassung, wenn die Kindelemente Block-Elemente sind


der Abstand zwischen den Einträgen jedoch nur noch 15 Pixel anstelle der angegebenen25. Das heißt, der kleinere (obere) Außenabstand wird zu Gunsten des größeren (unte-ren) entfernt. Der Unterschied zwischen zusammengefassten und nicht zusammengefass-ten Außenabständen ist in Abbildung 7-18 zu sehen.

Korrekt implementierte Benutzerprogramme fassen aneinander grenzende Außenab-stände zusammen, wie in Abbildung 7-18 gezeigt. Im zweiten Beispiel ist zu sehen, waspassiert, wenn ein Benutzerprogramm die Außenabstände nicht zusammenfasst. In die-sem Fall beträgt der Abstand zwischen Einträgen 25 Pixel.

Statt »zusammenfassen« kann man auch »überschneiden« sagen. Auch wenn sich dieAußenabstände nicht wirklich überschneiden, können Sie sich das Verhalten mit folgen-der Analogie noch einmal klar machen. Stellen Sie sich die einzelnen Elemente als ein-zelne Stücke Papier vor, auf denen jeweils der Inhalt des Inhalts geschrieben steht. JedesStück Papier ist mit einem durchsichtigen Stück Plastik eingefasst, das den Außenabstanddarstellt. Jetzt wird das erste Stück Papier (zum Beispiel ein h1-Element) auf den Hinter-grund gelegt. Das zweite Stück (ein Absatz) wird unterhalb des ersten platziert und solange nach oben geschoben, bis die Kante des Plastikrands des einen Stücks den Papier-rand des anderen Stücks berührt. Der untere Plastikrand des oberen Stücks hat eine Breitevon 5 Zentimetern und der obere Plastikrand des unteren Stücks eine Breite von 3 Zenti-metern. In dieser Situation berührt der Plastikrand des oberen Stücks das Papier des unte-ren. Beide Papierstücke sind nun korrekt auf dem Hintergrund angeordnet, wobei sichihre Plastikränder überschneiden.

Die Zusammenfassung wird auch dann durchgeführt, wenn mehrere Außenabstände auf-einander treffen, wie etwa am Ende einer Liste. Erweitern wir das vorige Beispiel auf fol-gende Regeln:

ul {margin-bottom: 15px;}


h1 {margin-top: 28px;}

Abbildung 7-18: Zusammengefasste und nicht zusammengefasste Außenabstände


Hier haben wir dem unteren Außenabstand des letzten Listeneintrags eine Höhe von 20Pixeln gegeben; die untere Liste des darüber liegenden ul-Elements (das die einzelnenEinträge enthält) hat ihrerseits einen unteren Außenabstand von 15 Pixeln, während dieOberkante des folgenden h1-Elements eine Höhe von 28 Pixeln erhalten soll. Durch dieZusammenfassung der einzelnen Außenabstände ergibt sich schließlich ein Gesamtab-stand von 28 Pixeln zwischen dem letzten Listeneintrag und dem h1-Element, wie inAbbildung 7-19 zu sehen.

Im letzten Abschnitt haben wir gesehen, wie die Erweiterung des umgebenden Blocks umeinen Rahmen oder Auffüllungen dafür gesorgt haben, dass die Außenabstände der Kind-elemente darin enthalten waren. Dieses Verhalten können Sie in Aktion beobachten,wenn Sie dem ul-Element aus dem vorigen Beispiel einen Rahmen zuweisen:

ul {margin-bottom: 15px; border: 1px solid;}


h1 {margin-top: 28px;}

Durch diese Veränderung wird der untere Außenabstand des li-Elements nun innerhalbseines Elternelements (ul) platziert. Hierdurch werden jetzt nur noch die Außenabständezwischen der Liste (ul) und der Überschrift (h1) zusammengefasst (siehe Abbildung7-20).

Abbildung 7-19: Darstellung der Zusammenfassung von Außenabständen

Abbildung 7-20: Zusammenfassungen (oder auch keine) mit zusätzlich verwendeten Rahmen


Negative Außenabstände

Negative Werte für Außenabstände wirken sich auf die vertikale Formatierung und hier-bei speziell auf die Zusammenfassung der Außenabstände aus. Wurde ein negativer Wertfür einen Außenabstand angegeben, sollte der Browser für die Darstellung das absoluteMaximum beider Außenabstände verwenden. Der absolute Wert für den negativenAußenabstand wird dann vom Wert für den positiven Außenabstand subtrahiert. Andersgesagt: Der negative Wert wird zum positiven Wert addiert und die Summe ergibt denAbstand zwischen den Elementen. Zwei Beispiele hierfür sehen Sie in Abbildung 7-21.

Beachten Sie auch den »Anziehungseffekt« von negativen vertikalen Außenabständen.Dieses Verhalten unterscheidet sich nicht von der Art, auf die negative horizontaleAußenabstände über ihr Elternelement hinausragen. Nehmen wir beispielsweise folgen-den Code:

p.neg {margin-top: -50px; margin-right: 10px;

margin-left: 10px; margin-bottom: 0;


<div style="width: 420px; background-color: silver;

padding: 10px; margin-top: 50px; border: 1px solid;">

<p class="neg">

Ein Absatz

</p>

Ein div-Element

</div>

Wie in Abbildung 7-22 zu sehen, wurde der Absatz durch seinen negativen oberenAußenabstand »nach oben gezogen«, und auch das auf den Absatz folgende div-Elementwird 50 Pixel weiter oben dargestellt.

Abbildung 7-21: Beispiele für negative Werte für Außenabstände


Negative untere Außenabstände sorgen hingegen dafür, dass ein Absatz »nach obengezogen« erscheint. Vergleichen Sie den folgenden Code mit Abbildung 7-23:

p.neg {margin-bottom: -50px; margin-right: 10px;

margin-left: 10px; margin-top: 0;


<div style="width: 420px; margin-top: 50px;">

<p class="neg">

Ein Absatz

</p>

</div>

<p>

Der nächste Absatz

</p>

Tatsächlich werden in Abbildung 7-23 die auf das div-Element folgenden Elemente ander Unterkante des div-Elements ausgerichtet. Wie Sie sehen, befindet sich das Ende desdiv-Elements oberhalb der sichtbaren Unterkante des Kind-Absatzes. Das auf div fol-gende Element hat also den korrekten Abstand zur Unterkante des div-Elements, was beiden benutzten Regeln genau den Erwartungen entspricht.

Im folgenden Beispiel sollen die Außenabstände eines Listeneintrags, einer ungeordnetenListe und eines Absatzes zusammengefasst werden. Für dieses Beispiel erhalten die unge-ordnete Liste und der Absatz negative Außenabstände:

li {margin-bottom: 20px;}

ul {margin-bottom: -15px;}

h1 {margin-top: -18px;}

In diesem Fall wird der größere der beiden negativen Außenabstände (-18px) zum größ-ten positiven Außenabstand (20px) addiert, also 20px – 18px = 2px. Wie inAbbildung 7-24 zu sehen, beträgt der Abstand zwischen der Unterkante des Listeninhaltsund der Oberkante des h1-Inhalts nur noch zwei Pixel.

Abbildung 7-22: Die Auswirkungen eines negativen oberen Außenabstands

Abbildung 7-23: Die Auswirkungen eines negativen unteren Außenabstands


Wenn sich zwei Elemente auf Grund negativer Außenabstände überlagern, ist es schwerzu sagen, welches Element über dem anderen dargestellt wird. Vielleicht ist Ihnen auchschon aufgefallen, dass keines der Beispiele in diesem Abschnitt Hintergrundfarben ver-wendet. Das liegt daran, dass der Inhalt eines Elements leicht durch die Hintergrundfarbedes folgenden Elements überschrieben werden kann. Das entspricht den Erwartungen,weil Browser die Elemente normalerweise nacheinander darstellen. Bei normalem Text-fluss kann also davon ausgegangen werden, dass ein Element, das weiter hinten im Doku-ment steht, ein früheres Element gegebenenfalls überschreibt, sofern sich die beidenüberschneiden.

ListeneinträgeFür Listeneinträge (li) gelten eigene Regeln. Normalerweise wird ihnen eine Markierung,wie etwa ein kleiner Punkt oder eine Zahl, vorangestellt. Diese Markierung ist jedochnicht Teil des Inhaltsbereichs für den Eintrag selbst, so dass leicht Effekte wie die inAbbildung 7-25 auftreten können.

Bezogen auf die Darstellung des Dokuments enthält CSS1 nur wenige Informationen überdie Platzierung und eventuelle Auswirkungen dieser Markierungen. In CSS2 wurdendann spezielle Eigenschaften eingeführt, die sich mit diesem Punkt befassen sollten, wiebeispielsweise marker-offset. Allerdings wurde diese Eigenschaft auf Grund mangelnderImplementierung und einer Änderung der Denkweise aus CSS2.1 wieder verbannt. Es istwahrscheinlich, dass es in zukünftigen Versionen von CSS andere Möglichkeiten gebenwird, um die Entfernung zwischen der Markierung und dem Inhalt des Eintrags festzule-

Abbildung 7-24: Detaillierte Darstellung der Zusammenfassung von positiven und negativen Außenabständen

Abbildung 7-25: Der Inhaltsbereich von Listeneinträgen


gen. Aus den oben genannten Gründen entzieht sich die Definition des Abstands (jeden-falls während dieses Buch geschrieben wird) weitgehend der Kontrolle des Autors.

Detaillierte Ausführungen über Listen und die Möglichkeiten, Stildefinitio-nen dafür festzulegen, finden Sie in Kapitel 12.

Die zu einem Listeneintrag gehörende Markierung kann entweder außerhalb des Inhalts-bereichs für dieses Element stehen oder als eingebettete Markierung am Anfang desInhalts behandelt werden, abhängig vom Wert der Eigenschaft list-style-position. Istdie Markierung Teil des Inhalts, verhält sich der Listeneintrag zu seinen Nachbarn genauwie ein Block-Element (siehe Abbildung 7-26).

Steht die Markierung außerhalb des Inhalts, wird zwischen der linken Kante des Inhaltsund der Markierung etwas Platz gelassen (bei von links nach rechts gelesenen Sprachen).Dieser Abstand ist unabhängig von den Änderungen, die möglicherweise an den Stil-definitionen für die Liste vorgenommen werden. Gelegentlich kann es vorkommen, dassdie Markierungen außerhalb des Listenelements (z.B. ul) dargestellt werden (sieheAbbildung 7-26).

Inline-ElementeNeben den Block-Elementen kommen Inline-Elemente am häufigsten vor. Die Eigen-schaften der Box von Inline-Elementen führen uns in interessanteres Gebiet als zuvor.Gute Beispiele für Inline-Elemente sind etwa das em- und das a-Tag, beides nicht-ersetzteElemente, sowie Bilder (<img>) als Beispiel für ersetzte Elemente.

Beachten Sie, dass die hier vorgestellten Verhaltensweisen nicht für Tabel-lenelemente gelten. Mit CSS2 wurden neue Eigenschaften und Verhaltens-weisen für die Arbeit mit Tabellen eingeführt, die sich sehr deutlich vonder Formatierung von Block- oder Inline-Elementen unterscheiden. DieDefinition von Stilen für Tabellen wird in Kapitel 11 besprochen.

Abbildung 7-26: Markierungen innerhalb und außerhalb der Liste

Inline-Elemente | 191

Bei der Behandlung von ersetzten und nicht-ersetzten Inline-Elementen gibt es einigeUnterschiede. Daher werden wir beide Arten nacheinander betrachten.

Darstellung von ZeilenAls Erstes müssen Sie verstehen, wie Inline-Inhalte dargestellt werden. Das ist nicht ganzso einfach und leicht verständlich wie bei Block-Elementen, die einfach eine Box erzeu-gen, ohne dass andere Elemente großen Einfluss darauf nehmen können. Wenn Sie sichdagegen das Innere eines Block-Elements wie beispielsweise eines Absatzes ansehen, fra-gen Sie sich vielleicht: »Wie kommen denn die ganzen Textzeilen an ihren Platz? Wovonhängt ihre Anordnung ab? Wie kann ich darauf Einfluss nehmen?«

Um die Anlage von Zeilen zu verstehen, stellen wir uns für den Anfang ein Element vor,das eine sehr lange Textzeile enthält (siehe Abbildung 7-27). Da wir die Zeile mit einemspan-Element umgeben haben, für das ein Rahmen definiert wurde, hat die Zeilendarstel-lung hier eine klare Grenze:

span {border: 1px dashed black;}

Abbildung 7-27 zeigt den einfachsten Fall eines Inline-Elements, das in einem Block-Ele-ment enthalten ist. Das unterscheidet sich nicht von einem Absatz, der Wörter enthält,bis auf die Tatsache, dass in Abbildung 7-27 mehrere Dutzend Wörter enthalten sind undAbsätze meistens keine expliziten Inline-Elemente (z.B. span) enthalten.

Um aus dieser vereinfachten Version wieder zu etwas Bekannterem zu kommen, brau-chen Sie nur die Breite des Elements festzulegen und Zeilenumbrüche einzufügen, damitalle Wörter auf der Breite des Elements dargestellt werden können. Das bringt uns zudem in Abbildung 7-28 dargestellten Zustand.

Im Prinzip hat sich nichts geändert. Die Zeile wurde einfach nur in mehrere Teile aufge-teilt, die untereinander angeordnet wurden.

In Abbildung 7-28 haben die Rahmen für die einzelnen Textzeilen die gleiche Positionwie deren Ober- und Unterkanten. Das stimmt allerdings nur, weil weder Innen- nochAußenabstände für den Inline-Text definiert wurden. Wenn Sie genau hinsehen, stellen

Abbildung 7-27: Ein einzeiliges Inline-Element

Abbildung 7-28: Ein mehrzeiliges Inline-Element


Sie fest, dass sich die Rahmen leicht überschneiden. So befindet sich der untere Rahmender ersten Zeile knapp unterhalb des oberen Rahmens der zweiten Zeile. Das liegt daran,dass die Rahmen jeweils einen Pixel außerhalb der eigentlichen Zeile gezeichnet werden(sofern Sie einen Monitor zum Betrachten des Dokuments benutzen). Da die einzelnenZeilen sich berühren, liegen ihre Rahmen in Abbildung 7-28 leicht übereinander.

Wenn Sie dem span-Element einen Hintergrund zuweisen, wird die tatsächliche Anord-nung der einzelnen Zeilen schnell klar. In Abbildung 7-29 sehen Sie vier Absätze, diejeweils einen anderen Wert für text-align haben, wobei die Zeilen einen eigenen Hinter-grund besitzen.

In Abbildung 7-29 berühren nicht alle Zeilen die Grenzen des Absatzes (ihres gemeinsa-men Elternelements), der mit einem schwarz gepunkteten Rahmen versehen wurde. Beidem links ausgerichteten Absatz werden die Zeilen bündig zum linken Rand des Inhalts-bereichs des Absatzes dargestellt. Die Zeilenenden richten sich dagegen nach den Umbre-chungen und nicht nach der Grenze des Inhaltsbereichs. Bei dem rechts ausgerichtetenAbsatz ist es genau umgekehrt. Bei dem zentrierten Absatz wurden die Zeilen an der Mit-telachse des Absatzes ausgerichtet. Im letzten Fall, bei dem text-align den Wert justify(Blocksatz) erhalten hat, werden die Zeilen so dargestellt, dass sie zu beiden Seiten bün-dig mit der linken und rechten Inhaltsgrenze des Absatzes zu stehen kommen. Der Unter-schied zwischen der eigentlichen Zeilenlänge und der Breite des Absatzes wirdausgeglichen, indem die Abstände zwischen den Buchstaben und Wörtern nach Bedarfvergrößert oder verkleinert werden. Daher können die Werte von letter-spacing undword-spacing bei Text im Blocksatz überschrieben werden.

Abbildung 7-29: Die Zeilen in unterschiedlichen Ausrichtungen


Damit sind die Grundlagen der Zeilendarstellung für die einfachsten Fälle bereits abge-deckt. Wie Sie gleich sehen werden, ist das Modell der Inline-Formatierung jedoch allesandere als einfach.

Grundsätzliche Begriffe und KonzepteBevor wir weitermachen, wollen wir uns noch einmal ein paar grundlegende Begriffe zurDarstellung von Inline-Elementen vor Augen führen. Diese sind absolut notwendig, umdie folgenden Abschnitte zu verstehen:

Anonymer TextDamit sind jegliche Zeichen oder Zeichenketten gemeint, die nicht in einem Inline-Element enthalten sind. Bei dem Markup-Code <p> Ich bin <em>so</em> glücklich!</p>gelten die Zeichenfolgen » Ich bin « und » glücklich!« als anonymer Text. BeachtenSie, dass hierzu auch die Leerzeichen gehören, da sie Zeichen wie alle anderen sind.

Em-BoxDiese Box hängt vom benutzten Zeichensatz ab und wird auch Zeichen-Boxgenannt. Wie in Kapitel 5 beschrieben, können bestimmte Zeichen größer oder klei-ner als ihre em-Box sein. In CSS wird die Höhe der em-Box für einen bestimmtenZeichensatz durch den Wert der Eigenschaft font-size festgelegt.

InhaltsbereichBei nicht-ersetzten Elementen kann der Inhaltsbereich eines von zwei Dingen sein,wobei laut CSS2.1 das Benutzerprogramm auswählen kann, welche Definitionjeweils gilt. Der Inhaltsbereich ist entweder die Box, die durch die zusammengenom-menen em-Boxen der verschiedenen Zeichen in einem Element gebildet wird, oder erentspricht der von den einzelnen Zeichen des Elements gebildeten Box. In diesemBuch benutze ich der Einfachheit halber die Definition der em-Box. Bei ersetzten Ele-menten ist der Inhaltsbereich die innere Höhe des Elements zuzüglich der Rahmen,Innen- und Außenabstände.

DurchschussDer Durchschuss ist die Differenz der Werte für font-size und line-height. DieseDifferenz wird durch zwei dividiert und anteilig dem oberen und unteren Teil desInhaltsbereichs zugeschlagen. Diese Erweiterungen des Inhaltsbereichs heißen ausnahe liegenden Gründen Halb-Durchschuss. Der Durchschuss wird nur auf nicht-ersetzte Elemente angewendet.

Inline-BoxDas ist die Box, die durch die Erweiterung des Inhaltsbereichs um den Durchschussentsteht. Bei nicht-ersetzten Elementen ist die Höhe der Inline-Box genauso hoch,wie der Wert für line-height. Bei ersetzten Elementen entspricht die Höhe derInline-Box genau der Höhe des Inhaltsbereichs, da es für ersetzte Elemente keinenDurchschuss gibt.


Zeilen-BoxDas ist die kleinstmögliche Box, die von den höchsten und niedrigsten Punkten derauf einer Zeile enthaltenen Inline-Elemente gebildet wird. Der höchste Punkt derZeilen-Box entspricht also der Oberkante der höchsten Inline-Box, während dertiefste Punkt entsprechend der Unterkante der am tiefsten liegenden Inline-Boxbestimmt wird.

In CSS wird außerdem eine Reihe von Verhaltensweisen und nützlichen Konzepten defi-niert, die nicht von der oben stehenden Liste von Begriffen und Definitionen abgedecktwerden:

• Die Größe des Inhaltsbereichs entspricht der Größe der Inhaltsbox des umgebendenBlock-Elements.

• Der Hintergrund eines Inline-Elements gilt für den Inhaltsbereich zuzüglich derInnenabstände.

• Die Höhe und Breite eines Rahmens um ein Inline-Elemente werden definiert durchdie Höhe und Breite des Inhaltsbereichs zuzüglich eventuell definierter Innenab-stände und der Rahmen selbst.

• Innenabstände, Rahmen und Außenabstände von nicht-ersetzten Elementen beein-flussen weder die vertikale Darstellung der Inline-Elemente noch die Darstellung dervon ihnen erzeugten Boxen. Sie haben also keinen Einfluss auf die Höhe der Inline-Box eines Elements (und somit auch nicht auf die umgebende Zeilen-Box).

• Innenabstände und Rahmen von ersetzten Elementen beeinflussen die Höhe derInline-Box dieses Elements und somit auch die Höhe der Zeilen-Box für die Zeile,die das betreffende Element enthält.

Und noch etwas: Die vertikale Ausrichtung von Inline-Boxen innerhalb der Zeile richtetsich nach dem Wert für vertical-align. Ich habe diese Eigenart in Kapitel 6 bereits kurzerwähnt und werde hier genauer darauf eingehen.

Bevor wir weitermachen, wollen wir uns den Prozess für das Erzeugen einer Zeilen-Boxnoch einmal Schritt für Schritt ansehen, damit Sie sehen können, wie die Einzelteile einerZeile zusammengesetzt werden, um schließlich die Höhe zu ermitteln.

1. Die Höhe der Inline-Box für jedes Element ermitteln. Das geht folgendermaßen:

a. Die Werte für font-size und line-height sowie der Textteile, die nicht Teileines Inline-Elements sind, werden ermittelt und addiert. Der Durchschuss wirdhalbiert und zu gleichen Teilen der Ober- und Unterseite des Inhaltsbereichszugerechnet.

b. Für jedes ersetzte Element werden die Werte für height, margin-top, margin-bottom, padding-top, padding-bottom, border-top-width und border-bottom-

width ermittelt und addiert.

2. Für jeden Inhaltsbereich wird ermittelt, wie groß die Anteile sind, die sich ober-beziehungsweise unterhalb der Grundlinie der jeweiligen Zeile befinden. Das ist


nicht einfach. Die Position der Grundlinie muss für jedes Element, jeden anonymenTextabschnitt sowie für die Zeile selbst ermittelt werden. Diese Werte müssen dannzueinander in Beziehung gesetzt werden. Zudem befindet sich die Unterkante einesersetzten Elements auf der Grundlinie der gesamten Zeile.

3. Es muss die vertikale Verschiebung für jedes Element ermittelt werden, dem einWert für vertical-align zugewiesen wurde. Dadurch wissen Sie, wie weit die Inline-Box des Elements nach oben oder nach unten verschoben werden muss und wie weitsich das Element ober- oder unterhalb der Grundlinie befindet.

4. Nachdem bekannt ist, wo die einzelnen Inline-Boxen positioniert werden, kann dieendgültige Höhe der Zeilen-Box berechnet werden. Dafür muss jetzt nur noch derAbstand zwischen der Oberkante der höchsten Inline-Box und der Unterkante derniedrigsten Inline-Box ermittelt werden.

Diesen Prozess wollen wir uns nun im Detail ansehen, da er der Schlüssel für intelligenteStildefinitionen für Zeilen ist.

Inline-FormatierungWie wir bereits in Kapitel 6 besprochen haben, besitzen alle Elemente die Eigenschaftline-height. Da dieser Wert großen Einfluss darauf hat, wie die Inline-Elemente darge-stellt werden, wollen wir ihm nun die nötige Aufmerksamkeit zukommen lassen.

Als Erstes wollen wir uns damit beschäftigen, wie die Höhe einer Zeile ermittelt wird.Diese (bzw. die Höhe der Zeilen-Box) wird durch die Höhe der enthaltenen Elemente undanderen Inhalte, z.B. Text, bestimmt. Dabei muss man wissen, dass der Wert von line-height auf Inline-Elemente und andere Inline-Inhalte wirkt, nicht aber auf Block-Ele-mente – jedenfalls nicht direkt. Sie können zwar für ein Block-Element einen Wert fürline-height festlegen. Die Auswirkungen sind aber nur sichtbar, wenn die Eigenschaftauf Inline-Elemente innerhalb des Block-Elements angewendet wird. Nehmen wir bei-spielsweise den folgenden leeren Absatz:

<p style="line-height: 0.25em;"></p>

Ohne Inhalt gäbe es in diesem Absatz nichts darzustellen, also auch nichts zu sehen. Indiesem Fall ist es unwichtig, ob für line-height nun 0.25em oder 25in festgelegt wird,solange es keinen Inhalt gibt, für den eine Zeilen-Box angelegt werden muss.

Sie können selbstverständlich den Wert für line-height auch für ein gesamtes Block-Ele-ment festlegen. Dieser wird nun auf den gesamten Inhalt des Blocks angewendet, unab-hängig davon, ob der Inhalt selbst in Inline-Elementen steht oder nicht. In einem solchenFall könnte man sagen, jede Textzeile innerhalb eines Block-Elements ist ihr eigenesInline-Element. Dabei spielt es auch keine Rolle, ob die Zeilen von Tags umgeben sindoder nicht. Sie können sich das als eine Art fiktive Tags vorstellen, wie hier gezeigt:


<p>

<Zeile>Dieser Absatz enthält eine Reihe von</Zeile>

<Zeile>Zeilen, die gemeinsam den Inhalt des</Zeile>

<Zeile>Absatzes bilden.</Zeile>

</p>

Auch wenn es die Zeile-Tags nicht wirklich gibt, verhält sich der Absatz so, als gäbe essie. Jede Textzeile erbt die Stildefinitionen des Absatzes. Sie müssen also keine line-height-Regeln für die einzelnen Inline-Elemente festlegen (fiktiv oder nicht), wenn Siedies für das umgebende Block-Element bereits getan haben.

Mit diesen fiktiven Zeile-Elementen lässt sich das Verhalten beim Setzen von line-heightfür ein Block-Element recht gut erklären. Gemäß der CSS-Spezifikation erzeugt das Set-zen von line-height für ein Block-Element eine minimale Zeilen-Box für den Inhalt desBlock-Elements. Die Deklaration p.gross {line-height: 24pt;} legt also für die mini-male Zeilen-Box eine Höhe von 24 Punkten fest. Technisch gesehen kann der Inhalt dieseZeilenhöhe nur erben, wenn er in einem Inline-Element enthalten ist. Der meiste Text istjedoch nicht von einem Inline-Element umgeben. Daher funktioniert es recht gut, sicheinfach vorzustellen, die Inhalte wären von fiktiven Zeile-Elementen umgeben.

Nicht-ersetzte Inline-ElementeMit dem Wissen, das Sie bereits über die Formatierung haben, wollen wir uns nun demAnlegen von Zeilen zuwenden, die ausschließlich aus nicht-ersetzten Elementen (oderanonymem Text) bestehen. Danach werden Sie den Unterschied zwischen ersetzten undnicht-ersetzten Elementen bei der Darstellung von Inline-Inhalten besser verstehen kön-nen.

Die Boxen anlegen

Für nicht-ersetzte Inline-Elemente oder anonymen Text wird die Höhe des Inhaltsbe-reichs durch den Wert für font-size bestimmt. Wurde für ein Inline-Element der Wertfür font-size mit 15px angegeben, so hat der Inhaltsbereich ebenfalls eine Höhe von 15Pixeln, da die em-Boxen in diesem Element ihrerseits 15 Pixel hoch sind (sieheAbbildung 7-30).

Der nächste wichtige Punkt ist der Wert für line-height für das betreffende Elementsowie der Unterschied zwischen line-height und dem Wert für font-size. Hat ein nicht-

Abbildung 7-30: em-Boxen bestimmen die Höhe des Inhaltsbereichs


ersetztes Inline-Element einen font-size-Wert von 15px und einen line-height-Wert von21px, dann beträgt der Unterschied (der Durchschuss) 6 Pixel. Das Benutzerprogrammteilt diesen Wert durch zwei und fügt ihn anteilig dem unteren und oberen Teil desInhaltsbereichs hinzu. Hieraus ergibt sich die Inline-Box. Dieser Prozess ist in Abbildung7-31 zu sehen.

Ein weiteres Beispiel:

<p style="font-size: 12px; line-height: 12px;">

Dieser Absatz enthält teilweise <em>hervorgehobene Teile</em>, aber auch<br>

anderen Text, der <strong style="font-size: 24px;">stark

hervorgehoben</strong> wurde<br>

und dadurch größer erscheint als der Text drumherum.

</p>

In diesem Beispiel wurde für font-size ein Wert von 12px festgelegt, während der Text ineinem der nicht-ersetzten Inline-Elemente eine Größe von 24px hat. Trotzdem hat dergesamte Text einen line-height-Wert von 12px; gleichzeitig ist line-height eine vererbteEigenschaft. Das heißt, der line-height-Wert des strong-Elements beträgt ebenfalls nur12px.

Für die Textteile, deren Werte für font-size und line-height jeweils 12px betragen,ändert sich die Höhe des Inhaltsbereichs nicht (weil die Differenz zwischen 12px und 12pxnull ist); die Inline-Box ist also 12 Pixel hoch. Für den Text im strong-Element beträgt derUnterschied zwischen line-height und font-size jedoch -12px. Dieser Wert wird hal-biert, um den Halb-Durchschuss zu ermitteln (-6px). Dieser Wert wird nun dem oberenund unteren Teil des Inhaltsbereichs hinzugerechnet, um die Dimensionen der Inhalts-box zu ermitteln. Da Sie in beiden Fällen eine negative Zahl addieren, hat die Inline-Boxam Ende eine Höhe von 12 Pixeln. Diese Box wird innerhalb des 24 Pixel hohen Inhalts-bereichs vertikal zentriert und ist damit kleiner als der Inhaltsbereich selbst.

Das klingt jetzt so, als hätten wir jeden Textteil gleich behandelt und als hätten sämtlicheInline-Boxen die gleiche Größe. Das stimmt aber nicht ganz. Die Inhaltsboxen der zwei-ten Zeile haben zwar die gleiche Größe, befinden sich aber nicht auf gleicher Höhe, weilder Text prinzipiell an der Grundlinie ausgerichtet wird (siehe Abbildung 7-32).

Da die Inline-Boxen die Höhe der gesamten Zeilen-Box bestimmen, ist das Platzierungs-verhältnis der einzelnen Inline-Boxen zueinander sehr wichtig. Die Zeilen-Box wirdbestimmt durch den Abstand zwischen der Oberkante der höchsten Inline-Box und der

Abbildung 7-31: Inhaltsbereich zuzüglich Durchschuss ergibt die Inline-Box


Unterkante der niedrigsten Inline-Box. Die Oberkante der Zeilen-Box selbst wird bündigmit der Unterkante der darüber stehenden Zeilen-Box dargestellt. Das in Abbildung 7-32gezeigte Ergebnis ergibt den in Abbildung 7-33 dargestellten Absatz.

Wie Sie in Abbildung 7-33 sehen können, ist die mittlere Linie zwar höherals die anderen beiden, aber nicht hoch genug, um den enthaltenen Textganz aufzunehmen. Die Inline-Box für den anonymen Text legt die Unter-kante der Zeilen-Box fest, während die Oberkante der Inline-Box für dasstrong-Element die Oberkante der Zeilen-Box bestimmt. Da sich die Ober-kante der Inline-Box unterhalb der Oberkante des Inhaltsbereichs befin-det, ragt der Inhalt über die Zeilen-Box hinaus und überschneidet sich mitden anderen Textzeilen. Als Resultat erscheinen die Textzeilen unregelmä-ßig dargestellt. Später in diesem Kapitel werden wir Möglichkeiten kennenlernen, dieses Verhalten zu umgehen und eine regelmäßige Raumauftei-lung für die Grundlinien zu erreichen.

Vertikale Ausrichtung

Auch beim Ändern der vertikalen Ausrichtung von Inline-Boxen gelten die Regeln, nachdenen die Höhe der Zeilen-Box ermittelt wird. So können Sie dem strong-Element bei-spielsweise einen Wert von 4px für die vertikale Ausrichtung (vertical-align) zuweisen:


Dieser Absatz enthält teilweise <em>hervorgehobene Teile</em>, aber auch<br>

anderen Text, der <strong style="font-size: 24px; vertical-align: 4px;">stark

hervorgehoben</strong> wurde<br>

und dadurch größer erscheint als der Text drumherum.

</p>

Diese kleine Änderung hebt das Element um 4 Pixel an, wodurch sowohl sein Inhaltsbe-reich als auch die Inline-Box mit angehoben werden. Da die Inline-Box des strong-Ele-ments sowieso schon die höchste der Zeile ist, wirkt sich diese Änderung der vertikalen

Abbildung 7-32: Verschiedene Inline-Boxen auf einer Zeile

Abbildung 7-33: Zeilen-Boxen innerhalb eines Absatzes


Ausrichtung auch auf die Höhe der Zeilen-Box aus, die nun ebenfalls 4 Pixel höher wird(siehe Abbildung 7-34).

In unserem nächsten Beispiel haben wir es mit einem weiteren Inline-Element zu tun, dassich zwar auf der gleichen Zeile befindet wie das strong-Element, aber nicht an derGrundlinie ausgerichtet ist:


Dieser Text <em>ist teilweise hervorgehoben</em>. Andere Teile sind<br>

<strong style="font-size: 24px;">stark hervorgehoben</strong> und

<span style="vertical-align: top;">oben ausgerichtet</span> und<br>

erscheinen größer als der umgebende Text.</p>

Auch hier ist die mittlere Zeilen-Box höher als die übrigen Zeilen-Boxen. Beachten Siejedoch, wie der hohe Text in Abbildung 7-35 ausgerichtet wurde.

In diesem Fall wird die Oberkante der Inline-Box für den »hohen« Text an der Oberkanteder Zeilen-Box ausgerichtet. Da für den »hohen« Text die Werte für font-size und line-height gleich sind, sind die Höhe des Inhaltsbereichs und die Inline-Box ebenfalls gleich.Nehmen wir aber einmal den folgenden Fall:


Dieser Text <em>ist teilweise hervorgehoben</em>. Andere Teile sind<br>

<strong style="font-size: 24px;">stark hervorgehoben</strong> und

<span style="vertical-align: top; line-height: 4px;">oben ausgerichtet</span> und<br>

erscheinen größer als der umgebende Text.</p>

Da nun der Wert für line-height für den »hohen« Text geringer ist als der für font-size,ist die Inline-Box für das Element kleiner als der Inhaltsbereich. Dadurch ändert sichauch die Platzierung des Textes, da die Oberkante der Inline-Box mit der Oberkante derZeilen-Box bündig dargestellt werden muss. Aus diesem Grund erhalten Sie das inAbbildung 7-36 gezeigte Ergebnis.

Abbildung 7-34: Vertikale Ausrichtung kann die Höhe der Zeilen-Box beeinflussen

Abbildung 7-35: Ausrichtung eines Inline-Elements an der Zeilen-Box


Andererseits Seite können Sie dem »hohen« Text auch einen Wert für line-height zuwei-sen, der größer ist als der für font-size. Zum Beispiel:


Hier etwas Text, <em>der hervorgehoben wurde</em>, plus etwas Text,<br>

der <strong style="font-size: 24px;">stark hervorgehoben wurde</strong>, und <span

style="vertical-align: top; line-height: 18px;">etwas hohen Text</span>, der die<br>

umgebenden Textteile überragt.

</p>

Da Sie line-height für den »hohen« Text einen Wert von 18px zugewiesen haben, beträgtder Durchschuss (die Differenz zwischen line-height und font-size) 6 Pixel. Der Halb-Durchschuss wird zum Inhaltsbereich addiert, wodurch die Inline-Box nun eine Höhevon 18 Pixeln hat. Die Oberkante dieser Inline-Box wird bündig mit der Oberkante derZeilen-Box dargestellt. Entsprechend sorgt der Wert bottom für eine Ausrichtung derUnterkante einer Inline-Box mit der Unterkante der Zeilen-Box.

Nach dem, was wir bisher in diesem Kapitel besprochen haben, haben die verschiedenenSchlüsselwörter für vertical-align die folgenden Auswirkungen:

top

Richtet die Oberkante der Inline-Box eines Elements bündig zur Oberkante derumgebenden Zeilen-Box aus.

bottom

Richtet die Unterkante der Inline-Box des Elements bündig zur Unterkante derumgebenden Zeilen-Box aus.

text-top

Richtet die Oberkante der Inline-Box eines Elements bündig zur Oberkante desInhaltsbereichs seines Elternelements aus.

text-bottom

Richtet die Unterkante der Inline-Box eines Elements bündig zur Unterkante desInhaltsbereichs seines Elternelements aus.

middle

Richtet den vertikalen Mittelpunkt der Inline-Box eines Elements ein halbes ex(Höhe des Buchstabens x des verwendeten Zeichensatzes) oberhalb der Grundlinieseines Elternelements aus.

super

Verschiebt den Inhaltsbereich und die Inline-Box eines Elements nach oben. DerAbstand ist nicht festgelegt und kann je nach Benutzerprogramm variieren.

Abbildung 7-36: Text, der (schon wieder) über die Zeilen-Box hinausragt


sub

Das Gleiche wie super, nur dass hier das Element nach unten und nicht nach obenverschoben wird.

<Prozentwert>Verschiebt das Element um den angegebenen Prozentsatz vom Wert für line-heightnach oben oder nach unten.

Diese Werte werden in Kapitel 6 detaillierter erklärt.

Den Wert für line-height richtig festlegen

In den vorhergehenden Abschnitten haben wir gesehen, wie der Wert für line-heightdafür sorgen kann, dass sich der Text von verschiedenen Zeilen überschneidet. Hierbeiwurden die Änderungen jedoch für einzelne Elemente vorgenommen. Wie können Sie dieZeilenhöhe der Elemente aber allgemeiner festlegen, damit sich der Inhalt nicht mehrüberschneidet?

Eine Möglichkeit besteht darin, die Einheit em für ein Element zu benutzen, dessen Wertfür font-size verändert wurde:

p {font-size: 14px; line-height: 1em;}

big {font-size: 250%; line-height: 1em;}

<p>

Dieser Absatz enthält neben "normalem" Text auch<br>

eine Zeile mit <big>groß dargestelltem Text,</big><br>

der uns helfen soll, die hier besprochene Situation zu erklären.

</p>

Durch ein explizites Setzen von line-height für das big-Element wird die Gesamthöheder Zeilen-Box ebenfalls erhöht, damit genug Platz entsteht, um das big-Element darzu-stellen, ohne dass es zu Überschneidungen kommt und ohne dass hierfür der Wert fürline-height für den ganzen Absatz geändert werden müsste. Wir benutzen hier einenWert von 1em, wodurch der Wert für line-height des big-Elements den gleichen Werterhält wie dessen Wert für font-size. Denken Sie daran, dass der Wert für line-heightauf den font-size-Wert des Elements selbst bezogen wird und nicht auf dessen Elternele-ment. Das Ergebnis sehen Sie in Abbildung 7-37.

Die Darstellung aus Abbildung 7-37 lässt sich auch mit den folgenden Stildefinitionenerreichen:

p {font-size: 14px; line-height: 1;}

big {font-size: 250%;}

Abbildung 7-37: Die Eigenschaft line-height für Inline-Elemente festlegen


Sofern die Werte für line-height nicht als Skalierungsfaktoren vererbt werden, beträgtder line-height-Wert für die Elemente p und big jeweils 1. Demnach entspricht die Höheder Inline-Box der Höhe des Inhaltsbereichs, wie in Abbildung 7-37.

Stellen Sie bitte sicher, dass Sie das Vorangegangene wirklich verstanden haben, denn dieDinge werden beim Hinzufügen von Rahmen noch komplizierter. Im nächsten Beispielsollen Hyperlinks mit einem 5 Pixel breiten Rahmen umgeben werden:

a:link {border: 5px solid blue;}

Wenn Sie den Wert für line-height nicht hoch genug ansetzen, um auch den Rahmeneinzuschließen, kann es passieren, dass dieser die Zeilen überschreibt. Sie könnten jetzt,wie bei dem big-Element von vorhin, den Wert für line-height erhöhen. Dieser muss fürdie Links 10 Pixel größer als der Wert für font-size sein. Wenn Sie den genauen Pixel-wert für die Schriftgröße jedoch nicht kennen, kann dieses Vorgehen zu Schwierigkeitenführen.

Eine weitere Möglichkeit besteht darin, den line-height-Wert für den gesamten Absatzzu erhöhen. Dadurch wird nicht nur die Zeile mit dem eingerahmten Hyperlink, sondernalle Zeilen verändert:

p {font-size: 14px; line-height: 24px;}


Da nun alle Zeilen weiter voneinander entfernt sind, überschneidet sich der Rahmennicht mehr mit den anderen Zeilen (siehe Abbildung 7-38).

Dieser Ansatz funktioniert allerdings nur, weil alle Textteile die gleiche Größe haben.Gäbe es noch andere Elemente in der Zeile, würden diese eventuell die Höhe der Zeilen-Box und damit auch die Darstellung des Rahmens beeinflussen. Hierzu ein weiteres Bei-spiel:



big {font-size: 150%; line-height: 1.5em;}

Gemäß dieser drei Regeln beträgt die Höhe der Inline-Box für das big-Element 31,5 Pixel(14 × 1,5 × 1,5), was gleichzeitig auch die Höhe für die Zeilen-Box ist. Um die Zwi-schenräume zwischen den Grundlinien anzugleichen, muss der line-height-Wert für denumgebenden Absatz (p) mindestens 32px oder mehr betragen.

Abbildung 7-38: Die Zeilenhöhe anheben, um Platz für Inline-Elemente mit Rahmen zu schaffen


Zeilenhöhen skalieren

Wie sich zeigt, lässt sich der Wert für line-height am besten mittels einer einfachen Zahlfestlegen, die als Skalierungsfaktor angesehen wird. Dieser wird vererbt und muss nichtneu berechnet werden. Für das nächste Beispiel soll der Wert für line-height für alle Ele-mente des Dokuments eineinhalbmal größer als der Wert font-size sein. Hierfür könnenSie die folgende Regel benutzen:

body {line-height: 1.5;}

Der Skalierungsfaktor 1.5 wird nun von einem Element an das nächste weitergereicht. Injedem Element wird dieser Faktor als Multiplikator für die dort verwendete Schriftgröße(also den Wert für font-size) verwendet. Die folgenden Regeln und der dazugehörigeMarkup-Code würden also so dargestellt, wie in Abbildung 7-39 zu sehen:

p {font-size: 15px; line-height: 1.5;}


big {font-size: 200%;}

<p>Die Zeilenhöhe des Absatzes ist 1,5-mal größer als dessen Wert für

font-size. Außerdem ist die Zeilenhöhe für alle enthaltenen Elemente,

wie etwa <small>dieses klein dargestellte Element</small>, ebenfalls

eineinhalbmal so groß wie seine Schriftgröße. Das Gleiche gilt auch für

dieses <big>groß dargestellte Element</big>. Durch die Verwendung eines

Skalierungsfaktors werden die Zeilenhöhen an die verwendete Schriftgröße

angepasst.</p>

Grundlinien und Zeilenhöhen

Die tatsächliche Höhe der einzelnen Zeilen-Boxen hängt davon ab, wie die enthaltenenElemente zueinander angeordnet werden. Diese Ausrichtung hängt wiederum stark davonab, wo die Grundlinien für die einzelnen Elemente (oder anonymen Textteile) zu stehenkommen, weil deren Position bestimmt, wie die Inline-Boxen angeordnet werden. DiePositionierung der Grundlinie innerhalb der em-Box ist wiederum von Zeichensatz zuZeichensatz unterschiedlich. Diese Information ist direkt in die Zeichensatzdateien einge-bettet und kann nur dadurch verändert werden, dass die Datei selbst editiert wird.

Demnach ist es eher eine Kunst als eine Wissenschaft, konsistente Abstände zwischen denGrundlinien zu erreichen. Wenn Sie bei der Definition aller Ihrer Schriftgrößen undZeilenhöhen eine gemeinsame Maßeinheit verwenden, z.B. ems, haben Sie gute Chancen,dass die Abstände zwischen den Grundlinien konsistent bleiben. Sobald Sie jedoch anfan-gen, verschiedene Maßeinheiten nebeneinander zu benutzen, wird die Sache schon wes-entlich schwieriger, vielleicht sogar völlig unmöglich. Während dieses Buch geschriebenwird, gibt es Vorschläge für Eigenschaften, mit denen Autoren die Abstände zwischen denGrundlinien unabhängig von den Inline-Inhalten festlegen können, was bestimmte Aspek-te der Online-Typographie stark vereinfachen würde.


In diesem Beispiel wird die Zeilenhöhe für das small-Element mit 15px berechnet, wäh-rend das big-Element eine Zeilenhöhe von 45px erhält. (Diese Zahlen erscheinen übertrie-ben, stören das Gesamtbild der Seite aber nicht.) Wenn Sie verhindern wollen, dass dermit big markierte Text zu viel Durchschuss erzeugt, können Sie ihm einen eigenen Wertfür line-height geben, der den geerbten Skalierungsfaktor überschreibt:

p {font-size: 15px; line-height: 1.5;}


big {font-size: 200%; line-height: 1em;}

Eine weitere Lösung – und vermutlich sogar die einfachste – besteht darin, die Stildefini-tionen so festzulegen, dass die Zeilen gerade groß genug sind, um die Inhalte zu enthal-ten. Dies entspräche einem Wert von 1.0 für line-height. Das Ergebnis der Multipli-kation mit dem Wert für font-size ist in diesem Fall mit dem Wert für font-size gleich.Das heißt, die Inline-Boxen der Elemente sind immer so groß wie ihre Inhaltsbereiche,was der minimalen Größe entspricht, die nötig ist, um den Inhaltsbereich jedes Elementszu enthalten.

Die meisten Schriften erzeugen von sich aus etwas Platz zwischen den Zei-len, da ihre em-Boxen normalerweise größer sind als die Schriftzeichenselbst.

Eigenschaften für Boxen hinzufügen

Wie Sie bereits wissen, können auch nicht-ersetzte Inline-Elemente mit Innen- undAußenabständen und Rahmen versehen werden. Diese zusätzlichen Bestandteile einesInline-Elements haben jedoch keinen Einfluss auf die Höhe der Zeilen-Box. Wenn Sie bei-spielsweise ein span-Element mit einem Rahmen versehen, ohne weitere Innen- undAußenabstände zu definieren, erhalten Sie solche Ergebnisse wie in Abbildung 7-40.

Die Größe eines Rahmens wird durch die Eigenschaft font-size und nicht von line-height bestimmt. Wenn der Wert für font-size des span-Elements etwa 12px beträgt unddie Eigenschaft line-height einen Wert von 36px hat, so ist der Inhaltsbereich 12 Pixelhoch, und der Rahmen umgibt diesen Inhaltsbereich.

Abbildung 7-39: Die Verwendung eines Skalierungsfaktors für den Wert von line-height


Zusätzlich können Sie dem Inline-Element Innenabstände zuweisen, was die Rahmenvom Text weg und weiter nach außen verschiebt:

span {border: 1px solid black; padding: 4px;}

Durch die Zuweisung von Innenabständen wird die tatsächliche Höhe des Inhaltsbe-reichs und damit auch die Höhe der Inline-Box für dieses Element nicht verändert. Aufähnliche Weise gilt dies für hinzugefügte Rahmen, die ebenfalls keinen Einfluss auf dieErzeugung oder Darstellung der Zeilen-Box haben, wie in Abbildung 7-41 gezeigt.

Auch die Außenabstände eines nicht-ersetzten Inline-Elements haben keinen Einfluss aufdessen Höhe und somit auch nicht auf die Höhe der Zeilen-Box. Für die linke und rechteSeite des Elements gelten allerdings andere Regeln.

Seit CSS2.1 ist die Platzierung von Außenabständen klar geregelt. Anstatteinfach festzulegen, dass Benutzerprogramme obere und untere Außenab-stände ignorieren sollen, wird dort vorgeschrieben, dass die Eigenschaftenmargin-top und margin-bottom für alle nicht-ersetzten Inline-Elemente gel-ten sollen.

Wie Sie wissen, werden Inline-Elemente einfach als einzelne Zeile angesehen, die fallsnötig umbrochen werden kann. Wenn Sie demnach ein Inline-Element mit Außenabstän-den (margin-left bzw. margin-right) versehen, werden diese nur am Anfang und amEnde des Elements (und nicht jeder Zeile) erzeugt. Innenabstände werden dagegen auchan den Zeilenenden dargestellt. Innenabstände, Außenabstände und Rahmen haben zwar

Abbildung 7-40: Rahmen für Inline-Elemente und das Layout der Zeilen-Box

Abbildung 7-41: Innenabstände und Rahmen haben keinen Einfluss auf die Zeilenhöhe


keinen Einfluss auf die Zeilenhöhe, können das Layout für den Inhalt eines Elements aberverändern, indem sie den Text »nach innen« verschieben. (siehe Abbildung 7-42).

Stellen Sie sich ein Inline-Element als Papierstreifen vor, der von durchsichtigem Plastikumgeben ist. Die Anzeige des Inline-Elements auf mehreren Zeilen funktioniert, als wür-den Sie den Papierstreifen in mehrere kleinere Streifen zerschneiden. Hierbei erhalten diekleineren Streifen jedoch keinen zusätzlichen Plastikrand, wodurch nur am Anfang undam Ende des ursprünglichen Papierstreifens (dem Inline-Element) ein Rand entsteht.

Was passiert aber, wenn der Hintergrund und die Innenabstände eines Inline-Elementsso groß sind, dass sich die Hintergründe der Zeilen überschneiden? Nehmen wir die fol-gende Situation als Beispiel:

p {font-size: 15px; line-height: 1em;}

p span {background: #999; padding-top: 10px; padding-bottom: 10px;}

Sämtlicher Text im Inhaltsbereich des span-Elements ist 15 Pixel hoch. Zusätzlich wurdeein Innenabstand von 10 Pixeln ober- und unterhalb des Inhaltsbereichs definiert. Diezusätzlichen Pixel haben zwar keinen Einfluss auf die Höhe der Zeilen-Box, wohl aber aufdie Vergabe der Hintergrundfarbe (siehe Abbildung 7-43).

In CSS2.1 ist eindeutig geregelt, dass die Zeilen-Boxen in der Reihenfolge gezeichnet wer-den sollen, in der sie auch im Dokument selbst vorkommen: »Dadurch werden die Rah-men der folgenden Zeilen die Rahmen der Zeilen davor überschreiben.« Das gleichePrinzip gilt für Hintergründe (siehe Abbildung 7-43). In CSS2 war es Benutzerprogram-men noch möglich, die Rahmen und Hintergründe »zu beschneiden (also nicht darzustel-len)«. Aus diesem Grund können sich die Ergebnisse stark unterscheiden, je nachdem,welcher Spezifikation das verwendete Benutzerprogramm folgt.

Ersetzte Inline-ElementeBei ersetzten Inline-Elementen wie beispielsweise Bildern wird davon ausgegangen, dasssie eine »eingebaute« Höhe und Breite besitzen. So ist ein Bild beispielsweise eine

Abbildung 7-42: Innenabstände an den Enden eines Inline-Elements

Abbildung 7-43: Sich überschneidende Hintergründe von Inline-Elementen


bestimmte Anzahl von Pixeln hoch und breit. Dadurch kann ein ersetztes Element miteigener Größe die Dimensionen der Zeilen-Box verändern, wobei der Wert für line-height für alle übrigen Elemente sowie das ersetzte Element selbst in der Zeile nicht ange-tastet werden. Stattdessen wird einfach die Größe der Zeilen-Box angepasst, um dasersetzte Element inklusive eventueller Box-Eigenschaften zu umgeben. Es wird also dasgesamte ersetzte Element (also der Inhalt sowie Rahmen und Innen- und Außenabstände)verwendet, um die Größe der Zeilen-Box zu bestimmen. Die folgenden Stildefinitionenzeigen ein solches Beispiel (siehe Abbildung 7-44):


img {height: 30px; margin: 0; padding: 0; border: none;}

Weder für den Absatz noch für das Bild selbst haben sich trotz des vielen Leerraums dieWerte für line-height verändert. line-height hat einfach keinen Einfluss auf die Inline-Box des Bildes. Da das Bild in Abbildung 7-44 keinerlei Innen- und Außenabstände oder

Glyphen und Inhaltsbereich

Überschneidungen der Hintergründe von nicht-ersetzten Inline-Elementen können selbstdann vorkommen, wenn Sie versuchen, dies zu verhindern, je nachdem, welche Zeichen-sätze verwendet werden. Das Problem liegt im Unterschied zwischen der em-Box und denGlyphen für die einzelnen Zeichen. Bei den meisten Zeichensätzen sind die em-Boxen unddie Glyphen für die Zeichen unterschiedlich groß.

Das klingt vielleicht abstrakt, hat aber eine Reihe von praktischen Konsequenzen. In derSpezifikation von CSS2.1 steht Folgendes: »Die Höhe des Inhaltsbereichs sollte sich nachdem verwendeten Zeichensatz richten. Diese Spezifikation legt jedoch nicht fest, aufwelche Weise das zu geschehen hat. Ein Benutzerprogramm kann … hierfür die em-Boxoder auch die Ober- und Unterlänge des Zeichensatzes benutzen. (Letzteres würde sicher-stellen, dass Glyphen, die teilweise über- und unterhalb der em-Box liegen, ebenfalls imInhaltsbereich liegen. Allerdings kann das bei unterschiedlichen Zeichensätzen zu Boxenunterschiedlicher Größe führen.)«

Das bedeutet, die Definition der »Zeichenfläche« eines nicht-ersetzten Inline-Elements istSache des Benutzerprogramms. Verwendet ein Benutzerprogramm die em-Box, um dieGröße des Inhaltsbereichs zu berechnen, so entspricht die Höhe des Hintergrunds einesnicht-ersetzten Inline-Elements der em-Höhe (also dem Wert für font-size). Verwendetein Benutzerprogramm jedoch die Über- und Unterlänge des Zeichensatzes, kann derHintergrund größer als die em-Box ausfallen. Daraus folgt, dass der Hintergrund einesnicht-ersetzten Inline-Elements den Inhalt anderer Zeilen auch bei einem line-height-Wert von 1em überschreiben kann.

Diese Überschneidungen lassen sich in CSS2 oder CSS2.1 nicht verhindern. Für CSS3 gibtes einige Vorschläge für Eigenschaften, mit denen der Autor das Verhalten des Benutzer-programms festlegen kann. Solange diese Eigenschaften jedoch nicht umgesetzt werden,ist eine hundertprozentig genaue Typographie mit CSS nicht möglich.


Rahmen besitzt, ist die Größe seiner Inline-Box gleich der Größe des Inhaltsbereichs, inunserem Fall also 30 Pixel hoch.

Und trotzdem hat ein ersetztes Inline-Element einen Wert für line-height, weil in denmeisten Fällen ein Wert benötigt wird, um das Element richtig zu positionieren, wenn esvertikal ausgerichtet werden soll. Sie erinnern sich vermutlich, dass die Berechnung derWerte für vertical-align von dem Wert für line-height für das betreffende Elementabhängt. Daraus folgt:


img {vertical-align: 50%;}

<p>Das Bild in diesem Satz <imgsrc="test.gif" alt="test image">

wird um 9 Pixel erhöht dargestellt.</p>

Auf Grund des geerbten Wertes für line-height wird das Bild um neun Pixel erhöht dar-gestellt. Ohne einen Wert für line-height wäre es nicht möglich, vertikale Ausrichtungenanhand von Prozentwerten vorzunehmen. Dabei spielt die Höhe des Bildes selbst keiner-lei Rolle; es wird nur der Wert von line-height für die Berechnung herangezogen.

Bei anderen ersetzten Elementen kann es allerdings wichtig sein, einen Wert für line-height an Nachfahren-Elemente innerhalb des ersetzten Elements weiterzugeben. EinBeispiel hierfür wäre etwa eine SVG-Grafik, die CSS für die Darstellung von enthaltenemText verwendet.

Box-Eigenschaften hinzufügen

Nach allem, was wir bisher zur Definition von Außenabständen, Rahmen und Innen-abständen für ersetzte Inline-Elemente gehört haben, erscheint dieses Thema fast schontrivial.

Die Definition von Innenabständen und Rahmen für ersetzte Elemente funktioniert wieüblich. Der Innenabstand fügt zwischen dem tatsächlichen Inhalt und dem Rahmen umden Innenabstand Leerraum ein. Ungewohnt ist dabei die Tatsache, dass diese zweiDinge die Höhe der Zeilen-Box verändern können, da sie Teil der Inline-Box eines ersetz-ten Elements sind (im Gegensatz zu nicht-ersetzten Inline-Elementen). Betrachten Siehierzu Abbildung 7-45, die auf den folgenden Stildefinitionen basiert:

img {height: 20px; width: 20px;}

img.one {margin: 0; padding: 0; border: 1px dotted;}

img.two {margin: 5px; padding: 3px; border: 1px solid;}

Abbildung 7-44: Ersetzte Elemente können die Höhe der Zeilen-Box, aber nicht den Wert für line-height verändern


Wie Sie sehen, ist die erste Zeilen-Box groß genug, um das Bild zu enthalten, während diezweite Box ausreichend Platz bietet, um neben dem Bild auch dessen Innen- und Außen-abstände zu enthalten.

Auch die Außenabstände gehören noch zur Zeilen-Box, wobei es aber ein paar Eigenhei-ten zu beachten gibt. Das Setzen eines positiven Außenabstands ist kein Geheimnis, denndie Inline-Box des ersetzten Elements wird einfach vergrößert. Das Setzen von negativenAußenabständen hat einen ähnlichen Effekt: Die Größe der Inline-Box des ersetzten Ele-ments wird reduziert. Wie in Abbildung 7-46 zu sehen ist, wird die Zeile oberhalb des Bil-des »heruntergezogen«:

img.two {margin-top: -10px;}

Negative Außenabstände funktionieren selbstverständlich auf die gleiche Art auch fürBlock-Elemente. In diesem Fall verkleinern die negativen Außenabstände die Inline-Boxdes Elements. Sie sind gleichzeitig die einzige Möglichkeit, um Überschneidungen zwi-schen ersetzten Inline-Elementen und anderen Zeilen hervorzurufen.

Ersetzte Elemente und die Grundlinie

Vielleicht ist Ihnen schon aufgefallen, dass ersetzte Inline-Elemente standardmäßig aufder Grundlinie angeordnet werden. Hätten Sie für das Element Innen- oder Außenab-stände oder einen Rahmen definiert, würde dessen Inhaltsbereich entsprechend nachoben verschoben. Allerdings haben ersetzte Elemente keine eigene Grundlinie. Daherscheint es nahe liegend, die Inline-Boxen, wie in Abbildung 7-47 gezeigt, an der Grundli-nie des Elternelements auszurichten. Tatsächlich wird aber die Unterkante des äußerenAußenabstands bündig zur Grundlinie dargestellt.

Abbildung 7-45: Die Erweiterung eines ersetzten Inline-Elements um Innenabstände, Rahmen und Außenabstände vergrößert dessen Inline-Box

Abbildung 7-46: Die Auswirkungen von negativen Außenabständen auf ersetzte Inline-Elemente


Diese Ausrichtung an der Grundlinie führt zu unerwarteten (und unwillkommenen) Kon-sequenzen. Wird ein Bild beispielsweise allein in einer Tabellenzelle platziert, so würdedie Zelle so groß sein, dass die gesamte Zeilen-Box, die das Bild enthält, hineinpasst.Diese Größenanpassung tritt auch dann auf, wenn die Tabellenzelle neben dem Bild kei-nerlei Text oder Leerzeichen enthält. Die Designs, die mit aufgeteilten (»sliced«) Grafikenund Spacer-GIFs gearbeitet haben, können daher in modernen Browsern unter Umstän-den leicht »auseinander fallen«. Nehmen wir einmal dieses einfache Beispiel:

td {font-size: 12px;}

<td><img src="spacer.gif" height="1" width="10"></td>

Nach dem CSS-Formatierungsmodell wird die Tabellenzelle 12 Pixel hoch dargestellt,wobei das Bild auf der Grundlinie der Zelle angeordnet wird. Unterhalb des Bildes sindalso möglicherweise 3 Pixel und oberhalb des Bildes 8 Pixel Platz. Die genauen Entfer-nungen hängen dabei von der benutzten Schriftfamilie und ihrer Grundlinie ab. DiesesVerhalten ist nicht auf Bilder innerhalb von Tabellenzellen beschränkt; es kommt in allenSituationen vor, in denen ein ersetztes Inline-Element der einzige Nachkomme einesBlock- oder Tabellenzellen-Elements ist. So wird ein Bild innerhalb eines div-Elementsebenfalls an dessen Grundlinie ausgerichtet.

Während dieses Buch geschrieben wird, ignorieren viele Browser diese Artder CSS-Formatierung von Inline-Elementen. Gecko-basierte Browser ver-halten sich jedoch, wie im Text beschrieben, wenn sie XHTML- und striktdefinierte HTML-Dokumente darstellen. Näheres zu diesem Thema findenSie in meinem Artikel »Images, Tables, and Mysterious Gaps« unter http://devedge.netscape.com/viewsource/2002/img-table/.

Dieses Problem wird meistens umgangen, indem Spacer-Grafiken als Block-Elementedefiniert werden, damit sie keine Zeilen-Box erzeugen. Zum Beispiel:

td {font-size: 12px;}

img.block {display: block;}

<td><img src="spacer.gif" height="1" width="10" class="block"></td>

Eine weitere Lösungsmöglichkeit besteht darin, die Werte für font-size und line-heightder umschließenden Tabellenzelle jeweils mit 1px festzulegen, wodurch die Zeilen-Boxdie gleiche Größe annimmt wie das enthaltene 1-Pixel-Bild.

Abbildung 7-47: Ersetzte Inline-Elemente werden an der Grundlinie des Elternelements ausgerichtet


Hier noch ein weiterer interessanter Effekt, der bei ersetzten Inline-Elementen auftretenkann, die an der Grundlinie ausgerichtet werden: Wenn Sie einen negativen unterenAußenabstand definieren, wird das Element nach unten gezogen, weil die Unterkante sei-ner Inline-Box ansonsten höher liegen würde als die Unterkante seines Inhaltsbereichs.Aus diesem Grund erzeugt die unten stehende Regel die in Abbildung 7-48 gezeigte Dar-stellung:

p img {margin-bottom: -10px;}

Abbildung 7-48: Ersetzte Inline-Elemente können durch einen negativen unteren Außenabstand nach unten gezogen werden

Inline-Formatierung und die Geschichte

Das CSS-Formatierungsmodell für Inline-Elemente erscheint unnötig komplex und ver-hält sich in manchen Dingen entgegen der Erwartungen der Autoren. Es wurde versucht,eine Sprache für Stildefinitionen zu entwickeln, die einerseits mit Prä-CSS-Webbrowsernkompatibel ist und andererseits genügend Platz für zukünftige und weiter reichendeErweiterungen lässt. Alles in allem eine schwierige Mischung aus Vergangenheit undZukunft. Gleichzeitig geht das Modell auf eine Reihe von Entscheidungen zurück, mitdenen versucht wurde, bestimmte unerwünschte Effekte zu vermeiden, ohne dabei neueProbleme hervorzurufen.

So hat das »Auseinanderziehen« von Zeilen bei Bildern und vertikal ausgerichtetem Textseine Wurzeln im Verhalten von Mosaic 1.0. Bei diesem Browser hat sich jedes Bild in einemAbsatz einfach so viel Platz genommen, wie nötig war, um ein Überlappen mit dem Text inanderen Zeilen zu verhindern. Als CSS Möglichkeiten einführte, Text und Inline-Elementemit Stilen zu versehen, haben seine Autoren versucht, ein Modell zu entwerfen, das (jeden-falls standardmäßig) nicht zu Überschneidungen von eingebetteten Bildern und anderenTextzeilen führen konnte. Das gleiche Modell bedeutete aber auch, dass hochgestellter Text(Superskript, sup) dafür sorgte, dass Textzeilen weiter auseinander rücken mussten.

Solche Effekte stören Autoren, die für alle Grundlinien einen einheitlichen Abstanddefinieren möchten und kein bisschen mehr. Jetzt malen Sie sich aber einmal die Konse-quenzen aus. Wenn der Wert von line-height dafür sorgen würde, dass alle Grundlinienohne Ausnahme den gleichen Abstand zueinander bekommen, wäre es leicht möglich,dass ersetzte Inline-Elemente und vertikal verschobene Elemente sich mit anderenTextzeilen überschneiden – was wiederum anderen Autoren auf die Nerven gehen würde.Zum Glück bietet CSS genügend Möglichkeiten, den gewünschten Effekt auf die eine oderandere Art zu erzielen – und die Zukunft von CSS hat noch wesentlich mehr zu bieten.


Das kann leicht dazu führen, dass ein ersetztes Element in die nachfolgenden Textzeilenragt, wie ebenfalls in Abbildung 7-48 zu sehen.

Manche Browser ignorieren negative untere Außenabstände und platzierendie Unterkante des Inhaltsbereichs einfach auf der Grundlinie.

Die Darstellung von Elementen verändernWie bereits kurz in Kapitel 1 erwähnt, können Sie durch das Setzen eines Wertes für dieEigenschaft display die Darstellung eines Elements durch das Benutzerprogramm steu-ern. Nachdem wir uns eingehend mit der visuellen Formatierung beschäftigt haben, wol-len wir uns nun erneut der Eigenschaft display zuwenden. Anhand der in diesem Kapitelvorgestellten Konzepte werden wir uns nun mit zwei weiteren Werten auseinander set-zen.

Wir werden die Werte, die mit Tabellen zu tun haben, hier ausklammern, da sie inKapitel 11 eingehend behandelt werden. Auch der Wert list-item wird hier nicht behan-delt, weil Listen detailliert in Kapitel 12 zur Sprache kommen. Wir haben bereits einigeZeit damit verbracht, block- und inline-Elemente zu untersuchen. Wir werden uns gleichmit den Werten inline-block und run-in beschäftigen. Zuvor wollen wir aber nochsehen, wie eine Änderung der Darstellungsrolle eines Elements die tatsächliche Darstel-lung beeinflussen kann.

Darstellungsrollen ändernWenn es darum geht, ein Dokument mit Stildefinitionen zu versehen, kann es praktischsein, die Darstellungsrolle eines Elements zu ändern. Im folgenden Beispiel soll eine Reihevon Links in einem div-Element stehen und in Form einer Seitenleiste dargestellt werden:

display


Startwert: inline


Vererbt: nein

Berechneter Wert: variiert für umflossene, positionierte und Wurzelelemente (siehe hierzuCSS2.1, Abschnitt 9.7); ansonsten wie angegeben

Anmerkung: Die Werte compact und marker wurden zwar in CSS2 eingeführt, wurden aberauf Grund mangelnder Unterstützung aus CSS2.1 wieder entfernt

Die Darstellung von Elementen verändern | 213

<div id="navigation">

<a href="index.html">Neue Produkte</a><a href="products.html">Aktuelle Produkte</a>

<a href="services.html">Dienstleistungen</a><a href="fun.html">Spaßabteilung!</a>

<a href="support.html">Hilfe</a><a href="about.html" id="current">Über uns</a>

<a href="contact.html">Kontakt</a>

</div>

Sie könnten jetzt jeden Link in einer eigenen Tabellenzelle unterbringen oder mit eigenendiv-Tags versehen – oder Sie sorgen dafür, dass die Links einfach selbst als Block-Ele-mente dargestellt werden, wie hier gezeigt:

div#navigation a {display: block;}

Durch die oben stehende Regel wird jedes a-Element innerhalb des für die Navigationvorgesehenen div-Elements für die Darstellung zu einem Block-Element erklärt. Mit einpaar zusätzlichen Stilangaben können Sie so leicht ein Ergebnis wie das in Abbildung7-49 erreichen.

Eine Änderung der Darstellungsrolle kann auch nützlich sein, wenn die Links von CSS-kompatiblen Browsern als Block-Elemente dargestellt werden sollen, während andereBenutzerprogramme die Navigations-Links als Inline-Elemente ansehen. Dadurch, dassdie Links jetzt als Block-Elemente dargestellt werden, können Sie die gleichen Stildefiniti-onen verwenden wie z.B. bei div-Elementen. Das hat gleichzeitig den Vorteil, dass diegesamte Elementbox Teil des Links ist. Befindet sich der Mauszeiger eines Benutzers übereiner beliebigen Stelle der Elementbox, kann er den Link anklicken.

Umgekehrt ist es natürlich auch möglich, Elemente explizit zu Inline-Elementen zu erklä-ren. Angenommen, Sie haben folgende ungeordnete Namensliste:

<ul id="rollcall">

<li>Bob C.</li>

<li>Marcio G.</li>

<li>Eric M.</li>

<li>Kat M.</li>

<li>Tristan N.</li>

<li>Arun R.</li>

<li>Doron R.</li>

<li>Susie W.</li>

</ul>

Abbildung 7-49: Inline-Elemente durch eine Änderung der Darstellungsrolle als Block-Elemente darstellen


Die Darstellung soll nun so geändert werden, dass die Namen hintereinander stehen.Gleichzeitig soll zwischen den Namen (und an beiden Enden der Liste) jeweils ein verti-kaler Balken stehen. Die einzige Möglichkeit, dies zu tun, ohne das Markup zu ändern,besteht in der Zuweisung einer anderen Darstellungsrolle für die Listeneinträge. Dieunten stehenden Regeln haben die in Abbildung 7-50 dargestellten Auswirkungen:

#rollcall li {display: inline; border-right: 1px solid; padding: 0 0.33em;}

#rollcall li:first-child {border-left: 1px solid;}

Es gibt viele Möglichkeiten, die Eigenschaft display beim Design zu Ihrem Vorteil zu nut-zen. Seien Sie kreativ!

Allerdings sollte Ihnen klar sein, dass Elemente bei einer Änderung der Darstellungsrolleihre Eigenheiten behalten. Wenn Sie also einen Absatz dazu bringen, eine Inline-Box zuerzeugen, verwandelt sich der Absatz selbst dadurch nicht in ein Inline-Element. So gibtes in XHTML beispielsweise Block- und Inline-Elemente. (Wieder andere gelten als»umflossene« Elemente, auf die wir hier aber nicht weiter eingehen.) Ein Inline-Elementkann von einem Block-Element abstammen, aber nicht umgekehrt. Sie können einenLink also innerhalb eines Absatzes platzieren, während ein Link selbst keinen Absatz ent-halten kann. Das ändert sich auch dann nicht, wenn Sie die Stildefinitionen des betroffe-nen Elements ändern. Nehmen wir beispielsweise folgenden Markup-Code:

<a href="http://www.example.net" style="display: block;">

<p style="display: inline;">Das hier ist falsch!</p>

</a>

Der oben stehende Code wird als ungültig betrachtet, weil sich ein Block-Element (p)innerhalb eines Inline-Elements (a) befindet. Die Änderung der Darstellungsrollen fürdiese Elemente hat darauf keinerlei Einfluss. Die Eigenschaft display trägt diesen Namen,weil sie festlegt, wie ein Element dargestellt wird, und nicht, um welche Art von Elementes sich handelt.

Inline-Block-ElementeWie der Name inline-block schon andeutet, sind inline-block-Elemente eine Art Kreu-zung zwischen Inline- und Block-Elementen. Dieser Wert für display wurde mit CSS2.1neu eingeführt.

Ein Inline-Block-Element verhält sich zu anderen Elementen und Inhalten wie eine Inline-Box. Es wird also dargestellt wie eine Textzeile oder ein Bild und wird innerhalb einerZeile als ersetztes Element formatiert. Das heißt, die Unterkante des Inline-Block-Ele-ments wird standardmäßig an der Grundlinie ausgerichtet und besitzt keine eigenen Zei-lenumbrüche.

Abbildung 7-50: Änderung der Darstellungsrolle von list-item auf inline


Innerhalb des Inline-Block-Elements wird der Inhalt jedoch formatiert, als handelte essich um ein Block-Element. Die Eigenschaften width und height haben demnach Einflussauf die Darstellung, wie Block-Elemente oder ersetzte Inline-Elemente auch. Gleichzeitigkönnen diese Eigenschaften die Höhe der Zeilen-Box vergrößern, wenn sie größer sind alsder umgebende Inhalt.

Diese Aussagen wollen wir anhand des folgenden Markup-Codes verdeutlichen:

<div id="one">

Dieser Text ist der Inhalt eines Block-Elements. Innerhalb dieses

Block-Elements befindet sich ein weiteres Block-Element.

<p>Dieser Absatz wird als Block-Element dargestellt.</p>

Und hier ist der Rest des DIV-Elements, das immer noch ein Block-Element ist.

</div>

<div id="two">



<p>Dieser Absatz wird als Inline-Element dargestellt.</p>


</div>

<div id="three">



<p>Dieser Absatz wird als Inline-Block-Element dargestellt.</p>


</div>

Auf diesen Code wenden wir nun die folgenden Regeln an:

div {margin: 1em 0; border: 1px solid;}

p {border: 1px dotted;}

div#one p {display: block; width: 6em; text-align: center;}

div#two p {display: inline; width: 6em; text-align: center;}

div#three p {display: inline-block; width: 6em; text-align: center;}

Das Ergebnis dieses Stylesheets sehen Sie in Abbildung 7-51.

Im zweiten div-Element wurde der Inline-Absatz als normaler eingebetteter Inhalt forma-tiert, wodurch die Werte für width und text-align ignoriert werden (weil sie für Inline-Ele-mente keine Gültigkeit haben). Beim dritten div-Element werden für den Absatz auchdiese beiden Eigenschaften berücksichtigt, weil er als Block-Element formatiert ist. Gleich-zeitig wird erzwungen, dass die Textzeile, in der der Absatz steht, wesentlich größer dar-gestellt wird, da die Zeilenhöhe wie bei einem ersetzten Element verändert werden kann.

Wurde für den Wert width das Inline-Block-Element weder explizit auto noch ein andererWert festgelegt, schrumpft die Elementbox, um den Inhalt genau zu umgeben. Inline-Boxen verhalten sich zwar genauso, aber sie können zusätzlich auf mehrere Textzeilenverteilt werden, was den Inline-Block-Elementen nicht möglich ist. Die folgende Regelerzeugt demnach, wenn sie auf den vorhin gezeigten Code angewendet wird, eine Box,die gerade groß genug ist, um den Inhalt aufzunehmen (siehe Abbildung 7-52).

div#three p {display: inline-block; height: 2em;}


Abbildung 7-51: Das Verhalten eines Inline-Block-Elements

Abbildung 7-52: Automatische Größenanpassung eines Inline-Block-Elements


Inline-Block-Elemente können beispielsweise nützlich sein, wenn Sie fünf Hyperlinksgleichmäßig in einer Seitenleiste anordnen möchten. Damit die Links einerseits 20% derBreite des Elternelements einnehmen und gleichzeitig ihre Inline-Natur nicht verlieren,können Sie folgende Regel benutzen:

#navbar a {display: inline-block; width: 20%;}

Run-In-ElementeAls weitere interessante Mischung aus Block- und Inline-Darstellung wurde mit CSS2 derWert run-in eingeführt, der dafür sorgen kann, dass ein Element als Inline-Teil des fol-genden Elements dargestellt wird. Diese Fähigkeit ist für bestimmte Überschriften-Effekte praktisch, die bei gedruckter Typographie recht häufig zum Einsatz kommen, woÜberschriften als Teil eines Absatzes dargestellt werden.

Um in CSS die Darstellung eines Elements als Run-In zu definieren, müssen Sie zumeinen dessen Wert für display ändern. Außerdem muss die folgende Elementbox alsBlock-Element dargestellt werden. Ich spreche hier bewusst von Element-Boxen undnicht von den Elementen selbst. Es spielt also keine Rolle, ob dieses Element ein Block-oder ein Inline-Element ist. Es geht nur um die vom Element erzeugte Box. So erzeugt einstrong-Element mit der Definition display: block die Box eines Block-Elements, währenddie Definition display: inline eine Inline-Box für das Element anlegt.

Erzeugt ein Element also eine Run-In-Box und folgt darauf eine Block-Box, wird das Run-In-Element in Form einer Inline-Box am Anfang der Block-Box eingebunden. Zum Bei-spiel:

<h3 style="display: run-in; border: 1px dotted; font-size: 125%;

font-weight: bold;">Run-In-Elemente</h3>

<p style="border-top: 1px solid black; padding-top: 0.5em;">

Als weitere interessante Mischung aus Block- und Inline-Darstellung wurde mit CSS2

der Wert <code>run-in</code> eingeführt, der dafür sorgen kann, dass ein Element

als Inline-Teil des folgenden Elements dargestellt wird. Diese Fähigkeit ist für

bestimmte Überschriften-Effekte praktisch, die bei gedruckter Typografie recht

häufig zum Einsatz kommen, bei denen Überschriften als Teil eines Absatzes

dargestellt werden.</p>

Da das auf das h3-Element folgende Element eine Block-Box erzeugt, wird das h3-Elementin Form eines Inline-Elements am Anfang des folgenden Absatzes (p) in dessen Inhalteingebunden (siehe Abbildung 7-53).

Abbildung 7-53: Eine Überschrift als Run-In darstellen


Beachten Sie, wie die Rahmen der beiden Elemente dargestellt werden. Der Effekt vonrun-in kann mit folgendem Code exakt nachgebildet werden:

<p style="border-top: 1px solid black; padding-top: 0.5em;">

<span style="border: 1px dotted; font-size: 125%; font-weight: bold;">

Run-In-Elemente</span>



als Inline-Teil des folgenden Elements dargestellt wird. Diese Fähigkeit ist für

bestimmte Überschriften-Effekte praktisch, die bei gedruckter Typografie recht

häufig zum Einsatz kommen, bei denen Überschriften als Teil eines Absatzes

dargestellt werden.</p>

Es gibt allerdings einen kleinen, aber feinen Unterschied zwischen Run-In-Boxen unddem oben stehenden Code-Beispiel. Auch wenn Run-In-Boxen als Inline-Boxen forma-tiert werden, erben sie weiterhin die Eigenschaften ihres Elternelements und nicht die desElements, in dem sie dargestellt werden. Erweitern wir das Beispiel, indem wir den vori-gen Text mit div-Tags umgeben und etwas Farbe hinzufügen:

<div style="color: silver;">

<h3 style="display: run-in; border: 1px dotted; font-size: 125%;

font-weight: bold;">Run-In-Elemente</h3>

<p style="border-top: 1px solid black; padding-top: 0.5em; color: black;">



als Inline-Teil des folgenden Elements dargestellt wird.</p>

</div>

Unter diesen Umständen wird die h3-Überschrift silbergrau und nicht schwarz wie inAbbildung 7-54 dargestellt, da sie diesen Farbwert von ihrem Elternelement erbt, bevorsie in den Absatz eingefügt wird.

Hierbei ist es wichtig, daran zu denken, dass run-in nur funktioniert, wenn auf die Run-In-Box auch eine Block-Box folgt. Ansonsten wird die Run-In-Box selbst als Block-Boxdargestellt. Im folgenden Code wird das h3-Element entweder für sich dargestellt odersogar als Block-Box, weil der display-Wert für das auf die Überschrift folgende table-Ele-ment (aus gutem Grund) table ist:

<h3 style="display: run-in;">Prices</h3>

<table>

<tr><th>Apples</th><td>$0.59</td></tr>

Abbildung 7-54: Run-In-Elemente erben von ihren Elternelementen und nicht von den Block-Elementen, in die sie eingebettet werden


<tr><th>Peaches</th><td>$0.79</td></tr>

<tr><th>Pumpkin</th><td>$1.29</td></tr>

<tr><th>Pie</th><td>$6.99</td></tr>

</table>

Es ist sehr unwahrscheinlich, dass ein Autor jemals den Wert run-in auf ein Inline-Ele-ment anwendet; wenn aber doch, erzeugt das Element mit sehr großer Wahrscheinlich-keit eine Block-Box. So wird das em-Element im folgenden Beispiel als Block-Boxdargestellt, weil das folgende Element seinerseits keine Block-Box erzeugt:

<p>

Das ist zwar nicht <em>besonders</em> üblich, <strong>aber</strong> Sie

könnten es so machen, wenn Sie unbedingt wollten.

</p>

Während dieses Buch geschrieben wird, unterstützen nur sehr wenigeBrowser die Darstellung von Run-In-Elementen.

Berechnete Werte

Der für display berechnete Wert kann sich ändern, wenn ein Element umflossen oderpositioniert wird. Er kann sich auch ändern, wenn er für das Wurzelelement deklariertwurde. Tatsächlich haben die Werte display, position und float ein sehr interessantesVerhältnis zueinander.

Wird einem Element eine absolute Position zugewiesen, wird der Wert für float automa-tisch auf none gesetzt. Bei umflossenen oder absolut positionierten Elementen wird derberechnete Wert abhängig vom deklarierten Wert ermittelt (siehe Tabelle 7-1).

Beim Wurzelelement resultiert die Deklaration von inline-table oder table im berechne-ten Wert table, während der Wert none auch als solcher berechnet wird. Alle anderenWerte für display werden bei Wurzelelementen als block berechnet.

ZusammenfassungEinige Aspekte des CSS-Formatierungsmodells wirken auf den ersten Blick nicht geradeintuitiv. Dennoch wird ihr Sinn klarer, je häufiger Sie damit arbeiten. In vielen Fällen exis-tieren Regeln, die auf den ersten Blick unsinnig oder sogar idiotisch erscheinen, um ein

Tabelle 7-1: Berechnete Werte für display

Deklarierte Werte Berechnete Werte

inline-table table

inline, run-in, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block

block

Alle anderen Wie angegeben


noch bizarreres oder anderweitig unerwünschtes Verhalten zu verhindern. Block-Ele-mente sind meist recht leicht zu verstehen und die Steuerung ihrer Darstellung ist nichtbesonders schwer. Inline-Elemente sind dagegen nicht ganz so einfach zu handhaben,weil hier eine Reihe weiterer Faktoren eine Rolle spielt, nicht zuletzt die Frage, ob es sichum ein ersetztes oder ein nicht-ersetztes Element handelt. Nachdem wir die Grundlagendes Dokument-Layouts geklärt haben, wollen wir uns in den folgenden Kapiteln damitbeschäftigen, wie die verschiedenen Eigenschaften tatsächlich eingesetzt werden. Wirbeginnen mit den am häufigsten benutzten Box-Eigenschaften: Innenabstände, Rahmenund Außenabstände.

| 221

KAPITEL 8

Innenabstände, Rahmenund Außenabstände

Vermutlich benutzen Sie wie die meisten Webdesigner Tabellen für das Layout Ihrer Sei-ten. Sie haben diese Arbeitsweise gewählt, weil Sie mit Tabellen Seitenleisten und kom-plexere Strukturen für die Gestaltung ganzer Seiten anlegen können. Vielleicht benutzenSie Tabellen aber auch für einfachere Aufgaben, beispielsweise um Text innerhalb eineseingerahmten farbigen Kastens darzustellen, obwohl das eigentlich nicht nötig sein sollte.Es müsste doch gehen, einen Absatz mit einem gelben Hintergrund und einem roten Rah-men zu versehen, ohne den Absatz dafür extra mit einer einzelnen Tabellenzelle zu umge-ben.

Die CSS-Autoren waren der gleichen Meinung und haben der Möglichkeit viel Aufmerk-samkeit geschenkt, Absätze, Überschriften, div-Elemente, Anker, Bilder und so ziemlichalle Dinge, die eine Webseite enthalten kann, mit Rahmen zu versehen. Mit Rahmenkann man Elemente voneinander trennen, ihr Erscheinungsbild hervorheben, bestimmteArten von Daten als verändert kennzeichnen und noch vieles mehr.

Mit CSS können Sie Bereiche um ein Element herum festlegen, die kontrollieren, wo derRahmen im Verhältnis zum Inhalt platziert wird und welchen Abstand andere Elementezu diesem Rahmen haben sollen. Zwischen dem Inhalt eines Elements und dem Rahmenbefinden sich dessen Innenabstände (Padding) und außerhalb des Rahmens die Außenab-stände (Margins). Diese Eigenschaften bestimmen zusammen die Darstellung des gesam-ten Dokuments. Viel wichtiger ist jedoch, wie sehr diese Eigenschaften das Erscheinungs-bild eines bestimmten Elements beeinflussen können.

Grundlagen der ElementboxenWie in Kapitel 7 bereits angesprochen, erzeugen alle Elemente eine rechteckige Box, dieso genannte Elementbox. Diese bestimmt, wie viel Platz ein Element innerhalb des Doku-ments beansprucht. Dadurch nimmt jede Box auch Einfluss auf die Position und Größeanderer Elementboxen. Ist eine Elementbox beispielsweise drei Zentimeter hoch, wirddie folgende Box mindestens drei Zentimeter unterhalb des oberen Dokumentrands dar-

222 | Kapitel 8: Innenabstände, Rahmen und Außenabstände

gestellt. Wird die Höhe der ersten Box auf sechs Zentimeter geändert, werden alle folgen-den Boxen um drei Zentimeter nach unten verschoben.

Standardmäßig wird ein visuell dargestelltes Dokument aus einer Anzahl rechteckigerBoxen aufgebaut, die so angeordnet werden, dass sie sich nicht überschneiden. Innerhalbbestimmter Grenzen beanspruchen die Boxen so wenig Platz wie möglich, werden dabeiaber so weit voneinander getrennt, dass klar bleibt, welcher Inhalt zu welchem Elementgehört.

Boxen können sich überschneiden, wenn sie manuell positioniert wurden.Zu sichtbaren Überschneidungen kann es auch kommen, wenn für Ele-mente im normalen Textfluss negative Außenabstände definiert wurden.

Für ein umfassendes Verständnis der Funktionsweise von Innen- und Außenabständenund Rahmen ist es wichtig, genau zu wissen, wie das Box-Modell (ebenfalls im letztenKapitel erklärt) aufgebaut ist. Zu Ihrer Information gebe ich das Diagramm hier noch ein-mal wieder (siehe Abbildung 8-2).

Breite und HöheWie in Abbildung 8-2 zu sehen, ist die Breite (width) eines Elements definiert als die Ent-fernung zwischen der linken und rechten Innenkante; die Höhe (height) ist die Entfer-nung zwischen der oberen und unteren Innenkante.

Dabei muss man wissen, dass diese beiden Eigenschaften nicht auf nicht-ersetzte Inline-Elemente angewendet werden können. Versuchen Sie beispielsweise für einen Hyperlink

Abbildung 8-1: Wie ein Element sich auf alle anderen Elemente auswirken kann

Grundlagen der Elementboxen | 223

Werte für height und width festzulegen, muss ein CSS-konformer Browser diese Deklara-tionen ignorieren. Nehmen wir an, Sie hätten die folgende Regel definiert:

a:link {color: red; background: silver; height: 15px; width: 60px;}

Abbildung 8-2: Das CSS-Box-Modell

width

Werte: <Breite> | <Prozentwert> | auto | inherit

Startwert: auto

Anwendung auf: Block-Elemente und ersetzte Inline-Elemente

Vererbt: nein

Prozentwerte: beziehen sich auf die Breite des umgebenden Blocks

Berechneter Wert: für auto und Prozentwerte wie angegeben; ansonsten eine absolute Breitesofern die Eigenschaft nicht auf das Element angewendet wird (dann statt-dessen auto)

height

Werte: <Höhe> | <Prozentwert> | auto | inherit

Startwert: auto

Anwendung auf: Block-Elemente und ersetzte Inline-Elemente

Vererbt: nein

Prozentwerte: beziehen sich auf die Höhe des umgebenden Blocks

Berechneter Wert: für auto und Prozentwerte wie angegeben; ansonsten eine absolute Höhe,sofern die Eigenschaft nicht auf das Element angewendet wird (dann statt-dessen auto)


Das Ergebnis sind rote Links vor einem silbergrauen Hintergrund, deren Höhe und Breitevom Inhalt der Links bestimmt wird. Die Links werden nicht 15 Pixel hoch und 60 Pixelbreit angezeigt.

Im Laufe dieses Kapitels werden wir die Besprechung einfach halten, indem wir davonausgehen, dass die Höhe eines Elements immer automatisch berechnet wird. Besteht einElement also aus acht Zeilen, die jeweils einen achtel Inch hoch sind, so beträgt dieGesamthöhe des Elements genau einen Inch. Besteht das Element aus 10 Zeilen, beträgtdie Höhe 1,25 Inches. In beiden Fällen wird die Höhe vom Inhalt bestimmt und nichtvom Autor. Elemente im normalen Textfluss haben nur sehr selten eine festgelegte Höhe.

Innen- und AußenabständeZwischen den Elementboxen ist nur wenig Platz. Das können Sie auf drei Arten ändern.Sie können Innenabstände (Padding), Außenabstände (Margins) oder eine Kombinationaus beidem benutzen. Unter gewissen Umständen spielt diese Wahl keine Rolle. Besitztein Element jedoch einen Hintergrund, ist die Entscheidung bereits getroffen, denn derHintergrund erstreckt sich über die Innenabstände und nicht die Außenabstände.

Das heißt, die Grenzen des Elementhintergrunds hängen von den Dimensionen der Innen-und Außenabstände ab. Wenn Sie, wie in Abbildung 8-3, für die einzelnen Elemente Hin-tergrundfarben definieren, wird der Unterschied schnell klar. Die Elemente mit zusätz-lichen Innenabständen haben auch größere Hintergründe, die Elemente mit zusätzlichenAußenabständen dagegen nicht.

Historische Probleme

Bezüglich der Werte für width und height hat sich Internet Explorer für Windows vor derVersion 6 nicht gemäß den CSS-Regeln verhalten. Die zwei wichtigsten Unterschiede sind:

• Anstatt width und height für die Größenberechnung der Elementbox zu verwenden,benutzte IE/Win diese Werte für die Berechnung der sichtbaren Elementbox. WennSie einem Element beispielsweise eine Breite von 400px zugewiesen hatten, sah IE/Win dies als die Entfernung zwischen der linken und rechten Außenkante des Rah-mens an. IE/Win hat den Wert von width also dafür benutzt, die Gesamtbreite desInhaltsbereichs für das betreffende Element, inklusive linker und rechter Innenab-stände und Rahmen, zu bestimmen. In CSS3 gibt es Vorschläge, Autoren ent-scheiden zu lassen, welche genaue Bedeutung width und height haben sollen.

• IE/Win hat die Werte für width und height auch auf nicht-ersetzte Inline-Elementeangewandt. Hätten Sie für Hyperlinks width und height festgelegt, hätte IE/Win siegemäß dieser Werte dargestellt.

Beide Probleme wurden in IE6 behoben, allerdings nur im »Standard«-Modus. Im»Quirks«-Modus bestehen die Probleme auch bei dieser Version fort.

Außenabstände | 225

Letztendlich ist es Sache des Designers, zu entscheiden, ob und in welchem Maße Innen-und Außenabstände verwendet werden. Er muss die verschiedenen Möglichkeiten, umden erwünschten Effekt zu erzielen, abwägen und die beste Alternative auswählen. Umdiese Entscheidungen treffen zu können, ist es sicherlich hilfreich zu wissen, welcheEigenschaften Sie benutzen können.

AußenabständeDie meisten Elemente im normalen Textfluss werden durch Außenabstände (margin) von-einander getrennt. Das Setzen eines Außenabstands erzeugt zusätzlichen »Leerraum« um einElement. »Leerraum« bezeichnet im Allgemeinen einen Bereich, in dem keine anderen Ele-mente existieren können und in dem der Hintergrund des Elternelements sichtbar ist. DenUnterschied zwischen Elementen mit und ohne Außenabstände sehen Sie in Abbildung 8-4.Dort sehen Sie die gleichen Absätze einmal mit und einmal ohne Außenabstände.

Abbildung 8-3: Der Unterschied zwischen Innen- und Außenabständen. Zur Verdeutlichung wurden die Absätze mit Hintergrundfarben versehen.

Abbildung 8-4: Absätze mit und ohne Außenabstände


Die einfachste Möglichkeit, um einen Außenabstand zu definieren, besteht in der Ver-wendung der Eigenschaft margin.

Die Auswirkungen beim Setzen des Wertes auto für Außenabstände haben wir bereits inKapitel 7 besprochen und müssen es deshalb hier nicht noch einmal wiederholen. Davonabgesehen, werden Außenabstände wesentlich öfter über eine konkrete Breitenangabedefiniert. Angenommen Sie wollten alle h1-Elemente, wie in Abbildung 8-5, mit einemAußenabstand von einem viertel Inch umgeben, so könnten Sie die unten stehende Regelverwenden. (Für die Darstellung wurde zusätzlich ein Hintergrund definiert, damit derInhaltsbereich leichter zu sehen ist.)

h1 {margin: 0.25in; background-color: silver;}

In Abbildung 8-5 haben wir den Leerraum zu Illustrationszwecken mit einer gestricheltenLinie versehen. Diese wird von Webbrowsern nicht dargestellt.

margin akzeptiert beliebige Längeneinheiten, seien dies nun Pixel, Millimeter oder ems.Der Standardwert von margin ist allerdings 0 (null). Wenn Sie also keinen eigenen Wertdefinieren, sollte eigentlich auch kein Außenabstand dargestellt werden.

In der Praxis sind bei vielen Browsern aber bereits für viele Elemente Stile definiert, undAußenabstände sind hier keine Ausnahme. So erzeugen Außenabstände in CSS-fähigenBrowsern eine »Leerzeile« ober- und unterhalb jedes Absatzes. Sofern Sie für das p-Elementkeine eigenen Stildefinitionen verwenden, kann der Browser gegebenenfalls seine eigenen

margin

Werte: [ <Breite> | <Prozentwert> | auto ]{1,4} | inherit

Startwert: siehe die einzelnen Eigenschaften


Vererbt: nein


Berechneter Wert: siehe die verschiedenen Eigenschaften

Abbildung 8-5: h1-Elemente mit einem Außenabstand versehen


benutzen. Alles, was Sie selbst deklarieren, überschreibt selbstverständlich die Standardein-stellungen des Browsers.

Außerdem können Sie für margin auch Prozentwerte verwenden. Dazu später mehr imAbschnitt »Außenabstände und Prozentwerte«.

Außenabstände und explizite BreitenangabenWie bereits gesagt, kann für die Einstellung der Außenabstände eines Elements eine belie-bige Längeneinheit benutzt werden. So lassen sich Absätze problemlos mit einem 10 Pixelgroßen Leerraum versehen. Mit der folgenden Regel werden alle Absätze mit einemsilbergrauen Hintergrund und einem 10 Pixel breiten Außenabstand versehen (sieheAbbildung 8-6):

p {background-color: silver; margin: 10px;}

(Auch hier haben wir die Hintergrundfarbe benutzt, um den Inhaltsbereich hervorzuhe-ben, während die gestrichelten Linien nur Illustrationszwecken dienen.) Das Ergebnisähnelt der Verwendung der HTML-Attribute hspace und vspace. Die gleiche Wirkung,etwa für ein Bild, können Sie natürlich auch mit margin erzielen. Für das folgende Beispielsollen alle Bilder mit einem 1em breiten Außenabstand versehen werden:

img {margin: 1em;}

Und das ist auch schon alles.

Gelegentlich sollen die oberen und seitlichen Außenabstände unterschiedlich breit sein,was aber auch kein Problem ist. Im nächsten Beispiel werden alle h1-Elemente mit einemoberen Außenabstand von 10 Pixeln, einem rechten Außenabstand von 20 Pixeln, einemunteren Außenabstand von 15 Pixeln und einem linken Außenabstand von 5 Pixeln ver-sehen. Dafür reicht folgende Regel aus:

h1 {margin: 10px 20px 15px 5px;}

Dabei ist die Reihenfolge der Werte wichtig. Diese folgt dem unten stehenden Muster:

margin: oben (top) rechts (right) unten (bottom) links (left)

Um sich die Reihenfolge zu merken, braucht man eigentlich nur zu wissen, dass die Werteim Uhrzeigersinn definiert werden und dass der Wert für den oberen Außenabstand zuerst

Abbildung 8-6: Absätze im Vergleich


angegeben wird. Die Werte werden immer in dieser Reihenfolge festgelegt. Um den ge-wünschten Effekt zu erzielen, müssen Sie die Werte entsprechend anordnen.

Als Eselsbrücke können Sie sich merken, dass die richtige Anordnung derWerte Ihnen hilft, Schwierigkeiten, englisch »TRouBLe«, zu vermeiden.Das entspricht den Anfangsbuchstaben für die englische Wertereihenfolge:TRBL, für »Top Right Bottom Left«.

Sie können für die verschiedenen Werte übrigens auch unterschiedliche Längeneinheitenverwenden, wie hier gezeigt:

h2 {margin: 14px 5em 0.1in 3ex;} /* verschiedene Wertetypen! */

Die Ergebnisse dieser Deklaration sehen Sie, inklusive einer zusätzlichen Anmerkung, inAbbildung 8-7.

Außenabstände und ProzentwerteWie bereits gesagt, können Außenabstände auch mit Hilfe von Prozentwerten definiertwerden. Die Bezugsgröße ist dabei die Breite des Elternelements. Ändert sich diese, soändert sich auch der berechnete Wert. Das lässt sich anhand des folgenden Beispiels ver-deutlichen (siehe Abbildung 8-8):

p {margin: 10%;}

<div style="width: 200px; border: 1px dotted;">

<p>Dieser Absatz wird von einem DIV-Element mit einer Breite von 200 Pixeln umgeben.

Der Außenabstand soll eine Breite von 10% des Elternelements haben.

Bei der deklarierten Breite von 200 Pixeln für das DIV-Element erhält

der Außenabstand an allen Seiten eine Breite von 20 Pixeln.</p>

</div>

<div style="width: 100px; border: 1px dotted;">

<p>

Dieser Absatz wird von einem DIV-Element mit einer Breite von 100 Pixeln umgeben.

Der Außenabstand soll eine Breite von 10% des Elternelements haben.

Der Außenabstand dieses Absatzes ist daher nur halb so groß wie der Außenabstand des

ersten Absatzes.</p>

</div>

Nehmen wir dagegen Elemente, die keinen eigenen Wert für width besitzen, wird dieBreite der Elementbox (inklusive der Außenabstände) abhängig vom width-Wert des Eltern-

Abbildung 8-7: Außenabstände mit verschiedenen Werten und Längeneinheiten


elements berechnet. Dadurch ist es möglich, »flexible« Seiten zu erstellen, bei denen dieElementränder von der tatsächlichen Größe des Elternelements (oder der verfügbaren Dar-stellungsfläche) abhängen. Ändert der Benutzer die Breite des Browser-Fensters, kann beider Verwendung von Prozentwerten für die Außenabstände von Elementen deren Breitean den verfügbaren Platz angepasst werden. Die Wahl liegt bei Ihnen.

Vielleicht ist Ihnen bei den Absätzen in Abbildung 8-8 schon etwas aufgefallen: Nebender Breite der seitlichen Außenabstände hat sich nämlich auch die Breite des oberen undunteren Außenabstands in Abhängigkeit vom Elternelement verändert. Laut der CSS-Spezifikation ist dieses Verhalten korrekt. Hier ist klar definiert, dass Prozentwerteabhängig von der Breite des Elternelements berechnet werden. Das gilt nicht nur für diehorizontalen, sondern eben auch für die vertikalen Außenabstände. Wenn Sie die fol-gende Regel auf den darunter stehenden Code anwenden, erhält der Absatzrand inner-halb des DIV-Elements eine Breite von 50px:

Abbildung 8-8: Die Breite des Elternelements und Prozentwerte


div p {margin-top: 10%;}

<div style="width: 500px;">

<p>Der obere Außenabstand dieses Absatzes hat 10% der Breite seines Elternelements.</p>

</div>

Wenn sich für das div-Element der Wert für width ändert, ändert sich auch die Breite desoberen Außenabstands für den Absatz. Wenn Ihnen das seltsam erscheint, sollten Siebedenken, dass die meisten Elemente im normalen Textfluss (den wir hier voraussetzen)immer so groß sind, dass die Kindelemente inklusive ihrer Außenabstände gerade hinein-passen. Wären der obere und untere Außenabstand als Prozentwert der Höhe des Eltern-elements definiert, könnte es leicht zu einer Endlosschleife kommen. Erhöht man dieHöhe des Elternelements, um den oberen und unteren Außenabstand zu umgeben, wür-den diese ebenfalls erhöht, um der neuen Höhe des Elternelements gerecht zu werden.Daraufhin müsste nun wieder die Höhe des Elternelements angepasst werden und so wei-ter. Anstatt Prozentwerte für obere und untere Außenabstände einfach zu ignorieren,haben sich die Autoren der Spezifikation entschieden, diese relativ zur Breite des Eltern-elements zu definieren, da diese nicht von der Breite der Kindelemente beeinflusst wird.

Bei positionierten Elementen gelten andere Regeln bei der Verwendungvon Prozentwerten für obere und untere Außenabstände. Näheres hierzufinden Sie in Kapitel 10.

Es ist auch möglich, Prozentwerte und Längenangaben gemeinsam zu benutzen. So kön-nen Sie zum Beispiel für die Breite des oberen und unteren Außenabstands eine Höhe voneinem halben em festlegen, während die seitlichen Außenabstände 10% der Breite desBrowser-Fensters betragen sollen. Das kann mit der folgenden Regel ausgedrückt werden(siehe Abbildung 8-9):

h1 {margin: 0.5em 10% 0.5em 10%;}

Hier haben der obere und untere Außenabstand immer einen festen Außenabstand, wäh-rend die seitlichen Außenabstände in Abhängigkeit von der Breite des Browser-Fenstersdefiniert werden. Wir gehen dabei selbstverständlich davon aus, dass alle h1-ElementeKindelemente des body-Elements sind und dass der body genauso breit ist wie das Brow-ser-Fenster. Eigentlich betragen die seitlichen Außenabstände der h1-Elemente 10% derBreite des Elternelements.

Abbildung 8-9: Verschiedene Werte für Außenabstände


Lassen Sie uns kurz noch einmal einen Blick auf die Regel werfen:

h1 {margin: 0.5em 10% 0.5em 10%;}

Sieht ein bisschen redundant aus, oder? Schließlich müssen Sie das gleiche Wertepaarzweimal eingeben. Glücklicherweise gibt es in CSS eine Möglichkeit, dies zu vermeiden.

Werte wiederholenGelegentlich wiederholen sich die Werte, die Sie für margin eingeben müssen:

p {margin: 0.25em 1em 0.25em 1em;}

Anstelle der oben stehenden Regel können Sie aber auch Folgendes schreiben:

p {margin: 0.25em 1em;}

In CSS sind ein paar Regeln definiert, nach denen es möglich ist, weniger als vier Wertefür margin einzugeben. Diese sind:

• Gibt es keinen Wert für left, benutze hierfür den Wert von right.

• Gibt es keinen Wert für bottom, benutze hierfür den Wert von top.

• Gibt es keinen Wert für right, benutze hierfür den Wert von top.

Wenn Sie eher visuell denken, hilft Ihnen vielleicht das Diagramm in Abbildung 8-10.

Anders gesagt: Gibt es nur drei Werte für margin, wird für den vierten (left) der zweiteWert (right) kopiert. Ähnliches gilt auch, wenn nur zwei Werte angegeben wurden. Indiesem Fall wird zusätzlich für den dritten Wert (bottom) der erste Wert (top) kopiert.Wurde nur ein Wert angegeben, kopieren alle anderen Seiten diesen Wert.

Durch diesen einfachen Mechanismus muss der Autor nur so viele Werte wie nötig ange-ben:

h1 {margin: 0.25em 0 0.5em;} /* das Gleiche wie '0.25em 0 0.5em 0' */

h2 {margin: 0.15em 0.2em;} /* das Gleiche wie '0.15em 0.2em 0.15em 0.2em' */

p {margin: 0.5em 10px;} /* das Gleiche wie '0.5em 10px 0.5em 10px' */

p.close {margin: 0.1em;} /* das Gleiche wie '0.1em 0.1em 0.1em 0.1em' */

Diese Methode hat nur folgenden kleinen Nachteil: Sollen der obere und der linkeAußenabstand für h1-Elemente jeweils 10 Pixel breit sein, während der untere und derrechte Außenabstand jeweils 20 Pixel breit sein sollen, müssen Sie das so schreiben:

h1 {margin: 10px 20px 20px 10px;} /* geht leider nicht kürzer */

Abbildung 8-10: Muster für die Wiederholung von Werten


Auch in diesem Fall erhalten Sie das gewünschte Ergebnis; allerdings müssen dabei alleWerte angegeben werden. Im folgenden Beispiel sollen alle Außenabstände den Wertauto erhalten – nur der linke Außenabstand soll eine feste Breite von 3em bekommen:

h2 {margin: auto auto auto 3em;}

Auch in diesem Fall erhalten Sie das gewünschte Ergebnis. Die mehrfache Eingabe vonauto wird auf Dauer etwas lästig – schließlich wollen Sie ja nur einen einzigen Außenab-stand festlegen. Und damit kommen wir zum nächsten Thema.

Eigenschaften für einzelne AußenabständeGlücklicherweise gibt es die Möglichkeit, Werte auch nur für einzelne Außenabstände zudefinieren. Vielleicht wollen Sie nur den linken Außenabstand der h2-Elemente auf 3emsetzen. Anstatt der tippintensiven Schreibweise für margin können Sie auch folgendenAnsatz verwenden:

h2 {margin-left: 3em;}

margin-left ist eine der vier Eigenschaften, mit denen sich die Werte für die einzelnenAußenabstände einer Elementbox separat festlegen lassen. Die Namen sollten Ihnenwenig überraschend vorkommen.

Diese Eigenschaften beziehen sich immer nur auf einen Außenabstand. Die anderen Außen-abstände werden davon nicht beeinflusst.

Diese Eigenschaften können auch in einer Regel zusammengefasst werden:

h2 {margin-left: 3em; margin-bottom: 2em;

margin-right: 0; margin-top: 0;

background: silver;}

Wie in Abbildung 8-11 zu sehen, werden die Außenabstände gemäß Ihrer Definition dar-gestellt. Selbstverständlich wäre es in diesem Fall einfacher gewesen, margin direkt zu be-nutzen:

h2 {margin: 0 0 2em 3em;}

Egal, ob Sie nun Einzelwerte festlegen oder die Kurzschreibweise verwenden – Sie erhaltendas gleiche Ergebnis. In der Regel ist es einfacher, margin zu benutzen, sobald Sie mehr als

margin-top, margin-right, margin-bottom, margin-left


Startwert: 0


Vererbt: nein


Berechneter Wert: für Prozentwerte wie angegeben; ansonsten die absolute Breite


einen Außenabstand definieren wollen. Bezogen auf die Darstellung, macht es keinenUnterschied. Sie können also die Schreibweise benutzen, die Ihnen am besten liegt.

Negative und zusammengefasste AußenabständeWie wir bereits aus Kapitel 7 wissen, ist es auch möglich, ein Element mit negativenAußenabständen zu versehen. Dadurch kann es passieren, dass die Elementbox über dasElternelement hinausragt, ohne dass dabei das Box-Modell an sich verletzt wird. NehmenSie beispielsweise die folgenden Regeln, deren Darstellung in Abbildung 8-12 zu sehen ist:

div {border: 1px dotted gray; margin: 1em;}

p {margin: 1em; border: 1px dashed silver;}

p.one {margin: 0 -1em;}

p.two {margin: -1em 0;}

Im ersten Fall ergeben der Wert für width und die linken und rechten Außenabstände desAbsatzes zusammen genau die Breite des umgebenden Elternelements div. Durch dieBerechnung ist der Absatz jetzt zwei em breiter als das Elternelement, ohne dabei, mathe-matisch gesehen, »breiter« zu sein. Im zweiten Fall verringern die negativen Angaben für

Abbildung 8-11: Mehrere Einzelwerte für Außenabstände

Abbildung 8-12: Negative Außenabstände in Aktion


den oberen und unteren Außenabstand des Absatzes die berechnete Höhe des Elements.Hierdurch werden die Ober- und die Unterkante nach innen geschoben, wodurch sichder Absatz mit dem davor und danach stehenden Absatz überschneidet.

Die Kombination von positiven und negativen Außenabständen kann sogar sehr nützlichsein. Wenn Sie kreativ sind, können Sie auf diese Weise einen Absatz dazu bringen, dasser ein Stück aus seinem Elternelement »herausstanzt«. Oder Sie erzeugen einen Mond-rian-Effekt, bei dem sich mehrere Boxen überschneiden oder einfach zufällig angeordnetwerden. Beide Anwendungen sehen Sie in Abbildung 8-13:

div {background: silver; border: 1px solid;}

p {margin: 1em;}

p.stanz {background: white; margin: 1em -1px 1em 25%;

border: 1px solid; border-right: none; text-align: center;}

p.mondrian {background: #333; color: white; margin: 1em 3em -3em -3em;}

Durch den negativen unteren Außenabstand für den »Mondrian«-Absatz wird die Unter-kante des Elternelements »nach oben gezogen«, wodurch der Absatz nun darüber hinaus-ragt.

Bei oberen und unteren Außenabständen sollte man daran denken, dass vertikal aneinan-der grenzende Außenabstände im normalen Textfluss zusammengefasst werden (sieheKapitel 7). Diese Zusammenfassung passiert in fast jedem Dokument, das Sie mit Stildefi-nitionen versehen. Dafür reicht beispielsweise diese einfache Regel:

p {margin: 15px 0;}

Abbildung 8-13: Ein Stück aus dem Elternelement »herausstanzen«


Hierdurch werden Absätze durch einen 15 Pixel breiten Zwischenraum voneinandergetrennt. Würden die Außenabstände jedoch nicht zusammengefasst, wäre dieser Zwi-schenraum stattdessen 30 Pixel breit, was jedoch nicht den Erwartungen der Autoren ent-spräche.

Dieses Verhalten bedeutet aber auch, dass Sie bei der Vergabe von Stilen für Ihre Außen-abstände vorsichtig vorgehen müssen. Oftmals soll zum Beispiel der Zwischenraum zwi-schen einer Überschrift und dem folgenden Absatz geschlossen werden. Da Absätze inHTML-Dokumenten prinzipiell einen oberen Außenabstand besitzen, reicht es nicht aus,den unteren Außenabstand für die Überschrift einfach auf null zu setzen. Sie müssenauch den oberen Absatzrand entfernen. Das lässt sich mit dem CSS-Selektor für benach-barte Elemente leicht bewerkstelligen:

h2 {margin-bottom: 0;}

h2 + p {margin-top: 0;}

Leider ist die Browser-Unterstützung für den Selektor für benachbarte Elemente sobegrenzt, dass die meisten Benutzer trotz der Regel einen 1em breiten Zwischenraum zusehen bekommen. Der gleiche Effekt läßt sich aber auch mit anderen CSS-Selektorenerzielen, auch wenn dieses Vorgehen etwas schwieriger ist:


p {margin: 0 0 1em;}

Hierdurch wird bei allen Absätzen der obere Außenabstand entfernt. Dadurch, dass allenAbsätzen gleichzeitig ein unterer Außenabstand von 1em Breite zugewiesen wurde, bleibtder Zwischenraum zwischen einzelnen Absätzen trotzdem erhalten (siehe Abbildung 8-14).

Das funktioniert, weil der sonst übliche 1em breite Zwischenraum durch die Zusammen-fassung der Außenabstände zustande kommt. Wenn Sie also einen Außenabstand – inunserem Fall den oberen Außenabstand – entfernen, ist das visuelle Ergebnis so, als hät-ten Sie den Außenabstand nicht verändert.

Abbildung 8-14: Intelligenter Einsatz von Außenabständen


Außenabstände und Inline-ElementeAuch Inline-Elemente können mit Außenabständen versehen werden, wenn die Wirkungauch eine etwas andere ist. Im folgenden Beispiel sollen für stark hervorgehobenen Textvertikale Außenabstände definiert werden:

strong {margin-top: 25px; margin-bottom: 50px;}

Das ist laut Spezifikation erlaubt. Da Sie die Außenabstände aber auf ein nicht-ersetztesInline-Element anwenden, haben diese keinerlei Auswirkung auf die Zeilenhöhe. DaAußenabstände außerdem transparent sind, hat die obige Deklaration also keinerlei visu-elle Auswirkungen.

Es gibt nur drei Eigenschaften, mit denen der Abstand von Zeilen verän-dert werden kann, die nur Text enthalten. Dies sind, wie in Kapitel 7beschrieben, line-height, font-size und vertical-align.

Das oben Gesagte bezieht sich nur auf den oberen und unteren Außenabstand von nicht-ersetzten Inline-Elementen. Für die seitlichen Außenabstände gelten vollkommen andereRegeln. Wir beginnen mit dem einfachen Fall eines kleinen nicht-ersetzten Inline-Elements,das in eine einzelne Zeile passt. Definieren wir für das Element einen rechten oder linkenAußenabstand, wird dieser bei der Darstellung berücksichtigt (siehe Abbildung 8-15):

strong {margin-left: 25px; background: silver;}

Beachten Sie dabei auch den zusätzlichen Leerraum zwischen dem Wortende des vorigenElements und dem Hintergrundrand des Inline-Elements. Sie können natürlich auch aufbeiden Seiten des Inline-Elements Leerraum einfügen:

strong {margin: 25px; background: silver;}

Wie erwartet, erhält das Element in Abbildung 8-16 auf beiden Seiten zusätzlichen Leer-raum, während die Bereiche oberhalb und unterhalb des Elements nicht verändert werden.

Erstreckt sich ein nicht-ersetztes Inline-Element über mehrere Zeilen, verändert sich dieSituation ein wenig. In Abbildung 8-17 sehen Sie, was passiert:

strong {margin: 25px; background: silver;}

Abbildung 8-15: Ein nicht-ersetztes Inline-Element mit einem linken Außenabstand

Abbildung 8-16: Ein nicht-ersetztes Inline-Element mit einem Außenabstand von 25 Pixeln


In diesem Fall wird der linke Außenabstand am Anfang des Elements und der rechteAußenabstand an dessen Ende dargestellt. Außenabstände werden nicht für jede Zeileangelegt. Außerdem ist zu sehen, dass die Zeile ohne die Außenabstände vielleicht ersthinter »Teil« umbrochen wird und nicht schon nach »stark hervorgehobenen«. Außenab-stände können den Beginn des Inhalts verschieben, haben aber ansonsten keine direktenAuswirkungen auf die Zeilenumbrüche. (Zur Verdeutlichung wurde der Absatz hier miteinem 1 Pixel breiten Rahmen umgeben.)

Noch interessanter wird die Situation, wenn wir nicht-ersetzte Inline-Elemente mit nega-tiven Außenabständen versehen. Das hat keinen Einfluss auf die Ober- und Unterseiteoder auf die Zeilenhöhe, sondern nur auf die Seitenränder. Diese können andere Inhalteüberlagern (siehe Abbildung 8-18):

strong {margin: -25px; background: silver;}

Und für ersetzte Elemente ist die Sache wieder anders: Hier haben die AußenabständeAuswirkungen auf die Zeilenhöhe. Diese wird abhängig von der Breite der vertikalenAußenabstände angepasst. Die seitlichen Außenabstände verhalten sich genau wie beinicht-ersetzten Elementen. In Abbildung 8-19 sehen Sie eine Reihe verschiedener Layout-Effekte, die sich mit Außenabständen von ersetzten Inline-Elementen erzielen lassen.

Abbildung 8-17: Ein nicht-ersetztes Inline-Element mit einem 25 Pixel breiten Außenabstand, das sich über zwei Textzeilen erstreckt

Abbildung 8-18: Ein nicht-ersetztes Inline-Element mit einem negativen Außenabstand

Abbildung 8-19: Ersetzte Inline-Elemente mit verschiedenen Werten für die Außenabstände


RahmenInnerhalb der Außenabstände eines Elements befinden sich die Rahmen. Das sind einfacheine oder mehrere Linien, die den Inhalt und die Innenabstände eines Elements umgeben.Der Hintergrund eines Elements endet an der Außenkante des Rahmens, ohne sich in dieAußenabstände zu erstrecken.

Für jeden Rahmen gibt es drei mögliche Eigenschaften: seine Breite (border-width) oderDicke, der Rahmenstil (border-style) und die Farbe (border-color). Der Standardwertfür die Breite eines Außenabstands ist medium. Die exakte Breite für diesen Wert ist nichtausdrücklich definiert, beträgt aber in der Regel zwei Pixel. Und trotz dieses Standard-werts sind normalerweise keine Rahmen zu sehen, weil der Standardwert für den Rah-menstil mit none festgelegt ist. Hat ein Rahmen keinen Rahmenstil, so existiert er auchnicht und wird demnach auch nicht dargestellt. (Diese Nicht-Existenz kann auch denWert für die Breite verändern, wie wir gleich sehen werden.)

Historische Probleme mit Außenabständen

So hilfreich Außenabstände auch sind – mit Navigator 4.x kann es zu einer Reihe vonProblemen kommen.

Die erste Schwierigkeit besteht darin, dass Navigator 4.x vom Autor definierte Regeln zuseinen Standardrändern hinzufügt, anstatt diese zu ersetzen. Nehmen Sie beispielsweisefolgende Regeln:


p {margin-top: 0;}

NN4.x wird die Elemente trotzdem mit dem üblichen Zwischenraum darstellen, weil dieNullwerte zu den bereits vorhandenen Standardrändern hinzugerechnet werden. Wenn Sieden Leerraum entfernen wollen, könnten Sie negative Werte benutzen, indem Sie Absätzenbeispielsweise einen oberen Außenabstand von -1em Breite zuweisen. Diese Lösung funk-tioniert aber leider nicht überall. Bei einem CSS-konformen Browser wird sich in diesem Fallder Text mit anderen Elementen überschneiden, da hier korrekterweise der obere Außenab-stand des Absatzes ersetzt wird.

Und das Problem wird leider noch schlimmer. Wenn Sie Inline-Elemente mit Außenab-ständen versehen, kann das Ihr Layout komplett durcheinander bringen. NN4.x gehtnämlich davon aus, dass sich der Außenabstand eines beliebigen Elements, ob Inline odernicht, auf die linke Kante des Browser-Fensters bezieht. Das ist natürlich vollkommenfalsch! Wenn viele Ihrer Besucher NN4.x benutzen, ist die Verwendung von Außenab-ständen bei Inline-Elementen eine recht riskante und ernst zu nehmende Sache. ZumGlück lassen sich CSS-Anweisungen recht einfach vor NN4.x verstecken. Sie können IhreDokumente also problemlos mit Stilen versehen, ohne sich Sorgen machen zu müssen,dass NN4.x alles durcheinander bringt.

Rahmen | 239

Als Standardfarbe für Rahmen wird die Vordergrundfarbe des Elements selbst benutzt.Wurde also für den Rahmen keine eigene Farbe festgelegt, wird stattdessen die Textfarbedes Elements benutzt. Enthält das Element jedoch keinerlei Text, wie beispielsweise eineausschließlich mit Bildern gefüllte Tabelle, so wird (dank der Vererbung) die Textfarbedes Elternelements als Rahmenfarbe für die Tabelle benutzt. Das ist in den meisten Fällenbody, div oder ein weiteres table-Element. Zur Verdeutlichung stellen wir uns eineTabelle mit einem Rahmen vor, die in einem body-Element enthalten ist und für die diefolgende Regel definiert wurde:

body {color: purple;}

In diesem Fall wird der Rahmen um das table-Element in Purpur dargestellt (sofern derBenutzer nicht eigene Farben für Tabellen definiert). Damit der Rahmen tatsächlich dar-gestellt wird, müssen allerdings noch ein paar Dinge erledigt werden.

Rahmen und HintergründeIn der CSS-Spezifikation ist festgelegt, dass sich der Hintergrund eines Elements bis zurAußenkante des Rahmens erstrecken soll; diese Rahmen sollen »über dem Hintergrunddes Elements« gezeichnet werden. Das ist wichtig, weil der Stil mancher Rahmen nichtdurchgängig ist, sondern z.B. gepunktet oder gestrichelt. In den Zwischenräumen zwi-schen den sichtbaren Teilen des Rahmens soll laut Spezifikation der Hintergrund des Ele-ments zu sehen sein.

In CSS2 hieß es noch, dass sich der Hintergrund nur bis zur Außenkante der Innenabständeerstrecken soll, nicht der Rahmen. Das wurde später korrigiert und in CSS2.1 ist nun klardefiniert, dass sich der Hintergrund des Elements über den Inhalt, die Innenabstände unddie Rahmenbereiche erstrecken soll. Die meisten Browser stimmen in ihrer Darstellung mitdieser Definition überein, einige ältere Programme können sich aber auch anders verhalten.Die Definition von Hintergrundfarben wird in Kapitel 9 genauer besprochen.

Stildefinitionen für RahmenWir beginnen mit den Stildefinitionen für den Rahmenstil (border-style) von Rahmen.Diese sind deshalb am wichtigsten, weil es ohne einen definierten Rahmenstil keinen Rah-men gäbe.

In CSS gibt es ingesamt zehn unterschiedliche und nicht-vererbte Werte für die Eigen-schaft border-style, unter anderem auch none. Wie die verschiedenen Stile dargestelltwerden, sehen Sie in Abbildung 8-20.

Der Wert hidden ist gleichbedeutend mit none, es sei denn, er wird auf Tabellen angewen-det. In diesem Fall wird er zur Lösung von Konflikten zwischen mehreren Rahmen einge-setzt. (Nähere Details finden Sie in Kapitel 11.)


Am wenigsten vorhersehbar ist die Darstellung des Werts double. Dabei werden zweiLinien um das Element gezeichnet. Per Definition muss ihre gemeinsame Breite inklusivedem Zwischenraum den Wert von border-width ergeben (auf den wir im nächsten Ab-schnitt kommen werden). In der CSS-Spezifikation ist nicht festgelegt, ob eine der beidenLinien vielleicht dicker als die andere gezeichnet werden soll oder ob beide gleich breitsein sollen oder ob der Zwischenraum breiter sein soll als die beiden Linien. Alle dieseDinge sind Sache des Benutzerprogramms. Der Autor hat also keine Möglichkeit, dieseEntscheidung zu beeinflussen.

Sämtliche in Abbildung 8-20 gezeigten Rahmen haben für color den Wert gray erhalten,wodurch die visuellen Effekte besser zu sehen sind. Das Aussehen eines bestimmten Rah-menstils hängt immer auch von der Rahmenfarbe ab, wobei auch hier die Darstellung, jenach Benutzerprogramm, variieren kann. In Abbildung 8-21 sehen Sie beispielsweisezwei Möglichkeiten, um den Wert inset darzustellen.

border-style

Werte: [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset |outset ]{1,4} | inherit

Startwert: nicht definiert für Kurzschrift-Eigenschaften


Vererbt: nein

Berechneter Wert: siehe die einzelnen Eigenschaften (border-top-style usw.)

Hinweis: von HTML-Benutzerprogrammen wird nur erwartet, dass sie die Wertesolid und none unterstützen; die übrigen Werte (außer hidden) können auchals solid interpretiert werden

Abbildung 8-20: Mögliche Rahmenstile

Rahmen | 241

Wenn Sie für Bilder in einem noch nicht besuchten Link einen bestimmten Rahmenstildefinieren wollen, können Sie den Wert outset benutzen, um dem Bild das Ausseheneines nicht gedrückten Buttons zu geben (siehe Abbildung 8-22):

a:link img {border-style: outset;}

Auch hier hängt die Rahmenfarbe vom color-Wert des Elements ab – höchstwahrschein-lich der Standardwert blue (auch wenn wir das hier im Buch nicht zeigen können), weildas Bild in einen Hyperlink eingebettet ist. Sie können die Farbe natürlich auch verän-dern, zum Beispiel auf silver, wie hier zu sehen:

a:link img {border-style: outset; color: silver;}

Der Rahmen wird nun in silbergrau, der für das Bild definierten Vordergrundfarbe, darge-stellt. Auch wenn das Bild selbst diese Farbe nicht benutzt, wird sie an den Rahmen wei-tergegeben. Eine weitere Möglichkeit, die Rahmenfarbe zu ändern, werden wir später indiesem Kapitel kennen lernen.

Mehrere Rahmenstile

Sie können einem Rahmen auch mehrere Stile zuweisen. Zum Beispiel:

p.aside {border-style: solid dashed dotted solid;}

Als Ergebnis wird die obere Rahmenseite durchgehend (solid) dargestellt, die rechte Seitegestrichelt (dashed), die untere gepunktet (dotted) und die linke Rahmenseite ist wiederdurchgehend.

Auch hier lautet die Reihenfolge der Werte oben – rechts – unten – links, wie beim Setzenmehrfacher Werte für Außenabstände. Für Rahmenwerte gelten die gleichen Wiederho-lungsregeln wie für Innen- und Außenabstände. Daher ergeben die beiden unten stehen-den Regeln identische Darstellungen (siehe Abbildung 8-23):

p.new1 {border-style: solid dashed none;}

p.new2 {border-style: solid dashed none dashed;}

Abbildung 8-21: Zwei gültige Möglichkeiten, um den Wert inset zu interpretieren

Abbildung 8-22: Ein als Hyperlink benutztes Bild mit einem erhabenen Rahmenstil versehen


Stile für einzelne Rahmenseiten

Gelegentlich wollen Sie nur für eine bestimmte Seite der Elementbox Stile definieren undnicht für alle vier. Zu diesem Zweck gibt es eigene Eigenschaften, zu denen wir jetzt kom-men.

Sofern Sie ein wenig Englisch verstehen, erklären sich die Eigenschaften für einzelne Rah-menseiten fast von selbst. Wollen Sie einen Stil (style) für die Unterseite (bottom) desRahmens (border) festlegen, benutzen Sie hierfür die Eigenschaft border-bottom-style.

Es ist durchaus üblich, border mit einer Eigenschaft für eine bestimmte Rahmenseite zu-sammen zu benutzen. Vielleicht soll der Rahmen einer Überschrift an drei Seiten durchge-hend sein, während die linke Seite nicht dargestellt werden soll (siehe Abbildung 8-24).

Um dies zu erreichen, gibt es zwei Möglichkeiten, die beide gleichbedeutend sind:

h1 {border-style: solid solid solid none;}

/* beide Regeln sind gleichbedeutend */

h1 {border-style: solid; border-left-style: none;}

Abbildung 8-23: Gleichbedeutende Stildefinitionen

border-top-style, border-right-style, border-bottom-style, border-left-style

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

Startwert: none


Vererbt: nein


Abbildung 8-24: Die linke Rahmenseite entfernen

Rahmen | 243

Bei der zweiten Möglichkeit müssen Sie nur bedenken, dass die Regel für die einzelneRahmenseite nach der Kurzschrift-Regel kommen muss. Wenn Sie nämlich border-style: solid schreiben, bedeutet das eigentlich border-style: solid solid solid solid.Wenn Sie die Regel border-style-left: none vor die border-style-Deklaration stellen,wird der Wert der Kurzschrift-Regel den einzelnen Wert none einfach überschreiben.

Vielleicht ist Ihnen aufgefallen, dass die Rahmen in den bisherigen Beispielen alle die glei-che Breite hatten. Tatsächlich wurde aber einfach die Standardbreite verwendet. AlsNächstes werden Sie mehr über diesen Standardwert und viele andere Dinge lernen.

RahmenbreitenHat der Rahmen erst einmal einen Rahmenstil, besteht der nächste Schritt darin, ihm mitder Eigenschaft border-width eine bestimmte Breite zuzuweisen.

Sie können auch eine der verwandten Eigenschaften benutzen.

Alle oben genannten Eigenschaften werden dazu benutzt, um die Breite einer bestimmtenRahmenseite festzulegen.

Laut Spezifikation von CSS2.1 kann die Breite von Rahmen nicht mit Pro-zentwerten definiert werden.

border-width

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

Startwert: für Kurzschrift-Eigenschaften nicht definiert


Vererbt: nein


border-top-width, border-right-width, border-bottom-width, border-left-width

Werte: thin | medium | thick | <Breite> | inherit

Startwert: medium


Vererbt: nein

Berechneter Wert: absolute Breite; 0, sofern der Rahmenstil den Wert none oder hidden erhaltenhat


Die Breite eines Rahmens kann vier verschiedene Werte annehmen: Sie können eine Län-geneinheit, wie 4px oder 0.1em, oder eins von drei Schlüsselwörtern verwenden. Diese lau-ten thin (dünn), medium (der Standardwert) und thick (dick). Diese Schlüsselwörtermüssen nicht unbedingt einer bestimmten absoluten Breite entsprechen, sondern stehennur im Verhältnis zueinander. Gemäß der Spezifikation ist thick immer breiter als medium,das seinerseits breiter ist als thin.

Die exakten Breiten sind jedoch nicht festgelegt, so dass ein Benutzerprogramm hierfür dieWerte 5px, 3px und 2px verwenden kann, während ein anderes stattdessen 3px, 2px und 1pxbenutzt. Unabhängig davon, welche Werte ein Benutzerprogramm tatsächlich für dieSchlüsselwörter benutzt, werden sie im gesamten Dokument gleich bleiben. Entsprichtmedium also beispielsweise 2px, so ist ein Rahmen mit der Breite medium immer zwei Pixelbreit, egal ob er ein h1- oder ein p-Element umgibt. Abbildung 8-25 zeigt die Benutzung derdrei Schlüsselwörter und ihre Beziehung zueinander und zum enthaltenen Inhalt.

Nehmen wir einen Absatz mit definierten Außenabständen, einer Hintergrundfarbe undeinem festgelegten Rahmenstil:

p {margin: 5px; background-color: silver;

border-style: solid;}

Standardmäßig ist der Wert für die Breite des Rahmens medium. Das lässt sich aber ganzeinfach anpassen:


border-style: solid; border-width: thick;}

Selbstverständlich kann man die Einstellung für die Breite auch übertreiben, wie inAbbildung 8-26, wo der Rahmen eine Breite von 50 Pixeln erhalten hat:


border-style: solid; border-width: 50px;}

Abbildung 8-25: Die Beziehung der einzelnen Schlüsselwörter für Rahmenbreiten zueinander

Rahmen | 245

Auch die Breiten können für die verschiedenen Seiten einzeln festgelegt werden. Hierfürkommen wieder die bereits zu Beginn dieses Abschnitts besprochenen speziellen Eigen-schaften zum Einsatz, wie beispielsweise border-bottom-width. Sie können aber auch hierdie Werte-Wiederholung mit border-width benutzen (siehe Abbildung 8-27):

h1 {border-style: dotted; border-width: thin 0;}

p {border-style: solid; border-width: 15px 2px 7px 4px;}

Kein Rahmen

Bisher haben wir uns nur mit sichtbaren Rahmen beschäftigt, deren Rahmenstil beispiels-weise als solid oder outset definiert war. Als Nächstes wollen wir sehen, was passiert,wenn Sie für border-style den Wert none benutzen:

p {margin: 5px; border-style: none; border-width: 20px;}

Obwohl für den Rahmen eine Breite von 20px angegeben ist, lautet der Wert für den Rah-menstil none. In diesem Fall fehlt dem Rahmen nicht nur der Rahmenstil, sondern auchseine Breite. Der Rahmen verschwindet einfach.

Wie Sie sich erinnern, haben wir früher bereits erwähnt, dass ein Rahmen mit dem Rah-menstil none einfach nicht existiert. Diese Worte wurden sorgsam gewählt, denn sie hel-

Abbildung 8-26: So richtig breite Außenabstände

Abbildung 8-27: Werte-Wiederholung und ungleiche Rahmenbreiten


fen beim Verständnis der Vorgänge. Wenn ein Rahmen nicht existiert, kann er auch keineBreite haben. Demnach ist der Wert für die Breite automatisch 0 (null), egal was Sie zudefinieren versuchen. Ein leeres Glas bezeichnen Sie ja auch nicht als halb voll mit nichts.Sie können die Menge des Inhalts nur messen, sofern auch Inhalt existiert. Genausomacht es nur Sinn, über die Breite eines Rahmens zu sprechen, der auch existiert.

Das oben Gesagte ist wichtig, weil häufig vergessen wird, einen Rahmenstil festzulegen.Dieser Fehler kann seinerseits zu vielen anderen Frustrationen führen, weil die Stildefini-tionen auf den ersten Blick korrekt erscheinen. Mit der folgenden Regel legen Sie fest,dass alle h1-Elemente keinen Rahmen haben sollen, auch keinen, der 20 Pixel breit ist:

h1 {border-width: 20px;}

Der Standardwert für border-style ist, wie gesagt, none. Wollen Sie also einen Rahmendefinieren, müssen Sie ihm auch ausdrücklich einen Rahmenstil zuweisen.

RahmenfarbenIm Vergleich mit den anderen Aspekten von Rahmen ist das Setzen einer Farbe verhält-nismäßig einfach. In CSS wird hierfür die Eigenschaft border-color verwendet, der bis zuvier Farbwerte zugewiesen werden können.

Gibt es weniger als vier Werte, greift auch hier die Werte-Wiederholung. Im nächsten Bei-spiel soll für h1-Elemente die obere und untere Rahmenseite dünn und schwarz gezeichnetwerden, während die linke und rechte Seite dick und grau dargestellt werden sollen.Absätze (p) sollen einen mitteldicken grauen Rahmen erhalten. Dazu können Sie die fol-genden Stildefinitionen verwenden (siehe Abbildung 8-28):

h1 {border-style: solid; border-width: thin thick; border-color: black gray;}

p {border-style: solid; border-color: gray;}

Geben Sie nur einen Farbwert an, wird dieser, wie beim Absatz aus dem vorigen Beispiel,auf alle vier Seiten angewendet. Wenn Sie dagegen vier Werte angeben, können Sie allenSeiten unterschiedliche Farben zuweisen. Hierbei kann ein beliebiger Farbwert benutztwerden (benannte Farben, hexadezimale Werte, RGB-Werte usw.):

p {border-style: solid; border-width: thick;

border-color: black rgb(25%,25%,25%) #808080 silver;}

border-color

Werte: [ <Farbwert> | transparent ]{1,4} | inherit



Vererbt: nein

Berechneter Wert: siehe die einzelnen Eigenschaften (border-top-color usw.)

Rahmen | 247

Wie bereits gesagt, entspricht die Rahmenfarbe der Vordergrundfarbe des Elements,sofern Sie nicht explizit eine eigene festlegen. Daher wird die folgende Deklaration darge-stellt, wie in Abbildung 8-29 gezeigt:

p.shade1 {border-style: solid; border-width: thick; color: gray;}

p.shade2 {border-style: solid; border-width: thick; color: gray;

border-color: black;}

Dadurch hat der erste Absatz den Farbwert gray, weil dieser als Vordergrundfarbe für denAbsatz definiert wurde. Der zweite Absatz hat dagegen einen schwarzen Rahmen, weildiese Farbe über die Eigenschaft border-color ausdrücklich festgeschrieben wurde.

Wie für den Rahmenstil und die Breite gibt es auch für die Rahmenfarbe Eigenschaften,mit denen nur einzelne Seiten angesprochen werden können. Um Überschriften miteinem durchgehenden schwarzen Rahmen zu versehen, bei dem nur die rechte Seite graudargestellt werden soll, können Sie Folgendes schreiben:

h1 {border-style: solid; border-color: black; border-right-color: gray;}

Abbildung 8-28: Verschiedene Stile für Rahmen

Abbildung 8-29: Rahmenfarben basieren auf der Vordergrundfarbe des Elements und dem Wert der Eigenschaft border-color

border-top-color, border-right-color, border-bottom-color, border-left-color

Werte: <Farbwert> | transparent | inherit

Startwert: der Wert von color für das betreffende Element


Vererbt: nein

Berechneter Wert: wurde kein eigener Wert angegeben, benutze den berechneten Wert für dieEigenschaft color des gleichen Elements; ansonsten wie angegeben


Transparente Rahmen

Wie Sie wissen, hat ein Rahmen ohne Rahmenstil auch keine Breite. Es gibt jedoch Situa-tionen, in denen Sie einen unsichtbaren Rahmen festlegen wollen. Für diesen Zweck gibtes den Wert transparent (eingeführt in CSS2). Dieser Wert wird verwendet, um einenunsichtbaren Rahmen mit einer festlegbaren Breite zu zeichnen.

Wir stellen uns drei Links vor, deren Rahmen standardmäßig unsichtbar sein sollen. Wennaber mit dem Mauszeiger darüber gefahren wird, soll sich der Rahmenstil so ändern, dasssie als gedrückte Buttons dargestellt werden. Das können Sie erreichen, indem Sie für alleanderen Zustände festlegen, dass die Rahmen unsichtbar sein sollen:

a:link, a:visited {border-style: solid; border-width: 5px;

border-color: transparent;}

a:hover {border-color: gray;}

Die Auswirkungen sehen Sie in Abbildung 8-30.

In gewissem Sinne können Sie Rahmen mit dem Wert transparent benutzen, als seien siezusätzliche Innenabstände. Allerdings gibt es hier den zusätzlichen Vorteil, dass Sie dieRahmen nach Bedarf sichtbar machen können. Die Ähnlichkeit mit Innenabständen be-steht, weil der Hintergrund des Elements auch hinter dem Rahmen zu sehen ist.

Im Internet Explorer für Windows gibt es keine Unterstützung für denWert transparent. Stattdessen wird für den Rahmen der color-Wert desElements benutzt.

Kurzschrift-Eigenschaften für Rahmen Leider sind Kurzschrift-Eigenschaften wie border-color und border-style nicht immer sohilfreich, wie es auf den ersten Blick scheint. Vielleicht wollen Sie nur die Rahmenunter-seite aller h1-Elemente dick, durchgehend und grau darstellen. Wenn Sie hierfür nur diebisher benutzten Eigenschaften anwenden wollen, wird die Gestaltung eines solchen Rah-mens ziemlich schwer. Hierzu zwei Beispiele:

h1 {border-bottom-width: thick; /* Möglichkeit 1 */

border-bottom-style: solid;

border-bottom-color: gray;}

h1 {border-width: 0 0 thick; /* Möglichkeit 2 */

border-style: none none solid;

border-color: gray;}

Abbildung 8-30: Die Verwendung von transparenten Rahmen

Rahmen | 249

Keine der beiden Möglichkeiten ist ideal, weil sie eine Menge Tipparbeit erfordern. ZumGlück gibt es aber noch eine bessere Möglichkeit:

h1 {border-bottom: thick solid gray;}

Durch diese Anweisung werden die Werte nur auf die Rahmenunterseite bezogen (sieheAbbildung 8-31). Gleichzeitig behalten die übrigen Seiten ihre Standardwerte. Da derStandard-Rahmenstil mit none festgelegt ist, werden die übrigen Seiten ohne Außenab-stände angezeigt.

Wie Sie vermutlich schon messerscharf kombiniert haben, gibt es auch hier vier Kurz-schrift-Eigenschaften.

Mit diesen Eigenschaften lassen sich recht komplexe Rahmen erzeugen (sieheAbbildung 8-32):

h1 {border-left: 3px solid gray;

border-right: black 0.25em dotted;

border-top: thick silver inset;

border-bottom: double rgb(33%,33%,33%) 10px;}

Abbildung 8-31: Die untere Rahmenseite mittels einer Kurzschrift-Eigenschaft definieren

border-top, border-right, border-bottom, border-left

Werte: [ <Rahmenbreite> || <Rahmenstil> || <Rahmenfarbe> ] | inherit



Vererbt: nein

Berechneter Wert: siehe die jeweiligen Eigenschaften (border-width usw.)

Abbildung 8-32: Sehr komplexe Rahmen


Wie Sie sehen, spielt hierbei die Reihenfolge der Werte keine Rolle. Die folgenden dreiRegeln erzeugen alle den gleichen Rahmeneffekt:

h1 {border-bottom: 3px solid gray;}

h2 {border-bottom: solid gray 3px;}

h3 {border-bottom: 3px gray solid;}

Wenn Sie einige Werte weglassen, werden stattdessen die Standardwerte verwendet:

h3 {color: gray; border-bottom: 3px solid;}

Da keine spezielle Farbe für den Rahmen definiert wurde, wird stattdessen der Standard-wert (die Vordergrundfarbe des Elements) benutzt. Denken Sie aber daran: Wenn Sie kei-nen Wert für den Rahmenstil angeben, kommt der Standardwert none zum Tragen, wo-durch der Rahmen nicht angezeigt wird.

Wenn Sie jedoch einen bestimmten Rahmenstil festlegen, wird der Rahmen angelegt. Fürdas nächste Beispiel soll nur eine gestrichelte (dashed) Rahmenoberseite angezeigt werden,für die Standardbreite medium benutzt werden soll und als Farbe die Vordergrundfarbe desElements; dafür reicht die unten stehende Regel völlig aus (siehe Abbildung 8-33):

p.roof {border-top: dashed;}

Hierbei ist zu bedenken, dass diese »Seiten«-Eigenschaften immer nur für eine bestimmteRahmenseite gelten. Es gibt also keine Werte-Wiederholung; das würde einfach keinenSinn machen. Für jeden Wertetyp kann es auch nur einen Wert geben; jeweils einen fürdie Breite, einen für die Farbe und einen für den Rahmenstil. Folgende Deklaration istdemnach falsch:

h3 {border-top: thin thick solid purple;} /* zwei Werte für die Breite -- FALSCH */

In solchen Fällen wird die gesamte Anweisung ungültig, wodurch ein Benutzerprogrammdie Regel vollständig ignorieren wird.

Abbildung 8-33: Nur eine gestrichelte Rahmenoberseite darstellen

Rahmen | 251

Allgemeine RahmenUnd nun kommen wir zur kürzesten Kurzschrift-Eigenschaft für Rahmen: border.

Diese Eigenschaft hat den Vorteil, sehr kompakt zu sein, auch wenn dies ein paar Ein-schränkungen mit sich bringt. Bevor wir uns aber darum kümmern, wollen wir erst ein-mal sehen, wie border funktioniert. So ist es beispielsweise sehr einfach, alle h1-Elementemit einem durchgehenden dicken, silbergrauen Rahmen zu versehen. Die folgende Dekla-ration wird dargestellt, wie in Abbildung 8-34 gezeigt:

h1 {border: thick silver solid;}

Die Werte werden auf alle vier Seiten angewendet. Diese Schreibweise ist der nächstbes-ten Alternative sicher vorzuziehen, die so aussieht:

h1 {border-top: thick silver solid;

border-bottom: thick silver solid;

border-right: thick silver solid;

border-left: thick silver solid;} /* das Gleiche wie im vorigen Beispiel */

Der Nachteil von border besteht darin, dass Sie Breiten, Farben und Rahmenstile nur»global« ändern können. Die Werte für border gelten also für alle vier Seiten gleicherma-ßen. Soll eine bestimmte Seite eines Elements anders dargestellt werden, müssen Sie hier-für eine der anderen Rahmen-Eigenschaften verwenden. Natürlich können Sie hier dieKaskadierung zu Ihrem Vorteil nutzen:

H1 {border: thick silver solid;

border-left-width: 20px;}

Die zweite Regel überschreibt den in der ersten Regel zugewiesenen Wert für die linkeRahmenseite und ersetzt somit thick durch 20px (siehe Abbildung 8-35).

border

Werte: [ <Rahmenbreite> || <Rahmenstil> || <Rahmenfarbe> ] | inherit



Vererbt: nein


Abbildung 8-34: Eine sehr kurze Stildefinition für Rahmen


Auch hier sollten Sie die gleiche Vorsicht walten lassen wie bei den anderen Kurzschrift-Eigenschaften auch: Wenn Sie einen Wert weglassen, wird automatisch der Standardwertverwendet. Das kann zu unerwünschten Nebeneffekten führen:

h4 {border-style: dashed solid double;}

h4 {border: medium green;}

Hier wurde in der zweiten Regel kein Rahmenstil festgelegt. Demnach wird der Standard-wert none benutzt, wodurch h4-Elemente ohne jegliche Rahmen dargestellt werden.

Rahmen für Inline-ElementeDer Umgang mit Rahmen für Inline-Elemente sollte Ihnen mittlerweile vertraut sein. Esgelten fast die gleichen Regeln wie für Außenabstände und Inline-Elemente sowie Dinge,die wir bereits in Kapitel 7 besprochen haben. Ich werde trotzdem noch einmal kurz dar-auf eingehen.

Selbst die Dicke eines Rahmens hat keinen Einfluss auf die Zeilenhöhe des Elements. Sokönnen wir beispielsweise die Rahmenober- und -unterseite für hervorgehobenen Textfolgendermaßen definieren:

strong {border-top: 10px solid gray; border-bottom: 5px solid silver;}

Laut Spezifikation ist diese Schreibweise erlaubt, ohne dass dies Einfluss auf die Zeilen-höhe hat. Weil den Rahmen ein Rahmenstil zugewiesen wurde, werden sie auch darge-stellt, wie Sie in Abbildung 8-36 mit eigenen Augen sehen können.

Irgendwo müssen die Rahmen ja dargestellt werden, und jetzt wissen Sie auch wo.

Wie auch bei Außenabständen gilt dies nur für die Ober- und Unterseite von Rahmen, wäh-rend für die Seitenränder eigene Regeln gelten. Definieren Sie eine rechte oder linke Rah-menseite, so verschiebt deren Darstellung den umgebenden Text (siehe Abbildung 8-37):

strong {border-left: 25px double gray; background: silver;}

Abbildung 8-35: Die Kaskadierung zum eigenen Vorteil nutzen

Abbildung 8-36: Rahmen für nicht-ersetzte Inline-Elemente

Innenabstände | 253

Wie bei Außenabständen haben die Box-Eigenschaften für Inline-Elemente auch bei Rah-men nur indirekten Einfluss auf die Zeilenumbrüche. Die einzige Auswirkung bestehtdarin, dass der Platzbedarf für die Rahmen dafür sorgt, dass Teile der Zeile verschobenwerden. Dadurch kann eventuell ein anderes Wort am Ende der Zeile stehen als vorher.

Mit CSS-Rahmen gibt es eine Reihe von Kompatibilitätsproblemen. Amärgerlichsten ist dabei die Tatsache, dass Navigator 4.x zwischen denInnenabständen und dem Rahmen einen Zwischenraum einfügt, anstattdiese direkt aneinander grenzend darzustellen. Beim Navigator 4.x ist esprinzipiell sehr gefährlich, Rahmen und andere Box-Eigenschaften fürInline-Elemente zu definieren. Das gilt für Rahmen wie für Außenabständegleichermaßen – und zwar aus denselben (bereits in diesem Kapitel be-sprochenen) Gründen.

InnenabständeZwischen den Rahmen und dem Inhaltsbereich befinden sich die so genannten Innen-abstände (Padding) der Elementbox. Kennt man den englischen Namen, ist es keineÜberraschung, dass die einfachste Eigenschaft zum Beeinflussen dieses Bereichs den Na-men padding trägt.

Diese Eigenschaft kann mit einer beliebigen Längeneinheit oder einem Prozentwert defi-niert werden. Sollen beispielsweise alle h1-Elemente rundherum einen Innenabstand von10 Pixeln haben, können Sie einfach Folgendes schreiben:

h1 {padding: 10px; background-color: silver;}

Abbildung 8-37: Ein nicht-ersetztes Inline-Element, für das die linke Rahmenseite definiert wurde

padding

Werte: [ <Breite> | <Prozentwert> ]{1,4} | inherit



Vererbt: nein


Berechneter Wert: siehe die einzelnen Eigenschaften (padding-top usw.)

Hinweis: Innenabstände können keine negativen Werte haben


Wenn die Seiten der h1-Elemente dagegen ungleiche Innenabstände haben sollen, wäh-rend bei h2-Elementen die Innenabstände gleichmäßig verteilt sind, können Sie dieseRegeln benutzen:

h1 {padding: 10px 0.25em 3ex 3cm;} /* ungleiche Innenabstände */

h2 {padding: 0.5em 2em;} /* automatische Wertewiederholung für Unter- und linke Seite */

Die Innenabstände sind für sich genommen etwa schwer zu erkennen. Zur Verdeutli-chung haben wir daher in Abbildung 8-38 eine Hintergrundfarbe definiert:

h1 {padding: 10px 0.25em 3ex 3cm; background: gray;}

h2 {padding: 0.5em 2em; background: silver;}

Wie in Abbildung 8-38 zu sehen, erstreckt sich der Hintergrund des Elements über dieInnenabstände bis zur Außenkante eventuell definierter Rahmen.

Standardmäßig besitzen die Elemente keine Innenabstände. Ursprünglich wurde der Zwi-schenraum zwischen einzelnen Absätzen nur anhand von Außenabständen erzeugt. OhneInnenabstände kommt der Rahmen für ein Element dessen Inhalt aber sehr nahe. Daher istes gar nicht schlecht, den Innenabständen für das Element auch eine gewisse Breite zuzu-gestehen (siehe Abbildung 8-39).

Auch ohne die Verwendung von Rahmen können sich Innenabstände sehr eigenartig ver-halten. Sehen Sie sich hierzu einmal die folgenden Regeln an:

p {margin: 1em 0; padding: 1em 0;}

p.one, p.three {background: gray;}

p.two, p.four {background: silver;}

p.three, p.four {margin: 0;}

Hier wurden für alle Absätze der obere und untere Innenabstand mit je 1em festgelegt.Zwei der vier Absätze besitzen zusätzlich einen oberen und unteren Außenabstand von1em Breite. Die Ergebnisse dieser Stildefinition sehen Sie in Abbildung 8-40.

Die ersten beiden Absätze besitzen Innenabstände und sind auf Grund der vertikalenZusammenfassung der Außenabstände nur einer voneinander entfernt. Durch den unteren

Abbildung 8-38: Ungleiche Innenabstände mit Hintergrundfarbe


Außenabstand des zweiten Absatzes sind Absatz zwei und drei ebenfalls ein em voneinan-der entfernt. Zwischen dem dritten und vierten Absatz gibt es jedoch keinen Zwischen-raum, da für diese Absätze keine Außenabstände definiert wurden. Dennoch haben dieInhaltsbereiche einen gewissen Abstand zueinander. Dieser beträgt hier zwei em, weil esfür Innenabstände keine vertikale Zusammenfassung gibt. Die verschiedenen Hinter-grundfarben sollen verdeutlichen, wo ein Absatz aufhört und der nächste anfängt.

Deshalb ist es schwieriger, Innen- statt Außenabstände zum Trennen von Inhaltsbereichenzu verwenden. Gleichzeitig kann dieses Vorgehen aber auch von Vorteil sein. Um Absätze

Abbildung 8-39: Innenabstände bei Block-Elementen mit Rahmen

Abbildung 8-40: Der Unterschied zwischen Innen- und Außenabständen


beispielsweise mit Hilfe von Innenabständen um eine Zeilenbreite voneinander zu tren-nen, müssen Sie Folgendes schreiben:

p {margin: 0; padding: 0.5em 0;}

Die jeweils ein halbes em breiten oberen und unteren Innenabstände trennen die Absätzegemeinsam um ein em. Auf diese Weise können Sie Absätze bei Bedarf durch Rahmenvoneinander trennen, wobei die Rahmenseiten einander berühren und eine durchge-hende Linie bilden. Beide Effekte sehen Sie in Abbildung 8-41.

p {margin: 0; padding: 0.5em 0; border-bottom: 1px solid gray;

border-left: 3px double black;}

Prozentwerte und InnenabständeWie Sie wissen, können Sie die Innenabstände eines Elements auch mit Prozentwertendefinieren. Wie bei Außenabständen werden auch hier die Prozentwerte in Bezug auf dieBreite des Elternelements berechnet. Ändert sich die Breite des Elternelements, kann so dieBreite des Elements entsprechend angepasst werden. Nehmen wir als Beispiel folgendeRegeln (siehe Abbildung 8-42):

p {padding: 10%; background-color: silver;}


<p>Dieser Absatz befindet sich innerhalb eines DIV-Elements mit einer Breite von

200 Pixeln. Seine Innenabstände sollen 10% der Breite des Elternelements haben.

Demnach wird dieser Absatz mit Innenabständen von 20 Pixeln umgeben.</p>

</div>

Abbildung 8-41: Innenabstände anstelle von Außenabständen benutzen



<p>Dieser Absatz befindet sich innerhalb eines DIV-Elements mit einer Breite von

100 Pixeln. Seine Innenabstände sollen immer noch 10% der Breite des

Elternelements haben. Diese sind mit 10 Pixeln also nur noch halb so breit

wie im vorigen Absatz.</p>

</div>

Wie Sie sehen, haben die oberen und unteren Innenabstände die gleiche Breite wie dieseitlichen. Als Maßstab für die Prozentwerte wird nämlich auch hier die Breite des Eltern-elements benutzt und nicht dessen Höhe. Diese Methode kennen Sie bereits aus demAbschnitt »Außenabstände«, wo Sie gerne noch einmal nachschlagen können, wenn Siewissen wollen, wie die Berechnung im Detail funktioniert.

Einseitige InnenabständeRichtig! Es gibt natürlich auch Eigenschaften, mit denen Sie die Innenabstände für dieeinzelnen Seiten des Elements festlegen können, ohne dass sich diese gegenseitig beein-flussen.

Abbildung 8-42: Innenabstände, Prozentwerte und die Breite des Elternelements


Diese Eigenschaften verhalten sich so, wie Sie es erwarten. Die beiden folgenden Regelnerzeugen die gleichen Innenabstände:

h1 {padding: 0 0 0 0.25in;}

h2 {padding-left: 0.25in;}

Innenabstände für Inline-ElementeBei Inline-Elementen gibt es einen wesentlichen Unterschied zwischen Innen- und Außen-abständen. Wir beginnen mit einer Illustration der seitlichen Innenabstände. Werden fürden linken und den rechten Innenabstand Werte gesetzt, so sind die Innenabstände auchsichtbar (siehe Abbildung 8-43):

strong {padding-left: 10px; padding-right: 10px; background: silver;}

Beachten Sie den seitlich breiter erscheinenden Hintergrund; das sind Ihre Innenab-stände. Wie bei Außenanständen wird der linke Innenabstand am Anfang des Elementsgezeichnet, während der rechte Innenabstand am Ende des Elements dargestellt wird.Innenabstände für nicht-ersetzte Inline-Elemente werden jedoch nicht am Anfang undEnde jeder Zeile eingesetzt. Das Gleiche gilt übrigens auch für ersetzte Elemente, auchwenn diese nicht über mehrere Zeilen umbrochen werden.

Theoretisch kann der Hintergrund eines nicht-ersetzten Inline-Elements, für das eine Hin-tergrundfarbe und Innenabstände definiert wurden, auch ober- und unterhalb des Ele-ments angezeigt werden:

strong {padding-top: 0.5em; background-color: silver;}

In Abbildung 8-44 sehen Sie, wie das aussehen könnte.

Selbstverständlich ändert sich die Zeilenhöhe nicht, aber weil Innenabstände den Hinter-grund ausdehnen, sollte dieser auch zu sehen sein, oder etwa nicht? Richtig! Der zusätz-

padding-top, padding-right, padding-bottom, padding-left

Werte: <Breite> | <Prozentwert> | inherit

Startwert: 0


Vererbt: nein

Prozentwerte: beziehen sich auf die Breite des umgebenden Blocks (Elternelements)

Berechneter Wert: für Prozentwerte wie angegeben; für Breitenangaben die absolute Breite

Hinweis: Innenabstände können keine negativen Werte annehmen

Abbildung 8-43: Innenabstände bei einem nicht-ersetzten Inline-Element


liche Hintergrund ist sichtbar und überlappt dabei die zuvor gezeichneten Zeilen, was indiesem Fall zu erwarten war.

Innenabstände für ersetzte ElementeVielleicht überrascht es Sie, aber es ist tatsächlich möglich, auch für ersetzte ElementeInnenabstände zu definieren. Allerdings gibt es, während dieses Buch geschrieben wird,noch einige Einschränkungen.

Am größten ist die Überraschung, dass Sie ein Bild mit Innenabständen versehen können,wie hier:

img {background: silver; padding: 1em;}

Unabhängig davon, ob es sich bei dem ersetzten Element um ein Block- oder Inline-Ele-ment handelt, werden die Innenabstände dessen Inhalt umgeben. Dabei füllt die für dasElement definierte Hintergrundfarbe auch die Innenabstände aus (siehe Abbildung 8-45).Gleichzeitig ist zu sehen, wie die Innenabstände den Rahmen vom Inhalt weg nach außenverschieben.

Beim Erstellen der Spezifikation von CSS2.1 gab es einige Verwirrung darüber, wie Formu-larelemente, wie etwa input, mit Stilen versehen werden könnten. So ist es beispielsweisenicht ganz klar, wo Innenabstände für Checkboxen (Ankreuzfelder) dargestellt werdensollen. Deshalb werden Innenabstände (und andere Stilelemente) für Formularelementevon einigen Browsern, wie etwa Mozilla, ignoriert. Es bleibt zu hoffen, dass es in Zukunfteine CSS-Spezifikation geben wird, die sich auch mit Stildefinitionen für Formularele-mente befasst.

Die zweite Einschränkung besteht darin, dass einige ältere Browser (darunter IE5 fürWindows) keine Innenabstände für Bilder darstellen.

Abbildung 8-44: Zusätzliche Innenabstände für nicht-ersetzte Inline-Elemente

Abbildung 8-45: Innenabstände für ersetzte Elemente


ZusammenfassungDie Möglichkeit, für ein beliebiges Element Außenabstände, Rahmen und Innenabständezu definieren, gehört zu den Dingen, die CSS einige Stufen über das traditionelle Web-Markup erheben. Wenn man früher eine Überschrift in einem farbigen Kasten darstellenwollte, musste man die Überschrift mit einer Tabelle umgeben, was für einen so simplenEffekt einfach zu viel Aufwand ist. Das sind die Dinge, die CSS so ansprechend machen.

| 261

KAPITEL 9

Farben und Hintergründe

Erinnern Sie sich noch an den Moment, als Sie zum ersten Mal die Farben einer Webseitegeändert haben? Anstatt immer nur schwarzen Text auf grauem Hintergrund und blaueLinks zu verwenden, war es plötzlich möglich, jede Farbkombination einzustellen, dieIhnen gerade in den Sinn kam – beispielsweise hellblauen Text vor einem schwarzen Hin-tergrund mit limonenfarbenen Hyperlinks. Von dort aus war es dank des Tags <FONTCOLOR="..."> nur noch ein kleiner Schritt zu mehrfarbigem Text und Hintergrundbildern.Scheinbar war plötzlich alles möglich. Mit CSS wurde das Thema Farben und Hinter-gründe quasi neu definiert. Ohne ein einziges FONT- oder TABLE-Tag können Sie nun einebeliebige Anzahl von Farben und Hintergründen auf einer Seite gemeinsam benutzen.

FarbenWenn Sie eine Seite entwerfen, müssen Sie vor Arbeitsbeginn gut planen. Das gilt beson-ders für Farben. So müssen Sie sich vorher überlegen, ob die gelben Hyperlinks auch mitder Hintergrundfarbe zusammenpassen. Wird der Benutzer durch zu viele Farben über-fordert? (Antwort: ja.) Finden Ihre Benutzer die Hyperlinks auch dann, wenn Sie derenStandardfarbe ändern? (Haben Text und Links beispielsweise die gleiche Farbe, ist eswesentlich schwieriger, die Links zu finden, sofern diese nicht unterstrichen sind.)

Trotz vorausschauender Planung wird fast jeder Autor die Farben der Elemente zurechtirgendwann ändern wollen. Mit Bedacht eingesetzt, können Farben die Präsentationeines Dokuments stark verbessern. Nehmen wir als Beispiel ein Dokument, in dem alleh1-Elemente grün dargestellt werden sollen, alle h2-Elemente blau und alle Hyperlinksdunkelrot. Einige der h2-Überschriften beziehen sich auf andere Informationen und sol-len daher dunkelblau angezeigt werden. Die einfachste Methode dazu besteht darin, die-sen Überschriften eine eigene Klasse zuzuweisen:

h1 {color: green;}

h2 {color: blue;}

h2.dunkelblau {color: navy;}

a {color: maroon;} /* kastanienbraun */

262 | Kapitel 9: Farben und Hintergründe

In der Regel ist es besser, die Klassennamen nach den enthaltenen Infor-mationen zu benennen und nicht nach dem benutzten visuellen Effekt.Wenn beispielsweise alle h2-Überschriften für Unterabschnitte dunkelblaudargestellt werden sollen, ist es sinnvoller, einen Klassennamen wie unteroder auch unter-abschnitt zu wählen, der einerseits eine richtige Bedeu-tung hat und gleichzeitig von der Präsentation unabhängig ist. Vielleichtsollen ja später einmal die Überschriften dunkelrot eingefärbt werden, undspätestens dann wäre eine Definition wie h2.dunkelblau {color: maroon;}eher verwirrend.

Schon an diesem einfachen Beispiel können Sie sehen, dass eine gute Planung bei der Ver-wendung von Stylesheets eine große Hilfe sein kann, um alle zur Verfügung stehendenWerkzeuge auch richtig nutzen zu können. Als Nächstes soll die Seite aus dem letztenBeispiel um eine Navigationsleiste erweitert werden. Innerhalb dieser Navigationsleistesollen die Links gelb anstelle von rot angezeigt werden. Wenn Sie die Leiste mit der IDnavigation versehen, brauchen Sie Ihr Stylesheet nur um diese Regel zu erweitern:

#navigation a {color: yellow;}

Ohne die übrigen Links auf der Seite zu verändern, wird durch diese Regel die Linkfarbeinnerhalb der Navigationsleiste geändert.

Innerhalb von CSS hat ein Farbton immer das gleiche Aussehen. Setzen Sie den Wert voncolor für ein Dokument auf red und setzen danach die Textfarbe auf den gleichen Wert,wird dieser exakt im gleichen Farbton dargestellt. HTML funktioniert auch so. Wenn Siezu Zeiten von HTML 3.2 die Deklaration <BODY LINK="blue" VLINK="blue"> verwendethatten, konnten Sie davon ausgehen, dass alle Links, unabhängig von ihrer Position imDokument, auch im gleichen Blauton angezeigt werden.

Halten Sie auch bei CSS an dieser Denkweise fest. Wenn Sie in CSS festlegen, dass colorfür alle Links (besuchte und unbesuchte) den Wert blue haben soll, so wird dies auch aus-geführt. Wenn Sie auf die gleiche Weise green als Hintergrundfarbe für das Element bodyfestlegen, wird dieser auch insgesamt grün dargestellt.

In CSS ist es möglich, für jedes Element eigene Vorder- und Hintergrundfarben zu defi-nieren; von body-Elementen über Hervorhebungen und Hyperlinks kann fast alles seineeigenen Werte haben. Das gilt genauso für Listeneinträge, komplette Listen, Überschrif-ten, Tabellenzellen und sogar (wenn auch eingeschränkt) für Bilder. Um die Funktions-weise zu verstehen, ist es jedoch erst einmal wichtig zu wissen, was man eigentlich unterdem Vordergrund eines Elements versteht.

Beginnen wir also mit dem Vordergrund. Das ist, allgemein gesehen, einfach der in einemElement enthaltene Text, auch wenn zum Vordergrund eigentlich auch die Rahmen umein Element gehören. Daher gibt es zwei Möglichkeiten, die Vordergrundfarbe eines Ele-ments zu beeinflussen: durch die Verwendung der Eigenschaft color und durch das Set-zen der Rahmenfarbe mit einer der verschiedenen Eigenschaften für Rahmen, die wir ausdem vorigen Kapitel kennen.

Vordergrundfarben | 263

VordergrundfarbenAm einfachsten lässt sich die Vordergrundfarbe mit der Eigenschaft color einstellen.

Als Wert für diese Eigenschaft kann ein beliebiger gültiger Farbwert angegeben werden,wie in Kapitel 4 beschrieben. Hierzu gehören Angaben wie #FFCC00 oder rgb(100%,80%,0%)oder auch die Schlüsselwörter für Systemfarben, die in Kapitel 13 erklärt werden.

Für nicht-ersetzte Elemente legt color die Textfarbe eines Elements fest (sieheAbbildung 9-1):

<p style="color: gray;">Dieser Absatz hat einen grauen Vordergrund.</p>

<p>Dieser Absatz hat die Standard-Vordergrundfarbe.</p>

In Abbildung 9-1 ist Schwarz die Standard-Vordergrundfarbe. Das mussaber nicht immer der Fall sein, weil manche Benutzer ihre Browser auf eineandere Vordergrundfarbe (Textfarbe) eingestellt haben. Hätte der Benut-zer hierfür Grün gewählt, wäre der Text im zweiten Absatz auch grün dar-gestellt worden – und nicht schwarz. Gleichzeitig wäre der erste Absatzweiterhin grau.

Dabei brauchen Sie sich selbstverständlich nicht auf einfache Operationen beschränken.Für Farben gibt es jede Menge Einsatzmöglichkeiten. Vielleicht enthalten mancheAbsätze eines Dokuments Warnhinweise für den Benutzer. Um diesen Text deutlicherhervorzuheben als den Rest, können Sie diesen Absätzen die Farbe Rot zuweisen. Dazumüssen Sie die entsprechenden Absätze nur mit einer eigenen warn-Klasse (<pclass="warn">) versehen und die folgende Regel in Ihre Stildefinitionen aufnehmen:

p.warn {color: red;}

color

Werte: <Farbwert> | inherit



Vererbt: ja


Abbildung 9-1: Deklarierte und Standardfarben im Vergleich


Im gleichen Dokument sollen alle unbesuchten Links innerhalb der Warnungsabsätzegrün dargestellt werden:

p.warn {color: red;}

p.warn a:link {color: green;}

Letztendlich ändern Sie Ihre Meinung und entscheiden sich dafür, dass die Warnhinweisedunkelgrau angezeigt werden sollen und die Links hellgrau. Dazu müssen Sie den bereitsdefinierten Regeln nur neue Werte zuweisen (siehe Abbildung 9-2):

p.warn {color: #666;}

p.warn a:link {color: #AAA;}

Farben können aber auch dazu benutzt werden, um die Aufmerksamkeit des Lesers aufbestimmte Arten von Text zu lenken. So ist fett gedruckter Text bereits recht gut zuerkennen. Wenn Ihnen das nicht ausreicht, können Sie die Wirkung durch eine andereFarbe weiter verstärken – beispielsweise maroon (rotbraun):

b, strong {color: maroon;}

Zusätzlich soll der Text in allen Tabellenzellen der Klasse highlight hellgelb angezeigtwerden:

td.highlight {color: #FF9;}

Wenn Sie keinen Hintergrund festlegen, kann es selbstverständlich passieren, dass dievon Ihnen gewählte Textfarbe mit den Einstellungen des Benutzers kollidiert. Hätte derBenutzer die Standard-Hintergrundfarbe seines Browsers blassgelb eingestellt, würde dieletzte Regel hellgelben Text vor einem blassgelben Hintergrund erzeugen. Daher ist eseine gute Idee, Vorder- und Hintergrundfarben gemeinsam festzulegen. (Zu Hintergrund-farben kommen wir später in diesem Kapitel.)

Seien Sie bei Navigator 4 mit der Verwendung von Farben vorsichtig.Diese Browserversion ersetzt Farben, die nicht erkannt werden, durcheigene. Die Ersetzungen sind zwar nicht ganz zufällig, aber sicher auchnicht besonders schön. So wird die Angabe invalidValue zu Dunkelblau,während der gültige CSS2-Wert inherit als richtig ekliger gelbgrüner Farb-ton dargestellt wird.

Attribute ersetzenEine der einfachsten Verwendungen für color besteht darin, HTML 3.2-Attribute für dasBODY-Tag zu ersetzen (TEXT, LINK, ALINK und VLINK). Durch die Pseudoklassen für Anker hat

Abbildung 9-2: Farben anpassen


color damit überhaupt keine Probleme. Die erste Zeile des folgenden Beispiels kanndurch die darauf folgenden CSS-Regeln ersetzt werden. Das Resultat sehen Sie inAbbildung 9-3:

<body text="black" link="#808080" alink="silver" vlink="#333333">

body {color: black;}

a:link {color: #808080;}

a:active {color: silver;}

a:visited {color: #333333;}

Der Schreibaufwand scheint bei der CSS-Version wesentlich höher. Hierbei sollten Sieallerdings zwei Dinge bedenken: Diese Schreibweise ist eine große Verbesserung gegen-über den alten BODY-Attributen, weil dort Änderungen nur auf Dokumentebene möglichwaren. Auch war es nicht möglich, zwei verschiedene Farben für Links in einem Doku-ment zu benutzen, wie etwa hell- und dunkelgrau. Stattdessen waren Sie gezwungen,jeden Anker, der relativ dunkel dargestellt werden sollte, mit <FONT COLOR="#666666"> zumarkieren. In CSS ist das anders. Hier brauchen Sie nur alle Anker, deren Farbe einenbestimmten Grauton haben soll, mit einer eigenen Klasse zu versehen und Ihre Stildefini-tionen entsprechend anzupassen:


a:link {color: #808080;} /* mittlerer Grauton */

a.external:link {color: silver;}


a:visited {color: #333;} /* ein sehr dunkles Grau */

Dadurch werden alle Anker, deren class-Attribut den Wert external hat, silber- statt mit-telgrau angezeigt. Wurden diese Links bereits besucht, so erhalten sie den gleichen dun-kelgrauen Farbton wie alle anderen Links auch, es sei denn, Sie definieren auch hierfüreigene Regeln:


a:link {color: #808080;} /* mittlerer Grauton */

a.external:link {color: silver;}


a:visited {color: #333;} /* ein sehr dunkles Grau */

a.external:visited {color: black;}

Abbildung 9-3: BODY-Attribute durch CSS-Regeln ersetzen


Dadurch werden alle externen Links vor dem Besuch in mittlerem Grau dargestellt, unddanach in Schwarz. Gleichzeitig werden alle anderen Links nach dem Besuch dunkelgrauangezeigt, und davor mittelgrau.

Rahmen anpassenDer Wert von color kann auch die Rahmen um ein Element verändern. Für das nächsteBeispiel gehen wir von folgenden Stildefinitionen aus, die das in Abbildung 9-4 gezeigteErgebnis haben:

p.aside {color: gray; border-style: solid;}

Das Element <p class="aside"> besitzt grau dargestellten Text und einen durchgehendgrauen, mittelbreiten Rahmen, weil Rahmen standardmäßig die Vordergrundfarbe desElements erhalten. Am einfachsten lässt sich dieses Verhalten mit der Eigenschaft border-color an die eigenen Bedürfnisse anpassen:

p.aside {color: gray; border-style: solid; border-color: black;}

Mit dieser Regel legen Sie gray als Textfarbe fest, während der Rahmen als Farbwertblack erhält. Dabei überschreibt ein für border-color gesetzter Wert prinzipiell den Wertfür color.

Übrigens können Sie mit Hilfe von Rahmen die Vordergrundfarbe von Bildern beeinflus-sen. Da Bilder bereits aus Farben bestehen, können Sie diese nicht per color verändern;aber Sie können die Farbe des Rahmens um ein Bild anpassen. Das geht entweder mitcolor oder mit border-color. Aus diesem Grund haben Bilder der Klassen type1 und type2das gleiche Aussehen (siehe Abbildung 9-5):

img.type1 {color: gray; border-style: solid;}

img.type2 {border-color: gray; border-style: solid;}

Abbildung 9-4: Rahmenfarben, die von der Vordergrundfarbe (bzw. Textfarbe) des Elements abgeleitet wurden


Formularelemente anpassenDas Setzen eines Wertes für color sollte (zumindest theoretisch) auch einen Einfluss aufFormularelemente haben. Wollen Sie select-Elementen (Auswahllisten bzw. Aufklapp-menüs) eine dunkelgraue Textfarbe zuweisen, brauchen Sie nur Folgendes zu schreiben:

select {color: rgb(33%,33%,33%);}

Außerdem wird dadurch die Farbe von Rahmen um select-Elemente bestimmt – oderauch nicht. Das hängt letztendlich vom Benutzerprogramm und dessen Standardeinstel-lungen ab.

Sie können auch die Vordergrundfarbe für alle input-Elemente festlegen, wodurch aller-dings allen Eingabeelementen – von Textfeldern, Radio-Buttons bis hin zu Checkboxen –die gleiche Farbe zugewiesen wird (siehe Abbildung 9-6):

select {color: rgb(33%,33%,33%);}

input {color: gray;}

Wie Sie in Abbildung 9-6 sehen können, ist der Text neben den Checkboxen weiterhinschwarz. Das liegt daran, dass die Stile nur für input- und select-Elemente, nicht aber fürnormalen (oder anderen) Text festgelegt wurden.

In CSS1 gab es noch keine Möglichkeit, zwischen verschiedenen Arten von input-Ele-menten zu unterscheiden. Sollten Checkboxen eine andere Farbe haben als Radio-But-tons, mussten Sie mit verschiedenen Klassen arbeiten, um das gewünschte Ergebnis zuerzielen:

input.radio {color: #666;}

input.check {color: #CCC;}

<input type="radio" name="r2" value="a" class="radio">

<input type="checkbox" name="c3" value="one" class="check">

Abbildung 9-5: Eine Rahmenfarbe für Bilder festlegen

Abbildung 9-6: Die Vordergrundfarbe von Formularelementen ändern


In CSS2 und später wurde diese Unterscheidung dann dank der Attribut-Selektoren einwenig erleichtert:

input[type="radio"] {color: #333;}

input[type="checkbox"] {color: #666;}

<input type="radio" name="r2" value="a ">

<input type="checkbox" name="c3" value="one ">

Dank der Attribut-Selektoren können Sie, zumindest in diesem Beispiel, ganz auf die Ver-wendung von Klassen verzichten. Leider unterstützen nur wenige Benutzerprogrammediese Art der Elementauswahl, das heißt es kann in nächster Zeit noch nicht ganz aufKlassen verzichtet werden.

Das Setzen von Farben für Formularelemente funktioniert nicht bei Navi-gator 4, aber bei Internet Explorer 4 und 5 sowie Opera 3.5+. AndereBrowser bieten auch keine Unterstützung für Formularelemente, da nichtklar ist, wie die Stildefinitionen umgesetzt werden sollen.

Farbwerte vererbenWie in der Definition der Eigenschaft color zu sehen ist, wird der Wert vererbt. Das machtSinn, wenn Sie sich überlegen, dass die Definition p {color: gray;} für den gesamten Textinnerhalb des Absatzes gelten soll, auch wenn dieser mit <em> oder <strong> hervorgeho-ben oder anderweitig markiert wurde. Wenn Sie diesen Elementen jedoch andere Farbenzuweisen wollen, lässt sich das problemlos erledigen (siehe Abbildung 9-7):

em {color: gray;}

p {color: black;}

Da Farbe vererbt wird, ist es theoretisch möglich, sämtlichem einfachen Text in einemDokument die gleiche Farbe zuzuweisen, wie beispielsweise mit der Anweisung body{color: red;}, die sämtlichen Text, der keine eigenen Stildefinitionen besitzt (wie bei-spielsweise Anker), rot einfärbt. Es gibt allerdings auch Browser, die etwa für Tabelleneigene Stile definieren. Dadurch wird die Vererbung der Farbwerte des body-Elements anTabellenzellen verhindert. Da hier für table-Elemente ein eigener Wert für die Eigen-schaft color definiert wurde, erhält dieser Vorrang vor dem vererbten Wert. Dieses Ver-halten ist lästig und unnötig, aber glücklicherweise leicht zu beheben. Hierfür benutzenSie Selektoren, die die verschiedenen Tabellenelemente auflisten. Um sämtliche Tabellen-inhalte zusammen mit dem restlichen Dokumentkörper rot zu färben, können Sie etwafolgende Regel probieren:

body, table, td, th {color: red;}

Abbildung 9-7: Eigene Farben für verschiedene Elemente

Hintergründe | 269

Damit sollte das Problem eigentlich gelöst sein. Beachten Sie aber auch, dass die Verwen-dung solcher Selektoren bei den meisten modernen Browsern nicht mehr nötig ist. DieProgrammierfehler bei der Vererbungskette, die in früheren Versionen noch häufig anzu-treffen waren, sind längst behoben.

HintergründeAls Hintergrund eines Elements bezeichnet man den gesamten Raum hinter dem Vorder-grund bis zur Außenkante des Rahmens. Das heißt, die Inhaltsbox und sämtliche Innen-abstände (Paddings) gehören zum Hintergrund des Elements, während die Rahmen quasieine Ebene darüber gezeichnet werden.

In CSS können einfache Farben oder, mit Hilfe von Hintergrundbildern, auch einigerma-ßen komplexe Effekte für einzelne Elemente festgelegt werden. Die Möglichkeiten in die-sem Bereich übersteigen die von HTML bei weitem.

HintergrundfarbenDie Hintergrundfarbe für ein Element lässt sich auf ähnliche Weise festlegen wie die Vor-dergrundfarbe. Dafür gibt es die Eigenschaft background-color, der entweder ein gültigerFarbwert oder ein Schlüsselwort übergeben werden kann, das den Hintergrund transpa-rent macht.

Wenn Sie wollen, dass die Hintergrundfarbe ein Stück über den Text hinausragt, lässtsich das mit Hilfe von Innenabständen leicht erreichen (siehe Abbildung 9-8):

p {background-color: gray; padding: 10px;}

Hintergründe können für alle Elemente definiert werden, vom body bis hin zu Inline-Ele-menten wie em und a. background-color wird nicht vererbt. Der Standardwert transparenterscheint sinnvoll, wenn man bedenkt, dass ein Element ohne eigene definierte Hinter-grundfarbe transparent sein sollte, damit der Hintergrund der Vorfahren-Elemente sicht-bar bleibt.

Um sich die Vererbungssituation klar zu machen, kann man sich ein durchsichtiges Plas-tikschild vorstellen, das an einer gemusterten Wand befestigt wurde. Die Wand ist wei-

background-color


Startwert: transparent


Vererbt: nein



terhin durch das Schild sichtbar. Das ist aber nicht der Hintergrund des Schildes, sondernderjenige der Wand (jedenfalls in CSS). Wenn Sie auf ähnliche Weise einen Hintergrundfür die Zeichenfläche festlegen, scheint dieser durch alle Elemente durch, für die keineigener Hintergrund definiert wurde. Dabei wird der Hintergrund jedoch nicht vererbt,sondern scheint durch die Elemente hindurch. Dieser Unterschied scheint aber nur aufden ersten Blick unwichtig zu sein. Sobald wir uns aber mit Hintergrundbildern befassen,werden Sie sehen, dass hier sehr genau unterschieden werden muss.

In den meisten Fällen werden Sie das Schlüsselwort transparent nicht brauchen, weil diesder Standardwert ist. Gelegentlich kann dieser Wert aber auch ganz nützlich sein. Stellenwir uns einmal vor, ein Benutzer hat für alle Links einen weißen Hintergrund festgelegt.In Ihrem eigenen Seitendesign haben Sie aber Weiß als Vordergrundfarbe für Links defi-niert, ohne dass eine Hintergrundfarbe angezeigt werden soll. Damit Ihre Farbwahl Vor-rang gegenüber den Benutzereinstellungen erhält, können Sie folgende Deklarationverwenden:

a {color: white; background-color: transparent;}

Hätten Sie keine Angaben über die Hintergrundfarbe gemacht, würde Ihr weißer Vorder-grund mit dem weißen Hintergrund des Benutzers kombiniert, was zu komplett unlesba-ren Links führen würde. Dieses Beispiel ist zwar nicht besonders wahrscheinlich, aberimmerhin möglich.

Dieser mögliche Konflikt zwischen den Stildefinitionen des Autors und desLesers ist der Grund, warum ein Programm zum Validieren von CSS-Defi-nitionen in diesem Fall eine Warnung ausgibt wie: »Es wurde eine Vorder-grundfarbe (color), aber keine Hintergrundfarbe (background-color)definiert.« Hierdurch soll der Autor vor der Möglichkeit gewarnt werden,dass seine eigenen Stildefinitionen möglicherweise von denen des Benut-zers überschrieben werden können.

Historisches

Das Setzen einer Hintergrundfarbe ist also eine ziemlich einfache Sache – bis auf einekleine Warnung: Navigator 4 platziert die Hintergrundfarben vollkommen falsch. Anstatt

Abbildung 9-8: Hintergrund und Innenabstand

Hintergründe | 271

die Farben für die gesamte Inhaltsbox und die Innenabstände zu verwenden, erscheint dieFarbe nur hinter dem Text (siehe Abbildung 9-9).

Noch einmal: Dieses Verhalten ist vollkommen falsch. Dieses Verhalten lässt sich ausglei-chen, indem Sie das Element mit einem Rahmen versehen, für den Sie dann die gleicheFarbe verwenden wie für den Hintergrund Ihres Dokuments:

body {background: silver;}

p {background-color: gray; padding: 0.1px; border: 1px solid silver;}

Denken Sie daran, dass Sie einen Rahmenstil (border-style) für den Rahmen festlegenmüssen, damit diese Technik funktioniert. Hierbei kommt es nicht darauf an, ob Sie dasmit der speziellen Eigenschaft oder mit einem Wert für die Eigenschaft border tun.

Durch dieses Vorgehen wird der festgelegte Rahmen natürlich auch in anderen Benutzer-programmen dargestellt. Um das Ganze noch zu toppen, kann Navigator 4 auch mitInnenabständen nicht besonders gut umgehen. Daher wird im obigen Beispiel zwischender Inhaltsbox und dem Rahmen ein kleiner Zwischenraum angezeigt. Zum Glück habenneuere Browser diese Probleme nicht mehr.

Spezialeffekte

Durch die einfache Kombination von color und background-color kann man eine Reihevon nützlichen Effekten erzielen:

h1 {color: white; background-color: rgb(20%,20%,20%);

font-family: Arial, sans-serif;}

Die Darstellung zu diesem Beispiel sehen Sie in Abbildung 9-10.

Abbildung 9-9: Falsches Verhalten von Navigator 4

Abbildung 9-10: Ein netter Effekt für H1-Elemente


Natürlich gibt es so viele Farbkombinationen, dass ich sie hier nicht alle zeigen kann,zumal wir sowieso nur Grautöne darstellen können. Trotzdem will ich versuchen, Ihneneinen Eindruck von den Möglichkeiten zu vermitteln.

Das folgende Stylesheet ist etwas komplizierter als seine Vorgänger (sieheAbbildung 9-11):

body {color: black; background-color: white;}

h1, h2 {color: yellow; background-color: rgb(0,51,0);}

p {color: #555;}

a:link {color: black; background-color: silver;}

a:visited {color: gray; background-color: white;}

Und das ist erst der zarte Anfang der Möglichkeiten. Probieren Sie auf jeden Fall auchIhre eigenen Ideen aus!

HintergrundbilderNachdem wir nun die Grundlagen von Vorder- und Hintergrundfarben kennen, wendenwir uns jetzt den Hintergrundbildern zu. In HTML 3.2 war es möglich, mit Hilfe desBODY-Attributs BACKGROUND ein Dokument mit einem Hintergrund zu versehen:

<BODY BACKGROUND="bg23.gif">

Hierdurch wurde das Benutzerprogramm dazu gebracht, die Datei bg23.gif zu laden unddas Bild zu »kacheln«, indem die Darstellung horizontal und vertikal so oft wiederholtwurde, bis der gesamte Hintergrund damit bedeckt war. Diesen Effekt gibt es auch inCSS, wobei CSS noch weit mehr Möglichkeiten zur Verfügung stehen. Wir beginnen mitden Grundlagen und arbeiten uns dann zu den schwierigeren Sachen vor.

Abbildung 9-11: Die Ergebnisse eines komplexeren Stylesheets

Hintergründe | 273

Ein Bild einbinden

Um ein Bild als Hintergrund zu benutzen, brauchen Sie zuerst die Eigenschaftbackground-image.

Der Standardwert none bedeutet genau das, was Sie denken: Es wird kein Bild als Hinter-grund verwendet. Um ein Hintergrundbild einzubinden, müssen Sie dieser Eigenschafteine URL als Wert übergeben:

body {background-image: url(bg23.gif);}

Auf Grund der Standardwerte der anderen Hintergrund-Eigenschaften wird das Bildbg23.gif gekachelt als Hintergrund für das Dokument benutzt (siehe Abbildung 9-12).Wie Sie gleich sehen werden, ist das Kacheln aber noch lange nicht die einzige Möglich-keit.

Sie sollten zusätzlich zum Hintergrundbild auch eine entsprechende Farbedefinieren. Wir werden später in diesem Kapitel noch näher auf diesesKonzept eingehen.

background-image

Werte: <URI> | none | inherit

Startwert: none


Vererbt: nein

Berechneter Wert: ein absoluter URI

Abbildung 9-12: Mit CSS ein Hintergrundbild einbinden


Hintergrundbilder können für alle Block- und Inline-Elemente definiert werden. Diemeisten Hintergründe werden selbstverständlich für body-Elemente definiert, aber es gibtkeinen Grund, dabei schon aufzuhören:

p.starry {background-image: url(http://www.site.web/pix/stars.gif);

color: white;}

a.grid {background-image: url(smallgrid.gif);}

<p class="starry">It’s the end of autumn, which means the stars will be

brighter than ever! <a href="join.html" class="grid">Join us</a> for

a fabulous evening of planets, stars, nebulae, and more...

Wie Sie in Abbildung 9-13 sehen können, haben wir den Hintergrund nur für einen ein-zelnen Absatz definiert, ohne die anderen Dokumentteile dabei anzutasten. Dieses Ver-fahren lässt sich noch erweitern, indem Sie Hintergrundbilder beispielsweise für Linksoder andere Inline-Elemente festlegen (siehe Abbildung 9-13). Wenn Sie sehen möchten,wie das Bild gekachelt wird, muss es vermutlich recht klein sein; schließlich sind die ein-zelnen Buchstaben ja auch nicht besonders groß.

Es gibt noch eine Reihe weiterer Möglichkeiten, Hintergrundbilder zu verwenden. Sokönnen Sie strong-Elemente mit einem eigenen Hintergrund versehen, damit diese deut-licher hervorgehoben werden. Wenn Ihnen danach ist, können Sie den Hintergrund vonÜberschriften mit einem Wellenmuster oder kleinen Punkten hinterlegen. Selbst einzelneTabellenzellen lassen sich mit Mustern hinterlegen, um sie vom Rest zu unterscheiden(siehe Abbildung 9-14):

td.nav {background-image: url(darkgrid.gif);}

Theoretisch können Sie sogar ersetzte Elemente wie Eingabefelder und Auswahllisten(textarea, select) mit einem eigenen Hintergrundbild versehen, auch wenn nicht jedesBenutzerprogramm damit umgehen kann.

Wie background-color wird auch background-image nicht vererbt. Tatsächlich wird keineder Hintergrund-Eigenschaften vererbt. Gleichzeitig gelten auch hier bei der Definitionvon Hintergrundbildern die üblichen Einschränkungen und Vorsichtsmaßnahmen für

Abbildung 9-13: Hintergrundbilder für Block- und Inline-Elemente festlegen

Hintergründe | 275

url-Werte: Relative URLs sollten eigentlich relativ zum Stylesheet ausgewertet werden.Da Navigator 4.x sich nicht daran hält, sind absolute URLs vermutlich die bessere Wahl.

Warum Hintergründe nicht vererbt werden

Anhand von Hintergrundbildern lässt sich gut erklären, warum vererbte Hintergründekeine gute Idee sind. Stellen Sie sich eine Situation vor, in der für den body ein Hinter-grund definiert wurde, der nun an alle darunter liegenden Elemente weitergegeben wird.Dabei wird der Hintergrund allerdings für jedes Element einzeln gekachelt, was zu einemErgebnis wie in Abbildung 9-15 führen könnte.

Abbildung 9-14: Ein Hintergrundbild für eine Tabellenzelle festlegen

Abbildung 9-15: Auswirkungen von vererbten Hintergründen auf das Dokumentlayout


Das Muster wird für jedes Element in der linken oberen Ecke neu angelegt – auch bei denLinks. Das entspricht in der Regel nicht den Erwartungen des Autors, weshalb die Hinter-grund-Eigenschaften auch nicht weitergegeben werden. Wollen Sie diesen Effekt den-noch nutzen, können Sie dafür eine wie diese verwenden:

* {background-image: url(yinyang.gif);}

Alternativ dazu können Sie auch den Wert inherit verwenden:

body {background-image: url(yinyang.gif);}

* {background-image: inherit;}

Hintergründe sinnvoll verwenden

Bilder überlagern vorher festgelegte Hintergrundfarben. Wenn Sie GIF-, JPEG- oderandere undurchsichtige Bildformate über das gesamte Dokument kacheln, hat das keinebesondere Bedeutung, weil die Hintergrundfarbe komplett vom Hintergrundbild ver-deckt wird. Bildformate mit einem Alphakanal, wie beispielsweise PNG, können jedochteilweise oder ganz transparent sein, wodurch das Bild mit der Hintergrundfarbe kombi-niert wird. Kann das Hintergrundbild aus irgendeinem Grund nicht geladen werden, ver-wendet das Benutzerprogramm stattdessen die angegebene Hintergrundfarbe für dieDarstellung. Überlegen Sie sich, wie die Darstellung des Absatzes mit der Klasse »starry«aussehen würde, wenn das Hintergrundbild nicht geladen werden konnte (siehe Abbil-dung 9-16).

Abbildung 9-16 zeigt, warum es immer eine gute Idee ist, bei der Verwendung eines Hin-tergrundbildes auch eine entsprechende Hintergrundfarbe festzulegen. Auf diese Weiseerhalten Sie zumindest ein lesbares Ergebnis:

p.starry {background-image: url(http://www.site.web/pix/stars.gif);

background-color: black; color: white;}

a.grid {background-image: url(smallgrid.gif);}

<p class="starry">It's the end of autumn, which means the stars will be

brighter than ever! <a href="join.html" class="grid">Join us</a> for

a fabulous evening of planets, stars, nebulae, and more...

Abbildung 9-16: Die Folgen fehlender Hintergrundbilder

Hintergründe | 277

Auf diese Weise wird der Hintergrund in simplem Schwarz dargestellt, wenn das Bild»stars.gif« aus irgendeinem Grund nicht angezeigt werden kann. Soll das Bild außerdemnicht gekachelt werden, brauchen Sie sowieso eine Farbe, die die Bereiche des Doku-ments bedeckt, die von dem Bild nicht berührt werden. Und wo wir gerade dabei sind...

Wiederholungen eine bestimmte Richtung gebenWenn Sie früher eine Seitenleiste mit einem eigenen Hintergrund versehen wollten, muss-ten Sie hierfür ein kurzes, aber sehr breites Bild verwenden. Die bevorzugte Größe fürdiese Bilder war damals eine Höhe von 10 Pixeln und eine Breite von 1500 Pixeln. EinGroßteil dieses Bildes war selbstverständlich einfach Leerraum. Nur die ersten 100 Pixelauf der linken Seite enthielten das Bild für die Seitenleiste. Der Rest des Bildes wurde ein-fach verschenkt.

Wäre es nicht wesentlich effizienter, eine Seitenleiste mit 10 Pixeln Höhe und 100 PixelnBreite zu definieren, bei der kein Leerraum verschenkt und das Hintergrundbild nur ver-tikal wiederholt wird? Auf diese Weise würde Ihre Designaufgabe erleichtert und dieDownload-Zeit für den Benutzer verkürzt. Genau für diese Aufgabe gibt es die Eigen-schaft background-repeat.

Dabei sorgt der Wert repeat, wie Sie sich vielleicht schon denken können, für eine hori-zontale und vertikale Kachelung des Bildes, wie es bei früheren Hintergrundbbildernüblich war. Die Werte repeat-x und repeat-y sorgen für eine horizontale bzw. vertikaleWiederholung des Bildes, während der Wert no-repeat eine Bildwiederholung komplettunterbindet.

Standardmäßig beginnt die Bildwiederholung in der linken oberen Ecke des Elements.(Wir werden später in diesem Kapitel sehen, wie man dieses Verhalten ändern kann.)Demnach werden die unten stehenden Regeln dargestellt wie in Abbildung 9-17:

body {background-image: url(yinyang.gif);

background-repeat: repeat-y;}

(Ich habe hier auf eine Hintergrundfarbe verzichtet, um die Regel kurz zu halten. Trotz-dem sollten Sie bei der Definition eines Hintergrundbildes eine entsprechende Hinter-grundfarbe nicht vergessen.)

background-repeat

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

Startwert: repeat


Vererbt: nein



Im nächsten Beispiel soll das Bild nur von links nach rechts wiederholt werden. Anstatthierfür eine spezielle Grafik zu erzeugen, die im unteren Teil sehr viel Leerraum enthält,brauchen Sie die Regel nur leicht abzuändern:


background-repeat: repeat-x;}

Wie in Abbildung 9-18 zu sehen, wird das Bild jetzt, ausgehend von der linken oberenEcke des Browserfensters, nur entlang der x-Achse (horizontal) wiederholt.

Soll das Hintergrundbild nicht wiederholt werden, können Sie dies mit dem Wert no-repeat festlegen:


background-repeat: no-repeat;}

Abbildung 9-17: Vertikale Wiederholung des Hintergrundbildes

Abbildung 9-18: Horizontale Kachelung

Hintergründe | 279

Dieser Wert scheint auf den ersten Blick nicht besonders nützlich zu sein, da die oben ste-hende Deklaration nur ein kleines Bild in der oberen linken Ecke des Dokuments plat-ziert. Benutzen wir dagegen eine größere Grafik, erhalten wir eine Darstellung wie inAbbildung 9-19:

body {background-image: url(bigyinyang.gif);

background-repeat: no-repeat;}

Die Möglichkeit, die Wiederholungsrichtung zu bestimmen, erhöht die Zahl der machba-ren Effekte dramatisch. In diesem Beispiel sollen h1-Elemente mit einer dreifachen linkenRahmenseite versehen werden, während h2-Elemente an ihrer Oberseite ein Wellenmus-ter erhalten. Die Farbe für das Hintergrundbild wurde so gewählt, dass es mit der Hinter-grundfarbe eine Einheit bildet und so den in Abbildung 9-20 gezeigten Welleneffekterzeugt:

h1 {background-image: url(triplebor.gif); background-repeat: repeat-y;}

h2 {background-image: url(wavybord.gif); background-repeat: repeat-x;

background-color: #CCC;}

Abbildung 9-19: Verwendung eines einzelnen großen Hintergrundbildes


Schon durch die Auswahl des richtigen Bildes und etwa Kreativität lassen sich einige sehrinteressante Effekte erzeugen. Und das ist noch lange nicht das Ende der Möglichkeiten.Nachdem Sie nun wissen, wie Sie die Bildwiederholung steuern können, wollen wir unsansehen, wie das Bild innerhalb des Hintergrunds platziert werden kann.

Positionierung von HintergrundbildernDank der Eigenschaft background-repeat ist es möglich, ein großes Bild im Hintergrundzu platzieren, ohne dass es wiederholt wird. Wir wollen diese Fähigkeit erweitern, indemwir die Positionierung des Bildes im Hintergrund genauer festlegen.

Abbildung 9-20: Rahmen für Elemente mit Hilfe von Hintergrundbildern erzeugen

background-position

Werte: [[<Prozentwert> | <Entfernungsangabe> | left | center | right] [<Prozent-wert> | <Entfernungsangabe> | top | center | bottom]?] | [[left | center |right] || [top | center | bottom]] | inherit

Startwert: 0% 0%

Anwendung auf: Block-Elemente und ersetzte Elemente

Vererbt: nein

Prozentwerte: beziehen sich auf den entsprechenden Punkt im Element und im Ausgangs-bild (nähere Erläuterungen hierzu finden Sie im Abschnitt »Prozentwerte«weiter hinten in diesem Kapitel)

Berechneter Wert: absolute Entfernung vom Ausgangspunkt, wenn <Entfernungsangabe>angegeben wurde; ansonsten Prozentwert

Hintergründe | 281

Sie könnten das Bild beispielsweise in der Mitte des body-Elements zentrieren (sieheAbbildung 9-21):


background-repeat: no-repeat;

background-position: center;}

Durch diese Anweisung wird ein einzelnes Bild im Hintergrund platziert und ein Kachelndurch den Wert no-repeat verhindert. Bei der Definition von Hintergründen, die ein Bildenthalten, wird immer von einem einzelnen Bild ausgegangen, das dann entsprechenddem Wert von background-repeat wiederholt wird (oder auch nicht). Dieser Startpunktwird auch als Ausgangsbild (origin image) bezeichnet.

Die Platzierung des Hintergrundbildes geschieht mit Hilfe der Eigenschaft background-position, für die auf mehrere Arten Werte angegeben werden können. So gibt es bei-spielsweise die Schlüsselwörter top, bottom, left, right und center. Diese werden norma-lerweise paarweise verwendet (wie im vorigen Beispiel zu sehen). Das ist aber nichtimmer der Fall. Außerdem gibt es verschiedene Entfernungsangaben wie 50px oder 2cmsowie die Möglichkeit der Angabe von Prozentwerten. Jeder dieser drei Wertetypen wirktsich unterschiedlich auf die Platzierung des Hintergrundbildes aus.

Berechnungen für background-position werden laut CSS2 und CSS2.1 anhand desAußenrandes der Innenabstände vorgenommen. Auch wenn sich der Hintergrundbereichbis zur Außenkante der Außenabstände erstreckt, ist der Kontext für die Platzierung dieInnenkante des Außenabstands. Einige Browser setzen diese Definition jedoch nicht kor-rekt um und verwenden stattdessen die Außenkante des Rahmens. Existiert kein Rah-men, ist die Darstellung demnach identisch.

Abbildung 9-21: Ein einzelnes Hintergrundbild zentrieren


Falls Sie sich dafür interessieren, wie sich CSS im Laufe der Jahre veränderthat: In CSS1 wurde die Platzierung noch relativ zum Inhaltsbereich festge-legt.

Trotz des oben erklärten Platzierungskontexts füllt ein vollständig gekacheltes Hinter-grundbild auch den Hintergrund eines möglichen Rahmens aus, da sich die Wiederho-lungen in alle vier Richtungen erstrecken. Wir werden später detaillierter daraufeingehen. Zuerst müssen Sie jedoch wissen, wie das Ausgangsbild innerhalb des Elementspositioniert werden kann.

Schlüsselwörter

Die Schlüsselwörter für die Platzierung sind am einfachsten zu verstehen. Die Ausrich-tung entspricht hierbei den (englischen) Namen. So wird das Bild durch die Angabe topright in der oberen rechten Ecke des Innenabstands des Elements platziert. Nehmen wiruns noch einmal das kleine Yin-Yang-Symbol vor:

p {background-image: url(yinyang.gif);


background-position: top right;}

Durch diese Anweisung wird für jeden Absatz das nicht-wiederholte Ausgangsbild in derrechten oberen Ecke des Innenabstands angezeigt. Das in Abbildung 9-22 gezeigte Ergeb-nis wäre exakt gleich, wenn stattdessen die Reihenfolge der Werte als right top angege-ben worden wäre. Die Schlüsselwörter für die Positionierung haben (gemäß derSpezifikation) keine festgelegte Reihenfolge, solange es nicht mehr als zwei gibt: eines fürdie horizontale und eines für die vertikale Ausrichtung.

Abbildung 9-22: Das Hintergrundbild in der rechten oberen Ecke von Absätzen positionieren

Hintergründe | 283

Die Netscape 6.x-Browserfamilie enthält einen Programmierfehler, dereine Regel ignoriert, wenn die Schlüsselwörter für background-position ineiner bestimmten Reihenfolge angegeben werden. Damit Sie nicht überdiesen Fehler stolpern, geben Sie zuerst die horizontale und dann die verti-kale Platzierung an. Anstelle von center left schreiben Sie also leftcenter.

Wird nur ein Schlüsselwort angegeben, wird davon ausgegangen, dass das andere centersein soll. In Tabelle 9-1 sehen Sie, wie einzelne Schlüsselwörter automatisch ergänzt wer-den.

Soll in allen Absätzen ein Hintergrundbild oben und mittig angezeigt werden, brauchenSie nur Folgendes zu schreiben:



background-position: top;}

Prozentwerte

Prozentwerte sind eng verwandt mit den Schlüsselwörtern, auch wenn sie sich etwas dif-ferenzierter verhalten. Für das folgende Beispiel soll das Ausgangsbild mit Hilfe von Pro-zentwerten in seinem Element zentriert (center) dargestellt werden. Das geht ganzeinfach:

p {background-image: url(bigyinyang.gif);


background-position: 50% 50%;}

Durch diese Anweisung wird die Mitte des Ausgangsbildes an der Mitte des Elementsausgerichtet. Anders gesagt: Die Prozentwerte beziehen sich auf das Element und dasAusgangsbild.

Zum besseren Verständnis wollen wir uns diesen Prozess etwas genauer ansehen. WennSie ein Ausgangsbild in der Mitte eines Elements zentrieren wollen, wird der mit 50% 50%beschriebene Punkt des Bildes (das Zentrum) mit dem Punkt des Elements zur Deckung

Tabelle 9-1: Entsprechungen von Schlüsselwörtern für die Positionierung

Einzelnes Schlüsselwort Entsprechung

center center center

top top center

center top

bottom bottom center

center bottom

right center right

right center

left center left

left center


gebracht, der auf die gleiche Weise beschrieben werden kann. Durch die Angabe 0% 0%wird die linke obere Ecke des Bildes mit der linken oberen Ecke der Innenabstände fürdas Element zur Deckung gebracht. Die Angabe 100% 100% positioniert die rechte untereEcke des Bildes auf der rechten unteren Ecke des Innenabstands:

p {background-image: url(oransqr.gif);


padding: 5px; border: 1px dotted gray;}

p.c1 {background-position: 0% 0%;}





Abbildung 9-23 zeigt die Darstellung dieser Regeln.

Soll ein einzelnes Ausgangsbild ein Drittel seiner Breite nach rechts und zwei Drittel sei-ner Höhe nach unten verschoben werden, müsste die Deklaration folgendermaßen lau-ten:



background-position: 33% 66%;}

Bei dieser Regel wird die linke obere Ecke des Elements um ein Drittel in der Breite nachrechts und zwei Drittel in der Höhe nach unten verschoben. Bezugspunkt dafür ist dielinke obere Ecke des umgebenden Elements. Beachten Sie, dass bei Prozentwerten derhorizontale Wert immer zuerst angegeben werden muss. Wenn Sie die Werte vertau-schen, wird das Bild zwei Drittel seiner Breite und ein Drittel seiner Höhe vom Ausgangs-punkt entfernt platziert.

Abbildung 9-23: Verschiedene Positionierungen anhand von Prozentwerten

Hintergründe | 285

Wenn Sie nur einen Prozentwert angeben, wird dieser als horizontaler Wert angenom-men. Der vertikale Wert wird automatisch auf 50% gesetzt. Das funktioniert ähnlich wiedie Angabe nur eines Schlüsselwortes, wobei für das zweite Schlüsselwort automatischder Wert center benutzt wird. Zum Beispiel:

p {background-image: url(sqr.gif);


background-position: 25%;}

Das Ausgangsbild wird um ein Viertel der Breite des Elements (und dessen Innenabstän-den) nach rechts und um die Hälfte der Höhe nach unten verschoben dargestellt. (Hatdas Bild eine Größe von 100 x 100 Pixeln und der Inhaltsbereich des Elements inklusiveInnenabstände eine Größe von 200 Pixeln, gilt Folgendes: Der Deckungspunkt des Bildesliegt 25 Pixel rechts und 50 Pixel unterhalb der linken oberen Bildecke. Der Deckungs-punkt des Elements liegt 50 Pixel rechts und 100 Pixel unterhalb der linken oberen Eckeder Innenabstände. Es ergibt sich eine Darstellung wie in Abbildung 9-24.)

In Tabelle 9-2 sehen Sie, wie sich Schlüsselwörter und Prozentwerte entsprechen.

Abbildung 9-24: Wenn nur ein Prozentwert angegeben wird, wird die vertikale Position automatisch mit 50% berechnet

Tabelle 9-2: Entsprechungen bei der Positionierung

Einzelnes Schlüsselwort Entsprechendes Schlüsselwort-Paar Entsprechende Prozentwerte

center center center 50% 50%

50%

top top center

center top

50% 0%

bottom bottom center

center bottom

50% 100%


Die Standardwerte für background-position lauten 0% 0%, was der Angabe der Schlüssel-wörter top left entspricht. Aus diesem Grund beginnt die Kachelung von Hintergrund-bildern immer in der linken oberen Ecke, sofern Sie nichts anderes angegeben haben.

Entfernungsangaben

Zum Schluss wollen wir uns der Verwendung von Längenangaben für die Positionierungzuwenden. Verwenden Sie für die Position des Ausgangsbildes Längenwerte, werdendiese als Entfernungsangaben zur linken oberen Ecke des Innenabstands verstanden. DieEntfernungsangaben beziehen sich hierbei auf die linke obere Bildecke. Die Angabe 20px30px verschiebt demnach die linke obere Ecke des Ausgangsbildes um 20 Pixel nachrechts und um 30 Pixel nach unten (ausgehend von der linken oberen Ecke des Innenab-stands), wie in Abbildung 9-25 zu sehen:



background-position: 20px 30px;

border: 1px dotted gray;}

Dieses Verhalten unterscheidet sich stark von der Verwendung von Prozentwerten, da dieVerschiebung nur von der einen linken oberen Ecke (Innenabstand) zur anderen (Bild)gemessen wird. Die linke obere Bildecke wird also mit dem in background-position ange-

right center right

right center

100% 50%

100%

left center left

left center

0% 50%

0%

top left

left top

0% 0%

top right

right top

100% 0%

bottom right

right bottom

100% 100%

bottom left

left bottom

0% 100%

Abbildung 9-25: Das Hintergrundbild mit Hilfe von Entfernungsangaben verschieben

Tabelle 9-2: Entsprechungen bei der Positionierung (Fortsetzung)

Einzelnes Schlüsselwort Entsprechendes Schlüsselwort-Paar Entsprechende Prozentwerte

Hintergründe | 287

gebenen Punkt zur Deckung gebracht. Verwenden Sie Längen- und Prozentangabengemeinsam, so versucht das Benutzerprogramm, das bestmögliche Ergebnis zu ermitteln.Nehmen wir einmal an, das Hintergrundbild soll ganz rechts und 10 Pixel unterhalb desoberen Rands des Innenabstand dargestellt werden, wie in Abbildung 9-26 gezeigt. Wieimmer kommt auch hier der horizontale Wert zuerst:

p {background-image: url(bg23.gif);


background-position: 100% 10px;


In CSS-Versionen vor 2.1 war es nicht möglich, Schlüsselwörter undandere Werte gemeinsam zu benutzen. Die Angabe top 75% war also ungül-tig. Wenn Sie ein Schlüsselwort benutzt haben, konnten keine anderenWertetypen in der gleichen Deklaration mehr benutzt werden. Um dasSchreiben von Stildefinitionen zu erleichtern und weil viele gängige Brow-ser eine Vermischung von Werten bereits gestatteten, wurde diese Rege-lung in CSS2.1 geändert.

Bei Entfernungs- und Prozentangaben ist es auch möglich, negative Werte zu verwenden,mit denen das Ausgangsbild außerhalb des Elementhintergrunds dargestellt wird. Bisherhaben wir das große Yin-Yang-Symbol zentriert dargestellt. Theoretisch ist es aber auchmöglich, das Symbol nur teilweise, z.B. in der linken oberen Ecke des Innenabstands,anzuzeigen.

Hierbei nehmen wir an, das Ausgangsbild ist 300 x 300 Pixel groß. Um nur das rechteuntere Drittel des Bildes anzuzeigen, können Sie folgenden Code verwenden (sieheAbbildung 9-27):



background-position: -200px -200px;


Vielleicht soll aber auch nur die rechte Hälfte zu sehen sein. Gleichzeitig soll sie innerhalbdes Elements zentriert dargestellt werden:



background-position: -150px 50%;


Abbildung 9-26: Prozent- und Längenangaben gemeinsam benutzen


Theoretisch sind auch negative Prozentwerte möglich, wobei es hier zwei Dinge zu beach-ten gibt. Zum einen können nicht alle Benutzerprogramme damit umgehen, weil sie dienegativen Werte für background-position einfach nicht erkennen.

Zum anderen sind negative Prozentwerte kompliziert zu berechnen. Das Ausgangsbildund das Element haben sehr wahrscheinlich unterschiedliche Größen, was unerwarteteAuswirkungen haben kann. Nehmen wir beispielsweise die durch die unten stehendeRegel ausgelöste Situation, die in Abbildung 9-28 dargestellt ist:

p {background-image: url(pix/bigyinyang.gif);


background-position: -10% -10%;

border: 1px dotted gray;

width: 500px;}

Nach der Regel soll ein Punkt außerhalb des Ausgangsbildes gefunden werden, der durchdie Werte -10% -10% definiert ist. Dieser soll mit einem ähnlichen Punkt für jeden Absatzzur Deckung gebracht werden. Das Bild hat eine Größe von 300 x 300 Pixeln. Für dasBild liegt dieser Punkt also 30 Pixel oberhalb der Oberkante und 30 Pixel links von derlinken Kante (entsprechend -30px und -30px). Die Absätze haben alle die gleiche Breite(500px), wodurch der horizontale Deckungspunkt 50 Pixel links von der linken Kante derInnenabstände liegt. Die linke Außenkante des Bildes liegt demnach 20 Pixel links vonder linken Kante der Innenabstände für den betreffenden Absatz. Dadurch liegt der mit-30px berechnete Deckungspunkt des Bildes über dem mit -50px berechneten Deckungs-punkt für die Absätze. Die Differenz beträgt demnach 20 Pixel.

Allerdings sind die Absätze unterschiedlich hoch, wodurch der vertikale Deckungspunktfür jeden Absatz anders ausfällt. Hat ein Absatz beispielsweise eine Höhe von 300 Pixeln,deckt sich die Oberkante des Bildes genau mit der Oberkante des Innenabstands, weilbeide den gleichen Deckungspunkt von -30px besitzen. Ist der Absatz dagegen nur 50Pixel hoch, liegt dessen vertikaler Deckungspunkt bei -5px, wodurch die Oberkante desAusgangsbildes nun 25 Pixel unterhalb der oberen Kante des Innenabstands angeordnetwird.

Abbildung 9-27: Das Ausgangsbild mit negativen Entfernungsangaben positionieren

Hintergründe | 289

Die gleiche Situation kann übrigens auch bei positiven Prozentwerten auftreten. Waswürde beispielsweise passieren, wenn Sie die Unterkante eines Bildes mit der Unterkanteeines Elements zur Deckung bringen wollen, das nicht so hoch ist wie das Bild? Wir wol-len Sie hiermit nicht davon abhalten, negative Werte zu benutzen. Sie sollten sich aller-dings über die möglichen Folgen im Klaren sein.

Für alle Beispiele in diesem Abschnitt haben wir für die Bildwiederholung den Wert no-repeat benutzt – und zwar aus gutem Grund: Es ist wesentlich einfacher, die Auswirkun-gen der Positionierung zu zeigen, wenn wir uns nur auf das Ausgangsbild konzentrieren.Sie können die Wiederholung natürlich trotzdem benutzen:


background-position: -150px 50%;


Wie Sie in Abbildung 9-29 sehen können, beginnt die Kachelung an der Stelle, die durchden Wert von background-position bezeichnet wird.

Hier ist noch einmal gut das Konzept des Ausgangsbildes zu sehen, das für das Verständ-nis des folgenden Abschnitts sehr wichtig ist.

Abbildung 9-28: Verschiedene Auswirkungen negativer Prozentwerte


Richtungen für die Bildwiederholung (Auffrischung)Im Abschnitt über die Bildwiederholung haben wir uns mit den Werten repeat-x, repeat-y und repeat und deren Auswirkungen auf die Kachelung der Hintergrundbilder befasst.Dabei stand das Ausgangsbild bisher aber immer in der linken oberen Ecke des umgeben-den Elements (z.B. p). Das muss natürlich nicht immer so sein. Wie wir wissen, hatbackground-position die Standardwerte 0% 0%. Sofern Sie die Position des Ausgangsbildesnicht ändern, beginnt die Kachelung an dieser Stelle. Nachdem aber inzwischen bekanntist, wie Sie diese Position ändern können, müssen Sie auch wissen, wie Benutzerpro-gramme diese Angaben umsetzen.

Dieser Sachverhalt lässt sich am einfachsten anhand eines Beispiels zeigen und erklären.Sehen Sie sich einmal folgende Regeln und die dazugehörige Abbildung 9-30 an:


background-position: center;


p.c1 {background-repeat: repeat-y;}

p.c2 {background-repeat: repeat-x;}

Abbildung 9-29: Den Ausgangspunkt für die Kachelung des Hintergrundbildes mit der Eigenschaft background-position festlegen

Abbildung 9-30: Bildwiederholung bei zentriertem Ausgangsbild

Hintergründe | 291

Wie Sie sehen, wird das Hintergrundbild einmal horizontal und einmal vertikal von derAbsatzmitte aus wiederholt. Das scheint auf den ersten Blick falsch zu sein, ist es abernicht.

Die in Abbildung 9-30 zu sehende Darstellung ist korrekt, weil das Ausgangsbild in derMitte des ersten p-Elements positioniert wurde. Von dort aus wird das Bild entlang der y-Achse in beide Richtungen, also nach oben und nach unten, wiederholt. Im zweiten Absatzwird das Ausgangsbild nach links und rechts wiederholt.

Wenn Sie ein großes Bild in der Mitte des p-Elements platzieren und es ohne Einschrän-kungen wiederholen lassen, wird es in alle vier Richtungen gekachelt: nach oben, unten,links und nach rechts. Der Wert von background-position wirkt sich also auf den Aus-gangspunkt für die Wiederholung aus. In Abbildung 9-31 sehen Sie den Unterschied zwi-schen einem Ausgangspunkt im Zentrum eines Elements und einem in dessen linkeroberer Ecke.

Beachten Sie die Unterschiede in der Darstellung. Wenn das Ausgangsbild im Zentrumdes Elements steht, wie im ersten Absatz, ist das Gitter der Yin-Yang-Symbole innerhalbdes Elements zentriert. Dadurch wird das Kachelmuster an den Außenkanten gleichmä-ßig beschnitten. Im zweiten Absatz beginnt die Kachelung in der linken oberen Ecke,wodurch das Muster unregelmäßig beschnitten wird. Die Unterschiede sind scheinbarnicht besonders groß, aber wahrscheinlich werden Sie während Ihrer Design-Karrierebeide Ansätze einmal brauchen können.

Über die bisher besprochenen Möglichkeiten hinaus gibt es übrigens keine feinere Kon-trolle über die Bildwiederholung. So gibt es beispielsweise keinen Wert repeat-left, auchwenn dieser vielleicht in zukünftige Versionen von CSS Eingang findet. Momentan gibt esnur die vollständige Kachelung, horizontale und vertikale Wiederholung oder dieOption, überhaupt keine Wiederholung zu verwenden.

Hintergrundbilder verankernSie wissen nun, wie Sie das Hintergrundbild an einer beliebigen Stelle des Elementhinter-grunds positionieren können, und können (bis zu einem bestimmten Grad) kontrollieren,wie das Bild wiederholt wird. Vermutlich haben Sie aber auch schon bemerkt, dass ein

Abbildung 9-31: Unterschiedliche Ausgangspunkte für die Bildwiederholung: Zentrum und linke obere Ecke


Bild, das im Zentrum des body-Elements positioniert wird, bei einem sehr langen Doku-ment nicht immer für den Leser sichtbar ist. Schließlich kann der Browser das Dokumentnur in einem Fenster darstellen. Ist das Dokument zu lang, um vollständig im Fensterangezeigt zu werden, kann der Benutzer auf- und abscrollen, um auch die anderen Doku-mentteile zu betrachten. Das Zentrum kann sich also auch zwei oder drei »Bildschirmsei-ten« unterhalb des Dokumentanfangs befinden, oder es liegt einfach nur so tief, dass dasHintergrundbild unter die Unterkante des Browserfensters verschoben wird.

Selbst wenn Sie davon ausgehen, dass das Hintergrundbild zu Beginn sichtbar ist, wird esimmer mit dem Dokument mitgescrollt. Scrollt ein Benutzer an eine Position unterhalbdes Bildes, ist es möglicherweise nicht mehr zu sehen. Machen Sie sich keine Sorgen: Esgibt eine Möglichkeit, dieses Verhalten zu unterbinden.

Mit der Eigenschaft background-attachment und dem Wert fixed können Sie die ständigePositionierung des Hintergrundbildes im sichtbaren Bereich festlegen. Scrollt der Benut-zer das Dokument, bleibt das Hintergrundbild also an der festgelegten Stelle:



background-position: center;

background-attachment: fixed;}

Diese Anweisung hat zwei sofortige Auswirkungen (siehe Abbildung 9-32). Erstens wirddas Ausgangsbild nicht mehr zusammen mit dem Dokument gescrollt. Zweitens wird diePlatzierung des Ausgangsbildes nun anhand der Größe des Betrachtungsbereichs vorge-nommen und hängt demnach nicht mehr von der Elementgröße (oder von dessen Positio-nierung innerhalb des Betrachtungsbereichs) ab.

In einem Webbrowser kann sich der Betrachtungsbereich verändern, wenn der Benutzerdas Browserfenster vergrößert oder verkleinert. Dadurch wird auch die Position des Hin-tergrundbildes an die neuen Verhältnisse angepasst. In Abbildung 9-33 sehen Sie ver-schiedene Ansichten des gleichen Dokuments. Die Position des Hintergrundbildes istalso nur absolut, solange sich die Dimensionen des Betrachtungsbereichs nicht verän-dern. Wird dessen Größe verändert, wird die Position des Hintergrundbilds neu berech-net.

background-attachment

Werte: scroll | fixed | inherit

Startwert: scroll


Vererbt: nein


Hintergründe | 293

Für background-attachment gibt es nur einen weiteren Wert: den Standardwert scroll.Wie zu erwarten, wird das Hintergrundbild dadurch bei der Betrachtung in einem Web-browser zusammen mit dem übrigen Dokument gescrollt. Auch die Position des Aus-gangsbilds wird bei einer Änderung des Betrachtungsbereichs nicht zwangsläufigangepasst. Hat das Dokument eine festgelegte Breite (beispielsweise durch eine expliziteBreitenangabe für das body-Element), hat eine Größenänderung des Betrachtungsbereichskeinerlei Auswirkungen auf die Positionierung des Ausgangsbildes.

Abbildung 9-32: Den Hintergrund fest positionieren


Interessante Effekte

Wird ein Hintergrundbild als fixed markiert, bezieht sich seine Positionierung, technischgesehen, auf den Betrachtungsbereich und nicht mehr auf das Element, das das Bild ent-hält. Trotzdem ist der Hintergrund nur innerhalb des enthaltenden Elements sichtbar,was eine Reihe interessanter Konsequenzen nach sich zieht.

Nehmen wir beispielsweise ein Dokument mit einem gekachelten Hintergrund, der sogardas Aussehen von Kacheln hat. Zusätzlich versehen wir ein h1-Element mit dem gleichenHintergrundmuster, das nur etwas heller ist. Sowohl für die body- als auch für die h1-Ele-mente wurde das Hintergrundbild per fixed verankert, wodurch sich in etwa die inAbbildung 9-34 gezeigte Darstellung ergibt:

body {background-image: url(grid1.gif); background-repeat: repeat;


Abbildung 9-33: Die Zentrierung wird beibehalten

Hintergründe | 295

h1 {background-image: url(grid2.gif); background-repeat: repeat;


Wie ist es möglich, dass die Ausrichtung so präzise ist? Wie Sie sich erinnern, wird diePosition des Ausgangsbildes bei einem als fixed markierten Hintergrund anhand desBetrachtungsbereichs berechnet. Beide Hintergrundmuster werden also ausgehend vonder linken oberen Ecke des Betrachtungsbereichs wiederholt. Für das body-Element istdas gesamte wiederholte Muster zu sehen. Für h1-Elemente wird das Hintergrundmusternur innerhalb des Inhaltsbereichs und in den Innenabständen angezeigt. Da beide Hinter-grundbilder exakt die gleiche Größe und den gleichen Ausgangspunkt besitzen, werdensie, wie in Abbildung 9-34 zu sehen, »deckungsgleich« dargestellt.

Mit diesen Möglichkeiten können Sie eine Reihe raffinierter Effekte erzeugen. Eines derberühmtesten Beispiele hierfür heißt »complexspiral distorted« (http://www.meyerweb.com/eric/css/edge/complexspiral/glassy.html) und ist in Abbildung 9-35 zu sehen.

Die hier zu sehenden visuellen Effekte werden mit Hilfe verschiedener Hintergrundbildererzeugt. Diese werden einzelnen Nicht-body-Elementen als fest positionierte Hinter-grundbilder (background-attachment: fixed) zugewiesen. Die gesamte Darstellung wirddurch ein HTML-Dokument, vier JPEG-Bilder und ein Stylesheet erreicht. Alle vier Hin-tergrundbilder werden hierfür in der linken oberen Ecke des Browserfensters verankert.Die speziellen Hintergründe sind aber nur an den Stellen zu sehen, wo sich die dazugehö-rigen Elemente befinden. Dadurch überlagern sich die Bilder und es entsteht die Illusionvon durchscheinendem Glas.

Internet Explorer für Windows inklusive der Version 6 bietet keine kor-rekte Behandlung von fest positionierten Hintergrundbildern außer für dasbody-Element. Der gewünschte Effekt funktioniert also nur für das body-Element, wodurch die in Abbildung 9-34 und Abbildung 9-35 gezeigtenEffekte nicht funktionieren.

Abbildung 9-34: Perfekte Ausrichtung zweier Hintergründe


Bei seitenbezogenen Medien wie Ausdrucken erzeugt jede Seite ihren eigenen Betrach-tungsbereich. Ein per fixed verankertes Hintergrundbild sollte also auf jeder Seite desAusdrucks zu sehen sein, was beispielsweise für die Erzeugung von Wasserzeichen aufallen Dokumentseiten genutzt werden kann. Dabei gibt es allerdings zwei Probleme: Esgibt keine Möglichkeit, den Ausdruck von Hintergrundbildern mit CSS zu erzwingen.Außerdem wird der Ausdruck von fest positionierten Hintergrundbildern nicht von allenBrowsern korrekt unterstützt.

Alles auf einmalWie bei den Eigenschaften für Zeichensätze können auch die Hintergrundeigenschaftenmit einer gemeinsamen Kurzschrift-Eigenschaft namens background definiert werden. Für

Abbildung 9-35: Beispiel für komplexe Hintergründe

Hintergründe | 297

jede der einzelnen Eigenschaften kann ein Wert in fast beliebiger Reihenfolge übergebenwerden.

Die folgenden Anweisungen sind alle gleichbedeutend und erzeugen die inAbbildung 9-36 gezeigte Darstellung:

body {background-color: white; background-image: url(yinyang.gif);

background-position: top left; background-repeat: repeat-y;


body {background: white url(yinyang.gif) top left repeat-y fixed;}

body {background: fixed url(yinyang.gif) white top left repeat-y;}

body {background: url(yinyang.gif) white repeat-y fixed top left;}

Für die Reihenfolge der Werte von background gibt es nur eine kleine Einschränkung.Diese gilt für die zwei möglichen Werte von background-position. Werden dabei Entfer-nungsangaben verwendet, muss zuerst der horizontale und dann der vertikale Wert ange-geben werden. Das überrascht vielleicht nicht sonderlich, ist aber wichtig zu wissen.

background

Werte: [ <background-color> || <background-image> || <background-repeat> ||<background-attachment> || <background-position> ] | inherit



Vererbt: nein

Prozentwerte: erlaubt für <background-position>

Berechneter Wert: siehe die einzelnen Eigenschaften

Abbildung 9-36: Die Kurzschrift-Eigenschaft für Hintergründe benutzen


Wie bei anderen Kurzschrift-Eigenschaften gibt es auch hier Standardwerte, die benutztwerden, wenn nicht ausdrücklich andere Werte definiert wurden. Die folgenden zweiAnweisungen sind demnach gleichbedeutend:

body {background: white url(yinyang.gif;}

body {background: white url(yinyang.gif) top left repeat scroll;}

Für background muss übrigens nur ein Wert angegeben werden, die übrigen Werte kön-nen Sie weglassen. So können Sie die Hintergrundfarbe auch über die Kurzschrift-Eigen-schaft festlegen, was der gängigen Praxis entspricht:

body {background: white;}

Diese Anweisung ist vollkommen in Ordnung und wird, was die Anzahl der Tastaturan-schläge angeht, sogar bevorzugt. Zusätzlich werden hierdurch die übrigen Hintergrund-Eigenschaften auf ihre Standardwerte gesetzt. So hat background-image in diesem Fall denWert none. Dadurch wird die Lesbarkeit erhöht, weil andere Regeln (wie beispielsweiseim Leser-Stylesheet) überschrieben werden, wie etwa das Setzen eines eigenen Hinter-grundbilds.

Alle hier gezeigten Regeln sind ebenfalls zulässig (siehe Abbildung 9-37):

body {background: url(yinyang.gif) bottom left repeat-y;}

h1 {background: silver;}

h2 {background: url(h2bg.gif) center repeat-x;}

p {background: url(parabg.gif);}

Wie Sie sehen, haben zwei Absätze kein eigenes Hintergrundbild. Das liegt daran, dassdie Stildefinitionen für als type1 und type2 gekennzeichnete Absätze keine URL für einHintergrundbild enthalten. Der Wert für background-image wird für diese Elemente daherauf none zurückgesetzt.

In älteren Browsern, wie etwa den frühen Versionen von Navigator 4,wurde zwar die Kurzschrift-Eigenschaft background unterstützt, einzelneEigenschaften wie background-color jedoch nicht.

Noch einmal: background ist eine Kurzschrift-Eigenschaft. Die Standardwerte können alsoWerte, die einem Element bereits zugewiesen wurden, überschreiben. Zum Beispiel:

h1, h2 {background: gray url(thetrees.jpg) center repeat-x;}

h2 {background: silver;}

Nach diesen Regeln werden h1-Elemente anhand der ersten Regel dargestellt, währendfür h2-Elemente die zweite Regel zum Einsatz kommt. Diese Elemente erhalten also nureinen einfachen silbergrauen Hintergrund. Weder erhalten h2-Überschriften ein Hinter-grundbild noch wird dieses zentriert und horizontal gekachelt dargestellt. Vermutlichmeinte der Autor eigentlich:

h1, h2 {background: gray url(trees.jpg) center repeat-x;}

h2 {background-color: silver;}


Durch diese Anweisung wird die Hintergrundfarbe geändert, ohne dabei die anderenWerte zu berühren.

ZusammenfassungDas Setzen von Farben und Hintergründen für einzelne Elemente gibt Autoren großeMacht über die Gestaltung von Dokumenten. Der Vorteil von CSS gegenüber traditionel-len Methoden besteht darin, dass jedes Element seine eigenen Farben und Hintergründebesitzen kann – nicht nur Tabellenzellen oder mit FONT-Tags umgebener Text. Trotz eini-ger Fehler in einigen Implementierungen (z.B. die Weigerung von Navigator 4, Hinter-gründe auf den gesamten Inhaltsbereich eines Elements anzuwenden) werden Hinter-gründe sehr häufig benutzt. Ihre Beliebtheit ist nicht schwer zu verstehen, wenn manbedenkt, dass Farbe eines der einfachsten Mittel ist, um verschiedene Dokumente vonein-ander zu unterscheiden.

Gegenüber reinem HTML bietet CSS wesentlich größere Gestaltungsfreiheit. So kann einbeliebiges Element mit Rahmen, zusätzlichen Innen- und Außenabständen versehen wer-den. Es gibt sogar die Möglichkeit, andere Elemente als Bilder »umfließen« zu lassen.Diese Konzepte sind Thema des nächsten Kapitels.

Abbildung 9-37: Ein Dokument mit mehreren Hintergründen versehen

300 | Kapitel 10: Floats und positionierte Elemente

KAPITEL 10

Floats und positionierte Elemente

Sicherlich bietet CSS gute Möglichkeiten, um dem Inhalt durch eigene Schriftarten, Hin-tergründe und den ganzen Rest ein gutes Aussehen zu geben. Grundsätzliche Layout-Auf-gaben erledigt man jedoch mit Floats (»schwebende« Elemente) und positioniertenElementen. Damit können Sie Layouts spaltenweise anordnen, Überschneidungen zwi-schen verschiedenen Layout-Bereichen herbeiführen usw. Im Allgemeinen ist so ziemlichalles möglich, was bisher nur mit Tabellen machbar war.

Der Grundgedanke der Positionierung ist recht einfach. Sie können die Platzierung vonElementboxen exakt festlegen. Diese können entweder relativ zu ihrer eigentlichen Posi-tion oder auch relativ zu ihrem Eltern- oder einem anderen Element positioniert werden –sogar dem Browserfenster selbst. Die Mächtigkeit dieses Features ist offensichtlich undgleichzeitig überraschend. Sie sollten sich nicht wundern, dass gerade dieses CSS2-Merk-mal von vielen Browsern besser unterstützt wird als andere Dinge.

Floats wurden bereits mit CSS1 eingeführt und basieren auf einer Fähigkeit, die Netscapeseinen Browsern bereits in den frühen Tagen des Web mitgab. Floats unterscheiden sichvon positionierten Elementen und vom Layout mit normalem Textfluss. Die genaueFunktionsweise von Floats werden wir im nächsten Abschnitt kennen lernen.

FloatsMit ziemlicher Sicherheit kennen Sie das Konzept der Floats bereits. Seit Netscape 1 wares möglich, ein Bild beispielsweise durch die Deklaration <img src="b5.gif"

align="right"> »schweben« zu lassen. Durch diese Anweisung wurde das Bild an denrechten Rand geschoben, wobei andere Inhalte (wie etwa Text) das Bild umfließen konn-ten. Der englische Begriff »floating« stammt ursprünglich aus dem Dokument »Extensi-ons to HTML 2.0« (Erweiterungen zu HTML 2.0), in dem Folgendes gesagt wird:

Die Erweiterungen der ALIGN-Optionen bedürfen einer Reihe von Erklärungen. Beginnenwir mit den Werten »left« und »right«. Bilder mit diesen Ausrichtungen gehören zu einemvöllig neuen schwebenden (floating) Bildtyp.

Floats | 301

In der Vergangenheit konnten nur Bilder, und in manchen Browsern auch Tabellen, alsFloat definiert werden. In CSS funktioniert das jedoch mit beliebigen Elementen, von Bil-dern über Absätze bis hin zu Listen. Dieses Verhalten wird in CSS mit der Eigenschaftfloat erreicht.

Mit folgendem Markup-Code können Sie ein umflossenes Bild links ausrichten:

<img src="b4.gif" style="float: left;" alt="b4">

In Abbildung 10-1 ist zu sehen, wie das Bild auf der linken Seite ausgerichtet und gleich-zeitig vom Text umflossen wird. Das ist das Standardverhalten.

Werden Elemente in CSS als Float definiert, ergeben sich aber noch weitere interessanteAspekte.

Float-ElementeBei Floats gibt es ein paar Dinge zu beachten. Zum einen ist ein Float auf bestimmte Artaus dem normalen Textfluss des Dokuments herausgenommen, obwohl es sich auch wei-terhin auf das Layout auswirkt. Auf eine CSS eigene Art existieren Floats fast schon aufihrer eigenen Ebene, weil andere Inhalte ein Float-Element »umfließen« können.

Dieses Verhalten kennen wir bereits von Bildern. Es gilt in CSS aber beispielsweise auchfür Absätze. Dank des Außenabstands für den als Float deklarierten Absatz ist dieserEffekt in Abbildung 10-2 gut zu sehen:

p.aside {float: right; width: 15em; margin: 0 1em 1em; padding: 0.25em;

border: 1px solid;}

Mit als Erstes fällt auf, dass die Außenabstände bei Floats nicht zusammengefasst wer-den. Ist ein Bild mit 20 Pixel breiten Außenabständen als Float definiert, umgibt das Bildein Leerraum von mindestens 20 Pixeln Breite. Besitzen andere an das Bild grenzende Ele-

float

Werte: left | right | none | inherit

Startwert: none


Vererbt: nein


Abbildung 10-1: Ein als Float definiertes Bild


mente ebenfalls Außenabstände, werden diese nicht mit den Außenabständen des Bildeszusammengefasst. Das gilt für horizontale und für vertikale Außenabstände gleicherma-ßen (siehe Abbildung 10-3):

p img {float: left; margin: 25px;}

Wenn wir noch einmal die Papier-und-Plastik-Analogie aus Kapitel 7 heranziehen, kön-nen wir sagen, dass sich die Plastikränder eines Bildes niemals mit den Plastikrändernanderer Floats überschneiden.

Soll ein nicht-ersetztes Element als Float definiert werden, muss für dieses Element aufjeden Fall ein Wert für width angegeben werden. Ansonsten wird, gemäß der CSS-Spezifi-kation, für die Breite der kleinstmögliche Wert angenommen. Ein als Float definierter

Abbildung 10-2: Ein als Float deklarierter Absatz

Abbildung 10-3: Bilder mit Außenabständen als Floats definieren

Floats | 303

Absatz könnte dadurch eventuell nur ein Zeichen breit sein, falls dies der Minimalwertdes Browsers für width ist. Wenn Sie vergessen, für Floats einen width-Wert anzugeben,könnte Ihr Dokument womöglich aussehen wie in Abbildung 10-4 (das ist zwar unwahr-scheinlich, aber nicht unmöglich).

Das Floating verhindern

Neben left und right gibt es noch einen anderen Wert für float: none. Er wird benutzt,um zu verhindern, dass ein Element als Float behandelt wird.

Das wirkt auf den ersten Blick etwas einfältig. Eigentlich reicht es doch aus, das Elementeinfach nicht als Float zu deklarieren, oder? Der Standardwert für float ist none. DerWert wird also gebraucht, um das Verhalten von Nicht-Floats überhaupt zu ermöglichen.

Unter bestimmten Umständen wollen Sie aber auch den von einem importierten Style-sheet stammenden Wert überschreiben. Stellen Sie sich vor, Sie benutzen ein Stylesheetfür den gesamten Server, das alle Bilder als Floats definiert. Auf einer bestimmten Seitesollen diese Bilder aber im normalen Fluss angeordnet werden. Anstatt ein komplettneues Stylesheet anzulegen, brauchen Sie im Dokument-Stylesheet nur die Regel img{float: none;} einzufügen. Davon abgesehen gibt es allerdings nur wenige Gründe,float: none zu benutzen.

Floats im DetailBevor wir uns die Floats detailliert ansehen, ist es wichtig, sich noch einmal das Konzeptdes umgebenden Blocks ins Gedächtnis zu rufen. Der umgebende Block für einen Float istdas nächstgelegene Vorfahren-Block-Element. Für den Float im folgenden Beispiel ist derumgebende Block also der Absatz, in dem der Float enthalten ist:

<h1>Test</h1>

<p>

Dies ist ein Absatz, aber das wissen Sie ja bereits.

In diesem Absatz befindet sich ein Bild,

das als Float definiert wurde.

Abbildung 10-4: Float-Text ohne explizite Breitenangabe


<img src="testy.gif" style="float: right;">

Der umgebende Block für dieses Bild ist der Absatz.

</p>

Wir werden bei der Erläuterung der Positionierung von Elementen nocheinmal auf das Konzept des umgebenden Blocks eingehen.

Unabhängig vom eigentlichen Elementtyp ändert sich die Darstellungsrolle eines Floats:Es wird prinzipiell eine Blockbox erzeugt – sogar für Links, die eigentlich Inline-Elementesind. Die Darstellung und das Verhalten ähneln nun einem div-Element. Dies ähnelt sehreiner Definition von display: block für das als Float definierte Element, auch wenn dieseDeklaration hier nicht nötig ist.

Die Platzierung von Floats hängt von einer Reihe von Regeln ab, um die wir uns küm-mern wollen, bevor wir uns mit dem eigentlichen Verhalten beschäftigen. Diese Regelnähneln denen für Außenabstände und Breiten und sind auch ähnlich einleuchtend. DieRegeln lauten:

1. Die seitlichen Außenkanten des Floats dürfen nicht über die seitlichen Innenkantendes umgebenden Blocks hinausragen.

Das ist nicht schwer zu verstehen. Die linke Außenkante eines Floats kann nichtüber die linke Innenkante des umgebenden Blocks hinausragen. Das Gleiche gilt fürdie rechte Außenkante des Floats, wie in Abbildung 10-5 zu sehen. (Für diese unddie folgenden Abbildungen zeigen die eingekreisten Ziffern die eigentliche Positiondes Markup-Elements im Quelltext. Die gleiche Ziffer in einem Kasten bezeichnetdie tatsächliche Position und Größe des sichtbaren Floats bei der Darstellung.)

2. Folgen zwei links angeordnete Floats aufeinander, so gilt: Die linke Außenkante deszweiten Floats muss rechts von der rechten Außenkante des ersten Floats dargestelltwerden, es sei denn, die Oberkante des zweiten Elements befindet sich unterhalb derUnterkante des ersten Elements. Für rechts angeordnete Floats ist die Regel entspre-chend umzukehren.

Durch diese Regel wird verhindert, dass Floats sich gegenseitig überschreiben. Wirdein Float-Element nach links verschoben, wo sich bereits ein anderer Float befindet,wird das folgende Element an der rechten Außenkante des bereits dargestelltenFloats angeordnet. Befindet sich die Oberkante des folgenden Floats jedoch unter-halb der Unterkante des ersten Elements, so kann es vollständig an die linke Außen-kante des Elternelements geschoben werden. Einige Beispiele hierfür sehen Sie inAbbildung 10-6.

Der Vorteil dieser Regel besteht darin, dass alle Floats sichtbar bleiben und Sie sichkeine Sorgen zu machen brauchen, dass sich die einzelnen Elemente gegenseitig imWeg sind. Dadurch ist die Verwendung von Floats recht sicher. Die Situation ändertsich komplett, wenn Sie die Elemente positionieren. Bei der Positionierung kann esschnell passieren, dass Elemente sich gegenseitig überschreiben.

Floats | 305

3. Wird ein Float links angeordnet und ein weiterer rechts, dürfen sich deren einanderzugewandte Kanten nicht überschneiden. Bei einem links angeordneten Float darfdessen rechte Außenkante also nicht über die linke Außenkante eines rechts ange-ordneten Floats hinausragen.

Auch mit dieser Regel wird verhindert, dass Floats sich überschneiden. So könnteder body eines Dokuments beispielsweise mit einer Breite von 500 Pixeln definiertsein. Dieser enthält als einzige Elemente zwei 300 Pixel breite Bilder. Wird ein Bildals Float nach links verschoben und das andere nach rechts, so verhindert dieseRegel, dass das zweite Bild das erste um 100 Pixel überlappt. Stattdessen wird dieOberkante des zweiten Bildes nach unten verschoben, bis es sich unter der Unter-kante des ersten Bildes befindet (siehe Abbildung 10-7).

Abbildung 10-5: Links (bzw. rechts) angeordnete Floats

Abbildung 10-6: Überschneidungen von Floats verhindern


4. Die Oberkante eines Floats darf nicht über die obere Innenkante des Elternelementshinausragen. Befindet sich ein Float zwischen zwei zusammengefassten Außenab-ständen, wird er platziert, als würde das Elternelement als Block-Element zwischenden zwei äußeren Elementen stehen.

Der erste Teil dieser Regel ist recht einfach und verhindert, dass Floats bis an dieOberkante des Dokuments verschoben werden. Das korrekte Verhalten ist inAbbildung 10-8 zu sehen. Der zweite Teil der Regel nimmt eine Feinabstimmungder Regel vor, wenn beispielsweise der mittlere von drei Absätzen als Float definiertwurde. In diesem Fall wird der Absatz verschoben, als sei sein Elternelement einBlock-Element (z.B. div). Dadurch wird verhindert, dass ein als Float definierterAbsatz bis an die Oberkante des den drei Absätzen gemeinsamen Elternelementsverschoben wird.

Abbildung 10-7: Weitere Maßnahmen gegen Überschneidungen

Abbildung 10-8: Floats können nicht unendlich weit nach oben verschoben werden

Floats | 307

5. Die Oberkante eines Floats darf nicht höher liegen als die Oberkante eines früherenFloats oder Block-Elements.

Ähnlich wie Regel 4 sorgt auch diese Regel dafür, dass Elemente nicht bis zur Ober-kante ihres Elternelements verschoben werden können. Folgt auf einen Float einzweiter, so kann dessen Oberkante außerdem nicht höher liegen als die Oberkantedes ersten. In Abbildung 10-9 sehen Sie ein Beispiel dafür. Hier wurde der zweiteFloat unter den ersten geschoben, während sich die Oberkante des dritten Floats aufgleicher Höhe mit der Oberkante des zweiten befindet, nicht des ersten.

6. Wenn sich ein Float innerhalb einer Zeilenbox befindet, wird die Oberkante desFloats auf eine Höhe mit der Oberkante der Zeilenbox gesetzt.

Ähnlich wie die Regeln 4 und 5 wird mit dieser Regel verhindert, dass Floats zu weitoben angeordnet werden. Steht vor dem Float eine Zeile mit Inhalt, so darf dieOberkante des Floats nicht über die Oberkante dieser Zeile hinausragen. Nehmenwir an, in der Mitte eines Absatzes befindet sich ein als Float definiertes Bild. In die-sem Fall darf die Oberkante des Bildes nicht höher stehen als die Oberkante derZeile, die das Bild enthält. Wie in Abbildung 10-10 zu sehen, wird dadurch verhin-dert, dass Bilder zu weit nach oben verschoben werden.

7. Wenn sich auf der linken Seite eines links angeordneten Floats ein weiterer Floatbefindet, darf die rechte Außenkante des rechten Floats nicht über den Rand desumgebenden Elements hinausragen. Diese Regel gilt analog für Floats, die rechtsangeordnet sind.

Abbildung 10-9: Floats unterhalb ihrer Vorfahren-Elemente halten


Ein Float kann nicht über den Rand des umgebenden Elements hinausragen, es seidenn, es ist selbst bereits zu breit. Durch diese Regel wird verhindert, dass horizontalaufeinander folgende Floats die Breite des umgebenden Blocks überschreiten. Ist derumgebende Block zu schmal, um alle Floats hintereinander darzustellen, werdenFloats gegebenenfalls unterhalb ihrer Vorgänger platziert (siehe Abbildung 10-11).(Um das zu Grunde liegende Prinzip besser zu illustrieren, werden die Floats hier eineZeile unterhalb ihrer eigentlichen Definition dargestellt.) Diese Regel wurde in CSS2aufgenommen, um ihr Fehlen in CSS1 zu korrigieren.

Abbildung 10-10: Floats auf gleicher Höhe mit ihrem Kontext darstellen

Abbildung 10-11: Ist nicht genug Platz, werden Floats eine »Zeile« tiefer dargestellt

Floats | 309

8. Ein Float muss immer so weit wie möglich oben dargestellt werden.

Selbstverständlich wird Regel 8 von den anderen sieben Regeln eingeschränkt. Frü-her haben Browser die Oberkante eines Floats bündig zur Oberkante der Zeilenboxangeordnet, die eine Zeile unterhalb der Zeile steht, in der das Image-Tag steht.Nach Regel wird allerdings festgelegt, dass die Oberkante des Floats bündig mit derOberkante der gleichen Zeilenbox dargestellt werden soll, in der der Float definiertwurde, sofern genügend Platz ist. Dieses theoretisch korrekte Verhalten ist inAbbildung 10-12 zu sehen.

Leider ist nicht genau definiert, was mit »so hoch wie möglich« gemeint ist(es könnte beispielsweise auch bedeuten »so hoch wie gerade passend«und wurde auch schon so ausgelegt). Sie können sich also nicht einmal beiBrowsern, die als CSS1-konform gelten, auf ein konsistentes Verhalten ver-lassen. Einige Browser halten an der alten Praxis fest und stellen das Bildeine Zeile tiefer dar, während andere den Float auf der gleichen Zeileanzeigen, sofern genug Platz ist.

9. Ein links angeordneter Float muss so weit links wie möglich stehen. Das Gleiche giltentsprechend für rechts angeordnete Floats. Eine höhere Position hat Vorrang gegen-über einer weiter rechts oder links befindlichen Position.

Auch für diese Regel gelten die zuvor in den anderen Regeln definierten Einschrän-kungen. Es gibt ähnliche Dinge zu beachten wie bei Regel 8, auch wenn diese hiernicht so ungenau sind. Wie Sie in Abbildung 10-13 sehen können, ist es recht ein-fach festzustellen, wenn ein Element so weit rechts oder links steht wie möglich.

Abbildung 10-12: Unter Berücksichtigung der anderen Regeln wird der Float möglichst weit oben angeordnet


Angewandtes VerhaltenEs gibt außerdem eine Reihe interessanter Auswirkungen, die nicht von den obengenannten Regeln abgedeckt werden. Als Erstes müssen wir uns damit beschäftigen, waspassiert, wenn ein Float höher ist als sein Elternelement.

Abbildung 10-13: Floats sollen so weit links oder rechts wie möglich angeordnet werden

Abbildung 10-14: Erwartetes Verhalten von Floats

Floats | 311

Das passiert übrigens recht häufig. Nehmen Sie beispielsweise ein kurzes Dokument, dasnur aus ein paar Absätzen und h3-Elementen besteht. Dabei soll der erste Absatz ein alsFloat definiertes Bild enthalten. Dieses Bild hat einen Außenabstand von 5 Pixeln (5px).Die zu erwartende Darstellung sehen Sie in Abbildung 10-14.

Dabei gibt es nichts Besonderes. In Abbildung 10-15 sehen Sie aber, was passiert, wennSie den ersten Absatz mit einem Hintergrund versehen.

Der einzige Unterschied zwischen beiden Darstellungen besteht im Hintergrund inAbbildung 10-15. Wie Sie sehen, ragt das Float-Bild über den unteren Rand seines Eltern-elements hinaus. Das war natürlich auch schon in der ersten Darstellung der Fall, nur wares dort nicht so offensichtlich, weil kein Hintergrund zu sehen war. Die vorher genanntenRegeln betreffen nur die linken, rechten und oberen Außenabstände von Floats und derenElternelementen. Das absichtliche Weglassen von unteren Außenabständen verlangt dasin Abbildung 10-15 gezeigte Verhalten.

In der Praxis gehen manche Browser mit dieser Situation nicht korrekt um.Sie steigern stattdessen die Höhe des Elternelements, um den enthaltenenFloat ganz zu umgeben, auch wenn das für große Leerräume im Elternele-ment sorgt.

Mit CSS2.1 wurde ein weiterer Aspekt von Float-Elementen geklärt. Enthält ein Float sei-nerseits einen Float, wird die Größe des umgebenden Floats so weit angepasst, bis derenthaltene Float ganz umgeben wird. (Frühere CSS-Versionen enthielten keine klaren

Abbildung 10-15: Hintergründe und Floats


Anweisungen für diese Situation.) Wollen Sie also, dass ein Float ganz von seinem Eltern-element umgeben wird, müssen Sie nur das Elternelement selbst als Float definieren, wiein diesem Beispiel:

<div style="float: left; width: 100%;">

<img src="hay.gif" style="float: left;">Dieses 'div'-Element umgibt das

als Float definierte Bild, weil das 'div'-Element selbst ein Float ist.

</div>

Ein weiteres Thema sind Hintergründe und Floats, die im Dokument vor dem Hinter-grund definiert wurden (siehe Abbildung 10-16).

Diese Dinge können passieren, weil sich Float-Elemente sowohl im als auch außerhalbdes Textflusses befinden. Wie Sie sehen, wird der Inhalt der Überschrift vom Float »zurSeite gedrängt«. Die Breite der Überschrift entspricht dabei aber immer noch der Breitedes Elternelements. Ihr Inhaltsbereich erstreckt sich demnach ebenfalls über die gesamteBreite, und damit auch der Hintergrund der Überschrift. Der tatsächliche Inhalt machtdem Float also »Platz«, damit er nicht verdeckt wird.

Negative Außenabstände

Interessanterweise können negative Außenabstände dafür sorgen, dass Floats außerhalbihres Elternelements dargestellt werden. Dieses Verhalten steht aber nur scheinbar imWiderspruch zu den eingeführten Regeln. Wie bei anderen Elementen auch können nega-tive Außenabstände dafür sorgen, dass ein Float über sein Elternelement hinausragt.

Für dieses Beispiel nehmen wir ein als Float definiertes Bild an, das nach links verschobenwurde. Der linke und der obere Außenabstand des Bildes wurden mit -15px festgelegt.

Abbildung 10-16: Hintergründe von Elementen »schieben sich unter« Floats

Floats | 313

Das Bild befindet sich in einem div-Element, das seinerseits keinerlei Innenabstände,Rahmen oder Außenabstände besitzt. Das Ergebnis dieser Definitionen sehen Sie inAbbildung 10-17.

Auch wenn es so aussieht, werden die Regeln, nach denen ein Float nicht außerhalb sei-nes Elternelements stehen darf, nicht verletzt.

Und nun die Erklärung für diesen scheinbaren Widerspruch: Wenn Sie sich die Regeln imvorigen Abschnitt genau ansehen, steht dort, dass sich die Außenkanten des Floats inner-halb seines Elternelements befinden müssen. Negative margin-Werte können jedochdafür sorgen, dass sich der Inhalt mit seiner eigenen Außenkante überschneidet, wie inAbbildung 10-18 detailliert dargestellt wird.

Abbildung 10-17: Floats mit negativen Außenabständen

Abbildung 10-18: Die Details eines durch negative Außenabstände nach links und nach oben verschobenen Floats


Mathematisch gesehen funktioniert das etwa so: Wir gehen für diese Rechnung davonaus, dass sich die obere Innenkante des div-Elements an der Pixelposition 100 befindet.Um zu ermitteln, wo sich die obere Innenkante des Floats befinden soll, stellt der Browsernun folgende Rechnung an: 100px + (-15px) Außenabstand + 0 Innenabstand = 85px. Dieobere Innenkante des Floats sollte sich also an der Pixelposition 85 befinden. Obwohlsich dieser Punkt oberhalb der oberen Innenkante des Elternelements befindet, geht dieRechnung auf, ohne dass die Spezifikation verletzt wird. Auf ähnliche Weise ist es mög-lich, dass die linke Innenkante eines Floats außerhalb der linken Innenkante seines Eltern-elements platziert wird.

Viele von Ihnen spüren jetzt vermutlich das Verlangen, laut »Schiebung!« zu rufen. Ichkann Ihnen das nicht einmal verübeln. Es scheint vollkommen falsch zu sein, dass dieobere Innenkante höher liegt als die obere Außenkante. Mit negativen Außenabständenpassiert aber genau das – wie normale Elemente, die keine Floats sind, können auchFloats visuell breiter sein als ihre Elternelemente. Das Gleiche gilt für die vier Seiten derElementbox eines Floats. Wenn Sie die Außenabstände auf einen negativen Wert setzen,überragt der Inhalt die Außenkante, ohne dabei die Spezifikation zu verletzen.

Dabei stellt sich eine wichtige Frage: Was passiert mit der Darstellung eines Dokuments,bei dem ein Float durch negative Außenabstände außerhalb seines Elternelements darge-stellt werden muss? Ein Bild könnte beispielsweise so weit verschoben werden, dass es ineinen bereits vom Benutzerprogramm dargestellten Absatz hineinragt. In solchen Fällenist es Sache des Benutzerprogramms, zu entscheiden, ob die Elemente neu angeordnetwerden müssen. In CSS1 und CSS2 ist klar festgelegt, dass Benutzerprogramme bereitsdargestellte Inhalte nicht erneut darzustellen brauchen, um Dinge zu berücksichtigen, diespäter im Dokument passieren. Das Bild in unserem Beispiel könnte also den Inhalt desAbsatzes einfach überschreiben. Eventuell umfließt das Benutzerprogramm den Floatauch. In beiden Fällen ist es aber vermutlich eine schlechte Idee, sich auf ein bestimmtesVerhalten zu verlassen, wodurch die Verwendung von negativen Außenabständen beiFloats teilweise eingeschränkt wird. Während »hängende« Floats vermutlich recht sichersind, ist der Versuch, andere Elemente im Dokument nach oben zu drücken, in der Regelkeine so gute Idee.

Es gibt noch eine zweite Situation, in der ein Float über die linke und rechte Innenkantedes Elternelements hinausragen kann. Das ist der Fall, wenn der Float selbst breiter ist alssein Elternelement. In diesem Fall wird der Float einfach über die rechte oder linkeInnenkante hinausragen, je nachdem, in welche Richtung der Float verschoben wurde,um die bestmögliche Darstellung zu erzielen. Das führt zu einem Ergebnis wie inAbbildung 10-19.

Floats, Inhalt und ÜberschneidungenEine wesentlich interessantere Frage ist: Was passiert, wenn ein Float Inhalte im norma-len Fluss überdeckt? Das kann beispielsweise vorkommen, wenn ein Float einen negati-ven Außenabstand auf der Seite hat, an der der Inhalt vorbeifließt (z.B. ein negativer

Floats | 315

Außenabstand an einem nach rechts verschobenen Float). Sie haben bereits gesehen, wasmit den Rahmen und Hintergründen eines Block-Elements passiert. Wie sieht es aber mitInline-Elementen aus?

In CSS1 und CSS2 wurde das erwartete Verhalten in diesen Fällen nicht genau festgelegt.In CSS2.1 wurde das Thema mit genauen Regeln geklärt. Diese besagen:

• Überschneidet sich eine Inline-Box mit einem Float, so werden der Rahmen, Hinter-grund und Inhalt der Inline-Box optisch vor dem Float dargestellt.

• Überschneidet sich eine Blockbox mit einem Float, so werden der Rahmen und derHintergrund der Blockbox optisch hinter dem Float dargestellt, der Inhalt jedochdavor.

Um diese Regeln zu illustrieren, stellen Sie sich einmal folgende Situation vor:

<img src="testy.gif" class="sideline">

<p class="box">

Dieser größtenteils unscheinbare Absatz enthält ein Inline-Element.

Dieses Inline-Element enthält seinerseits etwas <strong>stark

hervorgehobenen Text. Dieser wurde hervorgehoben, um etwas

zu betonen.</strong>. Der Rest des Absatzes besteht aus normalem

anonymem Inline-Inhalt.

</p>

<p>

Dies ist der zweite Absatz. Hier gibt es eigentlich nichts Besonderes.

Bitte weiter lesen.

</p>

<h2 id="jump-up">Eine Überschrift!</h2>

Wenn Sie auf den obigen Code die unten stehenden Stildefinitionen anwenden, erhaltenSie das in Abbildung 10-20 gezeigte Ergebnis:

img.sideline {float: left; margin: 10px -15px 10px 10px;}

p.box {border: 1px solid gray; padding: 0.5em;}

p.box strong {border: 3px double black; background: silver; padding: 2px;}

h2#jump-up {margin-top: -15px; background: silver;}

Abbildung 10-19: Die Behandlung von Floats, die breiter sind als ihr Elternelement


Das Inline-Element (strong) überdeckt das Float-Bild inklusive dessen Hintergrund, Rah-men und Inhalt vollständig. Bei den Block-Elementen wird dagegen nur der Inhalt überdem Float angezeigt. Die Hintergründe und Rahmen werden hinter dem Float gezeichnet.

Das beschriebene Überlappungsverhalten ist unabhängig von der Reihen-folge der Elemente im Quellcode. Es spielt keine Rolle, ob ein Element voroder nach dem Float definiert wurde; es gelten immer die gleichen Regeln.

Die Eigenschaft clearWir haben uns nun schon ziemlich lange mit dem Verhalten von Floats befasst. Es gibtalso nur noch eine Sache, die wir besprechen müssen, bevor wir uns der Positionierungvon Elementen zuwenden. Es ist nicht in allen Fällen wünschenswert, dass der Inhalteinen Float umfließt – gelegentlich wollen Sie dieses Verhalten vielleicht sogar ausdrück-lich verhindern. Das kann bei einem in mehrere Abschnitte unterteilten Dokument derFall sein, bei dem die Floats eines Abschnitts nicht in den folgenden hinein»hängen« sol-len. Würde das erste Element normalerweise neben einem Float dargestellt, so soll es jetztso weit nach unten geschoben werden, bis es unterhalb des Floats angezeigt wird. Allefolgenden Elemente werden ebenfalls nach unten geschoben (siehe Abbildung 10-21).

Zu diesem Zweck gibt es die Eigenschaft clear.

Die folgende Regel verwendet die Eigenschaft clear, um zu verhindern, dass h3-Elementelinks angeordnete Floats umfließen, und entspricht damit dem HTML-Konstrukt <brclear="left">:

Abbildung 10-20: Darstellungsverhalten bei sich überschneidenden Floats

clear

Werte: left | right | both | none

Startwert: none


Vererbt: nein


Floats | 317

h3 {clear: left;}

Damit werden h3-Elemente so weit nach unten verschoben, bis links von ihnen kein Floatmehr angezeigt wird. Bei rechts angeordneten Floats gibt es jedoch keine Änderung (sieheAbbildung 10-22).

Sollen weder links noch rechts von h3-Elementen Floats dargestellt werden, benutzen Sieden Wert both:

h3 {clear: both;}

Abbildung 10-21: Das Floating für ein Element mit clear beenden

Abbildung 10-22: Links Floating beendet, rechts jedoch nicht


Durch diese Regel werden mit clear freigestellte Elemente so weit nach unten geschoben,dass zu beiden Seiten keine Floats mehr dargestellt werden (siehe Abbildung 10-23).

Das »Clearing« auf der rechten Seite funktioniert analog zum Clearing auf der linken Seitemit dem Wert right. Die Regel lautet nun: h3 {clear: right;}.

Abschließend gibt es noch den Wert clear: none, mit dem ausdrücklich festgelegt wird,dass Floats sowohl links als auch rechts des Elements stehen dürfen. Wie bei float: noneexistiert dieser Wert hauptsächlich, um ein normales Dokumentverhalten zu ermögli-chen. none kann auch benutzt werden, um andere Stildefinitionen zu überschreiben (sieheAbbildung 10-24). Trotz der dokumentweiten Regel, nach der h3-Elemente auf beidenSeiten vom Floating ausgenommen sein sollen, wurde für ein h3-Element explizit festge-legt, dass Floats zu beiden Seiten erlaubt sind:

h3 {clear: both;}

<h3 style="clear: none;">What’s With All The Latin?</h3>

In CSS1 und CSS2 wurde bei der Verwendung von clear der obere Außenabstand einesElements so weit vergrößert, dass es schließlich unterhalb des Floats dargestellt wurde.Ein explizit für dieses Element definierter oberer Außenabstand wurde ignoriert. Ein mit1.5em festgelegter Außenabstand könnte also plötzlich 10em, 25px oder 7.133in hoch sein,um den Inhaltsbereich des Elements so weit nach unten zu verschieben, dass er unter derUnterkante des Floats zu stehen kommt.

In CSS2.1 wurde für diesen Zweck ein zusätzlicher, Aussparung (clearance) genannterLeerraum definiert. Durch diese Aussparung muss der obere Außenabstand nicht mehr

Abbildung 10-23: Auf beiden Seiten ohne Floating

Floats | 319

verändert werden, wenn ein Element vom Floating ausgenommen wird. Stattdessen wirddie Verschiebung nach unten durch die Aussparung erreicht. Sehen Sie sich inAbbildung 10-25 besonders die Platzierung des Rahmens für die Überschrift an. Diesewird mit folgendem Code erreicht:

img.sider {float: left; margin: 0;}

h3 {border: 1px solid gray; clear: left; margin-top: 15px;}

<img src="boxer.gif" class="sider" height="50" width="50">

<img src="stripe.gif" height="10" width="100">

<h3>Why Doubt Salmon?</h3>

Zwischen dem oberen Rahmen des h3-Elements und dem unteren Außenabstand desFloat-Bildes gibt es keinen Zwischenraum, weil oberhalb des 15 Pixel breiten oberenAußenabstands eine 25 Pixel hohe Aussparung eingefügt wurde. Die Außenkante desoberen Rahmens liegt also direkt unter der Unterkante des Floats. Dieses Verhalten gilt,solange der obere Außenabstand des h3-Elements kleiner ist als 40 Pixel. In diesem Fallwürde das h3-Element automatisch unterhalb des Floats platziert werden und der Wertfür clear wäre nicht mehr nötig.

In den meisten Fällen können Sie jedoch nicht vorher wissen, wie groß die Aussparungenfür ein Element sein müssen. Soll zwischen dem Float-Element und dem vom Floatingausgenommenen Element auf jeden Fall etwas Zwischenraum sein, müssen Sie den Floatselbst mit einem unteren Außenabstand versehen. Sollen unterhalb des Floats aus dem

Abbildung 10-24: Floating wird nicht aufgehoben

Abbildung 10-25: Aussparungen und die Auswirkungen auf die Außenabstände von Elementen


vorigen Beispiel mindestens 15 Pixel Platz sein, müssten Sie das Stylesheet folgenderma-ßen anpassen:

img.sider {float: left; margin: 0 0 15px;}

h3 {border: 1px solid gray; clear: left;}

Durch den neu definierten unteren Außenabstand wird die Box des Floats nach untenverlängert, wodurch auch die Aussparung für das folgende Element größer ausfällt. Daspassiert, wie Sie bereits gesehen haben, weil die Außenkanten einer Float-Box von denAußenkanten des Float-Elements bestimmt werden.

Positionierte ElementeDer Grundgedanke der positionierten Elemente ist recht einfach. Mit der Positionierungkönnen Sie exakt festlegen, an welcher Stelle Elementboxen platziert werden. Dasgeschieht entweder relativ zur eigentlichen Position des Elements, relativ zu einem Eltern-oder einem anderen Element oder sogar dem Browserfenster selbst.

GrundsätzlichesBevor wir uns auf die verschiedenen Formen der Positionierung stürzen, sollten wir ersteinmal klären, welche Arten es gibt und wie sie sich unterscheiden. Außerdem müssenwir ein paar grundsätzliche Dinge über die Funktionsweise der Positionierung klären.

Arten der Positionierung

Mit der Eigenschaft position können Sie zwischen vier verschiedenen Arten der Positio-nierung wählen, die beeinflussen, wie die Elementbox erzeugt wird.

Die Werte von position haben die folgenden Bedeutungen:

static

Die Elementbox wird auf normale Weise erzeugt. Block-Elemente erzeugen einerechteckige Box, die im Textfluss des Dokuments angeordnet wird. Inline-Boxen sor-gen für die Erzeugung einer oder mehrerer Zeilenboxen, die im Fluss ihres Elternele-ments angeordnet werden.

position

Werte: static | relative | absolute | fixed | inherit

Startwert: static


Vererbt: nein


Positionierte Elemente | 321

relative

Die Elementbox wird um eine bestimmte Distanz verschoben. Das Element behältseine Umrisse, als wäre es nicht positioniert worden. Der Raum, den das Elementeigentlich eingenommen hätte, wird beibehalten.

absolute

Die Elementbox wird vollständig aus dem Fluss des Dokuments herausgenommenund anhand des umgebenden Blocks ausgerichtet. Das kann ein weiteres im Doku-ment enthaltenes Element sein oder der ursprüngliche umgebende Block (im nächs-ten Abschnitt beschrieben). Der Platz, den das Element eigentlich eingenommenhätte, wird freigegeben, als würde das Element nicht existieren. Unabhängig vomTyp des Elements (und der Box, die dieses Element im normalen Fluss eigentlicherzeugt hätte), wird für das positionierte Element eine Blockbox erzeugt.

fixed

Das Element verhält sich, als hätte es den Wert absolute erhalten. Bezugsgröße istbei fixed jedoch der gesamte Anzeigebereich (»Viewport«, zum Beispiel das Browser-fenster).

Machen Sie sich über die Details jetzt nicht zu viele Gedanken. Wir werden diese Positio-nierungsarten im Verlauf des Kapitels noch genauer betrachten. Vorher müssen wir unsaber noch mit den umgebenden Blöcken befassen.

Der umgebende Block

Im Zusammenhang mit Floats haben wir uns in diesem Kapitel schon einmal mit demKonzept des umgebenden Blocks beschäftigt. Für einen Float gilt das nächste Vorfahren-Block-Element als umgebender Block. Bei positionierten Elementen ist die Situationetwas komplexer. CSS2.1 definiert die folgenden Verhaltensweisen:

• Der umgebende Block für das »Wurzelelement« (auch ursprünglicher umgebenderBlock genannt) wird vom Benutzerprogramm festgelegt. In HTML ist dies das Ele-ment html, auch wenn manche Browser stattdessen das body-Element verwenden. Inden meisten Browsern entspricht der ursprüngliche umgebende Block einem Recht-eck von der Größe des sichtbaren Bereichs (Fensters).

• Für Nicht-Wurzelelemente, deren position als relative oder static definiert wurde,ist der umgebende Block der Inhaltsbereich des nächsten Vorfahren-Elements,sofern es sich dabei um ein Block-Element, eine Tabellenzelle oder ein Inline-Block-Element handelt.

• Ist der Wert für die position eines Nicht-Wurzelelements mit dem Wert absolutefestgelegt, gilt das nächste Vorfahren-Element (einer beliebigen Art) als umgebenderBlock. Das geschieht wie folgt:

• Handelt es sich bei dem Vorfahren um ein Block-Element, wird der umgebendeBlock von der Außenkante seiner Innenabstände (also dem Bereich, um denherum ein möglicher Rahmen gezeichnet wird) begrenzt.


• Ist der Vorfahre ein Inline-Element, wird der umgebende Block von dessenInhaltsbereich begrenzt. In Sprachen, die von links nach rechts gelesen werden,entsprechen die linke und die obere Kante des umgebenden Blocks der linkenund oberen Kante der ersten Box des Vorfahren-Elements. Die rechte und untereKante des umgebenden Blocks entsprechen der rechten und unteren Kante derletzten Box des Vorfahren-Elements. Bei Sprachen, die von rechts nach linksgelesen werden, entspricht die rechte Kante des umgebenden Blocks der rechtenKante der ersten Box, während die linke Kante des umgebenden Blocks von derlinken Kante der letzten Box bestimmt wird. Ober- und Unterkante bleibengleich.

• Gibt es keine Vorfahren-Elemente, wird der umgebende Block des Elementsdurch den ursprünglichen umgebenden Block definiert.

Hierbei ist zu beachten, dass Elemente auch außerhalb ihres umgebenden Blocks positio-niert werden können. Das Verhalten ähnelt dem von Float-Elementen, die durch die Ver-wendung negativer Außenabstände nach außerhalb des Inhaltsbereichs ihres Elternele-ments verschoben werden können. Eigentlich wäre hier die Bezeichnung »Positionie-rungskontext« besser als »umgebender Block«. Da aber in der Spezifikation vom»umgebenden Block« gesprochen wird, werde ich das auch hier tun. (Ich versuche dieVerwirrung so gering wie möglich zu halten. Ehrlich!)

Abstands-Eigenschaften

Für die Werte relative, absolute und fixed gibt es vier zusätzliche Eigenschaften, mitdenen der Seitenabstand zum umgebenden Block festgelegt werden kann. Daher nenntman diese Eigenschaften auch Abstands-Eigenschaften (offset properties). Diese spielenbei der Positionierung von Elementen eine wichtige Rolle.

top, right, bottom, left

Werte: <Entfernung> | <Prozentwert> | auto | inherit

Startwert: auto

Anwendung auf: positionierte Elemente (also Elemente, deren Wert für position etwas ande-res ist als static)

Vererbt: nein

Prozentwerte: beziehen sich für top und bottom auf die Höhe des umgebenden Blocks, fürright und left auf dessen Breite

Berechneter Wert: für relativ positionierte Elemente siehe Hinweis; für statisch positionierteElemente (static) auto; für Entfernungsangaben die entsprechende absoluteLänge; für Prozentwerte der angegebene Wert; ansonsten auto

Hinweis: der berechnete Wert hängt von einer Reihe von Faktoren ab; in den einzel-nen Einträgen in Anhang A finden Sie entsprechende Beispiele


Diese Eigenschaften beschreiben einen Abstand zur am nächsten liegenden Seite desumgebenden Blocks (daher das englische Wort offset). So wird mit der Eigenschaft topangegeben, welche Entfernung die Kante des oberen Außenabstands zum oberen Außen-abstand des umgebenden Blocks haben soll. Im Falle von top verschieben positive Wertedie Oberkante des Außenabstands nach unten, während negative Werte eine Verschie-bung nach oben, also über den oberen Rand des umgebenden Blocks hinaus, bewirken.Auf ähnliche Weise bezieht sich die Eigenschaft left auf die linke Rahmen-Außenkantedes positionierten Elements. Ein positiver Wert verschiebt das positionierte Element nachrechts, während ein negativer Wert das Element nach links verschiebt.

Man könnte auch sagen, positive Werte verschieben das Element nach innen, also inRichtung des Zentrums des umgebenden Blocks, während negative Werte das Elementnach außen, also vom Zentrum weg, verschieben.

In der ursprünglichen CSS2-Spezifikation war noch davon die Rede, dassdie Kanten des Inhaltbereichs, und nicht die Außenkanten der Außenab-stände verschoben werden. Dieses Verhalten sorgte jedoch für Konfliktemit anderen Teilen von CSS2 und wurde in einer späteren Fehlerliste undin CSS2.1 korrigiert. Hinzu kommt, dass IE/Win für die Berechnungen derBreite die Dimensionen des Inhaltsbereichs verwendet, für Höhenberech-nungen jedoch die Außenkante des Innenabstands. Von allen anderen wei-terhin aktiv entwickelten Browsern wird (während dieses Buch geschrie-ben wird) die Außenkante der Innenabstände verwendet.

Werden die Außenkanten der Außenabstände eines Elements positioniert, so werdenimplizit alle anderen Teile des Elements (Außenabstände, Rahmen, Innenabstände undInhalt) mit verschoben. Positionierte Elemente können also ganz normal mit Außenab-ständen, Rahmen und Innenabstände versehen werden. Diese werden innerhalb desBereichs, der durch die Abstands-Eigenschaften definiert wurde, beibehalten.

Vergessen Sie nicht, dass die Abstands-Eigenschaften den Abstand zur entsprechendenKante des umgebenden Blocks festlegen (so bezeichnet left den Abstand zur linkenKante). Die Eigenschaften beziehen sich nicht auf die linke obere Ecke des umgebendenBlocks, wie es beispielsweise bei Hintergründen der Fall ist. Wollen Sie die rechte untereEcke des umgebenden Blocks ausfüllen, können Sie das beispielsweise mit den folgendenWerten tun:

top: 50%; bottom: 0; left: 50%; right: 0;

In diesem Beispiel wurde die linke Außenkante des positionierten Elements um die Hälfteder Breite des umgebenden Blocks nach unten bzw. nach links verschoben. Auf die rechteAußenkante und die Unterkante des positionierten Elements hat dies jedoch keinen Ein-fluss, so dass diese weiterhin mit der rechten und der unteren Kante des umgebendenBlocks übereinstimmen. Hieraus ergibt sich die in Abbildung 10-26 gezeigte Darstellung.


Die Darstellung in Abbildung 10-26 und die meisten Beispiele dieses Kapi-tels basieren auf einer absoluten Positionierung. Da sich anhand dessenam einfachsten die Funktionsweise der Eigenschaften top, right, bottomund left erklären lässt, werden wir erst einmal dabei bleiben.

Wie Sie sehen, haben wir dem positionierten Element zur Verdeutlichung eine etwasandere Hintergrundfarbe gegeben. Hätten wir das Element in Abbildung 10-26 zusätzlichmit Außenabständen versehen, hätte dies für zusätzlichen Leerraum zwischen dem Rah-men und den verschobenen Kanten gesorgt. Das verschobene Element würde das untererechte Viertel des umgebenden Blocks trotzdem ausfüllen, auch wenn dies nicht auf denersten Blick sichtbar ist. Geht man davon aus, dass der umgebende Block 100 x 100emgroß ist, würden die beiden unten stehenden Regeln ungefähr die gleiche Darstellungerzeugen:

top: 50%; bottom: 0; left: 50%; right: 0; margin: 10em;

top: 60%; bottom: 10%; left: 60%; right: 10%; margin: 0;

Durch die Verwendung negativer Werte ist es möglich, ein Element außerhalb seinesumgebenden Blocks zu platzieren. Die folgenden Werte sorgen für die Darstellung inAbbildung 10-27:

top: -5em; bottom: 50%; left: 75%; right: -3em;

Neben Längeneinheiten und Prozentwerten können die Abstands-Eigenschaften auch aufden Standardwert auto gesetzt werden. Für diesen Wert gibt es kein einheitliches Verhal-ten; es ändert sich mit der Art der verwendeten Positionierung. Wir werden später in die-sem Kapitel noch näher auf die Funktionsweise von auto eingehen, wenn wir uns mit denverschiedenen Arten der Positionierung beschäftigen.

Abbildung 10-26: Das rechte untere Viertel des umgebenden Blocks ausfüllen


Breite und HöheIn vielen Fällen wollen Sie, nachdem die Position eines Elements feststeht, dessen Breiteund Höhe definieren. Zudem wollen Sie häufig auch bestimmen, wie groß dessen maxi-male Skalierung ausfallen soll oder was passieren soll, wenn der Browser die Breite, dieHöhe oder beides automatisch berechnet.

Breite und Höhe festlegen

Wenn Ihr positioniertes Element eine bestimmte Breite oder Höhe haben soll, können Siehierfür die Eigenschaften width bzw. height verwenden.

Auch wenn es gelegentlich sinnvoll ist, die Breite und Höhe eines Elements ausdrücklichzu bestimmen, ist das für positionierte Elemente nicht unbedingt nötig. Wenn die Platzie-rung der vier Seiten des Elements bereits durch top, right, bottom und left definiert wird,ergibt sich aus den Abständen bereits eine implizite Breite und Höhe des Elements. Sollein absolut positioniertes Element etwa die linke Hälfte seines umgebenden Blocks überdie gesamte Höhe ausfüllen, könnten Sie dazu die folgenden Werte benutzen. Die dazu-gehörige Darstellung sehen Sie in Abbildung 10-28:

top: 0; bottom: 0; left: 0; right: 50%;

Da auto sowohl für width als auch für height der Standardwert ist, ergäbe sich mit denunten stehenden Werten exakt die in Abbildung 10-28 gezeigte Darstellung:

top: 0; bottom: 0; left: 0; right: 50%; width: 50%; height: 100%;

Die Verwendung der Eigenschaften width und height in diesem Beispiel hat also keinenEinfluss auf die Darstellung des Elements.

Abbildung 10-27: Ein Element außerhalb seines umgebenden Blocks positionieren


Hätte das Element jedoch Innenabstände, einen Rahmen oder Außenabstände, würdenexplizite Werte für width und height einen deutlichen Unterschied ergeben:

top: 0; bottom: 0; left: 0; right: 50%; width: 50%; height: 100%;

padding: 2em;

Diese Angaben sorgen dafür, dass das positionierte Element aus seinem umgebendenBlock hinausragt (siehe Abbildung 10-29).

Wie wir bereits aus früheren Kapiteln wissen, liegt der Grund für diese Verschiebungnach außen darin, dass die Innenabstände zum Inhaltsbereich addiert werden. DerenDimensionen werden wiederum von den Werten für height und width bestimmt. Umgleichzeitig die gewünschten Innenabstände zu bekommen und das Element innerhalbseines umgebenden Blocks zu halten, müssen Sie entweder die Deklarationen für heightund width entfernen oder beide explizit auf den Wert auto setzen.

Abbildung 10-28: Positionierung und Festlegung der Größe eines Elements allein mit Abstands-Eigenschaften

Abbildung 10-29: Ein Element teilweise außerhalb seines umgebenden Blocks positionieren


Die maximale Breite und Höhe eines Elements festlegen

Gelegentlich ist es notwendig, bestimmte Ober- und Untergrenzen für die Höhe undBreite eines Elements festzulegen. Zur Definition der minimalen Dimensionen gibt es dieCSS2-Eigenschaften min-width und min-height.

Um Obergrenzen für die Ausmaße eines Elements festzulegen, benutzen Sie entspre-chend die Eigenschaften max-width und max-height.

Die (englischen) Namen dieser Eigenschaften erklären bereits recht gut, wofür sie dasind. Es ist allerdings nicht gleich ersichtlich, dass diese Eigenschaften keine negativenWerte vertragen.

Internet Explorer bietet keine Unterstützung für die Eigenschaften min-height, min-width, max-height und max-width. Diese lässt sich aber –zumindest bei Windows – mit Hilfe von JavaScript erreichen. Detailshierzu finden Sie unter http://www.doxdesk.com/software/js/minmax.html.

Durch folgende Stildefinition wird erzwungen, dass das positionierte Element mindestens10em breit und 20em hoch sein soll (siehe Abbildung 10-30):

top: 10%; bottom: 20%; left: 50%; right: 10%;

min-width: 10em; min-height: 20em;

min-width, min-height

Werte: <Längenangabe> | <Prozentwert> | inherit

Startwert: 0

Anwendung auf: alle Elemente außer nicht-ersetzte Inline-Elemente und Tabellen

Vererbt: nein

Prozentwerte: beziehen sich auf die Breite bzw. auf die Höhe des umschließenden Blocks

Berechneter Wert: bei Prozentwerten wie angegeben; bei Längenangaben die absolute Länge;ansonsten none

max-width, max-height

Werte: <Längenangabe> | <Prozentwert> | none | inherit

Startwert: none

Anwendung auf: alle Elemente außer nicht-ersetzte Inline-Elemente und Tabellen

Vererbt: nein

Prozentwerte: beziehen sich auf die Breite bzw. auf die Höhe des umschließenden Blocks

Berechneter Wert: für Prozentwerte wie angegeben; für Längenangaben die absolute Länge;ansonsten none


Diese Lösung ist allerdings nicht besonders beständig, weil die minimalen Dimensionendes Elements unabhängig von der Größe des umgebenden Blocks festgelegt werden. Hiereine bessere Version:

top: 10%; bottom: auto; left: 50%; right: 10%; height: auto;

min-width: 15em;

In diesem Beispiel soll das Element möglichst 40% der Breite des umgebenden Blockshaben (50% links minus 10% rechts), aber nicht schmaler sein als 15em. Zudem werdendie Werte für bottom und height jetzt automatisch ermittelt. Unabhängig von seinerBreite (die 15em natürlich nicht unterschreiten darf) kann das Element dadurch so hochausfallen, dass der gesamte Inhalt dargestellt werden kann.

Im folgenden Abschnitt werden wir sehen, welchen Einfluss der Wert autoauf die Höhe und Breite von positionierten Elementen hat.

Andererseits können Sie durch die Verwendung von max-width und max-height auch ver-hindern, dass Elemente zu hoch oder zu breit werden. Soll ein Element beispielsweise dreiViertel seines umgebenden Blocks ausfüllen, dabei aber nicht breiter werden als 400Pixel, können Sie Folgendes schreiben:

left: 0%; right: auto; width: 75%; max-width: 400px;

Ein großer Vorteil dieser »Min-Max«-Eigenschaften besteht in der relativen Sicherheit,mit der Längeneinheiten und Prozentwerte gemeinsam benutzt werden können. So kön-nen Sie beispielsweise die Größe in Prozentwerten ausdrücken, während die maximaleAusdehnung mit Längeneinheiten definiert wird, oder umgekehrt.

Abbildung 10-30: Setzen einer minimalen Breite und Höhe


Die »Min-Max«-Eigenschaften können übrigens auch zusammen mit Floats sehr sinnvollsein. So ist es möglich, die Breite eines Floats von der Breite seines Elternelements (alsoseines umgebenden Blocks) abhängig zu machen, ohne dass diese 10em unterschreitet.Oder auch andersherum:

p.aside {float: left; width: 40em; max-width: 40%;}

Mit dieser Anweisung wird die Breite des Floats auf 40em festgelegt. Entspricht dies mehrals 40% der Breite des umgebenden Blocks, wird der Float nötigenfalls schmaler gemacht.

Wir werden uns bei den einzelnen Arten der Positionierung noch einmalgenauer mit den Größenangaben für Elemente befassen.

Überlauf und BeschneidungenIst ein Element zu klein, um den gesamten Inhalt darzustellen, besteht die Gefahr, dassder Inhalt über die Grenzen des Elements hinausläuft. In CSS2 gibt es für diesen Fall eineReihe von Alternativen. Zudem können Sie einen Beschneidungsbereich festlegen, inner-halb dessen Grenzen diese Regeln angewandt werden sollen.

Überlauf

Haben Sie aus irgendeinem Grund ein Element mit einer festen Größe, das zu klein fürseinen Inhalt ist, so können Sie die Situation mit Hilfe der Eigenschaft overflow in denGriff bekommen.

Der Standardwert visible besagt, dass der Inhalt des Elements auch außerhalb seiner Ele-mentbox angezeigt werden soll. Dadurch werden die Dimensionen der Box nicht verän-dert; der Inhalt ragt einfach darüber hinaus. Nehmen wir beispielsweise folgendeDefinitionen (siehe Abbildung 10-31):

div#sidebar {position: absolute; top: 0; left: 0; width: 25%; height: 7em;

background: #BBB; overflow: visible;}

Erhält overflow den Wert scroll, wird der Inhalt des Elements jedoch beschnitten. Esgibt also Teile des Inhalts, die nicht sichtbar sind, aber dem Benutzer auf andere Weise

overflow

Werte: visible | hidden | scroll | auto | inherit

Startwert: visible

Anwendung auf: Block-Elemente und ersetzte Elemente

Vererbt: nein



zugänglich gemacht werden können. In einem Webbrowser könnte dies beispielsweisedurch einen (oder mehrere) Scrollbalken erreicht werden. Es wären aber auch andereMethoden denkbar, über die auf den Inhalt zugegriffen werden kann, ohne dass dieGröße des Elements selbst verändert werden muss. Eine Möglichkeit ergibt sich aus denunten stehenden Regeln und ist in Abbildung 10-32 dargestellt:


overflow: scroll;}

Bei der Verwendung von scroll sollen die Scrollbalken auf jeden Fall mit dargestellt wer-den, um, wie in der Spezifikation gesagt, »Probleme mit dem Auftauchen und Verschwin-den von Scrollbalken in einer dynamischen Umgebung zu verhindern«. Die Scrollbalkenwerden also auch dann angezeigt, wenn das Element eigentlich groß genug ist, um denInhalt darzustellen. Zusätzlich wird festgelegt, dass der Inhalt bei der Darstellung desDokuments in einem Print-Medium angezeigt werden soll, als hätte overflow den Wertvisible.

Erhält overflow den Wert hidden, wird der Inhalt des Elements an den Grenzen der Ele-mentbox beschnitten, ohne dass zusätzliche Scrollbalken erzeugt werden. Der unsicht-bare Bereich ist dem Benutzer also nicht zugänglich, wie aus folgendem Beispiel klarwird:


overflow: hidden;}

Bei diesen Anweisungen bleibt der abgeschnittene Teil des Inhalts dem Benutzer verbor-gen und könnte eine Situation wie in Abbildung 10-33 nach sich ziehen.

Abbildung 10-31: Inhalt, der sichtbar über die Elementbox hinausläuft

Abbildung 10-32: Überlaufenden Inhalt mit Hilfe von Scrollbalken zugänglich machen


Schließlich gibt es für overflow noch den Wert auto. Dadurch wird dem Benutzerpro-gramm die Entscheidung überlassen, was passieren soll, wenn das Element zu klein ist,um den gesamten Inhalt darzustellen. Im Allgemeinen werden Benutzerprogrammejedoch dazu angehalten, den Inhalt über einen Scrolling-Mechanismus zugänglich zumachen. Das kann praktisch sein, denn auf diese Weise können Benutzerprogramme dieScrollbalken nach Bedarf erzeugen. (Das ist natürlich keine Garantie, aber die Wahr-scheinlichkeit ist zumindest ein wenig höher.)

Den Inhalt beschneiden (»Clipping«)

Ist ein Element zu klein, um den gesamten Inhalt anzuzeigen, und hat overflow den Werthidden, müssen Teile des Inhalts beschnitten werden. Mit Hilfe der Eigenschaft clip kön-nen Sie die Größe des Clipping-Bereichs bestimmen.

Der Standardwert auto besagt, dass der Inhalt des Elements nicht beschnitten werdensoll. Alternativ dazu kann, relativ zum Inhaltsbereich, eine (rechteckige) Form angegebenwerden, nach der die Beschneidung erfolgen soll. Dadurch wird der Inhaltsbereich selbstnicht verändert, sondern nur der Bereich, in dem der Inhalt tatsächlich dargestellt wird.

Zwar ist, laut Spezifikation für CSS2, die einzige zulässige Form für dieBeschneidung ein Rechteck, es wird aber nicht ausgeschlossen, dass inZukunft auch andere Formen zulässig sind.

Dazu verwenden Sie den »Formen«-Wert rect(oben, rechts, unten, links). Soll derBeschneidungsbereich unverändert bleiben, könnten Sie schreiben:

clip: rect(0, auto, auto, 0);

Abbildung 10-33: Den Inhalt an den Grenzen des Inhaltsbereichs beschneiden

clip

Werte: rect(oben, rechts, unten, links) | auto | inherit

Startwert: auto

Anwendung auf: absolut positionierte Elemente (in CSS2 wurde clip auf Block-Elemente undersetzte Elemente angewendet)

Vererbt: nein

Berechneter Wert: bei der Definition eines Rechtecks ein Satz von vier berechneten Längenwer-ten, die sich auf die Kanten des Beschneidungsrechtecks beziehen; ansonstenwie angegeben


Die Syntax für rect ist recht interessant, denn technisch gesehen können Sie auch schrei-ben: rect(oben rechts unten links) – ohne Kommas zu verwenden. In der CSS2-Spezifi-kation finden sich Beispiele für beide Schreibweisen und die Definition, dass beideMethoden unterstützt werden sollen. In diesem Buch werden wir uns jedoch auf dieKomma-Syntax beschränken, weil sie zum einen leichter zu lesen ist und zum anderenvon CSS2.1 bevorzugt wird.

Sie sollten unbedingt beachten, dass die Werte für rect(...) keine Abstände zu den Kan-ten bezeichnen, sondern sich (in von links nach rechts gelesenen Sprachen) auf die linkeobere Ecke des Elements beziehen (bei von rechts nach links gelesenen Sprachen entspre-chend die rechte obere Ecke). Ein 20 x 20 Pixel breites Beschneidungsrechteck in der lin-ken oberen Ecke des Elements kann also folgendermaßen definiert werden:

rect(0, 20px, 20px, 0)

Bei der Definition von rect(...) sind ausschließlich Längenangaben und auto als Werteerlaubt. Die Verwendung von auto sorgt dafür, dass die linke obere Ecke des Beschnei-dungsbereichs mit der linken oberen Ecke des Inhaltsbereichs zur Deckung gebrachtwird. Die folgenden zwei Anweisungen sind also identisch:

clip: rect(auto, auto, 10px, 1em);

clip: rect(0, 0, 10px, 1em);

Da sämtliche Abstände für clip von der linken oberen Ecke aus berechnet werden undProzentwerte nicht erlaubt sind, gibt es quasi keine Möglichkeit, einen »zentrierten«Beschneidungsbereich zu definieren – es sei denn, Sie kennen die genauen Maße des Ele-ments selbst. Zum Beispiel:

div#sidebar {position: absolute; top: 0; bottom: 50%; right: 50%; left: 0;

clip: rect(1em,4em,6em,1em);}

Da es keine Möglichkeit gibt, um festzustellen, wie viele em ein Element hoch oder breitist, kann auch kein Clipping-Rechteck definiert werden, das ein em rechts oder unterhalbdes Inhaltsbereichs endet. Die einzige Möglichkeit, dies herauszufinden, besteht darin,dem Element selbst eine explizite Breite und Höhe zuzuweisen:

div#sidebar {position: absolute; top: 0; left: 0; width: 5em; height: 7em;

clip: rect(1em,4em,6em,1em);}

Dadurch erhalten Sie eine ähnliche Darstellung wie in Abbildung 10-34. Die gestrichelteLinie dient nur zur Verdeutlichung der Grenzen des Beschneidungsbereichs und wird vonBenutzerprogrammen normalerweise nicht mit angezeigt.

Allerdings ist es möglich, auch negative Längenangaben zu verwenden, wodurch derBeschneidungsbereich über die Grenzen der Elementbox ausgedehnt werden kann. Sollder Beschneidungsbereich um einen viertel Inch nach oben und nach links ausgedehntwerden, könnten Sie hierfür folgende Stildefinition verwenden (siehe Abbildung 10-35):

clip: rect(-0.25in, auto, auto, -0.25in);

Wie Sie sehen können, ist das nicht besonders nützlich. Das Beschneidungsrechteck wirdzwar nach links und nach oben erweitert, enthält aber keinen Inhalt.


Andererseits kann es sinnvoll sein, den Beschneidungsbereich nach rechts oder nachunten hin auszudehnen. In Abbildung 10-36 sehen Sie, wie sich die unten stehenden Stil-definitionen auswirken können (auch hier dienen die gestrichelten Linien nur Illustrati-onszwecken):

div#sidebar {position: absolute; top: 0; left: 0; width: 5em; height: 7em;

clip: rect(0,6em,9em,0);}

Abbildung 10-34: Den Beschneidungsbereich für überlaufenden Inhalt festlegen

Abbildung 10-35: Den Beschneidungsbereich über die Elementbox ausdehnen

ies ist einositionierteslement, dessehalt über di

lementbox d


Diese Anweisungen vergrößern den Bereich, in dem der Inhalt sichtbar ist. Der Fluss desInhalts wird dabei aber nicht verändert. Der einzige visuelle Effekt besteht also darin, dassunterhalb des Elements zusätzliche Teile des Inhalts sichtbar sind. Es gibt rechts keinenTextüberlauf, weil die Breite der Zeilenboxen immer noch von der Breite des positionier-ten Elements beschränkt wird. Enthält das positionierte Element ein Bild, das über denrechten Rand hinausragt, oder formatierten (<pre>) Text, der eine sehr lange Zeile ent-hält, so sähen die Dinge anders aus. In diesem Fall wird der Inhalt auch über den rechtenRand des Elements hinaus dargestellt und vom rechten Rand des Beschneidungsrecht-ecks begrenzt.

Wie Sie vermutlich schon gemerkt haben, ist die Schreibweise von rect(...) im Vergleichzur übrigen Syntax von CSS eher ungewöhnlich. Diese Syntax basiert auf einem frühenEntwurf des Abschnitts zur Positionierung, der mit dem »Abstand von der linken oberenEcke«-Schema arbeitet. Im Internet Explorer wurde diese Technologie implementiert,bevor CSS2 den vollständigen Empfehlungsstatus erreicht hatte. Dadurch kam es zu Kon-flikten mit Änderungen in letzter Minute. Nach diesen sollten sich, wie auch in den übri-gen Teilen von CSS, bei rect(...) die Abstandsangaben an den Seiten des umgebendenBlocks orientieren.

Da war es aber schon zu spät: Es befand sich bereits eine Implementierung auf demMarkt. Anstatt nun Microsoft dazu zu zwingen, den Browser zu ändern und dadurch dieDarstellung eventuell existierender Seiten zu verhindern, wurde der Standard der Imple-mentierung angepasst. Wir wir bereits gesehen haben, können dadurch bei positioniertenElementen ohne feste Höhe und Breite keine konsistenten Beschneidungsrechtecke ange-legt werden.

Abbildung 10-36: Den Beschneidungsbereich nach unten und nach rechts über die Elementbox hinaus ausdehnen


Das Problem mit rect(...) wird zudem noch erschwert, weil als Werte nur Längenanga-ben und auto möglich sind. Die Möglichkeit, Prozentwerte anzugeben, würde die Sachesehr verbessern. Es bleibt zu hoffen, dass es diese Möglichkeit zumindest in zukünftigenCSS-Versionen geben wird.

Durch die lange und verworrene Geschichte von clip gibt es in den gegen-wärtigen Browsern kein konsistentes Verhalten. In Umgebungen, in denenverschiedene Browser benutzt werden, ist eine Verwendung daher nichtratsam.

Sichtbarkeit von ElementenZusätzlich zu Beschneidung und Überlauf lässt sich die Sichtbarkeit eines Elements auchmit der Eigenschaft visibility kontrollieren.

Endlich wieder eine einfache Eigenschaft! Wurde einem Element für visibility der Wertvisible zugeordnet, dann ist es – richtig! – sichtbar.

Hat visibility jedoch den Wert hidden, ist das Element »unsichtbar« (um die Wortwahlder Spezifikation zu verwenden). Auch im unsichtbaren (bzw. verborgenen) Zustandbeeinflusst ein Element die Darstellung des Dokuments, als sei es zu sehen. Das heißt, dasElement ist immer noch da – Sie können es bloß nicht sehen. Diese Darstellungsform istübrigens nicht das Gleiche wie display: none. Im letzteren Fall wird das Element nichtdargestellt und wird aus dem Dokument und dessen Darstellung herausgenommen. InAbbildung 10-37 sehen Sie einen Absatz, der mit den unten stehenden Stildefinitionenund dem Code als hidden markiert wurde.

em.trans {visibility: hidden; border: 3px solid gray; background: silver;

margin: 2em; padding: 1em;}

visibility

Werte: visible | hidden | collapse | inherit

Startwert: visible


Vererbt: ja


Abbildung 10-37: Elemente unsichtbar machen, ohne ihre Elementboxen zu unterdrücken


<p>

Dieser Absatz sollte sichtbar sein. Lorem ipsum, dolor sit amet,

<em class="trans">consectetuer adipiscing elit, sed diam nonummy nibh </em>

euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</p>

Sämtliche sichtbaren Teile eines Elements, wie Inhalt, Hintergrund, Rahmen usw., wer-den verborgen. Trotzdem wird der Platz, den das Element einnimmt, nicht vergeben, dadas Element weiterhin Teil des Dokument-Layouts ist. Sie können es nur nicht sehen.

Beachten Sie außerdem die Möglichkeit, ein Nachfahren-Element eines als hidden mar-kierten Elements mit dem Wert visible wieder hervorzaubern zu können. Das Kindele-ment würde an seiner normalen Position dargestellt, auch wenn dessen Vorfahren (undmöglicherweise auch dessen Nachfahren) weiterhin verborgen bleiben. Da der Wert fürvisibility vererbt wird, müssen Sie hierfür dem Nachfahren-Element explizit den Wertvisible zuweisen:

p.clear {visibility: hidden;}

p.clear em {visibility: visible;}

Der Wert visibility: collapse wird in CSS für die Darstellung von Tabellen verwendet,zu der wir im folgenden Kapitel kommen. Wird collapse außerhalb von Tabellenbenutzt, hat es laut CSS2-Spezifikation die gleiche Bedeutung wie hidden.

Absolute PositionierungDa die meisten Beispiele und Darstellungen in den vorherigen Abschnitten auf der absolu-ten Positionierung basieren, haben Sie die Funktionsweise im Prinzip schon halb verstan-den. Es bleiben nur noch ein paar Details zu klären, die wichtig sind, wenn die absolutePositionierung verwendet wird.

Umgebende Blöcke und absolut positionierte Elemente

Wird ein Element absolut positioniert, wird es vollständig aus dem Textfluss des Doku-ments herausgenommen. Die Positionierung findet anhand des umgebenden Blocks statt,wobei die Kanten gemäß der Werte für die Abstands-Eigenschaften (top, left usw.) plat-ziert werden. Positionierte Elemente umfließen den Inhalt anderer Elemente nicht. Statt-dessen umfließt deren Inhalt die absolut positionierten Elemente. Dadurch kann es zuÜberlappungen zwischen beiden Arten von Elementen kommen. (Wir werden später indiesem Kapitel sehen, wie Sie diese Überschneidungen beeinflussen können.)

Der umgebende Block für ein absolut positioniertes Element ist das nächste Vorfahren-Element, das einen anderen Wert für position hat als static. Es kommt häufig vor, dassein Autor selbst ein Element wählt, das als umgebender Block dienen soll. Dieses erhältfür position den Wert relative, ohne dass zusätzliche Abstände definiert werden:

p.contain {position: relative;}


Sehen Sie sich dazu das Beispiel in Abbildung 10-38 an, das folgende Anweisungen wie-dergibt:

p {margin: 2em;}

p.contain {position: relative;} /* umgebenden Block festlegen */

b {position: absolute; top: auto; right: 0; bottom: 0; left: auto;

width: 8em; height: 5em; border: 1px solid gray;}

<body>

<p>

Dieser Absatz dient <em>nicht</em> als umgebender Block für absolut positionierte

Kindelemente. Dadurch wird die Positionierung des <b>fettgedruckten</b> Elements anhand

des ursprünglichen umgebenden Blocks vorgenommen.

</p>

<p class="contain">

Dank der Anweisung 'position: relative' dient dieser Absatz als umgebender Block für

seine absolut positionierten Kindelemente.

Hier gibt es ein solches Element. Dies ist <em>sozusagen ein <b>fettes Element, das

absolut positioniert wurde.</b> Seine Position wird anhand des umgebenden Blocks (des

Absatzes) bestimmt</em>.

Hierdurch erscheint das absolut positionierte Element in der vom Absatz erzeugten

Elementbox.

</p>

</body>

In beiden Absätzen wurden die b-Elemente absolut positioniert. Der Unterschied bestehtim umgebenden Block für beide Elemente. Im ersten Absatz wurde die Positionierung desb-Elements anhand des ursprünglichen umgebenden Blocks vorgenommen, da positionfür alle seine Vorfahren-Elemente auf static gesetzt wurde. Für den zweiten Absatzwurde dagegen der Wert für position mit relative festgelegt, wodurch dieser einenumgebenden Block für seine Kindelemente anlegt.

Abbildung 10-38: Die Verwendung relativer Positionierung zur Definition des umgebenden Blocks


Wie Sie sehen, überlappt das positionierte Element den Inhalt des Absatzes teilweise. Daskann dadurch vermieden werden, dass die Positionierung des b-Elements außerhalb desAbsatzes vorgenommen wird (beispielsweise durch die Verwendung eines negativenWertes für right oder eine der anderen Abstands-Eigenschaften). Alternativ könnten Siefür den Absatz auch Innenabstände definieren, die breit genug sind, um das positionierteElement aufzunehmen. Da das b-Element außerdem einen transparenten Hintergrundbesitzt, scheint der Text des Absatzes durch das positionierte Element hindurch. Die ein-zige Möglichkeit, dies zu verhindern, besteht darin, einen Hintergrund für das positio-nierte Element zu definieren oder es ganz aus dem Absatz herauszunehmen.

Gelegentlich soll das body-Element den umgebenden Block für sämtliche Kindelementedefinieren. Damit das Benutzerprogramm nicht den ursprünglichen umgebenden Blockwählt, brauchen Sie nur Folgendes zu schreiben :

body {position: relative;}

Legen Sie in einem solchen Dokument einen absolut positionierten Absatz an, so erhaltenSie ein Ergebnis wie in Abbildung 10-39:

<p style="position: absolute; top: 0; right: 25%; left: 25%; bottom: auto;

width: 50%; height: auto; background: silver;">...</p>

Durch die oben stehenden Stildefinitionen wird das Element am Anfang des Dokumentspositioniert. Es ist halb so breit wie das Dokument selbst und überlagert dabei die erstenElemente.

Bei der absoluten Positionierung von Elementen ist zu beachten, dass diese einen umge-benden Block für ihre Kindelemente definieren. Sie können beispielsweise mit den untenstehenden Anweisungen und dem Code ein Element und eines seiner Kindelemente abso-lut positionieren. Das Ergebnis sehen Sie in Abbildung 10-40:

div {position: relative; width: 100%; height: 10em;

border: 1px solid; background: #EEE;}

div.a {position: absolute; top: 0; right: 0; width: 15em; height: 100%;

margin-left: auto; background: #CCC;}

div.b {position: absolute; bottom: 0; left: 0; width: 10em; height: 50%;

margin-top: auto; background: #AAA;}

Abbildung 10-39: Positionierung eines Elements, dessen umgebender Block das Wurzelelement ist


<div>

<div class="a">absolut positioniertes Element A

<div class="b">absolut positioniertes Element B</div>

</div>

umgebender Block

</div>

Wird das Dokument gescrollt, so bewegen sich die absolut positionierten Elemente eben-falls mit. Das gilt für alle absolut positionierten Elemente, die nicht von fest positionier-ten (position: fixed) Elementen abstammen. Das liegt daran, dass sich die Positionie-rung dieser Elemente letztendlich doch an etwas orientiert, das Teil des normalen Flussesist. Legen Sie beispielsweise für eine Tabelle, deren umgebender Block der ursprünglicheumgebende Block ist, eine absolute Positionierung fest, so wird die Tabelle gescrollt. Dasliegt daran, dass der ursprüngliche umgebende Block Teil des normalen Flusses ist. Selbstwenn Sie Elemente in vier Schachtelungsebenen absolut positionieren, wird das»äußerste« Element anhand des ursprünglichen umgebenden Blocks positioniert. Dasbedeutet, sämtliche Kindelemente kommen mit auf die Reise.

Wir werden im nächsten Abschnitt sehen, wie Sie Elemente so positionie-ren können, dass sie nicht mit dem Rest des Dokuments gescrollt werden.Das geschieht durch eine feste Positionierung, die sich am gesamten Anzei-gebereich (»Viewport«) orientiert.

Platzierung und Größenbestimmung von absolut positionierten Elementen

Es erscheint etwas seltsam, die Konzepte der Platzierung und der Größenbestimmung zukombinieren. Das ist bei absolut positionierten Elementen jedoch nötig, weil es in derSpezifikation einen klaren Zusammenhang zwischen beiden Bereichen gibt. Bei nähererBetrachtung ist die Verbindung gar nicht mal so seltsam. Hier ein Beispiel für das Verhal-ten bei der Verwendung aller vier Abstands-Eigenschaften:

#masthead h1 {position: absolute; top: 1em; left: 1em; right: 25%; bottom: 10px;

margin: 0; padding: 0; background: silver;}

Hier werden Höhe und Breite des h1-Elements durch die Platzierung der Außenkantenseiner Außenabstände bestimmt (siehe Abbildung 10-41).

Abbildung 10-40: Absolut positionierte Elemente erzeugen einen umgebenden Block


Hätte man die Höhe des umgebenden Blocks angehoben, würde auch h1 höher werden.Wird der umgebende Block schmaler gemacht, würde auch das h1-Element schmalerwerden. Versehen Sie das h1-Element zudem noch mit Außen- oder Innenabständen, hatdas weitere Auswirkungen auf seine berechnete Höhe und Breite.

Was passiert aber, wenn Sie jetzt außerdem noch eine explizite Höhe und Breite für dasElement festlegen:

#masthead h1 {position: absolute; top: 0; left: 1em; right: 10%; bottom: 0;

margin: 0; padding: 0; height: 1em; width: 50%; background: silver;}

In diesem Fall können nicht alle Werte berücksichtigt werden, denn es ist äußerstunwahrscheinlich, dass alle Angaben korrekt sind. Damit alle Angaben stimmen, müssteder umgebende Block genau zweieinhalbmal so breit sein wie der berechnete Wert vonfont-size für das h1-Element. Eine andere Breite würde automatisch bedeuten, dass min-destens einer der Werte falsch ist und ignoriert wird. Welche Werte dies im Einzelnensind, hängt von bestimmten Faktoren ab, die sich ihrerseits abhängig davon ändern, ob essich um ersetzte oder nicht-ersetzte Elemente handelt.

Nehmen wir beispielsweise diese Anweisung:

#masthead h1 {position: absolute; top: auto; left: auto;}

Was soll hier das Ergebnis sein? Die Antwort ist übrigens nicht »Setze die Werte auf nullzurück«. Die tatsächliche Antwort finden Sie im nächsten Abschnitt.

Automatische Kanten

Für absolut positionierte Elemente, bei denen eine andere Abstands-Eigenschaft alsbottom den Wert auto hat, gibt es spezielle Verhaltensregeln. Nehmen wir zum Beispieltop und den unten stehenden Markup-Code:

<p>

Wenn wir uns die Auswirkungen der Positionierung ansehen, wird schnell klar, dass

es genauso einfach ist, Schaden anzurichten, wie interessante Dinge zu tun.

<span style="position: absolute; top: auto; left: 0;">[4]</span>

Das ist bei nützlichen Technologien oft der Fall. Das Schwert hat immer zwei

scharfe Seiten.

</p>

Abbildung 10-41: Die Höhe und Breite eines Elements anhand von Abstands-Eigenschaften bestimmen


Was muss in diesem Fall passieren? Für left ist das noch relativ einfach: Die linke Kantedes Elements soll bündig mit der linken Kante des umgebenden Blocks (der hier ziemlichsicher der ursprüngliche umgebende Block ist) dargestellt werden. Bei top wird die Sacheda schon interessanter. Die Oberkante des positionierten Elements soll bündig mit derStelle dargestellt werden, an der sich die Oberkante des Elements ohne eine Positionie-rung befunden hätte. Anders gesagt: Versuchen Sie zu ermitteln, wo span positioniertworden wäre, wenn sein Wert für position mit static angegeben wäre. Dieser Ort ist diestatische Position für die Oberkante des Elements. Dazu steht in der Spezifikation vonCSS2.1:

…die Bezeichnung »statische Position« (eines Elements) bezieht sich – ungefähr – auf diePosition, an der das Element im normalen Fluss gestanden hätte. Genauer gesagt ist die sta-tische Position für »top« die Entfernung zwischen der Oberkante des umgebenden Blocksund der Oberkante des Außenabstands einer hypothetischen Box, die die erste Box für dasElement gewesen wäre, vorausgesetzt der Wert für »position« dieser Box stünde auf»static«. Liegt die hypothetische Box über dem umgebenden Block, ist dieser Wert negativ.

Daraus ergibt sich die in Abbildung 10-42 gezeigte Darstellung.

Da die linke Kante des ursprünglichen umgebenden Blocks links von der linken Kante desAbsatzes liegt, wird die »[4]« in diesem Beispiel außerhalb des Absatz-Inhalts angezeigt.

Die gleichen grundsätzlichen Regeln gelten auch, wenn left und right den Wert autoerhalten. In diesen Fällen wird die entsprechende Kante des positionierten Elements dortausgerichtet, wo sie auch ohne Positionierung gestanden hätte. Wir wandeln das obigeBeispiel nun etwas ab, so dass die Eigenschaften top und left beide den Wert autoerhalten:

<p>



<span style="position: absolute; top: auto; left: auto;">[4]</span>


scharfe Seiten.

</p>

Die Darstellung dieser Anweisungen sehen Sie in Abbildung 10-43.

Hier steht die »[4]« genau an der Stelle, an der sie sich auch ohne Positionierung befun-den hätte. Wie Sie sehen, wurde der Platz, den das Element im normalen Fluss eingenom-men hätte, von den anderen Elementen eingenommen, wodurch es zu Überschneidungenkommt.

Abbildung 10-42: Absolute Positionierung eines Elements bezogen auf seine »statische Position«


Es sollte noch erwähnt werden, dass in Fällen wie diesem laut CSS2 undCSS2.1 »…Benutzerprogramme freie Hand haben, eine mögliche [stati-sche] Position zu erraten«. Die meisten aktuellen Browser sind recht gutdarin, den Wert auto für top und left richtig zu interpretieren und das Ele-ment zu platzieren, als befände es sich im normalen Fluss.

Diese automatische Platzierung funktioniert jedoch nur gut in Situationen, in denen nurwenige der anderen Dimensionen eines positionierten Elements genauer definiert wur-den. Die automatische Platzierung im vorigen Beispiel hat funktioniert, weil es wederAngaben zur Höhe und Breite noch zur Platzierung der unteren und rechten Kante gab.Im unten stehenden Beispiel gibt es diese Einschränkungen:

<p>



things.<span style="position: absolute; top: auto; left: auto; right: 0;

bottom: 0; height: 2em; width: 5em;">[4]</span>


scharfe Seiten.

</p>

Hier ist es nicht möglich, allen Werten gerecht zu werden. Was in solchen Fällen passiert,besprechen wir im folgenden Abschnitt.

Platzierung und Größenanpassung von nicht-ersetzten Elementen

Im Allgemeinen hängt die Größe und Platzierung eines Elements von seinem umgeben-den Block ab. Zwar haben die verschiedenen Eigenschaften (width, right, padding-leftusw.) Einfluss auf die Situation; die Hauptsache ist aber der umgebende Block.

Nehmen wir beispielsweise den Einfluss der Breite eines Elements auf die horizontalePlatzierung des Elements. Das Vorgehen kann mit folgender Gleichung ausgedrückt wer-den: left + margin-left + border-left-width + padding-left + width + padding-right +border-right-width + margin-right + right = Breite des umgebenden Blocks.

Diese Berechnung ist recht einleuchtend. Prinzipiell entspricht sie der Gleichung, nachder die Größe von Block-Elementen im normalen Textfluss bestimmt wird. Der Unter-schied besteht darin, dass bei dieser Berechnung auch die Werte von left und right miteinfließen. Um zu verstehen, wie die einzelnen Eigenschaften zusammenarbeiten, gibt eseine Reihe von Regeln durchzuarbeiten.

Abbildung 10-43: Absolute Positionierung eines Elements bezogen auf seine »statische Position«


Haben left, width und right alle den Wert auto, so erhalten Sie das Ergebnis aus demvorigen Abschnitt: Bei Sprachen, die von links nach rechts gelesen werden (ltr), steht dielinke Kante an ihrer statischen Position. Bei »rtl«-Sprachen ist es umgekehrt: Dort wirddie rechte Kante an ihrer statischen Position platziert. Der Wert für width wird so berech-net, dass der Inhaltsbereich gerade groß genug ist, um den Inhalt des Elements zu umge-ben, als sei dieser quasi »vakuumverpackt«. Dieses Verhalten entspricht eher dem vonTabellenzellen. Dabei wird der übrige Platz der Eigenschaft zugeschlagen, die nicht sta-tisch positioniert wurde. Zum Beispiel:

<div style="position: relative; width: 25em; border: 1px dotted;">

Bei absolut positionierten Elementen kann deren Inhalt quasi

<span style="position: absolute; top: 0; left: 0; right: auto; width: auto;

background: silver;">"vakuumverpackt"</span>

werden. Dies entspricht den Regeln für die Positionierung.

</div>


Die Oberkante des Elements wird bündig mit der Oberkante des umgebenden Blocksausgerichtet (in diesem Fall das div-Element). Die Breite des Elements ist gerade so groß,dass der gesamte Inhalt des Elements darin Platz findet. Der verbleibende Abstand zwi-schen den rechten Kanten des Elements und den rechten Kanten des umgebenden Blocksergibt den berechneten Wert für right.

Für das folgende Beispiel gehen wir davon aus, dass nur der rechte und linke Außenab-stand den Wert auto erhalten haben, nicht aber left, width und right:



<span style="position: absolute; top: 0; left: 1em; right: 1em; width: 10em;

margin: 0 auto; background: silver;">"vakuumverpackt"</span>


</div>

In diesem Fall haben der rechte und der linke Außenabstand (beide haben den Wert auto)die gleiche Breite. Das Element wird also zentriert dargestellt (siehe Abbildung 10-45).

Abbildung 10-44: Wenn absolut positionierte Elemente »vakuumverpackt« werden

Abbildung 10-45: Ein absolut positioniertes Element mit Hilfe von automatisch eingestellten Außenabständen zentrieren


Das entspricht der Methode, mit der Elemente im normalen Fluss zentriert werden. Las-sen Sie uns also einmal sehen, was passiert, wenn die Außenabstände einen anderen Wertals auto bekommen:




margin-left: 1em; margin-right: 1em; background: silver;">"vakuumverpackt"</span>


</div>

Spätestens jetzt haben Sie ein Problem. Die Eigenschaften des positionierten span-Ele-ments ergeben zusammen eine Breite von 14em, während der umgebende Block eineBreite von 25em aufweist. Das ergibt einen Unterschied von 11em, der irgendwo ausge-glichen werden muss.

Laut den Regeln soll ein Benutzerprogramm in einem solchen Fall den Wert für rightignorieren (in andersherum gelesenen Sprachen natürlich left). Das Ergebnis ist also dasgleiche, als hätten Sie Folgendes deklariert:




Wenn ein Außenabstand jedoch den Wert auto behalten hätte, wäre stattdessen dieserverändert worden. Nehmen wir an, Sie ändern die Stildefinitionen wie folgt:


margin-left: 1em; margin-right: auto; background: silver;">"vakuumverpackt"</span>

In diesem Fall ist das visuelle Ergebnis das gleiche wie in Abbildung 10-46. Allerdingswird es nun erreicht, indem der rechte Außenabstand mit 14em berechnet wird, anstattden zugewiesenen Wert für right zu überschreiben. Hätten Sie dagegen den linkenAußenabstand auf auto gesetzt, würde dieser neu berechnet (siehe Abbildung 10-47):


margin-left: auto; margin-right: 1em; background: silver;">"vakuumverpackt"</span>

Abbildung 10-46: Sind die Werte zu einschränkend, wird der Wert für right ignoriert

Abbildung 10-47: Ignorieren des Wertes für margin-right in einer Situation mit zu vielen Einschränkungen


Wird eine der Eigenschaften auf auto gesetzt, so wird im Allgemeinen dieser Wert modi-fiziert, damit die Gleichung zu Beginn dieses Abschnitts wieder aufgeht. Nach den folgen-den Stildefinitionen würde die Breite des Elements vergrößert, anstatt den Inhalt genauzu umgeben:

<span style="position: absolute; top: 0; left: 1em; right: 1em; width: auto;


Bisher haben wir uns nur mit dem Verhalten entlang der horizontalen Achse befasst. Fürdie vertikale Achse gelten aber sehr ähnliche Regeln. Folgende Anweisungen ergeben dieDarstellung in Abbildung 10-48:

<div style="position: relative; width: 30em; height: 10em;

border: 1px solid;">

<div style="position: absolute; left: 0; width: 30%; background: #CCC;

top: 0;">

Element A

</div>

<div style="position: absolute; left: 35%; width: 30%; background: #AAA;

top: 0; height: 50%;">

Element B

</div>

<div style="position: absolute; left: 70%; width: 30%; background: #CCC;

height: 50%; bottom: 0;">

Element C

</div>

</div>

Im ersten Fall (Element A) wurde die Höhe des Elements so angepasst, dass der Inhaltgerade umgeben wird. Im zweiten Fall (Element B) wurde der Wert der nicht-angegebe-nen Eigenschaft (bottom) angepasst, um den Platz zwischen der Unterkante des Elementsund dem umgebenden Block auszufüllen. Im dritten Fall (Element C) wurde kein Wertfür top angegeben. Daher wurde diese Eigenschaft benutzt, um den Zwischenraum zu fül-len.

Aus den oben genannten Gründen können Sie mit auf auto gesetzten Außenabständeneine vertikale Zentrierung erreichen. Mit den folgenden Stildefinitionen wird das div-Ele-ment vertikal zentriert (siehe Abbildung 10-49):

Abbildung 10-48: Vertikales Darstellungsverhalten für absolut positionierte Elemente





top: 0; height: 5em; bottom: 0; margin: auto 0;">

Element D

</div>

</div>

Dabei gibt es zwei kleine Änderungen zu beachten. Im horizontalen Layout kann entwe-der right oder left anhand der statischen Position ausgerichtet werden. Im vertikalenLayout ist das nur mit top möglich; bottom ist diese Möglichkeit aus unerfindlichen Grün-den verschlossen.

Während dieses Buch geschrieben wurde, wird die vertikale Zentrierungmittels auto bei oberen und unteren Außenabständen von keiner einzigenVersion des Internet Explorer unterstützt.

Wurde die Höhe eines absolut positionierten Elements zu sehr eingeschränkt (»overcon-strained«), wird der Wert von bottom ignoriert. In der folgenden Situation wird dessenWert daher mit einem berechneten Wert von 5em überschrieben:




top: 0; height: 5em; bottom: 0; margin: 0;">

Element D

</div>

</div>

Es gibt keine Regel, nach der der Wert von top ignoriert werden soll, wenn die Eigen-schaften zu einschränkende Werte haben.

Platzierung und Größenanpassung von ersetzten Elementen

Für ersetzte Elemente gelten andere Regeln als für nicht-ersetzte, weil diese bereits eine»eingebaute« Höhe und Breite besitzen. Diese wird nur verändert, wenn der Autor es aus-

Abbildung 10-49: Vertikale Zentrierung eines absolut positionierten Elements mittels auf auto gesetzten Außenabständen


drücklich festlegt. Aus diesem Grund gibt es auch keine »Vakuumverpackung« fürersetzte Elemente.

Die Verhaltensweisen für die Platzierung und Größenanpassung ersetzter Elemente las-sen sich am besten mit einer Reihe von Regeln ausdrücken. Diese lauten:

1. Wenn width den Wert auto hat, wird die tatsächliche Breite des Elements verwendet.Ist ein Bild beispielsweise 50 Pixel breit, beträgt auch der berechnete Wert 50px.Wenn width hingegen ausdrücklich festgelegt wurde (etwa als 100px oder 50%), wirddas Element auf diese Breite skaliert.

2. Hat die Eigenschaft left in einer left-to-right-Sprache (ltr) den Wert auto, so wirdauto durch die statische Position ersetzt. In andersherum gelesenen Sprachen giltdies entsprechend für right.

3. Hat entweder left oder right noch den berechneten Wert auto (wurde dieser alsonicht bereits in einem früheren Schritt ersetzt), wird auto entweder für margin-rightoder margin-left durch den Wert 0 ersetzt.

4. Sind zu diesem Zeitpunkt margin-left und margin-right noch auf auto gesetzt, erhal-ten beide den gleichen berechneten Wert. Das Element wird also in seinem umge-benden Block zentriert.

5. Hat nur noch eine Eigenschaft den Wert auto, wird dieser so berechnet, dass dieGleichung erfüllt wird.

Daraus ergeben sich die gleichen grundsätzlichen Verhaltensweisen, die wir bereits beiden absolut positionierten Elementen gesehen haben (sofern diese eine explizite Breitebesitzen). Die folgenden beiden Elemente haben also die gleiche Breite und Platzierung,wenn man davon ausgeht, dass das Bild eine Eigenbreite von 100 Pixeln hat (sieheAbbildung 10-50):

<div style="position: relative; width: 300px;">

<img src="frown.gif" alt="ein schlecht gelauntes Gesicht"

style="position: absolute; top: 0; left: 50px; margin: 0;">

<div style="position: absolute; top: 0; left: 50px;

width: 100px; height: 100px; margin: 0;">

Ein div-Element!

</div>

</div>

Abbildung 10-50: Absolute Positionierung eines ersetzten Elements


Sind die Werte zu sehr eingeschränkt, sollen Benutzerprogramme, wie bei nicht-ersetztenElementen, den Wert für right ignorieren (in von rechts nach links gelesenen Sprachenentsprechend left). Der deklarierte Wert für right wird im folgenden Beispiel mit einemberechneten Wert von 50px überschrieben:

<div style="position: relative; width: 300px;">

<img src="frown.gif" alt="ein schlecht gelauntes Gesicht"

style="position: absolute; top: 0; left: 50px; right: 125px; width: 200px;

margin: 0;">

</div>

Auf ähnliche Weise gibt es für das vertikale Layout eine Reihe von Regeln. Diese lauten:

1. Hat height den Wert auto, wird für den berechneten Wert die Eigenhöhe des Inhaltsfür dieses Element benutzt. Ein Bild mit einer Eigenhöhe von 50 Pixeln erhält alsoden berechneten Wert 50px. Wurde height explizit deklariert (beispielsweise als100px oder 50%), wird die Höhe entsprechend dieses Werts skaliert.

2. Hat top den Wert auto, wird dieser durch die statische Position des ersetzten Ele-ments ausgetauscht.

3. Hat bottom den Wert auto, werden mögliche auto-Werte für margin-top oder margin-bottom durch den Wert 0 ersetzt.

4. Haben margin-top und margin-bottom zu diesem Zeitpunkt immer noch den definier-ten Wert auto, wird für beide der gleiche Wert berechnet. Das Element wird also inseinem umgebenden Block zentriert.

5. Ist nur ein auto-Wert übrig, wird dessen Wert so berechnet, dass die Gleichung auchvertikal aufgeht.

Sind die Werte zu sehr eingeschränkt, soll das Benutzerprogramm, wie bei nicht-ersetztenElementen, den Wert für bottom ignorieren.

Der folgende Markup-Code erzeugt demnach die in Abbildung 10-51 gezeigte Darstel-lung:

<div style="position: relative; height: 200px; width: 200px; border: 1px solid;">

<img src="one.gif" alt="one" width="25" height="25"

style="position: absolute;

top: 0; left: 0; margin: 0;">

<img src="two.gif" alt="two" width="25" height="25"


top: 0; left: 60px; margin: 10px 0; bottom: 4377px;">

<img src="three.gif" alt=" three" width="25" height="25"


left: 0; width: 100px; margin: 10px; bottom: 0;">

<img src="four.gif" alt=" four" width="25" height="25"


top: 0; height: 100px; right: 0; width: 50px;">

<img src="five.gif" alt="five" width="25" height="25"


top: 0; left: 0; bottom: 0; right: 0; margin: auto;">

</div>


Platzierung entlang der z-Achse

Die häufige Positionierung führt ohne Zweifel zu Situationen, in denen zwei Elementeversuchen, an der gleichen Stelle zu existieren. Die Elemente werden sich also überschnei-den. Mit Hilfe der Eigenschaft z-index können Sie kontrollieren, welches Element optisch»über« einem anderen Element dargestellt wird.

Die Eigenschaft z-index gibt Ihnen die Möglichkeit zu kontrollieren, wie sich verschie-dene Elemente überlappen. Der Name der Eigenschaft bezieht sich auf ein Koordinaten-system. Die x-Achse verläuft horizontal (von links nach rechts), die y-Achse vertikal (vonoben nach unten) und die dritte Achse, die so genannte z-Achse, verläuft von vorne nachhinten oder vom Benutzer weg. Entlang dieser Achse erhalten die Elemente bestimmteWerte, die mit der Eigenschaft z-index festgelegt werden. Eine Abbildung dieses Koordi-natensystems sehen Sie in Abbildung 10-52.

Je höher der Wert eines Elements für z-index ist, desto näher befindet sich dieses Elementam Leser. Wie in Abbildung 10-53 zu sehen, überschreiben Elemente mit hohen Wertengegebenenfalls Elemente mit niedrigen Werten. Diese Abbildung ist quasi eine Draufsichtvon Abbildung 10-52. Dieses Verfahren wird als Stapelung (Stacking) bezeichnet.

Abbildung 10-51: Ersetzte Elemente mit Hilfe der Positionierung skalieren

z-index

Werte: <Integerwert> | auto | inherit

Startwert: auto

Anwendung auf: positionierte Elemente

Vererbt: nein



Abbildung 10-52: Konzept der Stapelung mit der Eigenschaft z-index

Abbildung 10-53: Beispiel für die Stapelung von Elementen


Als Wert für z-index kann ein beliebiger ganzzahliger Wert (positiv oder negativ) einge-setzt werden. Ein negativer z-index-Wert bewegt das Element weiter vom Leser weg. Diefolgenden Stildefinitionen geben dieses Verhalten wieder (siehe Abbildung 10-54):

p#erster {position: absolute; top: 0; left: 0;

width: 20%; height: 10em; z-index: 8;}

p#zweiter {position: absolute; top: 0; left: 10%;


p#dritter {position: absolute; top: 15%; left: 5%;


p#vierter {position: absolute; top: 10%; left: 15%;


Alle Elemente wurden gemäß ihrer Stilvorgaben positioniert. Die übliche Stapelreihen-folge wurde jedoch durch die Werte für z-index verändert. Folgen die Absätze im Doku-ment aufeinander, so würde eine sinnvolle Stapelreihenfolge lauten: p#erster, p#zweiter,p#dritter, p#vierter. Dadurch würde aber p#erster in der Darstellung ganz hinten ste-hen und p#vierter ganz vorn. Dank z-index können Sie die Situation jetzt aber selbstkontrollieren.

Wie aus dem vorigen Beispiel ersichtlich ist, müssen die Werte für z-index nicht direktaufeinander folgen. Sie können einen ganzzahligen Wert beliebiger Größe zuweisen.Wenn Sie sichergehen wollen, dass ein bestimmtes Element immer vor allen anderenangezeigt wird, können Sie beispielsweise z-index: 100000 schreiben. Das funktioniertmeistens wie erwartet. Setzen Sie den z-index eines anderen Elements jedoch auf 100001(oder höher), würde nun dieses Element vorne stehen.

Sobald Sie für ein Element einen anderen Wert als auto für z-axis definieren, erhält diesesElement seinen eigenen Stapelkontext. Dadurch erhalten alle Nachfahren dieses Elementsihre eigene Stapelreihenfolge, die sich relativ zum Vorfahren-Element verhält. Dieses Ver-fahren ähnelt dem Verhalten, bei dem Elemente neue umgebende Blöcke anlegen. Daswird durch die folgenden Stildefinitionen illustriert (siehe Abbildung 10-55):

Abbildung 10-54: Gestapelte Elemente können einander überlappen


p {border: 1px solid; background: #DDD; margin: 0;}

b {background: #808080;}

em {background: #BBB;}

#eins {position: absolute; top: 0; left: 0; width: 50%; height: 10em;

z-index: 10;}

#zwei {position: absolute; top: 5em; left: 25%; width: 50%; height: 10em;

z-index: 7;}

#drei {position: absolute; top: 11em; left: 0; width: 50%; height: 10em;

z-index: 1;}

#eins b {position: absolute; right: -5em; top: 4em; width: 20em;

z-index: -404;}

#zwei b {position: absolute; right: -3em; top: auto;

z-index: 36;}

#zwei em {position: absolute; bottom: -0.75em; left: 7em; right: -2em;

z-index: -42;}

#drei b {position: absolute; left: 3em; top: 3.5em; width: 25em;

z-index: 23;}

Beachten Sie, wie sich die b- und em-Elemente in die Stapelreihenfolge einfügen. Jedes Ele-ment ist, bezogen auf sein Elternelement, korrekt positioniert. Bei den beiden Kindele-menten von p#zwei sollten Sie aber besonders genau hinsehen. Beide Elemente stehen vorp#drei! Das liegt daran, dass sich die z-index-Werte von 36 und -42 auf p#zwei beziehenund nicht auf das Dokument im Allgemeinen. Man könnte auch sagen, p#zwei und seineKindelemente haben einen Ausgangs-z-index von 7. Untereinander haben sie außerdemnoch einen eigenen Mini-z-index, der sich nur auf p#zwei bezieht.

Man könnte auch sagen, das b-Element hat einen z-index von 7,36, während das em-Ele-ment einen Wert von 7,-42 hat. Das sind natürlich nur konzeptuelle Werte, die nichts mit

Abbildung 10-55: Positionierte Elemente legen ihren eigenen Stapelkontext an


der CSS-Spezifikation zu tun haben. Dieses System kann aber das Verständnis der Stapel-reihenfolge erleichtern. Nehmen Sie beispielsweise Folgendes:

p#one 10

p#one b 10,-404

p#two b 7,36

p#two 7

p#two em 7,-42

p#three b 1,23

p#three 1

Dieser konzeptuelle Rahmen beschreibt genau die Reihenfolge, in der die Elemente hin-tereinander angeordnet werden. Auch wenn Nachfahren-Elemente vor oder hinter ihremVorfahren-Element stehen können, werden sie immer mit diesem gruppiert.

Ein Element, das seinen eigenen Stapelkontext erzeugt, wird innerhalb dieses Kontextsimmer an Position 0 der z-Achse angeordnet. Der oben genannte Konzeptrahmen lässtsich also folgendermaßen erweitern:

p#one 10,0

p#one b 10,-404

p#two b 7,36

p#two 7,0

p#two em 7,-42

p#three b 1,23

p#three 1,0

Mit einem Wert haben wir uns noch nicht beschäftigt, nämlich mit dem Standardwertauto. Über diesen Wert sagt die Spezifikation Folgendes:

Die Stapelebene der erzeugten Box im gegenwärtigen Stapelkontext entspricht der Box desElternelements. Es wird für die Box kein neuer lokaler Stapelkontext angelegt. (CSS2.1: 9.9.1)

Elemente, deren Wert für z-index mit auto definiert wurde, können demnach behandeltwerden, als hätte z-index den Wert 0. Dabei stellt sich die Frage, was mit Elementen pas-siert, die einen negativen z-index besitzen und Teil des Stapelkontexts des ursprüngli-chen umgebenden Blocks sind. Hierzu folgendes Beispiel:

<body>

<p style="position: absolute; z-index: -1;">Wo bin ich?</p>

</body>

Nach den Stapelregeln sollte sich das body-Element auf der gleichen Ebene befinden wiedie Box seines Elternelements, also 0. Es wird kein neuer Stapelkontext angelegt,wodurch das absolut positionierte Element p im gleichen Stapelkontext steht wie dasbody-Element (dem ursprünglichen umgebenden Block). Der Absatz steht demnach hin-ter dem body-Element. Ist der Hintergrund von body nicht transparent, bleibt der Absatzunsichtbar.

Das war jedenfalls in CSS2 ein mögliches Ergebnis. In CSS2.1 wurden die Regeln dahingehend verändert, dass ein Element niemals hinter den Hintergrund seines eigenen Sta-pelkontexts verschoben werden kann. Nehmen wir beispielsweise den Fall, dass das body-


Element für seine Nachfahren-Elemente einen umgebenden Block definiert (etwa beieiner relativen Positionierung des body). Dabei kann ein absolut positioniertes Elementzwar hinter dem Inhalt des body-Elements stehen, nicht aber hinter dessen Hintergrund.

Während dieses Buch geschrieben wird, wird der Absatz von Mozilla und verwandtenBrowsern vollständig versteckt, selbst wenn Sie für die Elemente body und html transpa-rente Hintergründe definieren. Dieses Verhalten ist falsch. Andere Benutzerprogramme,wie etwa Internet Explorer, richten sich nach der CSS2.1-Spezifikation und platzieren denAbsatz vor dem Hintergrund des body-Elements. In manchen Programmen können nega-tive Werte für z-index allerdings zu unerwarteten Ergebnissen führen. Sie sollten also vor-sichtig verwendet werden.

Feste PositionierungWie bereits im vorigen Abschnitt erwähnt, funktioniert die feste Positionierung nach demgleichen Prinzip wie die absolute Positionierung. Allerdings ist hier der umgebende Blockder gesamte Ansichtsbereich (Viewport). Das Element wird komplett vom Textfluss desDokuments ausgenommen und seine Position hat keinen Bezug zu einem bestimmtenPunkt im Dokument.

Die feste Positionierung kann auf verschiedene interessante Arten genutzt werden. Zuersteinmal ist es möglich, Layouts im Frame-Stil anzulegen. Sehen Sie sich hierzuAbbildung 10-56 an, in der ein sehr häufiges Layout-Schema zu sehen ist.

Das Layout in Abbildung 10-56 wurde mit folgenden Stildefinitionen erreicht:

div#header {position: fixed; top: 0; bottom: 80%; left: 20%; right: 0;

background: gray;}

div#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%;

background: silver;}

Abbildung 10-56: Mit Hilfe fester Positionierung ein Frameset nachbilden


Durch diesen Code werden die Kopfzeile und die Seitenleiste an der Oberkante und derlinken Seite des Ansichtsbereichs verankert. Auch wenn das Dokument gescrollt wird,bleiben diese Elemente an ihrer zugewiesenen Position. Das hat allerdings den Nachteil,dass die verankerten Elemente nun den Rest des Dokuments überlagern. Der Rest desDokuments sollte sich daher vermutlich in seinem eigenen div befinden und die folgen-den zusätzlichen Definitionen enthalten:

div#main {position: absolute; top: 20%; bottom: 0; left: 20%; right: 0;

overflow: scroll; background: white;}

Es ist sogar möglich, die drei div-Elemente mit kleinen Zwischenräumen voneinander zutrennen, indem Sie die nötigen Außenabstände zuweisen (siehe Abbildung 10-57):

body {background: black; color: silver;} /* Farben sicherheitshalber definieren */

div#header {position: fixed; top: 0; bottom: 80%; left: 20%; right: 0;

background: gray; margin-bottom: 2px; color: yellow;}

div#sidebar {position: fixed; top: 0; bottom: 0; left: 0; right: 80%;

background: silver; margin-right: 2px; color: maroon;}

div#main {position: absolute; top: 20%; bottom: 0; left: 20%; right: 0;

overflow: auto; background: white; color: black;}

Abbildung 10-57: Die »Frames« mit Hilfe von Außenabständen optisch voneinander trennen


Zusätzlich können Sie für den Hintergrund von body noch ein Hintergrundbild definie-ren. Dieses würde dann durch die Zwischenräume, die von den Außenabständen erzeugtwerden, sichtbar sein. Sind dem Autor die Außenabstände nicht breit genug, kann erdiese selbstverständlich verbreitern.

Eine andere Anwendungsmöglichkeit für die feste Positionierung kann das Erstellen eines»beständigen« Elements auf dem Bildschirm sein. Dieses könnte beispielsweise eine Listemit Links oder andere wichtige Informationen enthalten. Um eine persistente Fußzeile zuerzeugen, die zum Beispiel Copyright-Informationen oder Ähnliches enthält, können Sieschreiben:

div#footer {position: fixed; bottom: 0; width: 100%; height: auto;}

Durch diese Anweisungen wird die Fußzeile (Footer) am unteren Ende des Ansichtsbe-reichs verankert. Dort bleibt das Element auch, wenn das Dokument gescrollt wird.

Der größte Nachteil der festen Positionierung besteht darin, dass Internet Explorer fürWindows sie nicht unterstützt. Es gibt Workarounds, die JavaScript verwenden, umtrotzdem eine gewisse Unterstützung für die feste Positionierung zu erreichen; diese sindfür Autoren aber nicht immer akzeptabel, weil die Darstellung lange nicht so gut funktio-niert wie bei echter Unterstützung der festen Positionierung. Eine andere Möglichkeitbesteht darin, das Element in IE/Win absolut zu positionieren und die feste Positionie-rung in weiter entwickelten Browsern zu benutzen. Das funktioniert aber nicht für alleLayouts.

Ein solches JavaScript für IE/Win finden Sie unter http://www.doxdesk.com/software/js/fixed.html, ein anderes unter http://www.quirksmode.org. Wei-tere Informationen zur Emulation der festen Positionierung finden Sie außer-dem unter http://css-discuss.incutio.com/?page=EmulatingFixedPositoning.1

Relative PositionierungDie einfachste Form der Positionierung ist die relative Variante. Dabei wird ein Elementanhand der Abstands-Eigenschaften von seiner ursprünglichen Position verschoben.Aber auch das kann ein paar interessante Folgen nach sich ziehen.

An der Oberfläche scheint alles noch ganz einfach. Nehmen wir einmal ein Bild, das nachoben und nach links verschoben werden soll. Dafür verwenden wir folgende Stildefini-tion. Das Ergebnis sehen Sie in Abbildung 10-58:

img {position: relative; top: -20px; left: -20px;}

Hierbei wurde für die Oberkante des Bildes einfach nur ein Abstand zu seiner ursprüngli-chen Position festgelegt. Dieser beträgt 20 Pixel nach oben und die gleiche Entfernung

1 Ja, richtig: Das Wort »positioning« ist falsch geschrieben. So geht das manchmal mit der Sprache. Trotzdemist die Seite eine gute Informationsquelle.


nach links. Wie Sie sehen, entsteht dadurch an der ursprünglichen Position des Bildes einZwischenraum. Das ist bei der relativen Positionierung das normale Verhalten. Das Ele-ment wird von seiner eigentlichen Position verschoben; der Platz, an dem es eigentlichgestanden hätte, wird aber nicht wieder freigegeben. Sehen Sie sich hierzu die unten ste-hende Regel an, die in Abbildung 10-59 dargestellt wird:

em {position: relative; top: 8em; color: gray;}

Wie Sie sehen, enthält der Absatz etwas Leerraum. Das ist der Platz, an dem das em-Ele-ment eigentlich gestanden hätte. An seiner neuen Position nimmt das Element exakt dengleichen Platz in Anspruch wie an seiner ursprünglichen Position.

Selbstverständlich ist es möglich, ein relativ positioniertes Element so zu verschieben,dass andere Inhalte überlappt werden, wie zum Beispiel mit folgenden Definitionen(siehe Abbildung 10-60):

img.slide {position: relative; left: 30px;}

<p>

In diesem Absatz befindet sich ein nach rechts verschobenes Bild. Durch die Verschiebung

<img src="star.gif" alt="Ein Stern!" class="slide">

wird Inhalt in der Nähe überlappt, sofern das Bild nicht das letzte Element in seiner

Zeilenbox ist.

</p>

Wie wir bereits aus früheren Abschnitten wissen, legt ein relativ positioniertes Elementeinen neuen umgebenden Block für seine Kindelemente an. Dieser entspricht der Stelle,an der das Element positioniert wurde.

Abbildung 10-58: Ein relativ positioniertes Element

Abbildung 10-59: Noch ein relativ positioniertes Element


Dabei stellt sich die Frage, was wohl passiert, wenn die Werte für ein relativ positioniertesElement zu stark eingeschränkt sind. Zum Beispiel:

strong {position: relative; top: 10px; bottom: 20px;}

Hier haben Sie zwei widersprüchliche Werte. Mit top: 10px soll das Element um 10 Pixelnach unten verschoben werden, während die Angabe bottom: 20px das Element zur glei-chen Zeit um 20 Pixel nach oben verschieben soll.

In der ursprünglichen Spezifikation für CSS2 gab es keine Angaben dazu, was in diesemFall passieren soll. In CSS2.1 wurde diese Situation präzisiert. Sind die Werte von relativpositionierten Elementen zu stark einschränkend oder widersprechen sich, wird ein Wertmit dem negativen Wert der gegenüberliegenden Eigenschaft überschrieben. Der Wertvon bottom wäre in diesem Fall -top. Das vorige Beispiel wird also folgendermaßen umge-deutet:

strong {position: relative; top: 10px; bottom: -10px;}

Das strong-Element wird also um 10 Pixel nach unten verschoben. In der Spezifikationwird außerdem auf die Schreibrichtung eingegangen. Bei ltr-Sprachen erhält right immerden Wert von -left. In rtl-Sprachen ist es umgekehrt.

ZusammenfassungSchwebende Floats und die Positionierung sind zwei sehr verführerische CSS-Merkmale.Sie können aber auch zu großen Frustrationen führen, wenn Sie bei der Benutzung nichtvorsichtig sind. Die Überschneidung mehrerer Elemente, die Stapelreihenfolge, Größeund Platzierung müssen sehr genau bedacht werden, wenn die Elemente positioniert wer-den. Zudem muss die Beziehung von Floats zum normalen Textfluss beachtet werden.Mit Floats und den Mitteln der Positionierung erstellte Layouts sind beim ersten Entwurfvermutlich noch nicht ganz korrekt. Stimmt aber alles, so wird die Arbeit gut belohnt.

Zwar kann durch die in diesem Kapitel vorgestellten Methoden auf einen Großteil derTabellen im Web verzichtet werden, dennoch gibt es auch weiterhin gute Gründe, Tabel-len einzusetzen, beispielsweise wenn Börsenkurse oder Sportergebnisse dargestellt wer-den sollen. Im nächsten Kapitel werden wir sehen, wie CSS für die Gestaltung vonTabellen benutzt werden kann.

Abbildung 10-60: Relativ positionierte Elemente können andere Inhalte überlappen

| 359

KAPITEL 11

Tabellen-Layout

Wenn Sie die Kapitelüberschrift sehen, fragen Sie sich vielleicht: »Tabellen-Layout? Woll-ten wir das nicht eigentlich vermeiden?« Richtig. Aber in diesem Kapitel geht es nicht umdie Verwendung von Tabellen für das Layout, sondern um die Gestaltung von Tabellenmit Hilfe von CSS. Das ist schwieriger, als es auf den ersten Blick scheint, weshalb wirdiesem Thema auch ein eigenes Kapitel gewidmet haben.

Im Vergleich mit der übrigen Gestaltung von Dokumenten sind Tabellen einmalig. InCSS2.1 sind allein Tabellen in der Lage, die Größe anderer Elemente zu bestimmen. Sohaben alle Zellen einer Tabellenzeile (row) die gleiche Höhe, egal, was die einzelnen Zel-len enthalten. Das Gleiche gilt für die Breite von Zellen in einer Spalte (column). Es gibtkeine andere Layout-Situation, in der sich Größe und Darstellung von Elementen aus ver-schiedenen Teilen des Dokumentbaums so stark gegenseitig beeinflussen.

Der Preis für diese Einmaligkeit besteht in einer großen Zahl verschiedener Verhaltens-weisen und Regeln, die ausschließlich für Tabellen gelten. Im Laufe dieses Kapitels wer-den wir sehen, wie Tabellen visuell angeordnet werden. Wir lernen zwei verschiedeneMethoden kennen, mit denen Zellen mit einem Rahmen versehen werden können; außer-dem beschäftigen wir uns mit den Mechanismen, mit denen die Höhe und Breite vonTabellen und den enthaltenen Elementen bestimmt werden.

Formatierung von TabellenWie auch bei anderen Aspekten von CSS ist es wichtig, erst einmal ein grundsätzlichesVerständnis von Tabellen und deren Aufbau zu bekommen. Außerdem müssen Sie wis-sen, wie sich die Elemente in einer Tabelle zueinander verhalten. All dies zusammennennt man die Formatierung von Tabellen, die sich sehr stark vom Tabellen-Layout unter-scheidet. Letzteres ist nur möglich, wenn die Formatierung abgeschlossen ist.

360 | Kapitel 11: Tabellen-Layout

Visuelle Darstellung von TabellenAls Erstes müssen Sie verstehen, wie die Darstellung von Tabellen mit CSS vorgenommenwird. Auch wenn das etwas simpel erscheint, ist es der Schlüssel zum Verständnis der Stil-definitionen für Tabellen.

In CSS wird zwischen Tabellen-Elementen und den Elementen innerhalb einer Tabelleunterschieden. Die Elemente in einer Tabelle erzeugen rechteckige Boxen, die Inhalte,Innenabstände (padding) und Rahmen (border) besitzen können, aber keine Außenab-stände (margin). Es ist also nicht möglich, die einzelnen Zellen durch die Definition vonAußenabständen voneinander zu trennen. Ein CSS-konformer Browser wird alle Versu-che ignorieren, Zellen, Tabellenzeilen oder andere tabelleninterne Elemente mit einemAußenabstand zu versehen. (Eine Ausnahme bilden die Tabellenüberschriften, zu denenwir später in diesem Kapitel kommen werden.)

Für die Darstellung von Tabellen gibt es sechs Regeln. Die Grundeinheit für diese Regelnist die so genannte Gitterzelle (grid cell). Das ist der Bereich zwischen den Gitterlinien,entlang derer die Tabelle gezeichnet wird. In Abbildung 11-1 sehen Sie zwei Tabellen mitihren Gitterzellen, die durch die gestrichelten Linien angedeutet werden.

In einer einfachen 2 x 2-Tabelle, wie sie links in Abbildung 11-1 zu sehen ist, entsprechendie Gitterzellen den eigentlichen Tabellenzellen. In komplexeren Tabellen, wie der aufder rechten Seite, haben die Tabellenzellen teilweise andere Ausmaße und bestehen even-tuell aus zwei oder mehr Gitterzellen, was auch hier durch die gestrichelten Linien ver-deutlicht wird. Die Tabellenzellen können Sie in diesem Beispiel am einfachsten anhandder Namen unterscheiden.

Diese Gitterzellen sind größtenteils theoretischer Natur. Es ist nicht möglich, für sie Stilezu definieren oder durch das Document Object Model (DOM) auf sie zuzugreifen. Siedienen nur zur Beschreibung, wie Tabellen für die Verwendung von Stylesheets zusam-mengesetzt werden.

Regeln für die visuelle Darstellung von Tabellen

• Eine einzelne Zeile von Gitterzellen bildet eine Tabellenzeilen-Box. (Diese hat nichtsmit den Zeilenboxen aus früheren Kapiteln zu tun.) Alle Tabellenzeilen-Boxen fül-len die Tabelle von oben nach unten in der Reihenfolge, in der sie im Quelldoku-ment erscheinen. (Ausgenommen hiervon sind die Boxen für Kopf- oder Fußzeilen

Abbildung 11-1: Gitterzellen bilden die Grundeinheit für die Gestaltung von Tabellen

Formatierung von Tabellen | 361

von Tabellen, die am oberen bzw. unteren Ende der Tabelle dargestellt werden.) DieAnzahl der Gitterzeilen entspricht also der Anzahl der Zeilenelemente.

• Die Box einer Zeilengruppe (row group) enthält die gleichen Gitterzellen wie die ent-haltenen Tabellenzeilen-Boxen.

• Eine Spaltenbox besteht aus einer oder mehreren Gitterzellen-Spalten. Die Spalten-boxen werden in der Reihenfolge nebeneinander angeordnet, in der sie im Doku-ment erscheinen. Bei Links-nach-rechts-Sprachen befindet sich die erste Spaltenboxauf der linken Seite, bei Rechts-nach-links-Sprachen auf der rechten.

• Die Box einer Spaltengruppe (column group) enthält die gleichen Gitterzellen wiedie enthaltenen Spaltenboxen.

• In CSS ist nicht festgelegt, nach welchen Regeln sich Zellen über mehrere Zeilen undSpalten erstrecken können. Es hängt vielmehr von der Dokumentensprache (HTML,XML usw.) ab, wie hier verfahren wird. Jede Tabellenzelle, die sich über mehrereZeilen oder Spalten erstreckt, entspricht einem Rechteck, das eine bestimmte Anzahlvon Gitterzellen breit und hoch ist. Dabei bildet die oberste Zeile dieses Rechtecksdas Elternelement für die betreffende Zelle. Dieses Rechteck muss in Links-nach-rechts-Sprachen so weit links wie möglich stehen, darf sich aber nicht mit anderenZellenboxen überschneiden. Gleichzeitig muss das Rechteck in solchen Sprachenrechts von allen Zellen stehen, die vorher in dem Dokument erscheinen. Für Rechts-nach-links-Sprachen gilt die Regel entsprechend andersherum.

• Die Box einer Zelle kann sich nicht weiter erstrecken als die letzte Tabellenzeilen-Box oder Zeilengruppe. Kommt es in der Tabellenstruktur zu dieser Situation, mussdie Zelle so weit verkürzt werden, bis sie in die umgebende Tabelle oder Zeilen-gruppe hineinpasst.

In CSS wird davon abgeraten, Tabellenzellen zu positionieren (siehe Kapi-tel 10), auch wenn es nicht ausdrücklich verboten ist. Die Positionierungeiner Tabellenzeile, die Zellen enthält und sich über mehrere Zeilenerstreckt, kann die Darstellung der Tabelle stark verändern. Dabei wird dieTabellenzeile nämlich komplett aus der Tabelle entfernt, wodurch auchdie fraglichen Zellen nicht mehr Teil der Tabelle und der Darstellunganderer Zeilen sind.

Definitionsgemäß sind alle Gitterzellen rechteckig, müssen aber nicht alle die gleicheGröße haben. Sämtliche Gitterzellen einer Gitterspalte haben die gleiche Breite und alleGitterzellen einer bestimmen Gitterzeile haben die gleiche Höhe. Dabei kann sich dieHöhe der einzelnen Gitterzeilen aber unterscheiden. Auf ähnliche Weise kann auch dieBreite der einzelnen Gitterspalten variieren.

Nachdem Sie diese Grundregeln kennen, fragen Sie sich vielleicht, wie Sie die Zellen vonanderen Elementen unterscheiden können. Die Antwort finden Sie im folgendenAbschnitt.


Werte für die Darstellung von TabellenIn HTML kann man einfach ermitteln, welche Elemente Teil einer Tabelle sind, weil dieHandhabung von Elementen wie tr und td bereits in die Browser eingebaut ist. In XMLgibt es jedoch keine Möglichkeit, vorher zu wissen, welche Elemente zu einer Tabellegehören und welche nicht. Und das ist die Stelle, an der eine ganze Reihe neuer Werte fürdisplay ins Spiel kommt.

In diesem Kapitel befassen wir uns nur mit den tabellenbezogenen Werten, da die ande-ren (block, inline, inline-block, run-in und list-item) in anderen Kapiteln behandeltwerden. Die Werte für Tabellen sind:

table

Dieser Wert definiert eine Tabelle, die als Block-Element angesehen werden soll. Erbeschreibt also einen rechteckigen Block, der eine Blockbox erzeugt. Das entspre-chende HTML-Element heißt dann auch table.

inline-table

Dieser Wert definiert eine Tabelle, die als Inline-Element angesehen werden soll. Eswird also ein rechteckiger Block beschrieben, der eine Inline-Box erzeugt. Das ent-spricht am ehesten dem Wert inline-block. Das am nächsten verwandte HTML-Ele-ment ist auch hier table, auch wenn Tabellen eigentlich keine Inline-Elemente sind.

table-row

Definiert ein Element als Tabellenzeile. Dieser Wert entspricht dem HTML-Elementtr.

table-row-group

Definiert ein Element, das eine oder mehrere Tabellenzeilen zusammenfasst (Zeilen-gruppe). Entspricht dem HTML-Element tbody.

display


Startwert: inline


Vererbt: nein

Berechneter Wert: ist für Floats, positionierte und Root-Elemente unterschiedlich (siehe CSS2.1, Abschnitt 9.7); ansonsten wie angegeben

Hinweis: die Werte compact und marker wurden zwar in CSS2 genannt, aber in CSS2.1 wieder verworfen, weil es dafür nicht genügend Unterstützung gab


table-header-group

Dieser Wert (»Kopfzeilen-Gruppe«) ähnelt stark table-row-group. Für die visuelleFormatierung wird ein so markiertes Element jedoch vor allen anderen Zeilen undZeilengruppen und nach möglichen Tabellenüberschriften dargestellt. Erstreckt sicheine Tabelle über mehrere Druckseiten, kann das Benutzerprogramm die Kopfzeileauf jeder Seite wiederholen. In der Spezifikation ist nicht geregelt, was passieren soll,wenn Sie table-header-group auf mehrere Elemente anwenden. Ein als table-header-group markiertes Element kann aus mehreren Zeilen bestehen. Die HTML-Entsprechung für table-header-group ist thead.

table-footer-group

Dieser Wert (»Fußzeilen-Gruppe«) hat starke Ähnlichkeit mit table-header-group,nur dass so markierte Elemente nach allen Zeilen und Zeilengruppen, aber vor mög-lichen Tabellenunterschriften (»bottom captions«) platziert werden. Erstreckt sicheine Tabelle im Druck über mehrere Seiten, kann das Benutzerprogramm die Fußzei-len-Gruppe am unteren Ende jeder Seite wiederholen. In der Spezifikation wird nichtdarauf eingegangen, was passiert, wenn mehreren Elementen der Wert table-footer-group zugewiesen wird. Die HTML-Entsprechung für diesen Wert ist tfoot.

table-column

Definiert ein Element als Tabellenspalte. In CSS werden Elemente mit diesemdisplay-Wert nicht visuell dargestellt, so als hätten sie den Wert none. Dieser Wertdient in erster Linie dazu, die Anordnung von Zellen in einer Spalte zu ermöglichen.Entspricht dem HTML-Element col.

table-column-group

Definiert ein Element als Gruppe aus einer oder mehreren Spalten. Wie table-columnwird auch table-column-group nicht dargestellt. Dieser Wert ist nützlich, um dieDarstellung von Elementen innerhalb einer Spaltengruppe festzulegen. Entsprichtdem HTML-Element colgroup.

table-cell

Mit diesem Wert wird ein Element als einzelne Tabellenzelle definiert. HTML-Ent-sprechungen für table-cell sind th und td.

table-caption

Mit diesem Wert wird ein Element als Tabellenüberschrift (caption) definiert. CSSlegt nicht fest, was passieren soll, wenn mehrere Elemente mit diesem Wert markiertwerden. Es gibt aber die Warnung: »…Autoren sollten in einer Tabelle oder Inline-Tabelle nicht mehr als ein Element mit dem Wert ‘display: caption’ verwenden.«

Ein Auszug aus dem HTML 4.0-Beispiel-Stylesheet aus Anhang C gibt einen schnellenÜberblick über die allgemeinen Auswirkungen dieser Werte:

table {display: table;}

tr {display: table-row;}

thead {display: table-header-group;}

tbody {display: table-row-group;}


tfoot {display: table-footer-group;}

col {display: table-column;}

colgroup {display: table-column-group;}

td, th {display: table-cell;}

caption {display: table-caption;}

In XML, wo die Elemente nicht von sich aus schon die Darstellung steuern, können dieseWerte sehr nützlich sein. Zum Beispiel:

<scores>

<headers>

<label>Team</label>

<label>Score</label>

</headers>

<game sport="MLB" league="NL">

<team>

<name>Reds</name>

<score>8</score>

</team>

<team>

<name>Cubs</name>

<score>5</score>

</team>

</game>

</scores>

Diese Daten lassen sich mit den unten stehenden Stilen in Tabellenform darstellen:

scores {display: table;}

headers {display: table-header-group;}

game {display: table-row-group;}

team {display: table-row;}

label, name, score {display: table-cell;}

Die einzelnen Zellen können dann mit eigenen Stilen versehen werden, wie zum Beispieldie fett gedruckte Darstellung für das Element label oder die rechte Ausrichtung derSpielergebnisse (Scores).

Zwar ist es theoretisch möglich, ein beliebiges HTML-Element mit tabel-lenbezogenen display-Werten zu versehen; es wird von Internet Explorerjedoch nicht unterstützt.

Zeilenvorrang

Das Tabellenmodell von CSS basiert auf dem so genannten »Zeilenvorrang« (row pri-macy). Das Modell geht also davon aus, dass Autoren Markup-Sprachen erstellen, indenen die Zeilen ausdrücklich deklariert werden. Spalten werden jedoch aus der Anord-nung der Tabellenzeilen abgeleitet. Die erste Spalte besteht demnach aus allen ersten Zel-len jeder Tabellenzeile, die zweite Spalte aus allen zweiten Zellen und so weiter.

In HTML ist der Zeilenvorrang nicht so wichtig, weil die Sprache an sich bereits zeilen-orientiert ist. In XML hat dieses Prinzip größere Auswirkungen, weil Autoren nur einge-


schränkt Möglichkeiten haben, um Tabellen mit Markup zu versehen. Eine Markup-Sprache, bei der die Tabellendarstellung spaltenorientiert erfolgt, ist daher mit CSS nichtmöglich (sofern wir davon ausgehen, dass CSS die Aufgabe hat, diese Dokumente darzu-stellen).

Der Zeilenvorrang wird uns im Laufe dieses Kapitels immer wieder begegnen, wenn wiruns mit den Details der Präsentation von Tabellen beschäftigen.

Spalten

Auch wenn das Tabellenmodell in CSS zeilenorientiert funktioniert, spielen Spalten eineRolle bei der Darstellung. Eine Zelle kann gleichzeitig Teil einer Zeile und einer Spaltesein. Das ist selbst dann der Fall, wenn die Zelle im Quelltext des Dokuments von einemTabellenzeilen-Element abstammt. Für Spalten und Spaltengruppen gibt es vier möglicheStileigenschaften: border, background, width und visibility.

Zusätzlich besitzen alle vier Eigenschaften spezielle Regeln, die nur im Spaltenkontextgültig sind:

border

Spalten können nur dann mit einem Rahmen versehen werden, wenn die Eigenschaftborder-collapse den Wert collapse hat. In einem solchen Fall beeinflussen die Rah-men für Spalte und Spaltengruppe die Methode, nach der die Rahmenstile für dieeinzelnen Zellen umgesetzt werden. (Näheres hierzu finden Sie im Abschnitt »Rah-men von Zellen zusammenfassen«.)

background

Der Hintergrund für eine Spalte oder Spaltengruppe ist nur in Zellen sichtbar, beidenen sowohl die Zelle als auch die entsprechende Tabellenzeile einen transparentenHintergrund besitzt. (Mehr dazu finden Sie im Abschnitt »Tabellenebenen« in die-sem Kapitel.)

width

Der Wert der Eigenschaft width bestimmt die minimale Breite einer Spalte oderSpaltengruppe. Der Inhalt einer Zelle innerhalb der betreffenden Spalte (oder-gruppe) kann eine Verbreiterung erzwingen.

visibility

Hat die Eigenschaft visibility für eine Spalte oder Spaltengruppe den Wertcollapse, wird keine der Zellen dieser Spalte (oder -gruppe) dargestellt. Zellen, diesich aus der »versteckten« Spalte in andere Spalten erstrecken, werden beschnitten.Das Gleiche gilt umgekehrt für Zellen, die aus einer nicht-versteckten Spalte in dieversteckte Tabellenspalte ragen. Zudem wird die Gesamtbreite der Tabelle um dieBreite verringert, die die versteckte Spalte eingenommen hätte. Andere Werte fürvisibility als collapse werden für Tabellenspalten und -gruppen ignoriert.


Anonyme TabellenobjekteEs kann passieren, dass eine Markierungssprache nicht genügend Elemente enthält, umeine Tabelle gemäß der CSS-Definitionen vollständig wiederzugeben, oder ein Autor ver-gisst einfach, sämtliche nötigen Elemente in das Dokument zu integrieren. Nehmen Siezum Beispiel diesen XHTML-Code:

<table>

<td>Name:</td>

<td><input type="text"></td>

</table>

Auf den ersten Blick scheint es sich hier um eine Tabelle mit einer aus zwei Zellen beste-henden Tabellenzeile zu handeln. Es fehlt allerdings das Element, das die Tabellenspaltedefiniert (weil das tr fehlt).

Um auch diese Möglichkeiten abzudecken, definiert CSS einen Mechanismus, mit dem»fehlende« Tabellenteile in Form anonymer Objekte ergänzt werden können. Für dasobige XHTML-Beispiel heißt das bezogen auf CSS, dass ein anonymes table-row-Objektzwischen dem table-Element und den davon abstammenden Tabellenzellen eingefügtwird:

<table>

[Beginn des anonymen Tabellenspalten-Objekts]

<td>Name:</td>

<td><input type="text"></td>

[Ende des anonymen Tabellenspalten-Objekts]

</table>

Eine Darstellung dieses Verfahrens sehen Sie in Abbildung 11-2.

Im Tabellenmodell von CSS gibt es insgesamt sieben verschiedene Fälle, in denen ano-nyme Objekte eingefügt werden können. Wie Vererbung und Spezifität versuchen auchdiese Regeln, ein möglichst intuitives Verhalten zu erreichen.

Regeln für die Einfügung von anonymen Objekten

1. Ist das Elternelement einer Zelle (table-cell) keine Tabellenspalte (table-row), wirdzwischen der Zelle und seinem Elternelement ein anonymes table-row-Objekt einge-fügt. Dieses enthält sowohl die Tabellenzelle als auch alle nachfolgenden gleichrangi-gen Elemente. Sehen Sie sich hierzu folgendes Beispiel an:

system {display: table;}

name, moons {display: table-cell;}

Abbildung 11-2: Erzeugung von anonymen Objekten bei der Formatierung von Tabellen


<system>

<name>Mercury</name>

<moons>0</moons>

</system>

Hier wird das anonyme table-row-Objekt zwischen dem system-Element und denZellenelementen eingefügt. Es enthält also die Elemente name und moons.

Das gleiche Prinzip gilt auch, wenn das Elternelement als table-row-group definiertist. Dazu erweitern wir das vorige Beispiel wie folgt:


planet {display: table-row-group;}


<system>

<planet>


<moons>0</moons>

</planet>

<planet>

<name>Venus</name>

<moons>0</moons>

</planet>

</system>

In diesem Beispiel wird jede der beiden Zellengruppen von einem anonymen table-row-Objekt umgeben, das zwischen ihnen und den planet-Elementen eingefügtwird.

2. Ist das Elternelement für table-row weder table, inline-table noch table-row-group, wird zwischen dem table-row-Element und seinem Elternelement ein anony-mes table-Element eingefügt. Dieses enthält die nachfolgenden gleichrangigen Ele-mente des table-row-Elements. Zum Beispiel:

docbody {display: block;}

planet {display: table-row;}

<docbody>

<planet>


<moons>0</moons>

</planet>

<planet>

<name>Venus</name>

<moons>0</moons>

</planet>

</docbody>

Da das Elternelement der Planeten block als display-Wert besitzt, wird zwischenden planet-Elementen und dem docbody ein anonymes table-Element eingefügt.Dieses Objekt umgibt sowohl die planet-Elemente wie auch die nachfolgendengleichrangigen Elemente.


3. Ist das Elternelement einer Tabellenspalte (table-column) weder table, inline-tablenoch table-column-group, wird zwischen table-column und seinem Elternelement einanonymes table-Element eingefügt. Das entspricht in weiten Teilen dem Verhaltenfür table-row, nur dass es hier um Spalten geht.

4. Ist das Elternelement von table-row-group (Gruppe von Tabellenzeilen), table-header-group (Gruppe von Kopfzeilen), table-footer-group (Gruppe von Fußzeilen),table-column-group (Gruppe von Tabellenspalten) oder table-caption (Tabellen-überschrift) kein table-Element, wird zwischen dem Element und seinem Elternele-ment ein anonymes table-Element eingefügt.

5. Ist das Kindelement einer Tabelle (table) oder Inline-Tabelle (inline-table) wederals table-row-group, table-header-group, table-footer-group, table-row oder table-caption markiert, wird zwischen table und dem Kindelement ein anonymes table-row-Objekt eingefügt. Dieses Objekt umgibt alle nachfolgenden gleichrangigen Ele-mente des Kindelements, sofern diese nicht als table-row-group, table-header-group, table-footer-group, table-row oder table-caption markiert sind. Hierzu einBeispiel:




<system>

<planet>


<moons>0</moons>

</planet>

<name>Venus</name>

<moons>0</moons>

</system>

Hier wird zwischen dem system-Element und dem zweiten Satz von name- und moons-Elementen ein anonymes table-row-Objekt eingefügt. Das planet-Element wirdnicht von einem anonymen Objekt umgeben, weil sein Wert für display bereitstable-row ist.

6. Ist das Kindelement eines table-row-group-, table-header-group- oder table-footer-group-Elements kein table-row-Element, wird zwischen dem Element und seinemKindelement ein anonymes table-row-Objekt eingefügt. Dieses anonyme Objektumgibt alle gleichrangigen Elemente des Kindelements, die nicht selbst table-row-Elemente sind:


planet {display: table-row-group;}


<system>

<planet>


<moons>0</moons>


</planet>

<name>Venus</name>

<moons>0</moons>

</system>

Hier wird jeder Satz von name- und moons-Elementen mit einem anonymen table-row-Objekt umgeben. Für den zweiten Satz kommt Regel Nummer 5 zur Anwen-dung. Beim ersten Satz wird das anonyme Objekt zwischen dem planet-Elementund seinen Kindelementen eingefügt, weil planet ein table-row-group-Element ist.

7. Ist das Kindelement einer Tabellenzeile (table-row) keine Tabellenzelle (table-cell),wird zwischen dem Element und seinem Kindelement ein anonymes table-cell-Objekt eingefügt. Dieses umgibt alle gleichrangigen Elemente des Kindelements,sofern diese nicht selbst table-cell-Elemente sind:




<system>

<planet>


<num>0</num>

</planet>

</system>

Da für num kein tabellenbezogener Wert für display festgelegt wurde, wird zwischenplanet und num ein anonymes table-cell-Objekt eingefügt.

Dieses Verhalten gilt auch für die Verkapselung anonymer Inline-Elemente. SehenSie hierzu das folgende Beispiel, in dem kein num-Element enthalten ist:

<system>

<planet>


0

</planet>

</system>

Die 0 wird auch in diesem Fall von einem anonymen table-cell-Element umgeben.Zum besseren Verständnis hier noch ein Beispiel aus der CSS-Spezifikation:

example {display: table-cell;}

row {display: table-row;}

hi {font-weight: 900;}

<example>

<row>Dies ist die <hi>obere</hi> Zeile.</row>

<row>Dies ist die <hi>untere</hi> Zeile.</row>

</example>

Innerhalb jedes row-Elements werden die Textfragmente und die hi-Elemente vonanonymen table-cell-Objekten umgeben.


TabellenebenenFür die Darstellung einer Tabelle werden in CSS sechs verschiedene »Formatierungsebe-nen« definiert. Diese enthalten die verschiedenen Bestandteile einer Tabelle (sieheAbbildung 11-3).

Grundsätzlich werden die verschiedenen Stile für die einzelnen Bestandteile einer Tabelleauf ihrer eigenen Ebene dargestellt. Hat das table-Element beispielsweise einen grünenHintergrund und einen Außenabstand von einem Pixel Breite, werden diese Stile auf deruntersten Formatierungsebene dargestellt. Stile für Spaltengruppen werden eine Ebenedarüber dargestellt, Stile für die Spalten selbst noch eine Ebene höher und so weiter. Dieoberste Ebene, die für Tabellenzellen reserviert ist, wird zuletzt dargestellt.

Im Großen und Ganzen ist das ein logischer Prozess. Deklarieren Sie einen Hintergrundfür Ihre Tabellenzellen, soll dieser schließlich über dem Hintergrund für das table-Ele-ment erscheinen. Der wichtigste Punkt hierbei ist, dass die Stile für Spalten unterhalb derStile für Tabellenzeilen angezeigt werden (siehe Abbildung 11-3). Der Hintergrund einerZeile »verdeckt« also den Hintergrund einer Spalte.

Denken Sie jedoch daran, dass alle Elemente standardmäßig transparente Hintergründebesitzen. Daher ist im folgenden Beispiel der Hintergrund des table-Elements »durch«alle Zellen, Zeilen und Spalten hindurch sichtbar, für die kein eigener Hintergrund defi-niert wurde (siehe Abbildung 11-4):

<table style="background: #888;">

<tr>

<td>Hallo,</td>

<td style="background: #CCC;">da draußen.</td>

</tr>

<tr>

Abbildung 11-3: Die Formatierungsebenen für die Präsentation einer Tabelle


<td>Was</td>

<td>ist los?</td>

</tr>

<tr style="background: #AAA;">

<td>Tiger-</td>

<td style="background: #CCC;">Lilly</td>

</tr>

</table>

TabellenüberschriftenEine Tabellenüberschrift (caption) ist genau das: ein kurzer Textabschnitt, der den Inhaltder Tabelle beschreibt. Die Börsenkurse für das letzte Quartal 2003 könnten beispiels-weise mit einem Überschriften-Element dargestellt werden, das den Text »Kursentwick-lung 4. Quartal 2003« enthält. Mit der Eigenschaft caption-side können Sie diesesElement ober- oder unterhalb der Tabelle platzieren, unabhängig davon, wo in der Tabel-lenstruktur das Element auftaucht (in HTML darf das Element caption nur nach einemöffnenden table-Element stehen; in anderen Sprachen gibt es vielleicht andere Regeln).

Überschriften verhalten sich, zumindest was das Visuelle angeht, ein wenig seltsam. Nachder CSS-Spezifikation soll eine Überschrift formatiert werden, als sei sie eine Blockbox,die direkt vor (oder nach) der Box der Tabelle platziert werden soll. Dabei gibt es abereine Reihe von Ausnahmen. So kann eine Überschrift trotz ihrer Sonderstellung Wertevon der Tabelle erben. Des Weiteren kann das Benutzerprogramm die Box der Über-schrift ignorieren, wenn der Tabelle ein Run-in-Element vorangeht. Run-in-Elemente, die

Abbildung 11-4: Sichtbarer Hintergrund tiefer liegender Formatierungsebenen

caption-side

Werte: top | bottom

Startwert: top

Anwendung auf: Elemente mit dem display-Wert table-caption

Vererbt: nein


Hinweis: die Werte left und right waren Teil von CSS2, wurden in CSS2.1 auf Grundmangelnder Unterstützung aber wieder verworfen


vor der Tabelle stehen, werden also weder in eine oben angeordnete Überschrift noch indie Tabelle selbst hineinlaufen. Stattdessen wird die Run-in-Box behandelt, als wäre ihrdisplay-Wert mit block festgelegt.

Ein einfaches Beispiel sollte ausreichen, um die wichtigsten Aspekte der Darstellung vonÜberschriften zu illustrieren (siehe Abbildung 11-5):

caption {background: gray; margin: 1em 0;

caption-side: top;}

table {color: white; background: black; margin: 0.5em 0;}

In diesem Beispiel erbt der Text des caption-Elements den Wert white für die Eigenschaftcolor von der Tabelle, besitzt aber seinen eigenen Hintergrund. Die Entfernung zwischender Außenkante der Tabelle und der Außenkante des Überschriftenrands beträgt 1em,weil die Oberkante der Tabelle und die Unterkante der Überschrift zusammengefasstwurden (siehe Kapitel 7). Die Breite der Überschrift hängt von der Breite des Inhaltsbe-reichs des table-Elements ab, das als umgebender Block für die Überschrift gilt. Das Glei-che passiert, wenn Sie den Wert caption-side auf bottom ändern, abgesehen davon, dassdie Überschrift unterhalb der Tabellenbox dargestellt wird und nun die Oberkante derÜberschrift und die Unterkante der Tabelle zusammengefasst werden.

Für Überschriften gelten größtenteils die gleichen Stilregeln wie auch für andere Block-Elemente. Sie können also mit Innenabständen, Rahmen, Hintergründen usw. versehenwerden. Wollen Sie beispielsweise die horizontale Ausrichtung des Textes innerhalb derÜberschrift ändern, benutzen Sie auch hier die Eigenschaft text-align. Soll der Textrechts ausgerichtet werden, würden Sie also schreiben:

caption {background: gray; margin: 1em 0;

caption-side: top; text-align: right;}

Rahmen für TabellenzellenIn CSS gibt es zwei sehr unterschiedliche Modelle für die Rahmen von Elementen. Zumeinen gibt es das Modell der »getrennten« (separated) Rahmen. Dieses wird angewandt,wenn Zellen im Layout voneinander getrennt dargestellt werden sollen. Die andere

Abbildung 11-5: Stildefinitionen für Überschriften und Tabellen

Rahmen für Tabellenzellen | 373

Option ist das Modell der zusammengefassten (collapsed) Rahmen, bei dem es keinevisuelle Trennung zwischen den einzelnen Zellen gibt und die Rahmen zusammengefasstdargestellt werden.

Als Autor können Sie mittels der Eigenschaft border-collapse zwischen beiden Modellenwählen.

Der einzige Zweck dieser Eigenschaft besteht darin, dem Autor die Möglichkeit zu geben,zwischen den verschiedenen Rahmen-Modellen zu wählen. Beim Wert collapse werdendie Rahmen zusammengefasst, beim Wert separate wird das Modell der getrennten Rah-men verwendet. Wir werden uns zuerst mit den getrennten Rahmen beschäftigen, weildiese wesentlich leichter zu erklären sind.

Getrennte Rahmen für ZellenIn diesem Modell haben die einzelnen Tabellenzellen einen gewissen Abstand zueinan-der. Die Rahmen der einzelnen Zellen werden nicht zusammengefasst oder »ineinandergeschoben«. Folgende Regeln und der dazugehörige Markup-Code ergeben daher dieDarstellung in Abbildung 11-6:

table {border-collapse: separate;}

td {border: 3px double black; padding: 3px;}

<table cellspacing="0">

<tr>

<td>Zelle eins</td>

<td>Zelle zwei</td>

</tr>

<tr>

<td>Zelle drei</td>

<td>Zelle vier</td>

</tr>

</table>

Wie Sie sehen, überschneiden sich die Rahmen der einzelnen Zellen nicht. Die drei Linienzwischen den Zellen sind eigentlich die zwei Rahmen, die direkt nebeneinander liegen.

Im obigen Beispiel haben wir das HTML-Attribut cellspacing benutzt, um sicherzustel-len, dass die Zellen direkt nebeneinander stehen. Allerdings ist dieser Weg ein wenig

border-collapse

Werte: collapse | separate | inherit

Startwert: separate

Anwendung auf: Elemente, deren Wert für display entweder table oder inline-table ist

Vererbt: ja


Hinweis: in CSS2 war der Standardwert collapse


holprig. Wenn Sie die Rahmen schon voneinander trennen können, dann sollte es aucheine Möglichkeit geben, um festzulegen, wie weit. Die Lösung finden Sie im folgendenAbschnitt.

Rahmenabstand (border spacing)

Gelegentlich sollen die Rahmen der einzelnen Zellen einen gewissen Abstand zueinanderhaben. Das lässt sich leicht mit der Eigenschaft border-spacing erreichen, die im Ver-gleich zum HTML-Attribut cellspacing wesentlich vielseitiger ist.

Für diese Eigenschaft können bis zu zwei Längenwerte angegeben werden. Sollen alle Zel-len einen Pixel voneinander entfernt sein, wäre border-spacing: 1px; ausreichend. Sollendie Zellen aber nur horizontal einen Pixel Entfernung haben, vertikal dagegen 5 Pixel,müssten Sie border-spacing: 1px 5px; schreiben. Bei der Angabe von zwei Werten wirdder erste immer als horizontaler Parameter angesehen, während der zweite den vertikalenAbstand bestimmt.

Diese Werte bestimmen den Abstand der Rahmen zueinander. Das gilt für die Rahmenzwischen Zellen, an den Außenseiten der Tabelle und den Innenabständen am Tabellen-element selbst. Mit den unten stehenden Stildefinitionen erhalten Sie das inAbbildung 11-7 gezeigte Ergebnis:

table {border-spacing: 3px 5px; border-collapse: separate; padding: 10px;

border: 2px solid black;}

td {border: 1px solid gray;}

td#squeeze {border-width: 5px;}

In Abbildung 11-7 haben die zwei horizontal nebeneinander stehenden Rahmen einenAbstand von 3 Pixel. Zwischen den äußeren Zellenrändern und dem Rahmen der Tabelle

Abbildung 11-6: Getrennte Rahmen für Tabellenzellen

border-spacing

Werte: <Abstand> <Abstand>? | inherit

Startwert: 0

Anwendung auf: Elemente mit dem display-Wert table oder inline-table

Vererbt: ja

Berechneter Wert: zwei absolute Längenwerte

Hinweis: die Eigenschaft wird ignoriert, es sei denn, der Wert für border-collapse istseparate


(ganz links und rechts) beträgt der Abstand 13 Pixel. Vertikal sind die inneren Rah-menkanten 5 Pixel voneinander entfernt. Die äußeren Rahmenkanten der Zellen sindgleichzeitig 15 Pixel von der oberen bzw. unteren Rahmenkante des table-Elements ent-fernt. Der Abstand zwischen den Zellenrahmen bleibt auch dann gleich, wenn die Rah-men selbst unterschiedlich breit sind.

Bei dem Modell der getrennten Rahmen können für Zeilen, Zeilengruppen, Spalten undSpaltengruppen keine Rahmen festgelegt werden. Wurden für diese Elemente trotzdemRahmeneigenschaften deklariert, werden sie von CSS-konformen Benutzerprogrammenignoriert.

Umgang mit leeren Zellen

Da sich jede Zelle visuell von den anderen Zellen der Tabelle unterscheidet, brauchen Sieeine Möglichkeit, um zu steuern, was mit leeren Zellen (Zellen ohne Inhalt) passierensoll. Zu diesem Zweck gibt es die Eigenschaft empty-cells.

Hat empty-cells den Wert show, werden Rahmen und Hintergrund der leeren Zelle, wiebei Zellen mit Inhalt, angezeigt. Ist der Wert dagegen hide, werden diese Dinge nicht dar-gestellt, als hätte visibility für die Zelle den Wert hidden.

Sobald eine Zelle etwas enthält, ist sie logischerweise nicht mehr leer. »Inhalt« bedeutetin diesem Fall nicht nur Text, Bilder, Formularelemente, sondern auch geschützte Leer-zeichen ( ) und andere Whitespace-Zeichen. Ausgenommen davon sind CR(Wagenrücklauf), LF (Zeilenumbruch), Tabulatoren und das Leerzeichen. Sind alle Zel-

Abbildung 11-7: Auswirkungen von Rahmenabständen zwischen Zellen und dem umgebenden Tabellenelement

empty-cells

Werte: show | hide | inherit

Startwert: show

Anwendung auf: Elemente mit dem display-Wert table-cell

Vererbt: ja


Hinweise: Eigenschaft wird nur beachtet, wenn border-collapse der Wert separatezugewiesen wurde


len einer Tabellenzeile leer und haben außerdem den empty-cells-Wert hide, wird dieganze Zeile so behandelt, als wäre ihr display-Wert auf none gesetzt worden.

Beim Schreiben dieses Buches gab es im Internet Explorer noch keine voll-ständige Unterstützung für empty-cells.

Rahmen von Zellen zusammenfassenDie zweite Möglichkeit, eine Tabelle darzustellen, funktioniert nach dem »Zusammenfas-sungs«-Modell. Dieses beschreibt zwar größtenteils, wie HTML-Tabellen immer schondargestellt wurden, ist aber etwas komplizierter als das Modell der getrennten Rahmen.Zudem gibt es bei zusammengefassten Rahmen einige Regeln, die beide Modelle vonein-ander unterscheiden. Diese sind:

• Elemente in Tabellen können keine Außenabstände haben, Innenabstände sindmöglich. Zwischen den außen liegenden Zellen und dem Rahmen um die Außen-seite der Tabelle gibt es also keine Zwischenräume.

• Rahmen können für Zellen, Tabellenzeilen, Zeilengruppen, Spalten und Spalten-gruppen definiert werden. Das Tabellenelement selbst kann, wie sonst auch, einenRahmen besitzen.

• Zwischen den Rahmen der Zellen kann es keine Zwischenräume geben. Treffen dieRahmenkanten zweier Zellen aufeinander, werden diese zu einer gemeinsamenKante zusammengefasst. Dieses Verhalten ähnelt dem Zusammenfassen von Außen-abständen, bei dem der breitere Außenabstand gewinnt. Bei Zellenrahmen gewinntjedoch der »interessantere« von beiden. (Details hierzu finden Sie im Abschnitt»Zusammenfassen von Rahmen«.)

• Nach dem Zusammenfassen werden die Rahmen zwischen den Zellen auf den hypo-thetischen Gitterlinien zwischen den Zellen zentriert.

Die letzten beiden Punkte werden wir uns in den folgenden zwei Abschnitten etwasgenauer ansehen.

Darstellung von zusammengefassten Rahmen

Für ein besseres Verständnis des Modells der zusammengefassten Rahmen wollen wir unseinmal eine einzelne Tabellenzeile ansehen (siehe Abbildung 11-8).

Die Breite des Inhalts und der Innenabstände überschreitet dabei, wie zu erwarten, nichtdie Rahmen. Die Rahmen zwischen den Zellen befinden sich jeweils zur Hälfte links undrechts der Gitterlinie. Zwischen zwei Zellen wird also nur eine Rahmenkante gezeichnet,die sich die aneinander grenzenden Zellen teilen. Auch wenn es so aussieht, werden hiernicht die Rahmenkanten beider Zellen zur Hälfte dargestellt, sondern tatsächlich nur einegemeinsame Kante.


Wir stellen uns vor, die durchgehenden Rahmen in der Mitte seien grün und die durchge-henden Rahmen der äußeren beiden Zellen rot. In diesem Fall würden die Rahmen aufder linken und der rechten Seite der mittleren Zelle (die mit den inneren Rahmenkantender beiden außen liegenden Zellen zusammengefasst werden) entweder beide grün oderbeide rot sein, je nachdem, welcher Rahmen die Priorität erhält. Im folgenden Abschnittwerden wir sehen, wie Sie ermitteln können, welcher Rahmen das ist.

Wie Sie sehen, erstrecken sich die äußeren Rahmenkanten über die Breite der Tabellehinaus. Das liegt daran, dass in diesem Modell nur die Hälfte der Tabellenrahmen in dieBreite einbezogen wird. Die äußere Hälfte ragt darüber hinaus bzw. in den Randbereichhinein. Das mag jetzt zwar etwas seltsam erscheinen, aber so ist das Modell nun einmaldefiniert.

In der Spezifikation gibt es für die Berechnungen des Layouts eine Formel. Diese gebenwir hier für diejenigen unter Ihnen wieder, die Spaß an Mathematik haben:

Zeilenbreite = (0.5 * Rahmenbreite0) + linker Innenabstand1 + Breite1 +

rechter Innenabstand1 + Rahmenbreite1 + linker Innenabstand2 +...+

rechter Innenabstandn + (0.5 * Rahmenbreiten)

Jede Rahmenbreitei bezieht sich hierbei auf die Rahmenseite zwischen Zelle i und dernächsten Zelle. Rahmenbreite3 bezeichnet also die Rahmenseite zwischen der dritten undder vierten Zelle. Der Wert n steht für die Gesamtzahl aller Zellen einer Tabellenzeile. Beidiesem Verfahren gibt es jedoch eine kleine Ausnahme. Wenn das Benutzerprogrammbeginnt, eine Tabelle mit zusammengefassten Rahmen darzustellen, berechnet es zuerstdie linke und rechte Rahmenseite der Tabelle selbst. Hierfür wird die Rahmenbreite derersten Zelle in der ersten Tabellenzeile ermittelt. Die Hälfte dieses Wertes wird nun als

Abbildung 11-8: Darstellung einer Tabelle mit zusammengefassten Rahmen


Breite für die linke Rahmenseite der Tabelle verwendet. Als Nächstes ermittelt das Benut-zerprogramm die Breite der rechten Rahmenseite der letzten Zelle. Dieser Wert wirdebenfalls halbiert und als Breite für die rechte Rahmenseite der Tabelle verwendet. Ist dielinke oder rechte Rahmenseite bei den folgenden Tabellenzeilen breiter, werden dieseüber den Außenabstand der Tabelle hinausragen.

Hat die Rahmenbreite einen ungeraden Wert (Pixel, Punkte usw.), muss das Benutzer-programm entscheiden, wie die Zentrierung des Rahmens auf der Gitterlinie vorgenom-men wird. Der Rahmen kann leicht verschoben werden oder der Wert wird auf- oderabgerundet oder etwas anderes Sinnvolles passiert.

Zusammenfassen von Rahmen

Wenn zwei Rahmen aneinander grenzen, werden sie zusammengefasst. Dabei gibt esklare Regeln, nach denen festgelegt wird, welche Rahmenseite über die andere Prioritätbekommt:

• Wurde einem der zusammengefassten Rahmen hidden als Wert für border-stylezugewiesen, so erhält dieser Rahmen Vorrang vor allen anderen Rahmen. SämtlicheRahmen(seiten) an dieser Stelle werden verborgen.

• Hat einer der zusammengefassten Rahmen für border-style den Wert none, erhält erdie niedrigste Priorität. An dieser Position werden keine Rahmen dargestellt, es seidenn, alle zusammengefassten Rahmen haben den Standardwert none.

• Hat mindestens einer der zusammengefassten Rahmen einen anderen Wert als noneoder hidden, dann bekommen breitere Rahmen Priorität über schmale Rahmen.Haben mindestens zwei Rahmen die gleiche Breite, erhalten die Werte für border-style folgende absteigende Rangfolge: double, solid, dashed, dotted, ridge, outset,groove, inset. Werden zwei Rahmen mit der gleichen Breite zusammengefasst undein Rahmen ist als dashed definiert und der andere als outset, so wird der Rahmenan dieser Stelle gestrichelt (dashed) dargestellt.

• Haben zusammengefasste Rahmen den gleichen Rahmenstil und die gleiche Breite,unterscheiden sich aber in der Farbe, so wird die Rahmenfarbe anhand folgenderRangfolge von Elementen festgelegt: Zelle, Tabellenzeile, Zeilengruppe, Spalte,Spaltengruppe, Tabelle. Sollen die Rahmen einer Zelle und einer Spalte zusammen-gefasst werden und haben dabei die gleiche Breite und den gleichen Rahmenstil,aber unterschiedliche Farben, so erhält die Zelle den Zuschlag. Es werden Farbe,Rahmenstil und Breite des Zellenrahmens für die Darstellung verwendet. Haben diezusammengefassten Rahmen den gleichen Elementtyp, muss das Benutzerprogrammentscheiden, was passieren soll.

Das folgende Beispiel soll Ihnen helfen, die vier Regeln zu verstehen. Die Darstellungdazu sehen Sie in Abbildung 11-9:

table {border-collapse: collapse;

border: 3px outset gray;}

td {border: 1px solid gray; padding: 0.5em;}


#r2c1, #r2c2 {border-style: hidden;}

#r1c1, #r1c4 {border-width: 5px;}

#r2c4 {border-style: double; border-width: 3px;}

#r3c4 {border-style: dotted; border-width: 2px;}

#r4c1 {border-bottom-style: hidden;}

#r4c3 {border-top: 13px solid silver;}

<table>

<tr>

<td id="r1c1">1-1</td><td id="r1c2">1-2</td>


</tr>

<tr>



</tr>

<tr>



</tr>

<tr>



</tr>

</table>

Wir wollen uns die Ergebnisse für die Zellen nun im Einzelnen ansehen:

• Für die Zellen 1-1 und 1-4 sind die 5-Pixel-Rahmen breiter als die der angrenzendenZellen. Sie erhalten daher Priorität über die angrenzenden Rahmen sowie den Rah-men der Tabelle selbst. Einzige Ausnahme ist die Rahmenunterseite von Zelle 1-1,die nicht dargestellt wird.

• Die Rahmenunterseite von Zelle 1-1 wurde nicht dargestellt, weil die Rahmen für dieZellen 2-1 und 2-2 explizit als hidden definiert wurden. Daher wurden die Rahmen-seiten entfernt. Auch hier hat der Rahmen der Tabelle (an der linken Seite von Zelle2-1) eine geringere Priorität als der Rahmen einer Zelle. Die Rahmenunterseite von

Abbildung 11-9: Änderungen an Breite, Rahmenstil und Farbe von Rahmen können zu interessanten Ergebnissen führen


Zelle 4-1 wurde ebenfalls verborgen. Es werden daher unterhalb von Zelle 4-1 eben-falls keine Rahmen angezeigt.

• Der 3 Pixel breite, als double definierte Rahmen von Zelle 2-4 wurde von dem 5 Pixelbreiten, als solid definierten Rahmen von Zelle 1-4 überschrieben. Der Rahmen von2-4 überschreibt seinerseits den Rahmen von Zelle 2-3, weil dieser sowohl breiter alsauch »interessanter« ist. Er hat außerdem Vorrang gegenüber dem Rahmen vonZelle 3-4, weil der Rahmenstil double, trotz der gleichen Breite, »interessanter« ist alsder Rahmenstil dotted von Zelle 3-4.

• Der 13 Pixel breite, silbergraue Rahmen von Zelle 3-3 überschreibt die Rahmenober-seite von Zelle 4-3. Außerdem beeinflusst dieser Rahmen auch die Darstellung bei-der Zellen und der Zeile, die beide Zellen enthält.

• Die 1 Pixel breiten (und standardmäßig durchgängig dargestellten) Rahmen der Zel-len an der Außenseite der Tabelle werden vom 3 Pixel breiten, explizit als outsetdefinierten Rahmen des table-Elements selbst überschrieben.

Diese Verhaltensweisen sind tatsächlich so kompliziert, wie sie klingen. Dennoch sind siegrößtenteils recht intuitiv und machen mit ein wenig Übung schnell Sinn. In diesemZusammenhang sollte man noch erwähnen, dass sich die HTML-Tabellendarstellung ausder Netscape-Zeit, mit einem sehr einfachen Regelsatz nachbilden lässt (sieheAbbildung 11-10):

table {border-collapse: collapse; border: 2px outset gray;}

td {border: 1px inset gray;}

GrößenangabenNachdem wir uns eingehend mit der Tabellen-Formatierung und dem Rahmenstil derZellenrahmen beschäftigt haben, können wir uns nun dem nächsten Thema widmen. Siehaben jetzt das nötige Grundwissen, um sich mit den Größenangaben und -berechnun-gen von Tabellen und den darin befindlichen Elementen auseinander setzen zu können.Bei der Ermittlung der Tabellenbreite gibt es ebenfalls zwei verschiedene Ansätze: dieDarstellung mit fester Breite und die Darstellung mit automatischer Breitenbestimmung.Die Höhen von Tabellen werden, unabhängig von der verwendeten Breitenbestimmung,prinzipiell automatisch berechnet.

Abbildung 11-10: Oldschool-Tabellenpräsentation mit Hilfe von CSS wieder auferstehen lassen

Größenangaben | 381

BreiteDa es zwei verschiedene Möglichkeiten gibt, die Breite einer Tabelle zu ermitteln, mussauch der Autor eine Möglichkeit haben, um festzulegen, welche Methode verwendet wer-den soll. Das geschieht mit Hilfe der Eigenschaft table-layout.

Auch wenn beide Modelle bei der Darstellung zu unterschiedlichen Ergebnissen führenkönnen, gibt es einen noch grundlegenderen Unterschied in der Geschwindigkeit. Wurdefür die Darstellung eine feste Breite (table-layout: fixed) gewählt, kann das Benutzer-programm die Darstellung der Tabelle schneller berechnen als bei der automatischenBreitenberechnung.

Feste Breitenangabe

Der Hauptgrund für die Schnelligkeit der festen Breitenangabe besteht darin, dass dieDarstellung nicht vom Inhalt der Tabellenzellen abhängt. Stattdessen werden die width-Werte der Tabelle, Spalten und Zellen für die Ermittlung der Breite benutzt.

Dabei werden nacheinander folgende Schritte durchgeführt:

1. Bei jeder Spalte, die einen anderen Wert für width besitzt als auto, wird dieser Wertfür die Spaltenbreite auch benutzt.

2. Wurde die Breite einer Spalte mit auto angegeben, während die Zelle der erstenTabellenzeile in dieser Spalte einen anderen Wert als auto hat, so bestimmt dieseZelle die Breite der Spalte. Reicht die betreffende Zelle über mehrere Spalten, wirdihr Wert für die Breite durch die Anzahl der Spalten geteilt.

3. Alle Spalten, deren Breite danach immer noch den Wert auto hat, werden so darge-stellt, dass sie möglichst gleich breit sind.

An diesem Punkt wird die Breite der Tabelle entweder auf ihren Wert für width festgelegtoder aber auf die Summe der Spaltenbreiten – je nachdem, welcher Wert größer ist. Ist dieTabelle breiter als die Summe ihrer Spalten, wird die Differenz gleichmäßig zwischen denSpalten aufgeteilt.

Dieser Ansatz ist deshalb so schnell, weil die Breiten aller Spalten anhand der erstenTabellenzeile ermittelt werden. Die Zellen in den folgenden Tabellenzeilen erhalten die

table-layout

Werte: auto | fixed | inherit

Startwert: auto


Vererbt: ja



zuvor für die Spalten ermittelten Breiten. Diese ändern die Breite der Spalten nicht mehr.Wurde für diese Zellen ein width-Wert festgelegt, wird dieser ignoriert. Ist die Zelledadurch zu klein für ihren Inhalt, bestimmt der Wert für overflow, ob der Inhalt beschnit-ten wird, sichtbar bleibt oder ob ein Scrollbalken erzeugt wird.

Betrachten Sie folgendes Beispiel (siehe Abbildung 11-11):

table {table-layout: fixed; width: 400px;

border-collapse: collapse;}

td {border: 1px solid;}

col#c1 {width: 200px;}

#r1c2 {width: 75px;}


<table>

<colgroup>

<col id="c1"><col id="c2"><col id="c3"><col id="c4">

</colgroup>

<tr>



</tr>

<tr>



</tr>

<tr>



</tr>

<tr>



</tr>

</table>

Wie Sie sehen, ist die erste Spalte in Abbildung 11-11 200 Pixel breit und nimmt damitdie Hälfte der Tabellenbreite ein. Die zweite Spalte hat eine Breite von 75 Pixeln, weil derentsprechenden Zelle der ersten Tabellenzeile dieser Wert explizit zugewiesen wurde. Diedritte und vierte Spalte sind jeweils 61 Pixel breit. Dieser Wert kommt folgendermaßenzustande: Die Summe der Breiten der ersten und zweiten Spalte beträgt 275 Pixel. Hinzukommt die Breite des dazwischen liegenden Rahmens (3px). Es ergibt sich also eine Breitevon 278 Pixeln. Subtrahiert man diesen Wert von der Gesamtbreite der Tabelle (400px),

Abbildung 11-11: Tabellendarstellung mit fester Breite


ergibt sich eine Differenz von 122 Pixeln. Dieser Wert wird gleichmäßig auf die verblei-benden zwei Spalten verteilt, wodurch sich für jede eine Breite von 61 Pixeln ergibt. DieBreite von 500 Pixeln für #r2c3 wird ignoriert, weil sich diese Zelle nicht in der erstenTabellenzeile befindet.

Es ist zwar nicht absolut notwendig, dass der Tabelle ein expliziter Wert für die Breitezugewiesen wird, damit dieses Modell funktioniert, aber es hilft. Im folgenden Beispielmuss das Benutzerprogramm die Breite einer Tabelle bestimmen, die 50 Pixel schmalerist als die Breite ihres Elternelements. Dafür wird in diesem Fall der Festbreiten-Algorith-mus benutzt:

table {table-layout: fixed; margin: 0 25px;

width: auto;}

Dieses Vorgehen ist aber nicht zwingend. Sobald eine Tabelle für width den Wert autobenutzt, darf ein Benutzerprogramm auch nach dem Modell für die automatische Brei-tenbestimmung vorgehen.

Automatisches Layout

Auch wenn das automatische Layout nicht so schnell ist wie die Festbreiten-Darstellung,ist es Ihnen vermutlich wesentlich vertrauter, weil HTML-Tabellen seit Jahren nach die-sem Verfahren dargestellt werden. Das automatische Layout wird verwendet, sobaldeiner Tabelle für width der Wert auto zugewiesen wurde. Dabei ist der Wert für table-layout nicht bindend.

Das automatische Layout ist langsamer, weil sich das Benutzerprogramm vor der Darstel-lung sämtliche Inhalte der Tabelle ansehen muss. Das bedeutet, die Darstellung derTabelle muss mehrere Male neu berechnet werden, bis die endgültigen Werte feststehen.Wie bei HTML-Tabellen muss der Inhalt vollständig bekannt sein. Befindet sich bei-spielsweise in der letzten Zelle ein 400 Pixel breites Bild, müssen auch alle Zellen (in dergleichen Spalte) darüber eine Breite von 400 Pixeln haben. Daher muss erst die Breitejeder Zelle berechnet und gegebenenfalls angepasst werden (wodurch möglicherweise diegesamte Tabelle neu berechnet werden muss), bevor die endgültige Darstellung feststeht.

Die Einzelheiten dieses Modells können mit folgenden Schritten beschrieben werden:

1. Berechne für jede Zelle einer Spalte die minimale und maximale Breite.

a. Berechne die minimal benötigte Breite, um den Inhalt darzustellen. Dabei darfder Inhalt eine beliebige Anzahl von Zeilen lang sein, aber nicht über die Boxder Zelle hinausragen. Wenn der width-Wert für die Zelle größer als der berech-nete Minimalwert ist, wird dieser dem expliziten Wert für width angepasst. Istder Wert dagegen auto, wird die Minimalbreite der Zelle der Minimalbreite fürden Inhalt angepasst.

b. Die Maximalbreite wird bestimmt von der Breite, die nötig ist, um den Inhaltohne implizite Zeilenumbrüche darzustellen. Explizit eingefügte Umbrüche (zumBeispiel <br>) sind hiervon ausgenommen.


2. Berechne für jede Spalte die minimale und maximale Breite.

a. Die kleinste für eine Zelle dieser Spalte berechnete Minimalbreite bestimmt dieMinimalbreite der Spalte. Wenn der width-Wert einer Spalte größer als dieBreite der schmalsten Zelle ist, wird die Minimalbreite der Spalte dem explizitenWert für width angepasst.

b. Die größte für eine Zelle dieser Spalte berechnete Maximalbreite bestimmt dieMaximalbreite der Spalte. Wenn der width-Wert für die Spalte größer als derberechnete Maximalwert ist, wird die Maximalbreite der Spalte dem Wert fürwidth angepasst. Durch diese zwei Regeln wird das traditionelle HTML-Verhal-ten nachgebildet, nach dem eine Spalte immer so breit ist wie die breiteste ent-haltene Zelle.

3. Überspannt eine Zelle mehr als eine Spalte, so muss die Summe der Minimalbreitender überspannten Spalten der minimalen Breite für diese Zelle entsprechen. Entspre-chend muss die Summe der Maximalbreiten der überspannten Spalten mit der Maxi-malbreite für die Zelle identisch sein. Veränderungen auf die Spaltenbreite müssengleichmäßig zwischen den überspannten Spalten verteilt werden.

Wurde für eine Spalte ein Prozentwert für width benutzt, muss das Benutzerprogrammdiesen Wert anhand der Tabellenbreite berechnen, auch wenn dieser Wert noch nichtbekannt ist!

An diesem Punkt hat das Benutzerprogramm ermittelt, wie breit oder schmal die einzel-nen Spalten sein sollen. Mit diesen Informationen kann nun die Breite der eigentlichenTabelle berechnet werden. Das geschieht folgendermaßen:

1. Ist der berechnete Wert für die Tabellenbreite nicht auto, so wird dieser mit derSumme aller Spalten- und Rahmenbreiten und übrigen Leerräume der Zelle vergli-chen. (Prozentwerte für Breiten werden sehr wahrscheinlich an diesem Punkt aufge-löst.) Der größere Wert von beiden ist die letztendliche Breite der Tabelle. Ist dieberechnete Breite der Tabelle größer als die Summe der Spalten- und Rahmenbreitenund übrigen Leerräume der Zelle, so wird die Breite aller Spalten gleichmäßigerhöht, bis sie genau in die Tabelle passen.

2. Ist der berechnete Wert für die Breite der Tabelle auto, so wird die endgültige Breiteermittelt, indem die Spalten- und Rahmenbreiten sowie die übrigen Leerräume derZelle addiert werden. Die Tabelle wird also, wie traditionelle HTML-Tabellen, nurso breit wie nötig, um den Inhalt darzustellen. Bei Spalten mit prozentualen Breitenwird dieser Wert als Maximalwert angesehen, wobei Benutzerprogramme sichjedoch nicht an diesen Wert halten müssen.

Erst nachdem auch dieser letzte Schritt ausgeführt ist, kann das Benutzerprogramm dieTabelle darstellen.

Die folgenden Stildefinitionen und der dazugehörige Markup-Code sollen die Funktions-weise dieses Prozesses verdeutlichen (siehe Abbildung 11-12):


table {table-layout: auto; width: auto;

border-collapse: collapse;}

td {border: 1px solid;}

col#c3 {width: 25%;}

#r1c2 {width: 40%;}




#r4c4 {width: 1px;}

<table>

<colgroup>

<col id="c1"><col id="c2"><col id="c3"><col id="c4">

</colgroup>

<tr>



</tr>

<tr>



</tr>

<tr>



</tr>

<tr>



</tr>

</table>

Wir werden diesen Vorgang noch einmal spaltenweise betrachten:

• Die einzige explizite Zellen- oder Spaltenbreite ist in der ersten Spalte die Breite vonZelle 4-1. Dieser wurde 100px als Wert für width zugewiesen. Da der Inhalt sehr kurzist, betragen die Minimal- und die Maximalbreiten beide 100px. (Enthielte eine Zelledieser Spalte mehrere Sätze Text, würde die Maximalbreite so weit angepasst, dassder gesamte Text auf einer einzigen Zeile dargestellt werden könnte.)

• Für die zweite Spalte wurden zwei Breitenwerte deklariert: 40% für den Wert vonwidth von Zelle 1-2 und 50px für width von Zelle 2-2. Die Minimalbreite dieser Spaltebeträgt daher 50px, die Maximalbreite beträgt 40% der endgültigen Tabellenbreite.

Abbildung 11-12: Automatisches Tabellen-Layout


• In der dritten Spalte hat nur Zelle 3-3 eine explizite Breite (35px), wobei der Wert fürwidth für die Spalte selbst mit 25% angegeben wurde. Die minimale Spaltenbreite istdaher 35px, die Maximalbreite beträgt 25% der endgültigen Tabellenbreite.

• In der vierten Spalte hat nur Zelle 4-4 einen expliziten Wert für width erhalten (1px).Dieser ist schmaler als die minimale Inhaltsbreite. Daher sind die Minimal- undMaximalbreite der Spalte mit der minimalen Inhaltsbreite der Zellen identisch, wor-aus sich ein berechneter Wert von 25 Pixeln ergibt.

Das Benutzerprogramm hat aus diesen Werten nun die folgenden minimalen und maxi-malen Werte für die Spalten errechnet:

1. Minimum: 100px / Maximum: 100px

2. Minimum: 50px / Maximum: 40%

3. Minimum: 35px / Maximum: 25%

4. Minimum: 25px / Maximum: 25px

Die Minimalbreite ergibt sich aus der Summe der minimalen Spaltenbreiten und derBreite der Außenabstände (215 Pixel). Die Maximalbreite beträgt 130px + 65%, oder371,42857143 Pixel (wenn man davon ausgeht, dass 130 Pixel 35% der gesamten Tabel-lenbreite entsprechen). Wir gehen davon aus, dass Benutzerprogramme nach dem Run-den der Nachkommastellen einen Wert von 371 Pixeln errechnen. Die zweite Spalteerhält demnach eine Breite von 148 Pixeln und die dritte Spalte wird 93 Pixel breit. Eswird von Benutzerprogrammen nicht erwartet, dass sie den Maximalwert benutzen.

Auch wenn es nicht so scheint, war das noch ein recht einfaches Beispiel. Alle Inhalte hat-ten mehr oder weniger die gleiche Breite und die meisten Breitenangaben erfolgten inPixeln. Enthält eine Tabelle jedoch auch Spacer-GIFs, Absätze mit Text, Formularele-mente und so weiter, wird die Berechnung der Tabellendarstellung wesentlich länger aus-fallen.

HöheNach all dem Aufwand, den wir betrieben haben, um die Breite der Tabelle zu ermitteln,fragen Sie sich vermutlich schon, wie viel schwieriger es ist, die Höhe zu bestimmen.Nach den Maßstäben von CSS ist das sogar recht einfach, auch wenn die Entwickler derBrowserprogramme dazu eine etwas andere Meinung haben werden.

Im einfachsten Fall wird die Höhe einer Tabelle mit der Eigenschaft height festgelegt. EineTabelle kann also höher oder niedriger sein als die Summe der Zeilenhöhen. In solchenFällen weigert sich die Spezifikation von CSS2.1 ausdrücklich, zu bestimmen, was passie-ren soll. Stattdessen wird darauf hingewiesen, dass dies ein Thema für zukünftige CSS-Ver-sionen ist. Ein Benutzerprogramm kann beispielsweise die Höhe der einzelnen Zeilen andie explizit angegebene Höhe der Tabelle selbst anpassen. Oder das Programm erzeugteinen Rollbalken, um die überfließenden Zeilen zugänglich zu machen; oder es machtetwas vollkommen anderes. Diese Entscheidung liegt ganz beim Benutzerprogramm.


Wurde die Höhe der Tabelle auf auto gesetzt, so entspricht die Höhe der Summe der Zei-len- und Rahmenhöhen und der übrigen Leerräume der Zelle. Um die Höhe jeder Tabel-lenzeile zu ermitteln, muss das Benutzerprogramm einen ähnlichen Prozess durchlaufenwie bei der Bestimmung der Spaltenbreiten. Es wird die Minimal- und die Maximalhöhefür den Inhalt jeder Zelle berechnet, um daraus die Grenzwerte für die betreffende Tabel-lenzeile zu ermitteln. Nachdem das Benutzerprogramm die Berechnungen für alle Zeilenabgeschlossen hat, stellt das Programm fest, welche Höhe die einzelnen Zeilen haben,und ermittelt daraus die Gesamthöhe der Tabelle. Dieses Vorgehen ähnelt stark demInline-Layout, wobei es hier aber wesentlich mehr Unsicherheit über das Vorgehen gibt.

Neben der Behandlung von Tabellen mit expliziten Höhen und der enthaltenen Zeilenhö-hen werden auch die folgenden Punkte in CSS2.1 nicht näher definiert:

• Die Auswirkungen von Prozentwerten auf die Höhe von Tabellenzellen.

• Die Auswirkungen prozentualer Höhenangaben für Tabellenzeilen und Zeilengrup-pen.

• Die Auswirkungen von Zellen, die mehrere Zeilenhöhen überspannen, auf die Höhedieser Zeilen. Es wird nur gesagt, dass die Zeilen die Zelle umgeben müssen.

Wie Sie sehen, sind die Höhenberechnungen größtenteils dem Benutzerprogramm über-lassen. Die Erfahrung hat gezeigt, dass dies dazu führt, dass jedes Benutzerprogramm die-ses Problem etwas anders angeht. Sie sollten also so weit wie möglich vermeiden, IhreTabellen mit Höhenangaben zu versehen.

AusrichtungIn diesem Zusammenhang erscheint es recht interessant, dass die Ausrichtung innerhalbvon Zellen wesentlich besser definiert ist als die Höhe von Zellen und Tabellenzeilen. Dasgilt sogar für die vertikale Ausrichtung, die leicht die Höhe einer Zeile beeinflussen kann.

Die horizontale Ausrichtung ist am einfachsten. Um Inhalte innerhalb einer Zelle auszu-richten, verwenden Sie die Eigenschaft text-align. In diesem Zusammenhang wird dieZelle wie eine Blockbox behandelt und der gesamte Inhalt wird anhand des Wertes vontext-align ausgerichtet. (Details zu text-align finden Sie in Kapitel 6.)

Um Inhalt in einer Tabellenzelle vertikal auszurichten, ist vertical-align die richtigeEigenschaft. Viele Werte sind mit denen für die vertikale Ausrichtung von Inline-Inhaltenidentisch. Allerdings haben einige Werte bei der Anwendung auf Tabellenzellen eineandere Bedeutung. Hier eine Zusammenfassung der drei einfachsten Fälle:

top

Die Oberkante des Zelleninhalts wird bündig mit der Oberkante der Tabellenzeileausgerichtet. Bei Zellen, die sich über mehrere Tabellenzeilen erstrecken, ist das dieOberkante der ersten Zeile.


bottom

Die Unterkante des Zelleninhalts wird bündig mit der Unterkante der Tabellenzeileausgerichtet. Bei Zellen, die sich über mehrere Tabellenzeilen erstrecken, ist das dieUnterkante der letzten Zeile.

middle

Die Mitte des Zelleninhalts wird mit der Mitte der Tabellenzeile zur Deckunggebracht. Bei Zellen, die sich über mehrere Zeilen erstrecken, wird die Inhaltsmittemit der Mitte aller überspannten Zeilen zur Deckung gebracht.

Diese drei Fälle sind in Abbildung 11-13 dargestellt. Die benutzten Stildefinitionen undden dazugehörigen Markup-Code sehen Sie hier:

table {table-layout: auto; width: 20em;

border-collapse: separate; border-spacing: 3px;}

td {border: 1px solid; background: silver;

padding: 0;}

div {border: 1px dashed gray; background: white;}

#r1c1 {vertical-align: top; height: 10em;}

#r1c2 {vertical-align: middle;}

#r1c3 {vertical-align: bottom;}

<table>

<tr>

<td id="r1c1">

<div>

Der Inhalt dieser Zelle wurde oben ausgerichtet.

</div>

</td>

<td id="r1c2">

<div>

Der Inhalt dieser Zelle wurde mittig ausgerichtet.

</div>

</td>

<td id="r1c3">

<div>

Der Inhalt dieser Zelle wurde unten ausgerichtet.

</div>

</td>

</tr>

</table>

In allen drei Fällen werden die Innenabstände der Zelle automatisch angepasst, um dengewünschten Effekt zu erzielen. In der ersten Zelle in Abbildung 11-13 wurde der untereInnenabstand so angepasst, dass seine Höhe der Differenz zwischen der Höhe der Zellen-box und der Höhe des Zelleninhalts entspricht. In der zweiten Zelle wurden die Innenab-stände mit gleichen Werten für ihre Höhe versehen und sorgen so für eine vertikaleZentrierung des Zelleninhalts. In der letzten Zelle wurde der obere Innenabstand ange-passt.


Der vierte mögliche Wert für die Ausrichtung ist baseline. Dieser ist etwas komplizierterals die ersten drei:

baseline

Die Grundlinie der Zelle wird an der Grundlinie ihrer Tabellenzeile ausgerichtet.Erstreckt sich die Zelle über mehrere Zeilen, so wird die Grundlinie der ersten Tabel-lenzeile benutzt.

Dieses Prinzip lässt sich am einfachsten anhand einer Illustration erklären (sieheAbbildung 11-14) und danach besprechen.

Die Grundlinie einer Tabellenzeile ist definiert durch die niedrigste anfängliche Grundli-nie (also die Grundlinie der ersten Textzeile) aller in dieser Tabellenzeile enthaltenen Zel-len. Daher bestimmt in Abbildung 11-14 die dritte Zelle die Grundlinie, weil diese dieniedrigste anfängliche Grundlinie besitzt. Die Grundlinien der ersten Textzeilen für dieanderen beiden Zellen werden an diesen Wert angepasst.

Wie bei den anderen Ausrichtungsarten wird die Platzierung der Grundlinie durch eineÄnderung der oberen und unteren Innenabstände der einzelnen Zellen erreicht. Wurdeder Inhalt in keiner der Zellen einer Tabellenzeile an der Grundlinie ausgerichtet, besitztdiese Tabellenzeile auch keine Grundlinie – weil keine gebraucht wird.

Abbildung 11-13: Vertikale Ausrichtung von Zelleninhalten

Abbildung 11-14: Zelleninhalt an der Grundlinie ausrichten


Im Detail sieht die Ausrichtung der Zelleninhalte innerhalb einer Tabellenzeile so aus:

1. Wurde eine der Zellen an der Grundlinie ausgerichtet, wird die Grundlinie derbetreffenden Tabellenzeile ermittelt und der Inhalt für diese Zellen entsprechendangeordnet.

2. Der Inhalt für oben ausgerichtete Zellen wird positioniert. Dadurch hat die Tabellen-zeile nun eine provisorische Höhe. Diese wird von der niedrigsten Zellenunterkanteder Zelle bestimmt, in der der Inhalt bereits platziert wurde.

3. Sollen die übrig gebliebenen Zellen mittig oder unten ausgerichtet werden und dieHöhe des Inhalts überschreitet dabei die provisorische Zeilenhöhe, so wird diese nunentsprechend angepasst, dass auch die höchste Zelle noch hineinpasst.

4. Der Inhalt für alle übrigen Zellen wird platziert. Ist in einer Zelle die Inhaltshöhegeringer als die Höhe der Tabellenzeile, so werden die Innenabstände der Zelle ent-sprechend angepasst.

Bei der Anwendung von vertical-align auf Tabellenzellen werden die Werte sub, super,text-top und text-bottom nicht berücksichtigt. Die folgende Regel entspräche also derDarstellung in Abbildung 11-14:

th {vertical-align: text-top;}

ZusammenfassungVermutlich kennen Sie sich seit Jahren damit aus, wie ein Layout mit Tabellen undSpacer-GIFs realisiert wird. Trotzdem sind die Mechanismen, die ein solches Layoutermöglichen, sehr kompliziert und überhaupt nicht vorhersagbar. Dank des Erbes derHTML-Tabellenerzeugung ist das CSS-Tabellenmodell zeilenbasiert. Glücklicherweisewerden auch Spalten und die Möglichkeit, diese mit Stilen zu versehen, berücksichtigt.Dank der neuen Möglichkeiten, die Ausrichtung von Zellen und der Tabellenbreite zusteuern, besitzen Sie jetzt noch mehr Werkzeuge, um Tabellen auf ansprechende Weisezu gestalten.

Die Möglichkeit, einem beliebigen Element einen tabellenbezogenen display-Wert zuzu-weisen, ermöglicht es, tabellenartige Layouts auch mit HTML-Elementen wie div zuerreichen. Das Gleiche gilt für XML-Sprachen, in denen jedes Element eine Layout-Kom-ponente beschreiben kann. Beim Schreiben dieses Buches unterstützten fast alle Browseraußer Internet Explorer die Anwendung von tabellenbezogenen display-Werten aufbeliebige Elemente. Schon jetzt verfeinert CSS die Möglichkeiten der Dokumentdarstel-lung. Das gilt auch für das Thema des folgenden Kapitels: erzeugte Inhalte.

| 391

KAPITEL 12

Listen und erzeugte Inhalte

Im Reich des CSS-Layout sind Listen ein Sonderfall. Die Einträge einer Liste sind im Prin-zip einfache Blockboxen mit einem zusätzlichen »Etwas«, das auf einer Seite aus der Boxheraushängt und nicht weiter an der Dokumentdarstellung beteiligt ist. Bei geordnetenListen besteht dieses Etwas aus einer Reihe aufsteigender Ziffern (oder Buchstaben), dienicht vom Autor, sondern vom Benutzerprogramm berechnet und größtenteils auch for-matiert werden. Anhand der Dokumentstruktur erzeugt das Benutzerprogramm die Zif-fer und die grundsätzliche Darstellung.

In CSS1 gab es noch keine Beschreibung dieser Erzeugung von Inhalten und damit auchkeine Kontrolle darüber. Das änderte sich mit der Spezifikation von CSS2, die erstmalsMöglichkeiten enthielt, die Nummerierung von Listeneinträgen zu beschreiben. Das hatzur Folge, dass Sie als Autor nun Ihre eigenen Zählmuster und Formate definieren kön-nen. Zudem können Sie diese Zähler einem beliebigen Element zuweisen, nicht nur denEinträgen einer geordneten Liste. Außerdem können durch diesen Mechanismus andereInhalte, wie Textstrings, Attributwerte oder sogar externe Ressourcen, in das Dokumenteingebunden werden. Sie können CSS also benutzen, um beispielsweise Icons für IhreLinks, redaktionelle Symbole und andere Dinge in ein Design einzufügen – und das allesohne zusätzlichen Markup-Code.

Wir werden uns zuerst damit befassen, wie Listen generell mit Stildefinitionen versehenwerden können. Danach beschäftigen wir uns mit der Erzeugung von Inhalten und demAnlegen von Zählern.

ListenIm Prinzip kann man alles, was kein Fließtext ist, als Liste betrachten. Die Bevölkerungs-statistik, das Sonnensystem, meinen Familienstammbaum, eine Speisekarte, alleFreunde, die Sie jemals hatten – all das kann in Form einer Liste dargestellt werden oderals Liste ineinander verschachtelter Listen. Diese vielen Möglichkeiten machen Listen sowichtig. Daher ist es eigentlich auch eine Schande, dass die Darstellung von Listen in CSSnicht mehr Möglichkeiten bietet.

392 | Kapitel 12: Listen und erzeugte Inhalte

Die einfachste (und am besten unterstützte) Möglichkeit, die Stile einer Liste zu beein-flussen, besteht im Ändern der Marker. Der Marker für einen Listeneintrag ist beispiels-weise der Gliederungspunkt (auch »Bullet« genannt) neben dem Eintrag einerungeordneten Liste. In einer geordneten Liste könnte als Marker ein Buchstabe, eine Zif-fer oder ein Symbol aus einem anderen Zählsystem zum Einsatz kommen. Sie können dieMarker sogar durch Bilder ersetzen. All diese Dinge lassen sich mit Hilfe der verschiede-nen Listen-Eigenschaften erreichen.

ListentypenMit Hilfe der Eigenschaft list-style-type können Sie festlegen, welche Art von Markerfür die Listeneinträge verwendet werden soll.

Ich weiß, das sind eine ganze Menge Schlüsselwörter. Viele wurden in CSS2 eingeführt, inCSS2.1 aber wieder gestrichen. In Tabelle 12-1 sind die Schlüsselwörter für CSS2.1 nocheinmal aufgeführt.

list-style-type

CSS2.1-Werte: disc | circle | square | decimal | decimal-leading-zero | upper-alpha | lower-alpha | upper-roman | lower-roman | none | inherit

CSS2-Werte: disc | circle | square | decimal | decimal-leading-zero | upper-alpha |lower-alpha | upper-roman | lower-roman | lower-greek | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | none | inherit

Startwert: disc

Anwendung auf: Elemente mit dem display-Wert list-item

Vererbt: ja


Tabelle 12-1: Schlüsselwörter für die Eigenschaft list-style-type in CSS2.1

Schlüsselwort Effekt

disc Benutzt einen Kreis (in der Regel gefüllt) als Marker für Listeneinträge

circle Benutzt einen Kreis (in der Regel nur den Umriss) als Marker für Listeneinträge

square Benutzt ein Quadrat (gefüllt oder nur den Umriss) als Marker für Listeneinträge

decimal 1, 2, 3, 4, 5, …

decimal-leading-zero 01, 02, 03, 04, 05, …

upper-alpha A, B, C, D, E, …

lower-alpha a, b, c, d, e, …

upper-roman I, II, III, IV, V, …

lower-roman i, ii, iii, iv, v, …

none Keinen Marker benutzen

Listen | 393

In Tabelle 12-2 sehen Sie noch einmal die Schlüsselwörter, die in CSS2 eingeführt wur-den, aus CSS2.1 aber wieder entfernt wurden.

Werte, die vom Benutzerprogramm nicht erkannt werden, sollen als decimal behandeltwerden.

Die Eigenschaft list-style-type kann, wie alle anderen Listen-Eigenschaften auch, aufein beliebiges Element angewendet werden, dessen Wert für display mit list-item fest-gelegt wurde. In CSS wird dabei nicht zwischen geordneten und ungeordneten Listenunterschieden. Sie können also auch einfache Markierungspunkte (Wert disc) anstellevon Zahlen für geordnete Listen benutzen. Das entspricht übrigens auch dem Standard-marker für Listen (ungeordnet oder geordnet). Es wäre also logisch, zu denken, dass prin-zipiell Markierungspunkte als Marker benutzt werden, sofern nicht explizit etwas anderesdefiniert wurde. Tatsächlich ist diese Entscheidung aber dem Benutzerprogramm über-lassen. Selbst wenn im Benutzerprogramm keine vordefinierte Regel wie ol {list-style-type: decimal;} existiert, kann es passieren, dass Marker für geordnete Listen einer unge-ordneten Liste nicht zugewiesen werden können und umgekehrt. Sie können sich nichtdarauf verlassen, dass alles wie erwartet läuft – seien Sie also vorsichtig.

Die CSS2-Spezifikation geht nicht näher auf die Funktionsweise von Zählsystemen wiehebrew und georgian ein oder darauf, wie Benutzerprogramme damit umgehen sollen.Diese Unsicherheit verhinderte eine weit reichende Implementierung, weshalb die Wertein Tabelle 12-2 für CSS2.1 auch nicht mehr aufgeführt werden.

Wollen Sie die Darstellung der Marker ganz unterdrücken, so ist none der Wert, nachdem Sie suchen. Durch none wird das Benutzerprogramm angewiesen, die Stelle des Mar-kers frei zu lassen. Das Zählen in geordneten Listen wird dadurch jedoch nicht unterbun-den. Folgender Code ergibt demnach die Darstellung in Abbildung 12-1:

ol li {list-style-type: decimal;}

li.off {list-style-type: none;}

Tabelle 12-2: Schlüsselwörter für die Eigenschaft list-style-type in CSS2

Schlüsselwort Effekt

lower-greek Klassische griechische Symbole, kleingeschrieben

hebrew Traditionelle hebräische Nummerierung

armenian Traditionelle armenische Nummerierung

georgian Traditionelle georgische Nummerierung

cjk-ideographic Ideografische Nummerierung

katakana Japanische Nummerierung (A, I, U, E, O…)

katakana-iroha Japanische Nummerierung (I, RO, HA, NI, HO…)

hiragana Japanische Nummerierung (a, i, u, e, o…)

hiragana-iroha Japanische Nummerierung (i, ro, ha, ni, ho…)


<ol>

<li>Erster Eintrag

<li class="off">Zweiter Eintrag

<li>Dritter Eintrag

<li class="off">Vierter Eintrag

<li>Fünfter Eintrag

</ol>

Der Wert für list-style-type wird vererbt. Sollen verschachtelte Listen also unterschied-liche Marker haben, müssen Sie diese wohl einzeln definieren. Außerdem müssen Sie ver-mutlich die Stildefinitionen für verschachtelte Listen explizit festlegen, weil dasBenutzerprogramm vielleicht schon vordefinierte Regeln enthält. Für das nächste Beispielgehen wir davon aus, dass im Benutzerprogramm folgende Stile bereits definiert sind:

ul {list-style-type: disc;}

ul ul {list-style-type: circle;}

ul ul ul {list-style-type: square;}

Ist das der Fall (was sehr wahrscheinlich ist), müssen Sie Ihre eigenen Stile definieren, umdie des Benutzerprogramms zu überschreiben. Das lässt sich nicht alleine über die Verer-bung erreichen.

Bilder für ListeneinträgeManchmal reicht ein schlichter Marker einfach nicht aus. Möchten Sie stattdessen liebereine Grafik verwenden, können Sie diese mit der Eigenschaft list-style-image definie-ren.

Abbildung 12-1: Die Marker für Listeneinträge abschalten

list-style-image

Werte: <uri> | none | inherit

Startwert: none


Vererbt: ja

Berechneter Wert: für <URI>-Werte der absolute URI; ansonsten none

Listen | 395

Hier sehen Sie, wie das funktioniert:

ul li {list-style-image: url(ohio.gif);}

Ja, das ist wirklich so einfach. Ein einfacher url-Wert und schon können Sie Bilder alsMarker verwenden (siehe Abbildung 12-2).

Natürlich sollten Sie die Bilder sorgfältig auswählen, wie in Abbildung 12-3 schmerzhaftklar wird:

ul li {list-style-image: url(big-ohio.gif);}

Für Fälle, in denen das Bild nicht geladen werden kann, beschädigt ist oder ein unlesbaresFormat hat, gilt es als gute Praxis, einen alternativen Marker zu definieren. Sie sollten alsoimmer auch einen Wert für list-style-type definieren:

ul li {list-style-image: url(ohio.png); list-style-type: square;}

Andererseits können Sie für list-style-image auch den Standardwert none explizit festle-gen. Das gilt ebenfalls als gute Praxis, weil der Wert von list-style-image vererbt wird.Verschachtelte Listen werden das Marker-Bild also übernehmen, sofern Sie das nichtexplizit unterbinden:

ul {list-style-image: url(ohio.gif); list-style-type: square;}

ul ul {list-style-image: none;}

Abbildung 12-2: Bilder als Marker verwenden

Abbildung 12-3: Richtig große Bilder als Marker benutzen


Da verschachtelte Listen den Marker-Typ square erben und explizit keine Bilder benutztwerden, kommt hier ein Quadrat als Marker zum Einsatz (siehe Abbildung 12-4).

Im wirklichen Leben muss dieses Szenario nicht unbedingt so ablaufen.Vielleicht wurde für ul ul vom Benutzerprogramm bereits ein Wert fürlist-style-type festgelegt und der Wert von square wird nicht vererbt.Das tatsächliche Verhalten ist vom Benutzerprogramm abhängig.

Positionierung der Listen-MarkerIn CSS2.1 können Sie außerdem bestimmen, ob der Marker innerhalb oder außerhalb desInhaltsbereichs für den Listeneintrag dargestellt werden soll. Das geschieht mit der Eigen-schaft list-style-position.

Wird die Position des Markers mit outside (dem Standardwert) angegeben, erscheint eran der im Web schon immer üblichen Stelle. Soll das Erscheinungsbild leicht verändertwerden, können Sie den Marker mit dem Wert inside in den Inhaltsbereich des Listen-eintrags einbinden. Wie das genau umgesetzt wird, ist nicht definiert. Eine Möglichkeitsehen Sie in Abbildung 12-5:

li.first {list-style-position: inside;}

li.second {list-style-position: outside;}

Abbildung 12-4: Bilder als Marker in untergeordneten Listen abschalten

list-style-position

Werte: inside | outside | inherit

Startwert: outside


Vererbt: ja


Listen | 397

Kurzschrift für ListeneigenschaftenDie drei Listeneigenschaften lassen sich zudem mit der Kurzschrift-Eigenschaft list-style ausdrücken; zum Beispiel:

li {list-style: url(ohio.gif) square inside;}

Wie in Abbildung 12-6 zu sehen, wurden alle drei Werte auf die Listeneinträge angewen-det.

Die Werte für list-style können eine beliebige Reihenfolge haben und müssen nichtzwingend angegeben werden. Solange ein Wert vorhanden ist, werden die übrigenanhand ihrer Standardwerte ergänzt. So haben die folgenden zwei Regeln die gleichenAuswirkungen:

Abbildung 12-5: Marker innerhalb und außerhalb von Listeneinträgen platzieren

list-style

Werte: [ <list-style-type> || <list-style-image> || <list-style-position> ] | inherit



Vererbt: ja


Abbildung 12-6: Alles auf einmal


li.norm {list-style: url(img42.gif);}

li.odd {list-style: url(img42.gif) disc outside;} /* das Gleiche */

Vorher definierte Regeln werden ebenfalls auf diese Weise überschrieben. Zum Beispiel:

li {list-style-type: square;}

li.norm {list-style: url(img42.gif);}

li.odd {list-style: url(img42.gif) disc outside;} /* das Gleiche */

Das Ergebnis ist das gleiche wie in Abbildung 12-6, weil in der Regel für li.norm der im-plizierte Wert disc für list-style-type den vorher deklarierten Wert square über-schreibt. Das entspricht dem expliziten Überschreiben mit disc in der Regel für li.odd.

Listen-LayoutNachdem wir die Grundlagen für die Gestaltung von Listen-Markern kennen, können wiruns damit beschäftigen, wie Listen in den verschiedenen Browsern dargestellt werden.Wir beginnen mit drei Einträgen, die noch keine Marker besitzen und noch nicht Teileiner Liste sind (siehe Abbildung 12-7).

Die Rahmen um die einzelnen Einträge verdeutlichen, dass sich diese im Wesentlichenwie Block-Elemente verhalten. Tatsächlich erzeugt ein als list-item definiertes Elementeine Blockbox. Als Nächstes wollen wir die Einträge mit Markern versehen (sieheAbbildung 12-8).

Die Entfernung zwischen dem Marker und dem Listeneintrag ist in CSS nicht definiertund es gibt in CSS2.1 auch keine Möglichkeit, auf diese Entfernung Einfluss zu nehmen.Interessanterweise gab es diese Möglichkeit noch in CSS2. Mehr dazu finden Sie im Kas-ten »Positionierung von Listen-Markern«.

Befinden sich die Marker außerhalb des Inhalts des Listeneintrags, haben sie keinen Ein-fluss auf andere Elemente – nicht einmal auf die Einträge selbst. Sie befinden sich einfachein Stück weit von der Inhaltskante entfernt. Verschiebt sich diese, wird auch der Markerverschoben. Das ist fast so, als wäre der Marker, bezogen auf den Inhalt des Eintrags, miteiner Regel wie position: absolute; left: -1.5em; absolut positioniert worden. Befindet

Abbildung 12-7: Drei Listeneinträge

Abbildung 12-8: Listeneinträge mit Markern

Listen | 399

sich der Marker innerhalb des Inhaltsbereichs, verhält er sich wie ein Inline-Element amAnfang des Inhalts.

Nur um etwas anders zu sein, erweitert Internet Explorer für Windows den Inhaltsbe-reich der Listeneinträge und umgibt so auch die Marker (siehe Abbildung 12-9). Dasändert nichts an der Gesamtsituation bei der Stildefinition für Listen. Es kann aber inSituationen, in denen ein Autor die Einträge mit Rahmen versehen möchte, zu unter-schiedlichen Darstellungen kommen.

Bis jetzt haben wir noch nichts, worin die einzelnen Listeneinträge enthalten sind. Es gibtbisher weder ein ul- noch ein ol-Element. Das wurde in Abbildung 12-10 geändert. (Zurleichteren Unterscheidung wurde das Element für die Darstellung mit einem gestricheltenRahmen umgeben.)

Wie die einzelnen Einträge erzeugt auch das Listenelement eine Blockbox, die die von ihrabstammenden Elemente umgibt. Wie Sie sehen, werden die Marker nicht nur außerhalbder Listeneinträge, sondern auch außerhalb des Inhalts der Liste dargestellt. Die sonst fürListen übliche »Einrückung« wurde bisher noch nicht definiert.

Die meisten Browser erreichen beim Schreiben dieses Buches die Einrückung der Listen-einträge durch das Einstellen der Innenabstände oder der Außenabstände für das umge-bende Listenelement. Hierfür könnte ein Benutzerprogramm beispielsweise folgendeRegel benutzen:

ul, ol {margin-left: 40px;}

Das ist die von Internet Explorer und Opera verwendete Regel (siehe Abbildung 12-10).Die meisten Gecko-basierten Browser verwenden dagegen eine Regel wie diese:

ul, ol {padding-left: 40px;}

Beide Regeln sind korrekt, aber der Unterschied kann zu Problemen führen, wenn Sie dieEinrückung der Listeneinträge verhindern oder verändern möchten. In Abbildung 12-11sehen Sie den Unterschied zwischen beiden Ansätzen.

Abbildung 12-9: Rahmen und Marker für Listeneinträge in IE/Win

Abbildung 12-10: Ein Listenelement hinzufügen


Die Entfernung von 40px ist ein Relikt aus der Zeit der ersten Webbrowser,das Listen um eine bestimmte Anzahl von Pixeln einrückte. Ein bessererWert wäre etwa 2.5em, weil dieser bei Änderungen der Textgröße mit ska-liert werden kann.

Autoren, die den Einrückungsabstand von Listen verändern möchten, empfehle ich, aufjeden Fall Werte für Innen- und Außenabstände anzugeben, wodurch eine Browser-über-greifende Kompatibilität erreicht wird. Wenn Sie eine Liste beispielsweise mit Hilfe vonInnenabständen einrücken möchten, benutzen Sie folgenden Code:

ul {margin-left: 0; padding-left: 1em;}

Wenn Sie Außenabstände lieber haben, können Sie Folgendes schreiben:

ul {margin-left: 1em; padding-left: 0;}

In beiden Fällen sollten Sie nicht vergessen, dass die Marker relativ zum Inhalt der Listen-einträge angeordnet werden und daher aus dem Haupttext eines Dokuments oder sogaraus dem Browserfenster »heraushängen« können.

Abbildung 12-11: Innen- und Außenabstände zum Einrücken verwenden

Positionierung von Listen-Markern

Viele Autoren haben nach einer Möglichkeit verlangt, den Abstand zwischen Marker undListeneintrag kontrollieren zu können. In CSS2 wurde daher eine Methode für diese Auf-gabe definiert. Diese wurde über die Eigenschaft marker-offset und den display-Wertmarker gesteuert. Bei der Implementierung dieser Funktion zeigte sich jedoch, dass dies einrecht unbeholfener Ansatz war, weshalb dieses Merkmal in CSS2.1 wieder entfernt wurde.

Während dieses Buch geschrieben wird, definiert der Arbeitsentwurf des CSS3-Listen-moduls eine neue und kompaktere Möglichkeit. Dabei wird die Platzierung der Markerüber das Pseudoelement ::marker gesteuert. Wenn wir davon ausgehen, dass das Modul biszum Erreichen des vollen Empfehlungsstatus nicht mehr verändert wird, können wir ver-mutlich eines Tages eine Regel wie li::marker {margin-right: 0.125em;} verwenden. Damitkönnen Marker dann sehr nah am Inhalt eines Listeneintrags platziert werden, ohne dassder Marker dabei Teil des Inhalts selbst sein muss.

Erzeugter Inhalt | 401

Erzeugter InhaltIn CSS2 und CSS2.1 gibt es ein neues Merkmal namens erzeugter Inhalt (generated con-tent). Dieser Inhalt wird vom Browser erzeugt und weder vom Markup im Dokumentnoch von anderem Inhalt wiedergegeben.

So sind die Listen-Marker beispielsweise erzeugter Inhalt. Im Markup einer Liste gibt esnichts, das diese Marker direkt wiedergibt. Sie als Autor brauchen die Marker auch nichtin den Inhalt Ihres Dokuments einzubauen. Der Browser erzeugt diese automatisch. Beiungeordneten Listen ist der Marker in der Regel ein Markierungspunkt, also ein Kreis, einQuadrat oder etwas in der Art. Bei geordneten Listen ist es ein Zähler, der für jeden fol-genden Listeneintrag erhöht wird.

Um zu verstehen, wie Sie die Listen-Marker verändern und die Zählweise in geordnetenListen (oder irgendwo anders!) steuern können, müssen Sie erst einmal die Grundlagenfür erzeugte Inhalte kennen.

Beim Schreiben dieses Buches werden erzeugte Inhalte von keiner Versiondes Internet Explorer unterstützt.

Erzeugte Inhalte einfügenUm erzeugte Inhalte in ein Dokument einzufügen, benutzen Sie die Pseudoelemente:before und :after. Diese platzieren den erzeugten Inhalt mit Hilfe der Eigenschaftinline (im nächsten Abschnitt beschrieben) vor oder nach dem betreffenden Element.

Soll jedem Hyperlink beispielsweise der Text »(link)« vorangestellt werden, können Siedafür die folgende Regel benutzen. Die dazugehörige Darstellung finden Sie in Abbildung12-12:

a[href]:before {content: "(link)";}

Beachten Sie, dass sich zwischen dem erzeugten Inhalt und dem Element kein Leerzei-chen befindet. Das liegt daran, dass wir im vorigen Beispiel kein Leerzeichen für denerzeugten Inhalt definiert haben. Sie könnten die Deklaration aber folgendermaßenanpassen, damit erzeugter und tatsächlicher Inhalt durch ein Leerzeichen voneinandergetrennt werden:

a[href]:before {content: "(link) ";}

Abbildung 12-12: Textinhalte erzeugen


Das ist ein kleiner, aber wichtiger Unterschied.

Auf ähnliche Weise könnten Sie alle Links auf PDF-Dokumente am Ende mit einem klei-nen Icon versehen. Die Regel dafür sieht in etwa so aus:

a.pdf-doc:after {content: url(pdf-doc-icon.gif);}

Und vielleicht soll um diese Links außerdem noch ein Rahmen angezeigt werden:

a.pdf-doc {border: 1px solid gray;}

Das Resultat beider Regeln sehen Sie in Abbildung 12-13.

Wie Sie sehen, umgibt der Rahmen auch den erzeugten Inhalt, genau wie die Unterstrei-chung in Abbildung 12-12 auch unter dem Text »(link)« dargestellt wird. Das geschieht,weil erzeugter Inhalt innerhalb der Box des Elements platziert wird. In CSS2.1 gibt eskeine Möglichkeit, andere erzeugte Inhalte als Listen-Marker außerhalb der Elementboxdarzustellen.

Wenn Sie glauben, Ihr Ziel mit Hilfe der Positionierung erreichen zu können, muss ich Sieleider enttäuschen, denn CSS2 und CSS2.1 verbieten die Positionierung von :before- und:after-Inhalten ausdrücklich. Das Gleiche gilt für Listen- und Tabellen-Eigenschaften.Zusätzlich gelten folgende Einschränkungen:

• Soll mit :before oder :after ein Block-Element eingefügt werden, akzeptiert dieEigenschaft display nur die Werte none, inline, block und (in CSS2) marker. Alleanderen Werte werden als block interpretiert.

• Soll mit :before oder :after ein Inline-Element eingefügt werden, akzeptiert dieEigenschaft display nur die Werte none und inline. Alle anderen Werte werden alsinline behandelt.

Zum Beispiel:

em:after {content: " (!) "; display: block;}

Da em ein Inline-Element ist, kann der erzeugte Inhalt nicht als Block-Element dargestelltwerden. Der Wert block wird daher mit dem Wert inline überschrieben. Im nächstenBeispiel ist es anders. Hier wird der erzeugte Inhalt als Block-Element dargestellt, weil dasZielelement ebenfalls ein Block-Element ist:

h1:before {content: "Neuer Abschnitt"; display: block; color: gray;}

Abbildung 12-13: Icons anzeigen



Ein weiterer interessanter Aspekt von generiertem Inhalt besteht darin, dass er die Wertedes Elements erbt, mit dem er verbunden wurde. Nach den folgenden Regeln wird derText des erzeugten Inhalts, genau wie der Inhalt der Absätze, grün dargestellt:

p {color: green;}

p:before {content: "::: ";}

Soll der erzeugte Inhalt nicht grün, sondern lila angezeigt werden, reicht eine kleineDeklaration aus:

p:before {content: "::: "; color: purple;}

Diese Art, Werte zu vererben, funktioniert natürlich nur mit Eigenschaften, die das auchunterstützen. Das ist wichtig, weil es sich darauf auswirkt, wie bestimmte Effekte erreichtwerden können. Zum Beispiel:

h1 {border-top: 3px solid black; padding-top: 0.25em;}

h1:before {content: "Neuer Abschnitt"; display: block; color: gray;

border-bottom: 1px dotted black; margin-bottom: 0.5em;}

Da der erzeugte Inhalt in der Elementbox des h1-Elements steht, erscheint er unterhalbder oberen Rahmenkante des Elements. Eventuell definierte Innenabstände gelten eben-falls auch für erzeugte Inhalte (siehe Abbildung 12-15).

Der untere Außenabstand des erzeugten Elements, der hier als Block-Level dargestelltwird, schiebt den eigentlichen Inhalt des Elements um ein halbes em nach unten.Dadurch ist das h1-Element zweigeteilt: Es besteht nun aus dem erzeugten Inhalt und dereigentlichen Inhaltsbox. Der Grund ist der display-Wert block für den erzeugten Inhalt.Wenn Sie diese Angaben auf display: inline ändern, erhalten Sie eine Darstellung wie inAbbildung 12-16:

h1 {border-top: 3px solid black; padding-top: 0.25em;}

h1:before {content: "Neuer Abschnitt"; display: inline; color: gray;

border-bottom: 1px dotted black; margin-bottom: 0.5em;}

Abbildung 12-14: Darstellung von erzeugtem Inhalt als Block-Element

Abbildung 12-15: Die Platzierung berücksichtigen


Beachten Sie, wie die Rahmen angeordnet werden und wie der obere Innenabstandimmer noch berücksichtigt wird. Das Gleiche gilt für den unteren Außenabstand deserzeugten Inhalts. Da dieser nun inline dargestellt wird und Außenabstände sich nicht aufdie Zeilenhöhe auswirken, hat der Außenabstand keine sichtbaren Auswirkungen.

Nachdem die Grundlagen für erzeugte Inhalte jetzt vorhanden sind, wollen wir uns anse-hen, wie erzeugte Inhalte angegeben werden können.

Inhalte angebenWenn Sie Inhalte erzeugen, brauchen Sie auch eine Möglichkeit, um diese zu beschrei-ben. Wir wir bereits wissen, gibt es dafür die Eigenschaft content. Diese hat aber nochwesentlich mehr zu bieten als das, was wir bisher gesehen haben.

Die Verwendung von Zeichenketten und URIs haben wir in diesem Abschnitt bereitsgesehen. Auf Zähler werden wir später in diesem Kapitel noch zu sprechen kommen. Vor-her wollen wir uns aber noch etwas genauer mit Zeichenketten und URIs beschäftigen,bevor wir einen Blick auf attr() und »quote«-Werte werfen.

string-Werte werden unverändert ausgegeben, auch wenn sie Dinge enthalten, dieansonsten als Markup interpretiert werden könnten. Der Inhalt der folgenden Regel wirddaher wörtlich in das Dokument eingefügt (siehe Abbildung 12-17):

h2:before {content: "<em>¶</em> "; color: gray;}

Abbildung 12-16: Den erzeugten Inhalt als Inline-Element darstellen

content

Werte: normal | [ <String> | <URI> | <Zähler> | attr(<Identifier>) | open-quote |close-quote | no-open-quote | no-close-quote ]+ | inherit

Startwert: normal

Anwendung auf: die Pseudoelemente :before und :after

Vererbt: nein

Berechneter Wert: für <uri>-Werte ein absoluter URI; für Attribut-Referenzen der Ergebnis-string; ansonsten wie angegeben

Abbildung 12-17: Zeichenketten werden unverändert ausgegeben


Wollen Sie einen Zeilenumbruch als Teil des erzeugten Inhalts einfügen, können Siedafür nicht <br> benutzen. Stattdessen brauchen Sie hierfür den String \A, der in CSSeinen Zeilenumbruch repräsentiert (er basiert auf dem entsprechenden Unicode-Zeichen,einem hexadezimalen A). Haben Sie umgekehrt einen langen Textstring, den Sie beimErstellen des Dokuments auf mehrere Zeilen verteilen wollen, können Sie die Zeilenum-brüche mit dem Zeichen \ ungültig machen (siehe Abbildung 12-18).

h2:before {content: "Wir fügen allen H2-Elementen diesen Text hinzu, weil \

es eine gute Idee ist, zu zeigen, wie diese Dinge funktionieren. \

Der Text ist vielleicht ein wenig lang, \

aber der Punkt sollte auf jeden Fall klar sein. "; color: gray;}

Laut der Spezifikation können Sie mit Hilfe dieser so genannten »Escapes« sogar hexade-zimale Unicode-Werte wie \00AB verwenden.

Beim Schreiben dieses Buches ist die Unterstützung für das Einfügen vonInhalten über Escapes wie \A und \00AB nicht einmal in Browsern, dieerzeugte Inhalte ermöglichen, besonders weit verbreitet.

Bei URI-Werten verweisen Sie einfach auf eine externe Ressource (ein Bild, einen Film,eine Tondatei oder etwas anderes, das vom Benutzerprogramm unterstützt wird), die ander entsprechenden Stelle in das Dokument eingefügt wird. Unterstützt das Benutzerpro-gramm die Ressource nicht – wenn Sie zum Beispiel versuchen, eine SVG-Grafik einzu-binden, die vom Browser aber nicht verstanden wird –, ist das Programm dazuangehalten, die Ressource komplett zu ignorieren.

Attributwerte einfügen

In manchen Situationen soll der Wert eines Elementattributs als Teil des Dokuments mitangezeigt werden. Um beispielsweise den Wert des href-Attributs eines Links direkt nachdem Link anzuzeigen, können Sie Folgendes schreiben:

a[href] {content: attr(href);}

Auch hier haben wir wieder das Problem, dass der erzeugte Inhalt bündig mit dem eigent-lichen Inhalt dargestellt wird. Um das zu ändern, müssen Sie die Deklaration um ein paarZeichenketten erweitern. Das Ergebnis sehen Sie in Abbildung 12-19:

a[href] {content: " [" attr(href) "]";}

Abbildung 12-18: Zeilenumbrüche einfügen und unterdrücken


Das kann beispielsweise beim Erstellen von Stylesheets für den Druck nützlich sein. Eskönnen alle möglichen Attributwerte als erzeugter Inhalt in das Dokument eingefügt wer-den: alt-Text, die Werte von class- oder id-Attributen und so weiter. Will ein Autoreinen Zitatblock beispielsweise explizit als solchen kennzeichnen, kann er Folgendesschreiben:

blockquote:after {content: "(" attr(cite) ")"; display: block;

text-align: right; font-style: italic;}

Auf die gleiche Weise kann eine kompliziertere Regel die Werte für Text- und Linkfarbeneines älteren Dokuments ausgeben:

body:before {content: "Textfarbe: " attr(text) " | Linkfarbe: " attr(link)

" | Besuchte Links: " attr(vlink) " | Aktive Links: " attr(alink);

display: block; padding: 0.33em;

border: 1px solid black; text-align: center;}

Existiert ein Attribut nicht, wird stattdessen ein leerer String eingefügt. In Abbildung12-20 sehen Sie das obige Beispiel auf ein Dokument angewendet, dessen body-Elementkein alink-Attribut besitzt.

Zwar wird der Text »Aktive Links: « inklusive dem nachgestellten Leerzeichen in dasDokument eingefügt, allerdings ohne dass darauf etwas folgt. Das ist in Situationen prak-tisch, in denen nur Werte von Attributen eingefügt werden sollen, die auch existieren.

Abbildung 12-19: URLs in das Dokument einfügen

Abbildung 12-20: Fehlende Attribute werden übersprungen


Der Rückgabewert für eine Attributreferenz ist in CSS2.x als ungeparsteZeichenkette definiert. Enthält der Wert eines Attributs Markup-Codeoder Zeichen-Entities, werden diese wörtlich ausgegeben.

Erzeugte Anführungszeichen

Eine Sonderform erzeugter Inhalte sind die Anführungszeichen. In CSS2.x gibt es sehrgute Möglichkeiten, um selbst verschachtelte Anführungszeichen zu handhaben. Dasgeschieht über eine Verbindung von Werten wie open-quote und der Eigenschaft quotes.

Wenn wir uns die Syntax der Werte ansehen, stellen wir fest, dass außer den Schlüssel-wörtern none und inherit nur ein oder mehrere Paare von Zeichenketten zulässig sind.Dabei definiert die erste Zeichenkette das öffnende und die zweite Zeichenkette dasschließende Anführungszeichen. Von den beiden unten stehenden Deklarationen ist alsonur die erste gültig:

quotes: '"' "'"; /* gültig */

quotes: '"'; /* UNGÜLTIG */

In der ersten Regel sehen Sie außerdem, wie die Zeichen, die als Anführungszeichenbenutzt werden sollen, selbst mit Anführungszeichen umgeben werden müssen. Dop-pelte Anführungszeichen werden mit einfachen umgeben und umgekehrt.

Sehen wir uns dazu ein einfaches Beispiel an. In diesem XML-Format wird eine Liste derbeliebtesten Zitate gespeichert. Hier ein Eintrag aus dieser Liste:

<quotation>

<quote>Ich hasse Zitate.</quote>

<quotee>Ralph Waldo Emerson</quotee>

</quotation>

Um diese Daten auf sinnvolle Weise auszugeben, könnten Sie beispielsweise die folgen-den Regeln verwenden, die das Ergebnis in Abbildung 12-21 hervorbringen:

quotation: display: block;}

quote {quotes: '"' '"';}

quote:before {content: open-quote;}

quote:after {content: close-quote;}

quotee:before {content: " (";}

quotee:after {content: ")";}

quotes

Werte: [<Zeichenkette> <Zeichenkette>]+ | none | inherit



Vererbt: ja



Mit Hilfe der Werte open-quote und close-quote werden die nötigen Anführungszeicheneingefügt (da verschiedene Sprachen auch unterschiedliche Anführungszeichen verwen-den). Dabei werden die Werte der Eigenschaft quotes herangezogen, um zu ermitteln,welche Zeichen benutzt werden sollen. In diesem Fall beginnt und endet das Zitat dahermit doppelten Anführungszeichen.

Sollen anstelle der einfachen geraden Zeichen »runde« Anführungszeichen benutzt wer-den, wie in den meisten gedruckten Medien üblich, müsste die Regel für quote folgender-maßen lauten:

quote {quotes: '\201C' '\201D';}

In diesem Beispiel werden die hexadezimalen Unicode-Werte für die »runden« Anfüh-rungszeichen verwendet. Diese würden nun anstelle der geraden Anführungszeichen dasZitat von Mr. Emerson in Abbildung 12-21 umgeben.

Mit der Eigenschaft quotes können Sie Anführungszeichen-Muster für beliebig tiefe Ver-schachtelungsebenen definieren. In der Regel beginnt man mit doppelten Anführungszei-chen; die erste Verschachtelungsebene erhält dann einfache Anführungszeichen. Daskann ebenfalls mit »runden« Anführungszeichen und den folgenden Regeln erreicht wer-den:

quotation: display: block;}

quote {quotes: '\201C' '\201D' '\2018' '\2019';}

quote:before, q:before{content: open-quote;}

quote:after, q:before {content: close-quote;}

Bei der Anwendung auf das unten stehende Markup erhalten Sie die Darstellung inAbbildung 12-22:

<quotation>

<quote>

Am Anfang war Nichts. Und Gott sprach: <q>Es werde Licht!</q>

Es war zwar immer noch nichts da, aber das konnte man jetzt sehen.

</quote>

</quotation>

Überschreitet die Anzahl der Schachtelungsebenen die Anzahl der definierten Paare, wirddas letzte definierte Paar auch für tiefer liegende Ebenen verwendet. Die unten stehende

Abbildung 12-21: Anführungszeichen und andere Inhalte einfügen

Abbildung 12-22: Verschachtelte runde Anführungszeichen


Regel auf das Markup in Abbildung 12-22 angewendet, würde demnach für das innereund das äußere Zitat doppelte Anführungszeichen verwenden:

quote {quotes: '\201C' '\201D';}

Mit erzeugten Anführungszeichen ist ein häufiger typografischer Effekt auch mit CSSmöglich. Bei mehreren Absätzen, die zitierten Text enthalten, wird oft das schließendeAnführungszeichen weggelassen. Außer beim letzten Absatz wird das Anführungszeichennur am Anfang dargestellt. Dieses Verhalten lässt sich mit dem Wert no-close-quotenachbilden:

blockquote {quotes: '"' '"' "'" "'" '"' '"';}

blockquote p:before {content: open-quote;}

blockquote p:after {content: no-close-quote;}

Dadurch beginnt jeder Absatz mit einem doppelten Anführungszeichen, ohne dass erdabei mit einem schließenden abgeschlossen wird. Das gilt auch für den letzten Absatz,dem Sie eine eigene Klasse zuweisen müssen. Dieser können Sie nun close-quote alsWert für den nachgestellten erzeugten Inhalt (:after) zuweisen.

Dabei wird die Verschachtelungsebene der Zitate beibehalten, ohne dass tatsächlich einSymbol erzeugt wird. Daher beginnt auch jeder Absatz mit einem doppelten Anführungs-zeichen, anstatt zwischen doppelten und einfachen Zeichen zu wechseln, bis der dritteAbsatz erreicht ist. Der Wert no-close-quote sorgt dafür, dass die Verschachtelung derZitate wieder geschlossen wird und jeder neue Absatz auf der gleichen Ebene beginnenkann.

Dazu sagt die CSS2.1-Spezifikation: »Die Verschachtelungstiefe von Zitaten ist unabhän-gig von der Schachtelung des Quelldokuments oder der Formatierungsstruktur.« Begin-nen Sie also eine neue Zitatebene, so besteht diese so lange, bis ein close-quote gefundenwird und die Zitatebene wieder verlassen werden kann.

Der Vollständigkeit halber wollen wir noch das Schlüsselwort no-open-quote erwähnen,das den umgekehrten Effekt von no-close-quote hat. Dieses Schlüsselwort erhöht dieZitatebene um einen Zähler, ohne dabei ein Symbol zu erzeugen.

Zähler Zähler sind uns allen bekannt, beispielsweise für die Marker der Einträge in einer geord-neten Liste. In CSS1 gab es noch keine Möglichkeit, diese Zähler zu beeinflussen, größ-tenteils deshalb, weil es dafür keinen Bedarf gab. HTML definierte sein eigenesZählerverhalten für geordnete Listen, und das reichte aus. Durch das Aufkommen vonXML wurde es immer wichtiger, eine Methode zum Steuern von Zählern über CSS zuhaben. CSS2 ging aber darüber hinaus, einfach das Verhalten der HTML-Zähler nachzu-bilden. Stattdessen wurde es über zwei neue Eigenschaften und zwei Werte für contentmöglich, ein fast beliebiges Zählerformat, inklusive Zähler für verschachtelte Listen, fest-zulegen. Dabei können verschiedene Formate (z.B. »VII.2.c.«) auch zusammen benutztwerden.


Zurücksetzen und Inkrementieren (Hochzählen)

Die Grundlage für das Anlegen von Zählern besteht in der Möglichkeit, einen Startwertund ein Intervall festzulegen, um das der Zähler erhöht werden soll. Der Startwert wirdmit der Eigenschaft counter-reset definiert.

Der Identifier für einen Zähler ist einfach eine vom Autor festgelegte Bezeichnung. Sokönnten Sie den Zähler für einen Unterabschnitt beispielsweise subsection, subsec, ssoder auch klaus nennen. Dabei reicht es aus, den Zähler zurückzusetzen oder zu inkre-mentieren, um ihn ins Leben zu rufen. In der folgenden Regel wird der Zähler chapterdefiniert, indem er zurückgesetzt wird:

h1 {counter-reset: chapter;}

Standardmäßig wird ein Zähler auf null zurückgesetzt. Wollen Sie einen anderen Wertbenutzen, können Sie dem Identifier eine Zahl nachstellen:

h1#ch4 {counter-reset: chapter 4;}

Sie können auch mehrere Zähler gleichzeitig zurücksetzen, indem Sie Paare aus Identifierund Integerwert angeben. Lassen Sie den Integerwert weg, wird der Zähler auf nullzurückgesetzt:

h1 {counter-reset: chapter 4 section -1 subsec figure 1;}

/* 'subsec' wird auf 0 zurückgesetzt */

Wie Sie im vorigen Beispiel sehen können, sind auch negative Werte erlaubt. Es wäre alsovollkommen legal, einen Zähler auf den Wert -32768 zu setzen und dann von dort aus zuzählen.

CSS definiert nicht, was Benutzerprogramme bei nicht-numerischen Zähl-stilen mit negativen Werten tun sollen. Es ist also nicht klar, was bei einemZählerwert von -5 und dem Zählstil upper-alpha (A,B,C,…) passieren soll.

Um den Zähler zu inkrementieren, brauchen Sie natürlich eine Eigenschaft, die anzeigt,dass ein Element den Zähler hochzählen soll. Ansonsten würde der Zähler immer aufdem Startwert stehen bleiben, den Sie ihm mit counter-reset zugewiesen haben. DieEigenschaft für diesen Zweck hat dann auch den Namen counter-increment.

counter-reset

Werte: [<Identifier> <Integerwert>? ]+ | none | inherit



Vererbt: nein



Wie counter-reset akzeptiert auch counter-increment Paare aus Identifier und Integer-wert. Dabei können dem Integer-Teil negative wie positive Werte oder auch 0 zugewiesenwerden. Wird kein Integerwert zugewiesen, so wird bei counter-increment standardmä-ßig der Wert 1 verwendet – nicht 0.

Um die traditionelle 1, 2, 3-Zählweise für geordnete Listen nachzubilden, könnte einBenutzerprogramm beispielsweise folgende Regeln verwenden:

ol {counter-reset: ordered;} /* verwendet den Standardwert 0 */

ol li {counter-increment: ordered;} /* verwendet den Standardwert 1 */

Vielleicht will ein Autor aber auch von null ausgehend rückwärts zählen, so dass die Lis-teneinträge mit aufsteigenden negativen Zahlen versehen werden. Dafür brauchen wirdas vorige Beispiel nur minimal abzuändern:

ol {counter-reset: ordered;} /* verwendet den Standardwert 0 */

ol li {counter-increment: ordered -1;}

Wenn Sie den Integerwert -1 durch -2 ersetzen, lautet die Reihenfolge der Marker nun–2, –4, –6 und so weiter.

Zähler verwenden

Um die Zähler tatsächlich anzuzeigen, müssen Sie die Eigenschaft content zusammen miteinem der Zählerwerte benutzen. Hier ein Beispiel, das eine geordnete XML-Liste zeigt:

<list type="ordered">

<item>Erster Eintrag</item>

<item>Zweiter Eintrag</item>

<item>Dritter Eintrag</item>

</list>

Wenn Sie die folgenden Regeln auf die XML-Struktur anwenden, erhalten Sie die Darstel-lung in Abbildung 12-23:

list[type="ordered"] {counter-reset: ordered;} /* verwendet den Standardwert 0 */

list[type="ordered"] item {display: block;}

list[type="ordered"] item:before {counter-increment: ordered;

content: counter(ordered) ". "; margin: 0.25em 0;}

Beachten Sie, dass der erzeugte Inhalt, wie sonst auch, als Inline-Inhalt zu Beginn desassoziierten Elements eingefügt wird. Der Effekt entspricht also in etwa einer HTML-Liste, für die list-style-position: mit dem Wert inside definiert wurde.

counter-increment




Vererbt: nein



Beachten Sie auch, dass die item-Elemente ganz normale Elemente sind, die Blockboxenerzeugen. Die Zähler sind also nicht auf Elemente beschränkt, deren Wert für display auflist-item gesetzt wurde. Jedes Element kann Zähler benutzen. Sehen Sie hierzu die fol-genden Regeln:

h1:before {counter-reset: section subsec;

counter-increment: chapter;

content: counter(chapter) ". ";}

h2:before {counter-reset: subsec;

counter-increment: section;

content: counter(chapter )"." counter(section) ". ";}

h3:before {counter-increment: subsec;

content: counter(chapter) "." counter(section) "." counter(subsec) ". ";}

Diese Regeln sorgen für die Darstellung in Abbildung 12-24.

In Abbildung 12-24 sehen Sie ein paar wichtige Merkmale beim Zurücksetzen und Inkre-mentieren von Zählern. Das h1-Element benutzt hier den Zähler chapter mit dem Stan-dardwert 0. Dennoch steht vor dem Text eine »1«. Wird der Zähler durch das gleicheElement inkrementiert und benutzt, so wird der Zähler vor seiner Darstellung hochge-zählt. Wird der Zähler vom gleichen Element zurückgesetzt und dargestellt, so wird dasZurücksetzen des Zählers ebenfalls vor dessen Anzeige vorgenommen. Zum Beispiel:

Abbildung 12-23: Listeneinträge zählen

Abbildung 12-24: Überschriften mit Zählern versehen


h1:before, h2:before, h3:before {

content: counter(chapter) "." counter(section) "." counter(subsec) ". ";}

h1 {counter-reset: section subsec;

counter-increment: chapter;}

Dabei wird dem h1-Element im Dokument der Text »1.0.0. « vorangestellt, weil die Zäh-ler section und subsec zwar zurückgesetzt, aber nicht inkrementiert wurden. Soll dieerste Darstellung eines Zählers mit 0 beginnen, müssen Sie ihn demnach auf den Wert -1zurücksetzen, wie hier gezeigt:

body {counter-reset: chapter -1;}

h1:before {counter-increment: chapter; content: counter(chapter) ". ";}

Mit Zählern lassen sich einige interessante Dinge anstellen. Sehen Sie sich hierzu einmalfolgendes XML-Fragment an:

<code type="BASIC">

<line>PRINT "Hallo, Welt!"</line>

<line>REM Diese Zeile wird bei den Kids als "Kommentar"-Zeile bezeichnet.</line>

<line>GOTO 10</line>

</code>

Mit Hilfe der folgenden Regeln können Sie das traditionelle Format für das Listing einesBASIC-Programms wieder auferstehen lassen:

code[type="BASIC"] {counter-reset: linenum; font-family: monospace;}

code[type="BASIC"] line {display: block;}

code[type="BASIC"] line:before {counter-increment: linenum;

content: counter(linenum 10) ": ";}

Als Teil des Formats für counter( ) können Sie außerdem eigene Listenstile definieren.Dazu fügen Sie hinter dem Identifier für den betreffenden Zähler, durch ein Kommagetrennt, ein list-style-type-Schlüsselwort an. Dadurch lässt sich die Nummerierungder Überschriften, wie in Abbildung 12-25 gezeigt, verändern:

h1:before {counter-reset: section subsec;

counter-increment: chapter;

content: counter(chapter,upper-alpha) ". ";}

h2:before {counter-reset: subsec;

counter-increment: section;

content: counter(chapter,upper-alpha)"." counter(section) ". ";}

h3:before {counter-increment: subsec;

content: counter(chapter,upper-alpha) "." counter(section) "."

counter(subsec,lower-roman) ". ";}

Wie Sie sehen, hat der Zähler section kein Schlüsselwort für den Zählerstil erhalten undwird daher mit dem standardmäßigen dezimalen Zahlensystem dargestellt. Wenn Siewollen, können Sie Zähler auch mit den Werten disc, circle, square oder sogar none ver-sehen.

In diesem Zusammenhang ist noch wichtig, dass Elemente mit dem display-Wert noneZähler nicht hochzählen, selbst wenn die Regel etwas anderes zu sagen scheint. Lautetder visibility-Wert dagegen hidden, so wird der Zähler inkrementiert:


.suppress {counter-increment: cntr; display: none;}

/* 'cntr' wird NICHT inkrementiert */

.invisible {counter-increment: cntr; visibility: hidden;}

/* 'cntr' WIRD inkrementiert */

Zähler und Geltungsbereich

Bisher haben wir gesehen, wie sich mehrere Zähler zusammenfassen lassen, umAbschnitte und Unterabschnitte zählen zu können. Das wird oft auch für verschachteltegeordnete Listen benötigt. Allerdings würde es schnell umständlich werden, wenn fürsehr tief verschachtelte Listen jeweils ein eigener Zähler angelegt werden müsste. Um bei-spielsweise eine fünf Ebenen tiefe Liste mit Zählern zu versorgen, bräuchten Sie Regelnwie diese:

ol ol ol ol ol li:before {counter-increment: ord1 ord2 ord3 ord4 ord5;

content: counter(ord1) "." counter(ord2) "." counter(ord3) "."

counter(ord4) "." counter(ord5) ".";}

Und jetzt stellen Sie sich einmal vor, wie viel Arbeit es wäre, genügend Regeln für 50Schachtelungsebenen zu erstellen. (Das ist nur ein Beispiel!)

Glücklicherweise gibt es in CSS2.x für Zähler das Konzept des Geltungsbereichs (Scope).Jede neue Schachtelungsebene erzeugt dabei einen neuen Geltungsbereich für den Zäh-ler. Dadurch ist es möglich, mit den folgenden Regeln die traditionelle HTML-Zählweisefür verschachtelte Listen nachzubilden:

ol {counter-reset: ordered;}

ol li:before {counter-increment: ordered;

content: counter(ordered) ". ";}

Abbildung 12-25: Stildefinitionen für Zähler anpassen


Dadurch beginnen alle geordneten Listen, auch die in tieferen Schachtelungsebenen, mitdem Startwert 1 und werden jeweils für jeden Eintrag um eins hochgezählt – genau wie esin HTML schon immer der Fall war.

Das funktioniert, weil für jede Schachtelungsebene eine neue Instanz von ordered ange-legt wird. Jede Ebene hat also ihren eigenen ordered-Zähler, der für jede Liste von neuemmit dem Zählen beginnt.

Wollen Sie dagegen, dass für jede Schachtelungsebene dem alten Zähler ein neuer hinzu-gefügt wird (1, 1.1, 1.2, 1.2.1, 1.2.2, 1.3, 2, 2.1 usw.), so brauchen Sie anstelle voncounter( ) die Eigenschaft counters( ). Was für einen Unterschied ein einziges »s« dochmachen kann!

Die in Abbildung 12-26 gezeigte Zählerdarstellung können Sie mit folgenden Regelnerreichen:

ol {counter-reset: ordered;}


content: counters(ordered,".") " - ";}

Dabei benutzt das Schlüsselwort counters(ordered,".") den Zähler ordered aus demjeweiligen Geltungsbereich und stellt ihm einen Punkt nach. Danach werden alle Zählerfür ein bestimmtes Element zu einer Zeichenkette zusammengefasst und dann dargestellt.Einem Element auf der dritten Schachtelungsebene wird demnach der Zähler aus demGeltungsbereich der äußersten Liste, der Liste zwischen der äußeren und der gegenwärti-gen Liste und dem Geltungsbereich der gegenwärtigen Liste vorangestellt. Dabei wirdallen drei Werten ein Punkt nachgestellt. Der Rest des Wertes für content fügt ein Leer-zeichen, einen Bindestrich und ein weiteres Leerzeichen nach den Zählern ein.

Wie bei counter( ) können Sie auch für verschachtelte Zähler eine eigene Darstellungs-form für den Markierungspunkt angeben. Dabei gilt dieser Wert allerdings für alle Zäh-

Abbildung 12-26: Verschachtelte Zähler


ler. Mit folgenden Regeln würden den Listeneinträgen aus Abbildung 12-26 anstelle vonZahlen Kleinbuchstaben vorangestellt:


content: counters(ordered,".",lower-alpha) ": ";}

ZusammenfassungStildefinitionen für Listen sind vielleicht nicht so hoch entwickelt, wie wir es gerne hät-ten, und die Browserunterstützung für erzeugte Inhalte ist ebenfalls nicht besonders groß(jedenfalls während dieses Buch geschrieben wird). Trotzdem ist die Möglichkeit, Listenmit Stildefinitionen zu versehen, äußerst nützlich. Eine sehr häufige Verwendung bestehtzum Beispiel darin, eine Liste mit Links von den Markern und Einrückungen zu befreienund so eine Navigationsleiste zu erstellen. Der Kombination aus einfachem Markup undflexiblem Layout ist nur schwer zu widerstehen. Mit den Verbesserungen, die mit CSS3für die Listendarstellung erwartet werden, gehe ich davon aus, dass Listen immer nützli-cher werden.

Für Fälle, in denen eine Markup-Sprache keine eigenen Listenelemente definiert, kannerzeugter Inhalt eine große Hilfe sein, um Inhalte, wie beispielsweise Links, mit passen-den Icons zu versehen (z.B. PDF-Dateien, Word-Dokumente oder einfach Links aufandere Websites). Mit erzeugten Inhalten ist es außerdem leicht, die URLs von Linksbeim Druck mit auszugeben. Zudem lässt die Möglichkeit, Anführungszeichen selbst zuformatieren und einzufügen, einem Typographen das Herz höher schlagen. Man kannruhig sagen, dass der Nutzen von erzeugten Inhalten nur von Ihrer eigenen Vorstellungs-kraft begrenzt wird. Dank der Zähler ist es nun möglich, Bestellinformationen auch mitElementen darzustellen, die typischerweise keine Listen sind, wie etwa Überschriftenoder Codeblöcke. Wenn Sie diese Möglichkeiten noch mit Designelementen erweiternmöchten, die das Aussehen des Benutzer-Betriebssystems nachbilden, lesen Sie einfachweiter. Im nächsten Kapitel geht es um die Verwendung von Systemfarben und -zeichen-sätzen mit CSS.

| 417

KAPITEL 13

Benutzerschnittstellen

Ein Großteil von CSS befasst sich mit der Definition von Stilen für Dokumente. Gleichzei-tig bieten Stylesheets aber auch eine Vielzahl an Werkzeugen für die Gestaltung vonBenutzerschnittstellen – nicht nur für Dokumente. So verwendeten die Entwickler vonMozilla (und vielen Mozilla-Klonen) für die Gestaltung der Benutzeroberfläche ihresBrowsers die Sprache XUL. XUL verwendet CSS und CSS-ähnliche Deklarationen, umNavigations-Buttons, Seitenleisten, Tabulatoren, Dialog- und Statusboxen und andereTeile zu beschreiben.

Auf ähnliche Weise können Sie Teile der Standardumgebung des Benutzers verwenden,um Zeichensätze und Farben eines Dokuments einzurichten. Es ist sogar möglich,bestimmte Hervorhebungen für Fokussierungen und Mauszeiger des Systems zu verwen-den. Die Schnittstellen-Fähigkeiten von CSS2 können dem Benutzer die Handhabungerleichtern – oder ihn verwirren, wenn Sie nicht aufpassen.

Systemzeichensätze und -farbenGelegentlich soll Ihr Dokument der Rechnerumgebung des Benutzers möglichst nahkommen. Das kann bei webbasierten Anwendungen beispielsweise dann der Fall sein,wenn die Webkomponente als Teil des Betriebssystems erscheinen soll. Zwar ist es inCSS2 nicht möglich, sämtliche Darstellungskomponenten des Systems für Ihr Dokumentzu benutzen, aber Sie haben zumindest die Auswahl aus einer großen Anzahl von Farbenund einer kurzen Liste von Zeichensätzen.

SystemzeichensätzeNehmen wir an, Sie haben ein Element erzeugt, das (z.B. mit Hilfe von JavaScript) wie einButton funktionieren soll. Dieser System-Button soll einem Button in der Umgebung desBenutzers möglichst ähnlich aussehen, damit der Benutzer ein solches Steuerelementmöglichst leicht wiedererkennen kann.

418 | Kapitel 13: Benutzerschnittstellen

Um das oben Gesagte umzusetzen, reicht eine Regel wie diese bereits aus:

a.widget {font: caption;}

Dadurch wird als Zeichensatz für a-Elemente, die der Klasse widget angehören, die glei-che Schriftfamilie, -größe, -gewichtung usw. verwendet wie für Buttons und ähnlicheSteuerelemente.

In CSS2 sind sechs Schlüsselwörter für Systemzeichensätze definiert. Diese finden Sie inder folgenden Liste:

caption

Die Schrifteinstellungen für Steuerelemente mit Beschriftung wie Buttons oder Auf-klappmenüs.

icon

Die Schrifteinstellungen, die zum Beschriften von Icons des Betriebssystems, wieFestplatten, Ordnern und Dateien, benutzt werden.

menu

Die Schrifteinstellungen für Elemente von Aufklappmenüs und Menülisten.

message-box

Die Schrifteinstellungen für Text innerhalb von Dialogboxen.

small-caption

Die Schrifteinstellungen für kleine Steuerelemente mit Beschriftung.

status-bar

Die Schrifteinstellungen für Statusbalken von Fenstern.

Diese Werte, die ihre eigene Form der Kurzschrift besitzen, können allerdings nur mit derEigenschaft font verwendet werden. Benutzt ein Betriebssystem für die Beschriftung vonIcons beispielsweise die Schrift Geneva mit einer Höhe von 10 Pixeln und ohne weitereEffekte (Fett- oder Kursivdruck, Kapitälchen usw.), dann haben die beiden unten stehen-den Regeln die gleiche Bedeutung, wie in Abbildung 13-1 zu sehen:

body {font: icon;}

body {font: 10px Geneva;}

body {

font-weight: normal;

font-style: normal;

font-variant: normal;

font-size: 10px;

font-family: Geneva;

}

Der einfache Wert icon besteht also eigentlich aus mehreren Einzelwerten. Dieses Verhal-ten kommt in CSS sonst nicht vor und macht die Arbeit mit diesen Werten etwas komple-xer als sonst.

Für das nächste Beispiel soll die gleiche Schriftdarstellung benutzt werden wie für Icons.Allerdings soll die Schrift hier fett gedruckt werden, auch wenn das auf dem System des

Systemzeichensätze und -farben | 419

Benutzers nicht der Fall ist. Dafür brauchen Sie eine Regel wie diese, wobei hier die Rei-henfolge der Werte besonders wichtig ist:

body {font: icon; font-weight: bold;}

Wenn Sie die Werte in dieser Reihenfolge schreiben, weisen Sie das Benutzerprogramman, als Schrift für das body-Element den Systemzeichensatz für Icon-Beschriftungen zuverwenden. In der zweiten Deklaration verändern Sie dann die Gewichtung. Wäre dieReihenfolge umgekehrt, würde die font-Deklaration den Wert von font-weight über-schreiben, wodurch der Fettdruck verloren ginge. Dieses Vorgehen entspricht dem vonKurzschrift-Eigenschaften (zu denen auch font gehört).

Vielleicht wundern Sie sich jetzt, warum hier keine allgemeinen Schriftfamilien angege-ben wurden. Eigentlich empfiehlt der Autor doch, etwas wie Geneva, sans-serif; zuschreiben (für den Fall, dass der Browser den explizit angegebenen Zeichensatz nichtunterstützt). In CSS ist die Angabe einer allgemeinen Schriftfamilie nicht möglich. Das isthier aber auch nicht nötig, weil das Benutzerprogramm den richtigen Zeichensatz in die-sem Fall direkt vom System selbst erhält. Daher ist es ziemlich sicher, dass die gleicheSchrift auch dem Browser zur Verfügung steht.

Steht der angeforderte Systemzeichensatz nicht zur Verfügung oder konnte er nicht ermit-telt werden, kann das Benutzerprogramm versuchen, eine andere passende Schrift zu»erraten«. So kann das Aussehen von small-caption etwa geschätzt werden, indem dieDefinitionen für caption verwendet und in der Schriftgröße verkleinert werden. Führtkeine dieser Methoden zum Ziel, sollte das Benutzerprogramm stattdessen seinen Stan-dardzeichensatz verwenden.

Abbildung 13-1: Text wie eine Icon-Beschriftung aussehen lassen


Systemfarben

Während dieses Buch geschrieben wird, werden die Schlüsselwörter fürSystemfarben im CSS3-Farbmodul wieder verworfen. Stattdessen wird einEigenschaften-basiertes Modell favorisiert. Das Gleiche gilt für CSS2.1, wodiese Schlüsselwörter auf Grund der erwarteten Änderungen in CSS3 nichtmehr gültig sind. Von einer Verwendung wird daher dringend abgeraten.Wir haben diese Informationen hier trotzdem erwähnt, da einige dergegenwärtigen Browser Systemfarben unterstützen.

Für die Verwendung der im Betriebssystem definierten Farben gibt es in CSS2 eine Reihevon Schlüsselwörtern. Diese können überall dort eingesetzt werden, wo ein <Farbwert>erlaubt ist. So könnten Sie den Hintergrund eines Elements folgendermaßen mit der Hin-tergrundfarbe des Benutzer-Desktops versehen:

div#test {background-color: Background;}

Um ein Dokument mit der Standardschrift und Hintergrundfarbe des Systems zu verse-hen, könnten Sie Folgendes schreiben:

body {color: WindowText; background: Window;}

Diese Anpassungen erhöhen die Chance, dass der Benutzer das Dokument lesen kann, dasein Betriebssystem ziemlich sicher so eingerichtet ist, dass es benutzbar ist. (Wenn nicht,hat er es nicht besser verdient!)

Insgesamt gibt es 28 Schlüsselwörter für Systemfarben, auch wenn diese in CSS nicht aus-drücklich definiert sind. Stattdessen gibt es allgemeine (und sehr kurze) Beschreibungen,was jedes Schlüsselwort bedeuten soll. In der folgenden Liste finden Sie alle 28 Schlüssel-wörter. Wenn es einen direkten Bezug zum Reiter »Darstellung« im Menü »Eigenschaftenvon Anzeige« in der Systemsteuerung von Windows 2000 gibt, ist das in Klammern nachder Beschreibung vermerkt.

ActiveBorder

Die Farbe für den äußeren Rahmen eines aktiven Fensters (die erste Farbe in »Rah-men des aktiven Fensters«).

ActiveCaption

Die Hintergrundfarbe für die Überschrift des gerade aktiven Fensters (die erste Farbein »Titelleiste des aktiven Fensters«).

AppWorkspace

Die Hintergrundfarbe für Programme, in denen mehrere Dokumente geöffnet seinkönnen, z.B. die Farbe »hinter« den geöffneten Dokumenten in Microsoft Word.

Background

Die Hintergrundfarbe des Desktop (die erste Farbe in »Desktop«).

ButtonFace

Die Farbe für die »Oberseite« eines dreidimensionalen Buttons.

Systemzeichensätze und -farben | 421

ButtonHighlight

Die Hervorhebungsfarbe für die Kanten von dreidimensionalen Anzeigeelementen,die von der virtuellen Lichtquelle abgewandt sind. Befindet sich die virtuelle Licht-quelle beispielsweise oben links, wäre das die Hervorhebungsfarbe für die rechte unduntere Kante des Anzeigeelements.

ButtonShadow

Die Schattenfarbe für dreidimensionale Anzeigeelemente.

ButtonText

Die Textfarbe für Buttons (die Textfarbe in »3D-Objekte«).

CaptionText

Die Farbe für den Text von Überschriften, der Größenbox und des Scrollbalken-Symbols (die Zeichensatzfarbe in »Titelleiste des aktiven Fensters«).

GrayText

Die Textfarbe für inaktive (»graue«) Elemente. Dieses Schlüsselwort wird als Hex-Wert #000 interpretiert, wenn der aktuelle Bildschirmtreiber keinen echten Grauwertdarstellen kann.

Highlight

Die Hervorhebungsfarbe für Elemente, die in einer Liste ausgewählt wurden (dieerste Farbe in »Markierte Elemente«).

HighlightText

Die Schriftfarbe von ausgewählten Elementen (die Schriftfarbe in »Markierte Ele-mente«).

InactiveBorder

Die Farbe für den äußeren Rahmen eines nicht-aktiven Fensters (die erste Farbe in»Rahmen des inaktiven Fensters«).

InactiveCaption

Die Hintergrundfarbe für die Überschrift eines nicht-aktiven Fensters (die ersteFarbe in »Titelleisten der inaktiven Fenster«).

InactiveCaptionText

Die Textfarbe für die Überschrift eines nicht-aktiven Fensters (die Schriftfarbe in»Titelleisten der inaktiven Fenster«).

InfoBackground

Die Hintergrundfarbe der Werkzeugtipps (die erste Farbe in »ToolTip«).

InfoText

Die Textfarbe der Werkzeugtipps (die Textfarbe in »ToolTip«).

Menu

Die Hintergrundfarbe eines Menüs (die erste Farbe in »Menü«).

MenuText

Die Textfarbe für Menüeinträge (die Textfarbe in »Menü«).


Scrollbar

Der »graue Bereich« eines Scrollbalkens.

ThreeDDarkShadow

Die gleiche Farbe, die auch für den dunklen Schatten von dreidimensionalen Anzei-geelementen benutzt wird.

ThreeDFace

Die Farbe der Oberseite von dreidimensionalen Anzeigeelementen.

ThreeDHighlight

Die Hervorhebungsfarbe für dreidimensionale Anzeigeelemente.

ThreeDLightShadow

Die helle Farbe für dreidimensionale Anzeigeelemente (für die der virtuellen Licht-quelle zugewandten Kanten).

ThreeDShadow

Der Schatten für dreidimensionale Anzeigeelemente.

Window

Die Hintergrundfarbe eines Fensters (die erste Farbe in »Fenster«).

WindowFrame

Die Farbe für den Rahmen eines Fensters.

WindowText

Die Textfarbe für Fenster (die erste Schriftfarbe in »Fenster«).

Laut CSS2 wird bei der Angabe der Schlüsselwörter für Systemfarben nicht zwischenGroß- und Kleinschreibung unterschieden. Dennoch wird empfohlen, die hier gezeigteSchreibweise zu benutzen. Dabei sind die Farbnamen leichter lesbar. ThreeDLightShadowist auf den ersten Blick einfacher zu verstehen als threedlightshadow.

Ein offensichtlicher Nachteil dieser Schlüsselwörter besteht darin, dass Benutzerpro-gramme sie unterschiedlich interpretieren können, selbst wenn die Programme auf demgleichen Betriebssystem laufen. Verlassen Sie sich also nicht auf konsistente Ergebnisse,wenn Sie diese Schlüsselwörter benutzen. Eine Anweisung wie »Suchen Sie Text, der diegleiche Farbe hat wie Ihr Desktop« sollte vermieden werden, weil der Benutzer vielleichtein Hintergrundbild (oder »Wallpaper«) benutzt, das die eigentliche Farbe verdeckt.

CursorEine weitere wichtige Rolle bei Benutzerschnittstellen spielt der Cursor (in der CSS-Spezi-fikation als »Zeiger« bzw. »pointing device« bezeichnet). Dieser wird beispielsweise voneiner Maus, einem Trackpad, einem Grafiktablett oder vielleicht sogar von einem opti-schen Lesesystem gesteuert. Der Cursor kann in vielen Browsern einen Hinweis auf diegerade ausgeführte Aktion geben. So wird der Cursor oftmals als kleine Hand mit ausge-strecktem Zeigefinger dargestellt, wenn er sich über einem Hyperlink befindet.

Cursor | 423

Einen anderen Cursor verwendenMit CSS2 können Sie das für den Cursor verwendete Icon an die eigenen Bedürfnisseanpassen. Dadurch wird das Erstellen webbasierter Applikationen, die sich wie direkt aufdem Betriebssystem des Benutzers ausgeführte Programme verhalten, erleichtert. Sokönnte sich der Cursor bei einem Link auf eine Hilfedatei beispielsweise in ein Fragezei-chen verwandeln (siehe Abbildung 13-2).

Dafür gibt es die Eigenschaft cursor.

Der Standardwert auto bedeutet einfach, dass das Benutzerprogramm ein passendes Cur-sor-Icon für den aktuellen Kontext auswählen soll. Das ist nicht das Gleiche wie default,was eine Darstellung des Systemstandardcursors erzwingt. Normalerweise ist das einPfeil, kann aber je nach Betriebssystem auch etwas anderes sein.

Cursor zum Zeigen und Auswählen

Der Wert pointer ändert das Cursor-Icon, als würde sich der Cursor über einem Hyper-link befinden. Dieses Verhalten lässt sich sogar für HTML-Dokumente beschreiben:

a[href] {cursor: pointer;}

Mit der Eigenschaft cursor können Sie für ein beliebiges Element festlegen, dass sich derCursor ändert, als sei es ein Link. Das kann für den Benutzer sehr verwirrend sein. Daherempfehle ich, diese Möglichkeit nicht zu oft einzusetzen. Andererseits erleichtert cursormit Hilfe von JavaScript die Erstellung von interaktiven Bildschirmelementen, für die, wiein Abbildung 13-3 zu sehen, der Cursor entsprechend geändert wird.

Abbildung 13-2: Das Cursor-Icon anpassen

cursor

Werte: [[<URI>,]* [ auto | default | pointer | crosshair | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help | progress ]] | inherit

Startwert: auto


Vererbt: ja

Berechneter Wert: für <URI>-Werte ein absoluter Wert; ansonsten wie angegeben


Vor der Version 6 erkannte Internet Explorer für Windows den Wertpointer nicht. Stattdessen wurde der Wert hand benutzt, um das »Zeige-hand«-Icon auszuwählen. Inzwischen werden beide Werte erkannt.

Sehr häufig wird der Cursor beim Surfen im Web auch als text-Icon angezeigt. Dieseserscheint, wenn der Benutzer Text auswählen kann, und hat starke Ähnlichkeit miteinem großgeschriebenen »I«. Dieses Icon soll dem Benutzer signalisieren, dass dergegenwärtig unter dem Cursor befindliche Inhalt ausgewählt werden kann. In Abbildung13-4 sehen Sie ein Text-Icon am Ende von bereits ausgewähltem Text.

Eine andere Möglichkeit, Interaktivität anzuzeigen, besteht in der Verwendung des Wertscrosshair, der den Cursor in eine Art Fadenkreuz verwandelt. Das ist in der Regel einPaar kurze Linien, die sich in einem Winkel von 90 Grad zueinander befinden und einegewisse Ähnlichkeit mit einem Pluszeichen (+) aufweisen. Gelegentlich kann eincrosshair-Cursor aber auch als Muliplikationszeichen oder als kleines »x« dargestelltwerden, wie es bei Zielfernrohren der Fall ist. Fadenkreuze kommen beispielsweise beiProgrammen für Bildschirmfotos zum Einsatz, bei denen der Benutzer genau angebensoll, welche Pixel ausgewählt werden sollen.

Cursor für Bewegungen

Oftmals erzeugt der Wert move eine ähnliche Darstellung wie crosshair. Der Wert movewird in Situationen verwendet, in denen der Autor zeigen will, dass ein Bildschirmelementbewegt werden kann. Dieser Cursor wird oft als eine Art dickes Fadenkreuz mit Pfeilspitzenan den Enden dargestellt. Eine andere Art der Darstellung ist eine »Greifhand«, deren Fin-ger sich schließen und wieder öffnen, wenn der Benutzer eine Maustaste klickt und wiederloslässt. Zwei mögliche Darstellungen für move sehen Sie in Abbildung 13-5.

Dann gibt es da noch verschiedene mit move verwandte Werte für cursor, wie e-resize,ne-resize usw. Benutzer von Windows und den meisten grafischen Unix-Shells werden

Abbildung 13-3: Ein interaktives Element mit Hilfe des Cursors hervorheben

Abbildung 13-4: Auswählbarer Text und der passende Cursor

Cursor | 425

diese Icons als die Symbole wiedererkennen, die angezeigt werden, wenn sich der Maus-zeiger über einer Fensterecke befindet. Befindet sich der Cursor beispielsweise über derrechten Seite des Fensters, so wird ein e-resize-Cursor angezeigt, der dem Benutzer sig-nalisiert, dass die rechte Seite des Fensters verschoben werden kann. Befindet sich derMauszeiger über der linken unteren Ecke des Fensters, so wird das sw-resize-Icon ver-wendet. (Die Bezeichnungen orientieren sich dabei an den englischen Namen der Him-melsrichtungen. Das heißt: n entspricht Norden (oben); s bedeutet Süden (unten); wsteht für Westen (links) und e für »east«, also Osten (rechts).) In Abbildung 13-6 sehenSie einige mögliche Varianten für diese Icons.

Warten und Fortschritt

Die Werte wait und progress zeigen beide an, dass das Programm gerade mit irgendetwasbeschäftigt ist. Trotzdem sind die beiden Icons nicht identisch. wait bedeutet, dass derBenutzer warten soll, bis das Programm nicht mehr so beschäftigt ist. progress besagthingegen, dass das Programm trotz der gegenwärtigen Beschäftigung Eingaben entgegen-nehmen kann. In den meisten Betriebssystemen wird wait als Uhr dargestellt (eventuellmit animierten Zeigern) oder als Sanduhr (die immer wieder umgedreht wird). Der Wertprogress wird dagegen als sich drehendes Rad oder bunter Ball dargestellt, gelegentlichaber auch als Pfeil mit einem kleinen Sanduhr an der Seite. In Abbildung 13-7 sind einigeder möglichen Icons dargestellt.

Der Wert progress wurde in CSS2.1 eingeführt.

Abbildung 13-5: Verschiedene Icons für den Wert move

Abbildung 13-6: Verschiedene »resize«-Cursor

Abbildung 13-7: Warten und Fortschritt im Vergleich


Hilfestellung geben

Gelegentlich will der Autor dem Benutzer zeigen, dass es Hilfestellungen gibt. Der kor-rekte Cursor-Wert hierfür heißt help. Das verwendete Icon ist dabei häufig ein Fragezei-chen oder ein Pfeil mit einem kleinen Fragezeichen an der Seite. Der Wert help kann sehrnützlich sein, wenn Sie dem Benutzer Informationen anbieten möchten, mit denen er IhreWebsite leichter verstehen kann.

a.help {cursor: help;}

Mit dem help-Cursor können Sie auch anzeigen, dass es für ein Element zusätzliche Infor-mationen gibt, wie etwa bei acronym-Elementen, die ein title-Attribut besitzen. VieleBrowser zeigen den Inhalt des title-Attributs in Form eines »Tooltipps« an, wenn derCursor darüber bewegt wird. Bewegt der Benutzer den Cursor aber zu schnell oder ist derRechner nicht schnell genug, kann es passieren, dass die zusätzliche Information nichtwahrgenommen wird, wenn der Cursor sich nicht geändert hat. In einem solchen Fallkann die folgende Regel hilfreich sein. Das Ergebnis sehen Sie in Abbildung 13-8:

acronym[title] {cursor: help; border-bottom: 1px dotted gray;}

Grafische Cursor

Ganz zum Schluss zeigen wir Ihnen die verführerische Möglichkeit, einen eigenen Cursorzu definieren. Das geschieht mit Hilfe eines URL-Werts:

a.external {cursor: url(globe.cur), pointer;}

Durch diese Regel wird das Benutzerprogramm angewiesen, die Datei globe.cur zu ladenund als Cursor zu benutzen, wie in Abbildung 13-9 gezeigt.

Dazu muss das Benutzerprogramm das Dateiformat von globe.cur natürlich auch unter-stützen. Ansonsten wird der Standardwert pointer verwendet. Beachten Sie, dass bei derSyntax für cursor auf die URL immer auch eines der allgemeinen Schlüsselwörter folgenmuss. Dieses wird von der URL durch ein Komma getrennt. Dieses Verhalten unterschei-det sich von der Eigenschaft font-family, bei der Sie eine Schriftfamilie aufrufen können,ohne dabei allgemeinere Alternativen angeben zu müssen. Für cursor muss dagegen fürjeden »URL«-Cursor eine Alternative angegeben werden.

Abbildung 13-8: Anzeigen, dass Hilfe (in Form zusätzlicher Informationen) verfügbar ist

Abbildung 13-9: Einen eigenen grafischen Cursor benutzen

Umrisse | 427

Vor dem alternativen Schlüsselwort können Sie auch mehrere Cursor-Dateien angeben.So können Sie den gleichen Cursor in verschiedenen Dateiformaten vorhalten, diesegemeinsam in einer Regel angeben und hoffen, dass zumindest eines der Formate vomBenutzerprogramm verstanden wird:

a.external {cursor: url(globe.svg#globe), url(globe.cur), url(globe.png),

url(globe.gif), url(globe.xbm), pointer;}

In diesem Fall besucht das Benutzerprogramm die verschiedenen URLs, um eine Datei zufinden, die als Cursor-Icon benutzt werden kann. Wird keine passende Datei gefunden,wird das alternative Schlüsselwort benutzt.

Es ist teilweise sogar möglich, animierte Cursor zu erstellen. IE6 bietet bei-spielsweise Unterstützung für .ani-Dateien.

UmrisseIn CSS2 gibt es noch eine letzte große Möglichkeit, um Benutzerschnittstellen zu gestal-ten: Umrisse (Outlines). Umrisse verhalten sich so ähnlich wie Rahmen. Allerdings gibtes zwei wesentliche Unterschiede. Erstens haben Umrisse keinen Einfluss auf den Text-fluss. Das heißt, es kann nicht passieren, dass der Text bei ihrem Erscheinen und Ver-schwinden im Dokument neu angeordnet wird. Legen Sie einen Umriss von 50 PixelnBreite fest, so überschneidet sich der Umriss sehr wahrscheinlich mit anderen Elementen.Zweitens müssen Umrisse nicht rechteckig sein, aber fangen Sie nicht gleich an, vorFreude Luftsprünge zu machen. Das bedeutet nämlich noch nicht, dass Sie jetzt kreisför-mige Umrisse anlegen können. Es heißt nur, dass sich der Umriss für ein Inline-Elementanders verhält als ein Rahmen. Bei Umrissen darf das Benutzerprogramm die verschiede-nen, auf unterschiedlichen Zeilen stehenden Teile zusammenfassen, wodurch ein durch-gängiger, aber nicht-rechteckiger Umriss entsteht. In Abbildung 13-10 sehen Sie einBeispiel für dieses Verhalten.

Benutzerprogramme sind nicht verpflichtet, nicht-rechteckige Umrisse zu unterstützen.Stattdessen können sie Umrisse für nicht-ersetzte Inline-Elemente auch wie Rahmen dar-stellen. Hierbei muss allerdings darauf geachtet werden, dass die Umrisse keinen zusätz-lichen Raum bei ihrer Darstellung einnehmen.

Da Rahmen und Umrisse nicht das Gleiche sind, können beide gleichzeitig demselbenElement zugewiesen werden. Das kann zu einigen interessanten Effekten führen (sieheAbbildung 13-11).

Abbildung 13-10: Umrisse können unregelmäßige Formen annehmen


In der CSS2-Spezifikation gibt es hierzu folgenden Satz: »Der Umriss darf direkt an derAußenkante eines Rahmens dargestellt werden.« Hierbei ist das Wort darf sehr wichtig.Wie der Satz sagt, handelt es sich dabei um eine Empfehlung und nicht um eine Forde-rung. So könnte ein Benutzerprogramm den Umriss auch innerhalb eines Rahmens oderein Stück davon entfernt darstellen. Während dieses Buch geschrieben wird, stellen alleBrowser, die Umrisse unterstützen, diese direkt an der Außenkante der Rahmen dar. Esgibt also glücklicherweise eine gewisse Konsistenz.

Umrisse werden als Teil der Stildefinitionen für Benutzerschnittstellen angesehen, weilsie meistens benutzt werden, um zu zeigen, welches Element gerade den Eingabefokusbesitzt. Wenn der Benutzer per Tastatur zwischen den Links navigiert, wird der geradeausgewählte Link normalerweise mit einem Umriss dargestellt. Bei Internet Explorer fürWindows wird der Link mit einem Umriss dargestellt, der gerade vom Benutzer ausge-wählt (oder angeklickt) wurde. Andere Browser versehen Texteingabefelder mit einemUmriss, die gerade den Eingabefokus haben, um dem Benutzer zu zeigen, wo seine Einga-ben landen, wenn er zu schreiben beginnt.

Wie Sie gleich sehen werden, gibt es zwischen Umrissen und Rahmen gewisse Ähnlich-keiten, aber auch einige wesentliche Unterschiede. Wir werden die Gemeinsamkeitenkurz überfliegen und uns dann eingehend mit den Unterschieden auseinander setzen.

Stildefinitionen für Umrisse festlegenWie bei Rahmen ist auch bei Umrissen das Erscheinungsbild sehr wichtig. Dieses wirdmittels der Eigenschaft outline-style definiert.

Abbildung 13-11: Die Koexistenz von Rahmen und Umrissen

outline-style

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

Startwert: none


Vererbt: nein


Umrisse | 429

Die Liste der möglichen Schlüsselwörter für den Umriss-Stil gleicht größtenteils der Listefür Rahmen. Es gibt allerdings eine Ausnahme: Der Wert hidden ist bei Umrissen nichtgültig. Wird dieser Wert dennoch benutzt, sollen Benutzerprogramme ihn als nonebetrachten. Das macht Sinn, denn Umrisse haben, selbst wenn sie sichtbar sind, keinenEinfluss auf die Anordnung der Elemente.

Ein weiterer Unterschied zwischen Umrissen und Rahmen besteht darin, dass Sie füroutline-style nur ein Schlüsselwort angeben können (verglichen mit den bis zu viermöglichen Werten für Rahmen). Demnach müssen Umrisse rundherum den gleichen Stilhaben, ob sie nun rechteckig sind oder nicht. Das macht ebenfalls Sinn, denn der Ver-such, einem nicht-rechteckigen Umriss unterschiedliche Umriss-Stile zuzuweisen, würdemehr als nur ein Problem verursachen.

Breite von UmrissenNachdem Sie Ihren Umriss mit einem bestimmten Umriss-Stil versehen haben, ist es einegute Idee, ihm mittels der Eigenschaft outline-width auch eine bestimmte Breite zuzuwei-sen.

Die Liste der Schlüsselwörter sollte jedem, der schon einmal eine Rahmenbreite definierthat, bekannt vorkommen. Der einzige wirkliche Unterschied zwischen outline-widthund border-width besteht darin, dass Sie, wie auch beim Stil, nur eine Breite für dengesamten Umriss definieren können. Daher ist als Wert auch nur ein einzelnes Schlüssel-wort erlaubt.

Farbige UmrisseNachdem Sie Umrisse mit einem Umriss-Stil und einer Breite versehen können, ist es nurgerecht, wenn Sie ihnen auch eine Farbe zuweisen können. Genau für diesen Zweck gibtes die Eigenschaft outline-color.

outline-width


Startwert: medium


Vererbt: nein

Berechneter Wert: absolute Breite; 0, wenn für den Umriss-Stil (outline-style) der Wert noneoder hidden festgelegt wurde


Wir kommen jetzt zum faszinierendsten Unterschied zwischen Rahmen und Umrissen:dem Standardwert invert. Ein invertierter Umriss sorgt dafür, dass die enthaltenen Pixelfarbverkehrt dargestellt werden (siehe Abbildung 13-12).

Der Prozess der Farbumkehrung »hinter« dem Umriss stellt sicher, dass dieser unabhän-gig von seinem Hintergrund sichtbar ist. Unterstützt ein Benutzerprogramm die Inversionnicht, sollte stattdessen der berechnete color-Wert des betreffenden Elements verwendetwerden.

Die Möglichkeit, Pixel auf dem Bildschirm umzukehren, ist sehr interessant, besondersda es für die Breite von Umrissen theoretisch keine Obergrenze gibt. Sie könnten also mitHilfe eines Umrisses einen Großteil Ihres Dokuments farblich umkehren. Das entsprichtzwar nicht dem eigentlichen Zweck von Umrissen, ist aber möglich. Ein Beispiel hierfürsehen Sie in Abbildung 13-13.

Wenn Sie Ihrem Umriss jedoch lieber eine bestimmte Farbe zuweisen möchten, könnenSie hierfür einen beliebigen Farbwert benutzen. Die Ergebnisse der folgenden Deklaratio-nen sollten klar sein:

outline-color: red;

outline-color: #000;

outline-color: rgb(50%,50%,50%);

Der einzige Nachteil könnte entstehen, wenn die Umrissfarbe fast die gleiche ist wie dieder umgebenden Pixel, wodurch der Umriss für den Benutzer nur schwer oder gar nichtsichtbar wäre. Aus diesem Grund wurde invert als optionaler Wert definiert.

outline-color

Werte: <Farbwert> | invert | inherit

Startwert: invert (oder vom Benutzerprogramm abhängig; siehe Text)


Vererbt: nein


Abbildung 13-12: Umriss mit Farbumkehrung

Umrisse | 431

Wie für den Umriss-Stil und die Breite können Sie auch für die Umrissfarbe nur einengemeinsamen Wert festlegen.

Alles auf einmalWas border für Rahmen ist, ist outline für Umrisse: eine Kurzschrift-Eigenschaft, mit derStil, Breite und Farbe eines Umrisses auf einmal angegeben werden können.

Abbildung 13-13: Massive Umkehrung

outline

Werte: [ <Umrissfarbe> || <Umriss-Stil> || <Umrissbreite> ] | inherit

Startwert: nicht definiert für Kurzschrift-Eigenschaften


Vererbt: nein

Berechneter Wert: siehe die einzelnen Eigenschaften (outline-color usw.)


Wie andere Kurzschrift-Eigenschaften vereinigt outline mehrere einzelne Eigenschaftenzu einer gemeinsamen kompakten Schreibweise. Es gelten die gleichen Verhaltensweisenwie bei anderen Kurzschrift-Eigenschaften auch – zuvor definierte Werte werden über-schrieben. Im folgenden Beispiel wird daher das von der zweiten Deklaration implizierteSchlüsselwort invert benutzt:

a:focus {outline-color: red; outline: thick solid;}

Da für Umrisse Umriss-Stil, Breite und Farbe nur für alle Seiten gemeinsam festgelegtwerden können, ist outline auch die einzige Kurzschrift-Eigenschaft, die hier zum Einsatzkommt. Eigenschaften wie outline-top oder outline-right gibt es nicht.

Wollen Sie einen invertierten Rahmen simulieren, können Sie einen Umriss mit einerexpliziten Breitenangabe verwenden. Zusätzlich setzen Sie den Außenabstand des Ele-ments auf eine gleiche oder größere Breite. Da der Umriss »über« dem Außenabstandgezeichnet wird, erstreckt er sich über einen Teil des Raumes, der nun invertiert darge-stellt wird (siehe Abbildung 13-14):

div#callbox {outline: 5px solid invert; margin: 5px;}

input:focus {outline: 1em double gray;}

Wie bereits gesagt, haben Umrisse keinen Einfluss auf den Textfluss des Dokuments.Dadurch wird verhindert, dass der Text neu angeordnet wird, wenn gerade ausgewählteLinks mit einem Umriss versehen werden. Benutzt ein Autor stattdessen Rahmen, sokann es sein, dass sich das Dokumentlayout verschiebt oder anfängt zu »springen«. MitUmrissen lassen sich die gleichen Effekte wie mit Rahmen erzielen, nur ohne die »Sprung-haftigkeit«.

Hierfür werden Umrisse per Definition »über« den übrigen Teilen der Elementbox darge-stellt. Da Umrisse laut CSS2 nur Außenabstände (die durchsichtig sind), aber keine ande-ren sichtbaren Bereiche der eigenen Elementbox überlappen können, ist das aber nichtbesonders tragisch. Die Platzierung von Umrissen wird wichtiger, wenn es in zukünftigenVersionen von CSS möglich sein sollte, dass Umrisse weiter »unten« liegen und sich even-tuell mit Rahmen oder anderen sichtbaren Bereichen der Elementbox überschneiden.

Leider wird es in CSS2 ausdrücklich vermieden, darauf einzugehen, was mit zwei sichüberschneidenden Umrissen passieren soll oder wie mit Umrissen von Elementen zu ver-

Abbildung 13-14: Verschiedene Umrissarten


fahren ist, die teilweise von anderen Elementen verdeckt werden. Diese beide Fälle lassensich in einem Beispiel veranschaulichen:

div#one {outline: 1em solid invert;}

div#two {outline: 1em solid invert; margin: -2em -2em 0 2em;

background: white;}

Gehen wir jetzt davon aus, dass div#two in einem Dokument direkt auf div#one folgt, sowird div#two das erste div-Element überlappen. Gleichzeitig verdeckt der Hintergrundvon div#two Teile des Umrisses von div#one. Ich habe für dieses Codebeispiel keineAbbildung eingefügt, da die Spezifikation von CSS2 keinerlei Hinweise darauf gibt, wasin diesem Fall passieren soll. Soll der Umriss des ersten div sichtbar sein und dabei denHintergrund und Inhalt des zweiten überlappen? Gleichzeitig gibt es Bereiche, in denensich die zwei umgekehrten Umrisse überschneiden. Was soll hier passieren? Werden diePixel hier doppelt invertiert, also wieder in ihren normalen Farben dargestellt? Oder soll-ten die Pixel nur einmal invertiert werden und dann unverändert bleiben? Wir wissen esnicht. Jede Abbildung ist weder richtig noch falsch, sondern nur eine mögliche Darstel-lung. Dabei ist nicht einmal sichergestellt, dass gerade das die Darstellung ist, die Benut-zerprogramme schließlich implementieren oder die von zukünftigen CSS-Versionen defi-niert wird.

ZusammenfassungDank der Stildefinitionen für Benutzerschnittstellen ist es möglich, das Aussehen einesDokuments an die Systemumgebung des Benutzers anzupassen. Das ist besonders dannder Fall, wenn die Systemfarben und -zeichensätze kreativ eingesetzt werden. Indem Ele-mente verwendet werden, die dem Benutzer bereits bekannt sind, kann ein Dokumentvon Anfang an bekannter und dadurch benutzerfreundlicher wirken.

Eine weitere Möglichkeit, dem Benutzer das Leben leichter zu machen, besteht darin, Style-sheets zu erstellen, die für andere Medien als den Bildschirm erstellt wurden. Dazu gehö-ren Stildefinitionen für gedruckte Medien oder den akustischen (gesprochenen) Zugriffauf eine Website oder ein Projektionsmedium. Diese Möglichkeiten werden wir im fol-genden Kapitel behandeln.

434 | Kapitel 14: Andere Medien

KAPITEL 14

Andere Medien

Nicht jeder, der Zugriff auf das Web hat, kann die in diesem Buch besprochenen Effekteauch sehen. Allein in den USA gibt es über eine Million blinde Menschen, die das Webvollkommen anders erfahren als Sehende.

Glücklicherweise kümmert sich CSS auch um nicht-visuelle Medien. CSS2 enthielt dieFähigkeit, Stile auch für nicht-bildschirmbasierte Medien zu definieren. Zwar hat dasWeb einen Großteil seiner Entwicklung auf Monitoren – einem visuellen Medium –durchgemacht, dennoch kann CSS2 auch in nicht-visuellen Medien benutzt werden,sofern das Benutzerprogramm die nötige Unterstützung bietet.

Der Vorteil, Dokumente gestalten zu können, die gleichzeitig von Sehenden und Blindengenutzt werden können, sollte nicht unterschätzt werden. Wenn Sie für das gleicheDokument verschiedene Stylesheets für unterschiedliche Medientypen wie Bildschirm,Druck oder eine akustische Darstellung bereitstellen, können Sie sich eine Menge Ärgerersparen. Links zur »Druckversion« einer Seite sind dann nicht mehr nötig. Anstatt fürdie Bildschirmdarstellung und den Druck eigene Markup-Strukturen zu erzeugen, kön-nen Sie Ihre Site durch die Wiederverwendung des gleichen Dokuments effizientermachen.

So ist es beispielsweise möglich, ein HTML-Dokument, das den Rahmen für eine »Dia-schau« enthält, für einfaches Lesen auf dem Bildschirm, saubere und lesbare Ausdrucke,als Diaschau und für Bildschirmlesegeräte aufzubereiten. Im Verlauf dieses Kapitels wer-den wir uns mit den letzten drei Optionen befassen (da sich der Rest des Buches bereitsmit der Bildschirm-Präsentation befasst).

Medienspezifische Stylesheets zuweisenDank der Mechanismen in CSS und HTML können Sie beliebige Stylesheets aufbestimmte Medien beschränken. In HTML-basierten Stylesheets geschieht dies mit Hilfedes Attributs media und gilt sowohl für link- wie auch für style-Elemente.

Medienspezifische Stylesheets zuweisen | 435

<link rel="stylesheet" type="text/css" media="print"

href="article-print.css">

<style type="text/css" media="projection">


</style>

Das Attribut media akzeptiert entweder die Angabe eines einzelnen Mediums oder einedurch Kommas getrennte Liste von Werten. Um beispielsweise ein Stylesheet einzubin-den, das für die Bildschirmausgabe und Projektionsmedien benutzt werden soll, würdenSie Folgendes schreiben:

<link rel="stylesheet" type="text/css" media="screen, projection"

href="visual.css">

Im Stylesheet selbst können Sie mit Hilfe von @import-Regeln bestimmte Medien festle-gen:

@import url(visual.css) screen, projection;

@import (article-print.css) print;

Denken Sie daran, dass ein Stylesheet ohne Medieninformationen für alle Medien gilt.Sollen bestimmte Stilvorgaben nur für die Bildschirmausgabe verwendet werden, wäh-rend andere nur für den Druck benutzt werden, so müssen Sie auch für beide StylesheetsMedieninformationen angeben. Zum Beispiel:

<link rel="stylesheet" type="text/css" media="screen"

href="article-screen.css">

<link rel="stylesheet" type="text/css" media="print"

href="article-print.css">

Wenn Sie im vorigen Beispiel aus dem ersten link-Element das Attribut media entfernen,gelten die Regeln aus article-screen.css für alle Medien, inklusive Druck, Projektion,Handhelds (PDAs) und alles andere.

Zudem wird in CSS2 eine Syntax für @media-Blöcke definiert, mit der Sie Stildefinitionenfür verschiedene Medien in einem gemeinsamen Stylesheet definieren können. Hier eineinfaches Beispiel:


body {background: white; color: black;}

@media screen {


h1 {margin-top: 1em;}

}

@media print {

body {font-family: serif;}

h1 {margin-top: 2em; border-bottom: 1px solid silver;}

}

</style>

Hier wurde für alle Medientypen festgelegt, dass das Element body einen weißen Hinter-grund und einen schwarzen Vordergrund erhalten soll. Es folgt ein Regelblock, der nur


für Bildschirmmedien (screen) gilt, sowie ein weiterer Block nur für die Druckausgabe(print).

Die @media-Blöcke können unbegrenzt groß sein und eine beliebige Anzahl von Regelnenthalten. In Situationen, in denen der Autor nur mit einem einzelnen Stylesheet arbeitenkann, sind @media-Blöcke die einzige Möglichkeit, um medienspezifische Stilregeln zudefinieren. Das gilt auch für Situationen, in denen CSS verwendet wird, um Stile für einDokument in einer XML-Sprache zu definieren, die kein media-Attribut oder etwas Ähnli-ches besitzt.

Seitenbasierte MedienIn CSS versteht man unter einem seitenbasierten Medium ein beliebiges Medium, das diePräsentation eines Dokuments mit Hilfe mehrerer »Seiten« bewerkstelligt. Das ist etwasanderes als ein Bildschirm, der als fortlaufendes Medium gilt, bei dem ein Dokument inForm einer einzigen, scrollbaren »Seite« präsentiert wird. Ein anderes fortlaufendesMedium wäre beispielsweise eine Papyrus-Schriftrolle. Gedruckte Materialien, wieBücher, Magazine und Laserausdrucke, gelten dagegen als seitenbasierte Medien. DasGleiche gilt für Folienpräsentationen, bei denen zur gleichen Zeit immer nur eine Foliegezeigt wird. Jede Folie gilt in CSS als einzelne »Seite«.

Stilregeln für die DruckausgabeSelbst in der »papierlosen Zukunft« ist das häufigste Druckmedium der Ausdruck einesbestimmten Dokuments – einer Webseite, eines Dokuments aus der Textverarbeitung,einer Tabellenkalkulation oder etwas anderem, das auf die dünnen Fasern eines totenBaums gebannt werden soll. Autoren haben eine Reihe von Möglichkeiten, die Ausdruckeihrer Dokumente für den Benutzer ansprechender zu gestalten. Das reicht von der Steue-rung von Seitenumbrüchen bis hin zur Definition von Stilregeln, die allein für die Druckver-sion bestimmt sind.

Denken Sie daran, dass die Stile für die Druckausgabe auch verwendet werden, wenn einDokument in der »Druckvorschau« angezeigt wird. Es ist also unter bestimmten Umstän-den möglich, die Stile für die Druckausgabe auch auf dem Bildschirm zu sehen.

Unterschiede zwischen Bildschirm und Druck

Neben den offensichtlichen physikalischen Unterschieden gibt es noch eine Reihe von sti-listischen Abweichungen zwischen der Bildschirm- und der Druckdarstellung. Dasbeginnt mit der Auswahl der Zeichensätze. Die meisten Designer werden Ihnen sagen,dass serifenlose Schriften für die Bildschirmausgabe am besten geeignet sind, für lesbareDruckversionen dagegen eine Serifenschrift. Eventuell wollen Sie aus diesem Grund imStylesheet für den Druck lieber Times als Verdana verwenden.

Seitenbasierte Medien | 437

Ein weiterer großer Unterschied hat mit der Schriftgröße zu tun. Wenn Sie sich auch nurfür kurze Zeit mit Webdesign beschäftigt haben, so haben Sie bereits mehr als einmalgehört, dass Points eine furchtbare Maßeinheit für Schriftgrößen im Web ist. Das stimmtim Prinzip – und besonders dann, wenn Ihr Text in verschiedenen Browsern undBetriebssystemen gleich groß dargestellt werden soll. Dennoch ist das Design für dasWeb nicht das gleiche wie das Design für gedruckte Medien. Im Druck ist es vollkommenin Ordnung, Punkte, Zentimeter oder Picas als Maßeinheit zu benutzen, da Drucker diephysikalische Größe ihres Ausgabebereichs kennen. Wurde ein Drucker beispielsweisemit 21 x 29,7 Zentimeter großem Papier bestückt, so weiß das Gerät, dass sein Druckbe-reich auf diesem Papier liegt. Außerdem weiß das Gerät, wie viele Punkte pro Inch (dpi)es erzeugen kann, und ist somit in der Lage, mit Längeneinheiten aus der physikalischenWelt, wie beispielsweise Points, umzugehen.

Deshalb wurde schon so manches Stylesheet für den Druck mit dieser Zeile begonnen:

body {font: 12pt "Times New Roman", "TimesNR", Times, serif;}

Das ist so traditionell, dass einem Grafiker, der Ihnen vielleicht gerade über die Schultersieht, womöglich sogar eine Freudenträne über die Wange kullert. Trotzdem sollten Sieihm klar machen, dass die Punkte hier nur akzeptabel sind, weil es sich um ein Druckme-dium handelt. Für Webdesign ist diese Angabe auch weiterhin wenig sinnvoll.

Andererseits kann der Mangel an Hintergründen bei den meisten Ausdrucken den Desig-ner auch zu einer Träne aus Frustration verleiten. Um Tinte zu sparen, sind die meistenBrowser so konfiguriert, dass Hintergrundbilder und -farben nicht mit ausgedruckt wer-den. Will der Benutzer diese trotzdem mit ausgeben, muss er die Voreinstellungen seinesProgramms entsprechend ändern. In CSS selbst lässt sich die Ausgabe von Hintergründennicht erzwingen. Sie können für den Ausdruck aber ein Stylesheet benutzen, das Hinter-gründe von vornherein unnötig macht, beispielsweise mit dieser Regel:

* {color: black !important; background: white !important;}

Hierdurch wird für alle Elemente als Vordergrundfarbe (Textfarbe) Schwarz und als Hin-tergrundfarbe Weiß festgelegt. Hintergründe, die Sie in Stylesheets für alle Medien defi-niert haben, werden entfernt. Da die meisten Drucker die Seite aber ohnehin sodarstellen, sollten Sie Ihre Stildefinitionen für den Druck ebenfalls darauf abstimmen.Außerdem wird verhindert, dass Benutzer mit Farbdruckern bei einem Webdesign mitgelbem Text auf schwarzem Hintergrund nicht einfach nur gelben Text auf einer weißenSeite erhalten.

In CSS2.x gibt es keine Möglichkeit, anhand des Ausgabegeräts des Benut-zers ein bestimmtes Stylesheet zu wählen. Das für den Druck definierte Style-sheet gilt also für alle verwendeten Drucker. Das CSS3-Modul MediaQueries definiert Möglichkeiten, verschiedene Stylesheets für Graustufen-und Farbdrucker zu verwenden. Beim Schreiben dieses Buchs ist dieUnterstützung für dieses Merkmal aber quasi nicht vorhanden.


Ein weiterer Unterschied zwischen seitenbasierten und fortlaufenden Medien bestehtdarin, dass mehrspaltige Layouts in seitenbasierten Medien noch schwerer zu benutzensind. Nehmen wir zum Beispiel einen zweispaltigen Artikel. Im Ausdruck wird die linkeSpalte immer auch links erscheinen, während die zweite Spalte rechts dargestellt wird.Dadurch wird der Leser gezwungen, zuerst nur links auf einer Seite zu lesen, um dann anden Anfang zurückzublättern und rechts weiterzulesen. Das ist im Web schon störendgenug; auf dem Papier ist es aber noch schlimmer.

Die offensichtliche Lösung besteht darin, die beiden Spalten mit CSS zu gestalten (bei-spielsweise durch links und rechts angeordnete Floats). Für den Druck können Sie nunein Stylesheet benutzen, das den Inhalt wieder in einer gemeinsamen Zeile ausgibt. Fürdie Bildschirmdarstellung würden beispielsweise diese Regeln in Frage kömmen:

div#leftcol {float: left; width: 45%;}

div#rightcol {float: right; width: 45%;}

Für den Druck könnten Sie nun schreiben:

div#leftcol, div#rightcol {float: none; width: auto;}

Gäbe es in CSS eine Möglichkeit, Text von einer Spalte in die nächste laufen zu lassen,wären diese Aktionen nicht nötig. Obwohl die Vorschläge hierfür bereits seit Jahren her-umgereicht werden, hat sich bisher noch nichts in dieser Richtung getan.

Wir könnten der Gestaltung von Ausdrucken ein komplett eigenes Kapitel widmen, wasdem Zweck dieses Buchs aber zuwiderläuft. Wir überlassen eine Besprechung desDesigns also anderen Büchern und widmen uns stattdessen den CSS-Details fürgedruckte Medien.

Die Seitengröße definieren

Ähnlich wie Elementboxen gibt es in CSS2 eine Seitenbox, die die einzelnen Bestandteileeiner Seite beschreibt und aus zwei grundsätzlichen Bereichen besteht:

• Der Druckbereich (page area), also der Teil der Seite, in dem der Inhalt dargestelltwird. Die Ähnlichkeit zum Inhaltsbereich einer normalen Elementbox besteht unge-fähr darin, dass die Kanten des Seitenbereichs als ursprünglicher umgebender Blockfür das in der Seite enthaltene Layout verwendet werden. (Details zu umgebendenBlöcken finden Sie in Kapitel 7.)

• Der Randbereich (margin area), der den Druckbereich umgibt.

Das Boxmodell für gedruckte Seiten sehen Sie in Abbildung 14-1.

In CSS2 war es noch möglich, die Größe der Seitenbox und der Ränder festzulegen. InCSS2.1 können Autoren jedoch nur noch die Größe des Randbereichs definieren. In bei-den Fällen werden diese Einstellungen mit Hilfe einer @page-Regel vorgenommen. Hierein einfaches Beispiel:

@page {size: 7.5in 10in; margin: 0.5in;}


Diese CSS2-Regel verwendet die Eigenschaft size, die auf Grund mangelnder Unterstüt-zung aus CSS2.1 wieder entfernt wurde.

Mit Hilfe dieser Eigenschaft wurde die Größe und Ausrichtung des Druckbereichs festge-legt. Durch den Wert landscape wurde die Darstellung um 90 Grad gedreht ausgegeben,während der Standardwert portrait (hochkant) bei westlichen Sprachen die übliche Aus-richtung ist. Sollte ein Dokument »seitlich« ausgegeben werden, konnte ein Autor diesmit folgender Deklaration erreichen:

@page {size: landscape;}

Die Eigenschaft size ist nicht Teil von CSS2.1; beim Schreiben dieses Buches gibt es alsokeine zwei miteinander funktionierenden Implementierungen von size. Die Browserun-

Abbildung 14-1: Die Seitenbox

size

Werte: <Längenangabe> {1,2} | auto | portrait | landscape | inherit

Startwert: auto

Anwendung auf: den Seitenbereich

Vererbt: nein


terstützung ist demnach vermutlich sehr gering. Zumindest ist es in CSS2.1 möglich, Stilefür den Randbereich zu definieren, so dass dieses Merkmal vermutlich etwas zuverlässi-ger funktioniert. Wenn Sie beispielsweise nur einen kleinen Bereich in der Mitte einer 8,5× 11 Inch großen Seite bedrucken wollen, könnten Sie schreiben:

@page {margin: 3.75in;}

Auf diese Weise wäre der Druckbereich jetzt nur noch 1 Inch breit und 3,5 Inches hoch.

Interessanterweise steht die Seitenbox in keiner Beziehung zur Schriftgröße. Sie könnenLängeneinheiten wie em und ex also weder für die Definition des Rand- noch des Seitenbe-reichs verwenden. In diesem Kontext sind nur Prozentwerte, »Linealeinheiten«, wieInches oder Zentimeter, und Punkte erlaubt.

Seitentypen auswählen

In CSS2 gibt es die Möglichkeit, mit Hilfe von @page-Regeln verschiedene Seitentypenfestzulegen. Für das nächste Beispiel stellen wir uns ein mehrseitiges Dokument überAstronomie vor. Dieses enthält in der Mitte eine recht breite Tabelle, die eine Liste derphysikalischen Eigenheiten der Saturnmonde enthält. Der Text des Dokuments soll imPorträtmodus ausgegeben werden, während die Tabelle in der Landschaftsansicht darge-stellt werden soll. Hier ist der Anfang:

@page normal {size: portrait; margin: 1in;}

@page rotate {size: landscape; margin: 0.5in;}

Diese Seitentypen müssen Sie jetzt nur noch nach Bedarf zuweisen. Wenn die Tabelle mitden Saturndaten den id-Wert moon-data hat, können wir die folgenden Regeln benutzen,um die gewünschte Darstellung zu erreichen:

body {page: normal;}

table#moon-data {page: rotate;}

Dadurch wird die Tabelle im Landschaftsmodus ausgegeben, während die übrigen Teiledes Dokuments im Porträtmodus dargestellt werden. Das wird durch page ermöglicht,eine weitere in CSS2.1 nicht mehr vorhandene Eigenschaft.

Wie Sie sehen, besteht der einzige Sinn von page darin, den verschiedenen ElementenIhres Dokuments benannte Seitentypen zuzuweisen.

page

Werte: <Identifier> | inherit

Startwert: auto


Vererbt: ja


Mit Hilfe spezieller Pseudoklassen können Sie weitere allgemeine Seitentypen zuweisen.Diese sind außerdem in CSS2 und in CSS2.1 definiert. Mit Hilfe der Pseudoklasse :firstkönnen Sie bestimmte Stile für die erste Seite Ihres Dokuments festlegen. Vielleicht sollhierfür der obere Rand etwas breiter sein als bei den übrigen Seiten:

@page {margin: 3cm;}

@page :first {margin-top: 6cm;}

Dadurch erhalten alle Seiten bis auf die erste einen 3 Zentimeter breiten Rand. Nur derobere Rand der ersten Seite hat eine Breite von 6 Zentimetern (siehe Abbildung 14-2).

Zudem können Sie auch zwischen linken und rechten Seiten unterscheiden. Hierfür gibtes die Pseudoklassen:left und :right. Zum Beispiel:

@page :left {margin-left: 3cm; margin-right: 5cm;}

@page :right {margin-left: 5cm; margin-right: 3cm;}

Durch diese Regeln werden die Ränder »zwischen« den Inhalten der linken und rechtenSeiten, also dort, wo sich der Buchrücken befinden würde, breiter dargestellt. Das ist ins-besondere dann üblich, wenn die Seiten als Buch gebunden werden sollen. Das Ergebnisder vorigen Regeln sehen Sie in Abbildung 14-3.

Abbildung 14-2: Besondere Stildefinitionen für die erste Seite


Seitenumbrüche

In gedruckten Medien ist es keine schlechte Idee, die Platzierung der Seitenumbrüchesteuern zu können. Das geschieht mit den Eigenschaften page-break-before und page-break-after. Die möglichen Werte sind für beide Eigenschaften gleich.

Abbildung 14-3: Unterschiedliche Stile für linke und rechte Seiten

page-break-before, page-break-after

Werte: auto | always | avoid | left | right | inherit

Startwert: auto

Anwendung auf: nicht als Float definierte Block-Elemente, deren Wert für position entwederrelative oder static ist

Vererbt: nein



Der Standardwert auto bedeutet einfach, dass vor oder nach einem Element kein Seiten-umbruch erzwungen wird, wie bei jedem normalen Ausdruck. Durch den Wert alwayswird jedoch vor oder nach dem betreffenden Element ein Seitenumbruch eingefügt.

Nehmen wir einmal an, ein Seitentitel wird als h1-Element definiert und alle Abschnittsti-tel als h2-Elemente. Um vor dem Beginn eines neuen Abschnitts und nach dem Titel desDokuments jeweils einen Seitenumbruch einzufügen, können Sie die folgenden Regelnverwenden (siehe Abbildung 14-4):

h1 {page-break-after: always;}

h2 {page-break-before: always;}

Soll der Titel des Dokuments in der Mitte seiner Seite zentriert werden, würden Sie hier-für natürlich die nötigen Regeln hinzufügen. Da dies hier nicht der Fall ist, erhalten Siefür jede Seite eine sehr schlichte Darstellung.

Die Werte left und right funktionieren auf die gleiche Weise wie always, nur dass siezusätzlich festlegen, auf welchem Seitentyp der Druck fortgesetzt werden soll. Hierzunoch ein Beispiel:

h2 {page-break-before: left;}

Dadurch werden vor dem h2-Element so viele Seitenumbrüche eingefügt, dass es oben aufeiner linken Seite dargestellt wird. Bei beidseitigem Druck wäre dies die »Rückseite« desBlattes.

Stellen wir uns vor, das Element direkt vor dem h2-Element wird auf einer rechten Seitegedruckt, dann würde nach der obigen Regel vor dem h2 ein Seitenumbruch eingefügt.Dieser »schiebt« das h2-Element auf die folgende Seite. Geht dem nächsten h2-Element

Abbildung 14-4: Seitenumbrüche einfügen


auf einer linken Seite ein Element voraus, so werden vor dem h2 zwei Seitenumbrücheeingefügt, wodurch auch dieses am Anfang der nächsten linken Seite steht. Die rechteSeite dazwischen bleibt dabei absichtlich leer. Der Wert right hat im Prinzip die gleichenAuswirkungen, nur dass ein Element dadurch am Anfang der folgenden rechten Seiteplatziert wird.

Das Gegenstück zu always ist der Wert avoid. Dieser weist das Benutzerprogramm an,einen Seitenumbruch vor oder nach dem Element möglichst zu vermeiden. Zur Illustra-tion erweitern wir das obige Beispiel um zwei Unterabschnitte, deren Titel als h3-Ele-mente dargestellt werden. Diese Titel sollen zusammen mit dem Text dargestellt werden;Zeilenumbrüche nach einem h3 sollen also möglichst vermieden werden:

h3 {page-break-after: avoid;}

Sie sollten bedenken, dass dieser Wert avoid heißt – nicht never. Es gibt keine Möglich-keit, einen Seitenumbruch vor oder nach einem bestimmten Element vollkommen zu ver-hindern. Sehen Sie hierzu die folgenden Regeln:

img {height: 9.5in; width: 8in; page-break-before: avoid;}

h4 {page-break-after: avoid;}

h4 + img {height: 10.5in;}

Wir stellen uns dazu eine Situation vor, in der ein h4-Element, dessen berechnete Höheeinen halben Inch beträgt, zwischen zwei Bildern stehen soll. Jedes Bild muss auf einereigenen Seite ausgegeben werden, aber es gibt nur zwei Orte, an denen das h4-Elementplatziert werden kann. Das ist entweder der untere Teil der Seite, die das erste Elemententhält, oder die folgende Seite. Folgt das Element direkt auf das erste Bild, so muss nachdem h4 ein Seitenumbruch eingefügt werden, da nach dem h4 nicht genügend Platz fürdas zweite Bild ist (siehe Abbildung 14-5).

Abbildung 14-5: Notwendige Seitenumbrüche


Wird das h4-Element jedoch nach dem ersten Bild auf einer neuen Seite dargestellt, sowäre auf der gleichen Seite nicht mehr genug Platz für das zweite Bild. Also wird auch indiesem Fall nach dem h4 ein Seitenumbruch eingefügt. In beiden Fällen kann es also pas-sieren, dass den Bildern ein Seitenumbruch vorausgeht. In Situationen wie dieser sind dieMöglichkeiten von Benutzerprogrammen begrenzt.

Offensichtlich kommen diese Situationen nicht besonders häufig vor; unmöglich sind siedeshalb aber nicht. Es kann beispielsweise passieren, dass ein Dokument nur Tabellenenthält, denen jeweils eine Überschrift vorangeht. In manchen Fällen werden die Tabel-len so ausgedruckt, dass auf ein Überschriften-Element gezwungenermaßen ein Seiten-umbruch folgt, selbst wenn dies nach dem Wunsch des Autors vermieden werden sollte.

Ähnliche Situationen können bei der Verwendung von page-break-inside, der anderenEigenschaft für Seitenumbrüche, auftreten, auch wenn es hier nicht so viele möglicheWerte gibt.

Bei page-break-inside haben Sie neben der Standardeinstellung im Prinzip nur eineOption: Sie können das Benutzerprogramm anweisen, Seitenumbrüche innerhalb einesElements zu vermeiden (avoid). Sollen bestimmte Randbemerkungen nicht über zwei Sei-ten verteilt werden, können Sie es mit folgender Regel versuchen:

div#aside {page-break-inside: avoid;}

Auch das ist eher eine Empfehlung als eine tatsächliche Regel. Ist die Randbemerkunglänger als die Seite, hat das Benutzerprogramm keine andere Wahl, als den Seitenum-bruch innerhalb des Elements vorzunehmen.

Witwen und Waisen

Um eine feinere Kontrolle über Seitenumbrüche ausüben zu können, wurden in CSS2zwei Eigenschaften definiert, die sowohl in gedruckter Typographie als auch im DesktopPublishing zu finden sind. Diese heißen widows (Witwen) und orphans (Waisen).

Diese Eigenschaften funktionieren nach ähnlichen Prinzipien, gehen das Problem abervon unterschiedlichen Seiten an. Der Wert von widows definiert die minimale Anzahl vonZeilenboxen, die ein Element am Anfang einer Seite enthalten kann, ohne dass vor demElement ein Zeilenumbruch eingefügt wird. orphans funktioniert genau umgekehrt: Hier-

page-break-inside

Werte: auto | avoid | inherit

Startwert: auto

Anwendung auf: nicht als Float definierte Block-Elemente, deren Wert für position entwederrelative oder static ist

Vererbt: ja



mit wird die minimale Anzahl von Zeilenboxen angegeben, die am unteren Ende einerSeite stehen dürfen, ohne dass vor dem Element ein Zeilenumbruch erzwungen wird.

Nehmen wir zum Beispiel widows, so könnten Sie schreiben:

p {widows: 4;}

Dadurch legen Sie fest, dass mindestens vier Zeilenboxen eines Absatzes am Anfang derneuen Seite stehen müssen – ansonsten wird vor dem Absatz ein Seitenumbruch einge-fügt, und der gesamte Absatz steht auf der neuen Seite. Sehen Sie sich dazu einmalAbbildung 14-6 an. Wenn Sie den oberen Teil der Abbildung abdecken, ist nur noch diezweite Druckseite sichtbar. Oben auf dieser Seite sehen Sie zwei Zeilenboxen des Absat-zes, der auf der vorigen Seite begonnen wurde. Beim Standardwert 2 für widows wäre dieseDarstellung in Ordnung. Wäre der Wert aber 3 oder höher, würde der gesamte Absatz als

widows, orphans

Werte: <Integerwert> | inherit

Startwert: 2


Vererbt: ja


Abbildung 14-6: Witwen zählen

volutpat. Ut wisi enim ad minim veniam, quis

nostrud exerci tation ullamcorper suscipit lobortis

nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in

vulputate velit esse molestie consequat, vel illum

dolore eu feugiat nulla facilisis at vero eros et

accumsan et iusto odio dignissim qui blandit

praesent luptatum zzril delenit augue duis dolore

te feugait nulla facilisi.

Lorem ipsum, dolor sit amet, consectetuer

adipiscing elit, sed diam nonummy nibh euismod

tincidunt ut laoreet dolore magna aliquam erat

volutpat. Ut wisi enim ad minim veniam, quis

nostrud exerci tation ullamcorper suscipit lobortis

nisl ut aliquip ex ea commodo consequat Duis


zusammenhängender Block auf der zweiten Seite angezeigt. Zu diesem Zweck müsste vordem fraglichen Absatz ein Seitenumbruch eingefügt werden.

Wenn Sie in Abbildung 14-6 die zweite Seite abdecken, sehen Sie am unteren Ende derersten Seite vier Zeilenboxen, die zum letzten Absatz auf dieser Seite gehören. Solange derWert von orphans nicht größer ist als 4, ist alles in Ordnung. Hat orphans jedoch einenWert von 5 oder noch höher, wird dem Absatz wiederum ein Seitenumbruch vorange-stellt, und der Absatz wird als zusammenhängender Block auf der folgenden Seite darge-stellt.

Benutzen Sie orphans und widows gemeinsam, so müssen auch beide Werte befolgt wer-den. Wenn ein Autor folgende Anweisung verwendet, werden innerhalb von Absätzenkaum Seitenumbrüche eingefügt werden:

p {widows: 30; orphans: 30;}

Bei diesen Werten müsste ein Absatz schon sehr lang sein, damit ein Seitenumbruchinnerhalb eines Absatzes erlaubt ist. Natürlich lässt sich so etwas besser ausdrücken mit:

p {page-break-inside: avoid;}

Regeln für Seitenumbrüche

Da in CSS2 einige seltsame Stildefinitionen für Seitenumbrüche möglich sind, wurde eineReihe von Verhaltensregeln für erlaubte Seitenumbrüche festgelegt, und es wurde defi-niert, an welchen Stellen diese am besten vorgenommen werden. Diese Regeln dienen alsRichtlinien für Benutzerprogramme bei der Behandlung von Seitenumbrüchen in ver-schiedenen Situationen.

Eigentlich gibt es nur zwei Stellen, an denen Seitenumbrüche prinzipiell erlaubt sind. Dasist zum einen zwischen zwei Block-Elementen. Befindet sich hier ein Seitenumbruch, sowerden die Werte von margin-bottom für das Element vor dem Umbruch und margin-topfür das Element nach dem Umbruch auf 0 gesetzt. Ob zwischen zwei Elementboxen tat-sächlich ein Umbruch eingefügt werden kann, wird von den folgenden zwei Regeln beein-flusst. Diese lauten:

• Wurde entweder für page-break-after für das erste Element oder für page-break-before für das zweite Element der Wert always, left oder right festgelegt, so wirdzwischen beiden Elementen ein Seitenumbruch eingefügt. Das gilt auch, wenn derWert des anderen Elements avoid lautet. (Schließlich ist dies ein erzwungenerUmbruch.)

• Sind die Werte für page-break-after des ersten Elements und für page-break-beforedes zweiten Elements als auto definiert, ohne dass ein Vorfahren-Element für page-break-inside den Wert avoid hat, dann darf zwischen den Elementen ein Seitenum-bruch eingefügt werden.

In Abbildung 14-7 sehen Sie die möglichen Stellen eines hypothetischen Dokuments, andenen ein Seitenumbruch stattfinden kann. Erzwungene Umbrüche werden dabei mit


einem ausgefüllten Quadrat dargestellt, während mögliche (nicht-erzwungene) Seiten-umbrüche durch den Umriss eines Quadrats dargestellt werden.

Zweitens sind Seitenumbrüche zwischen zwei Zeilenboxen innerhalb einer Blockboxerlaubt. Auch dafür gibt es ein eigenes Regelpaar:

• Ein Seitenumbruch darf nur dann zwischen zwei Zeilenboxen eingefügt werden,wenn die Anzahl der Zeilenboxen zwischen dem Beginn des Elements und der Zei-lenbox vor dem Umbruch kleiner ist als der Wert von orphans für das betreffendeElement. Entsprechend kann ein Seitenumbruch nur dann eingefügt werden, wenndie Anzahl der Zeilenboxen zwischen der Zeilenbox nach dem Umbruch und demEnde des Elements kleiner ist als der Wert von widows.

• Sofern der Wert von page-break-inside nicht avoid lautet, darf zwischen den Zeilen-boxen ein Seitenumbruch eingefügt werden.

Kann bei der Platzierung des Seitenumbruchs nicht allen Regeln entsprochen werden, sowird in beiden Fällen die zweite Regel des jeweiligen Paares ignoriert. Wurde beispiels-weise für ein Element die Regel page-break-inside: avoid definiert, wobei das Elementaber länger als die Druckseite ist, so ist ein Seitenumbruch innerhalb des Elements zwi-

Abbildung 14-7: Mögliche Platzierung von Seitenumbrüchen zwischen Blockboxen


schen zwei Zeilenboxen erlaubt. Die zweite Regel des ersten Paares wird in diesem Fallignoriert.

Wenn das Ignorieren der zweiten Regel immer noch keine guten Ergebnisse bringt, dür-fen auch andere Regeln außer Acht gelassen werden. In solchen Situationen ist es sehrwahrscheinlich, dass das Benutzerprogramm sämtliche Werte für Seitenumbruch-Eigen-schaften ignoriert und so weitermacht, als seien sie als auto definiert worden. Wie dasumgesetzt wird, ist allerdings nicht weiter in der CSS-Spezifikation definiert (oder gefor-dert).

Zu den bereits behandelten Regeln definiert CSS2 eine Reihe von Verhaltensregeln, dieeine möglichst gute Platzierung der Seitenumbrüche sicherstellen sollen:

• Es sollen so wenig Seitenumbrüche wie möglich benutzt werden.

• Alle Seiten, die nicht mit einem erzwungenen Umbruch enden, sollen ungefähr diegleiche Höhe haben.

• Seitenumbrüche in einem Block, für den ein Rahmen definiert wurde, sind zu ver-meiden.

• Seitenumbrüche innerhalb einer Tabelle sind zu vermeiden.

• Seitenumbrüche innerhalb eines Float-Elements sind zu vermeiden.

Benutzerprogramme sind nicht dazu verpflichtet, sich an diese Empfehlungen zu halten.Sie dienen lediglich als Richtlinien, um die Seitenumbrüche möglichst logisch zu halten.

Wiederholte Elemente

In gedruckten Medien werden oftmals Kopfzeilen benötigt. Damit ist ein Elementgemeint, das auf jeder Seite auftaucht, wie beispielsweise der Titel des Dokuments oderder Name des Autors. In CSS2 lassen sich Kopfzeilen mit Hilfe von fest positionierten Ele-menten erzeugen. Zum Beispiel:

div#runhead {position: fixed; top: 0; right: 0;}

Dadurch wird das div-Element mit dem id-Attribut runhead bei der Ausgabe in einem sei-tenbasierten Medium in der rechten oberen Ecke jeder Seite ausgegeben. In einem fort-laufenden Medium, etwa einem Webbrowser, würde das Element in der rechten oberenEcke des Ansichtsbereichs zu sehen sein. Alle auf diese Weise positionierten Elementewerden auf allen Seiten dargestellt. Es ist also nicht notwendig, das Element extra zu»kopieren«, um es zu einem wiederholten Element zu machen. Demnach wird ein mit fol-genden Regeln versehenes h1-Element als Kopfzeile auf jeder Seite, inklusive der ersten,erscheinen:

h1 {position: fixed; top: 0; width: 100%; text-align: center;

font-size: 80%; border-bottom: 1px solid gray;}

Der Nachteil bei einem so auf der ersten Seite positionierten h1-Element besteht darin,dass es jetzt nur noch als Kopfzeile ausgegeben werden kann.


Elemente außerhalb der Seitenbox

Das bringt uns zu einer weiteren interessanten Frage: Was passiert, wenn ein Elementaußerhalb der Seitenbox positioniert wird? Um das zu erreichen, ist es nicht einmal nötig,ein Element zu positionieren. Nehmen wir beispielsweise ein pre-Element, das eine Zeilemit 411 Zeichen enthält. Kein Standardpapier ist breit genug, um diese Zeile ganz darstel-len zu können. Die Zeilenbox ragt also ziemlich sicher über die Seitenbox hinaus.

Für diese Fälle gibt es in CSS2 leider keine genauen Regeln, an die sich ein Benutzerpro-gramm halten kann. So könnte ein Benutzerprogramm beispielsweise ein zu breites pre-Element einfach beschneiden und den Rest verwerfen. Oder es werden zusätzliche Seitenerzeugt, auf denen die übrig gebliebenen Teile des Elements ausgegeben werden.

Für die Behandlung von Inhalten, die außerhalb der Seitenbox liegen, gibt es zwei allge-meine, aber sehr wichtige Empfehlungen. So sollte es dem Inhalt möglich sein, ein wenigüber die Seitenbox hinauszuragen, um »angeschnittene« Seiten (bleeding) zu ermögli-chen. Für solche Inhalte wird demnach keine zusätzliche Seite erzeugt.

Zweitens sollen Benutzerprogramme das Erzeugen einer großen Anzahl von leeren Seitenvermeiden, wenn dies nur geschieht, um Positionierungsinformationen gerecht zu wer-den, wie hier:

h1 {position: absolute; top: 1500in;}

Sind in diesem Beispiel die Seitenboxen 10 Inches hoch, so müsste das Benutzerpro-gramm für jedes h1-Element 150 Seitenumbrüche (und damit 150 Leerseiten) einfügen,nur um dieser Regel gerecht zu werden. Stattdessen kann ein Programm die leeren Seitenweglassen und nur die letzte Seite ausgeben, die tatsächlich das h1-Element enthält.

Die anderen zwei Empfehlungen besagen, dass Benutzerprogramme Elemente nicht anseltsamen Stellen positionieren sollen, nur um deren Darstellung zu vermeiden. Außer-dem wird gesagt, dass außerhalb einer Seitenbox platzierte Inhalte auf beliebige Art dar-gestellt werden können. (Manche Teile von CSS sind nützlich und faszinierend, anderescheinen nur bekannte Wahrheiten zu wiederholen.)

Stildefinitionen für ProjektionsmedienDas andere häufig benutzte Seitenmedium neben dem Druck ist die Projektion. Damitwerden Informationen beschrieben, die auf eine große Leinwand projiziert werden, umvon vielen Leuten gleichzeitig betrachtet zu werden. Eines der bekanntesten Programmezum Erstellen solcher Präsentationen ist Microsoft PowerPoint.

Während dieses Buch geschrieben wird, wird dieses Medium allerdings nur von Operafür Windows unterstützt. Hier können Autoren mit der Option »OperaShow« HTML-Dokumente als Folienpräsentation bzw. Diashow ausgeben. Da diese Fähigkeit inZukunft vielleicht auch von anderen Programmen unterstützt wird, wollen wir einen kur-zen Blick auf die Grundlagen werfen.


Folienpräsentationen einrichten

Wenn Sie ein einzelnes Dokument in eine Reihe von Folien aufteilen möchten, brauchenSie eine Möglichkeit, um die Grenzen zwischen den einzelnen Folien zu definieren. ObSie dafür page-break-before oder page-break-after einsetzen, hängt stark von der Struk-tur Ihres Dokuments ab.

Nehmen wir zum Beispiel das in Abbildung 14-8 gezeigte HTML-Dokument. Dort gibt eseine Reihe von h2-Elementen, auf die jeweils eine ungeordnete Liste folgt. Hieraus ergibtsich die Gliederung für Ihre Folienpräsentation.

Jetzt müssen Sie das Dokument nur noch in einzelne Folien aufteilen. Da jede Folie miteinem h2-Element beginnt, reicht die folgende Deklaration bereits aus:


Damit ist sichergestellt, dass jede Seite (das heißt: jede Folie) mit einem h2-Elementbeginnt. Dieses können Sie für den Titel der jeweiligen Folie benutzen. Die Darstellungder dritten Folie sehen Sie in Abbildung 14-9.

Abbildung 14-8: Die Gliederung einer Folienpräsentation aus einfachen HTML-Elementen


Natürlich sieht die Folie im Moment noch sehr schlicht aus, da wir bisher außer den Sei-tenumbrüchen keine weiteren Definitionen vorgenommen haben.

So wie die Gliederung momentan aussieht, hätten Sie die Begrenzungen der Folien auchdadurch definieren können, dass Sie die Seitenumbrüche statt vor den h2-Elementen nachden Listen einfügen:

ul {page-break-after: always;}

Diese Methode funktioniert aber nur, solange Ihre Gliederung keine verschachtelten Lis-ten benutzt. Sobald die Möglichkeit besteht, dass sich »unterhalb« der ersten Liste wei-tere ungeordnete Listen befinden, müssen Sie entweder die Seitenumbrüche wieder vorden h2-Elementen einfügen oder eine zweite Regel einbauen, die versehentliche Seiten-umbrüche verhindert:

ul {page-break-after: always;}

ul ul {page-break-after: auto;}

Elemente positionieren

Beim Positionieren von Elementen ist der ursprüngliche umgebende Block bei seitenba-sierten Medien die Seitenbox. Soll der Titel einer Folie also an dessen Unterseite darge-stellt werden, würden Sie etwa Folgendes schreiben:

h2 {page-break-before: always; position: absolute; bottom: 0; right: 0;}

Damit platzieren Sie jedes h2-Element in der unteren rechten Ecke der Seitenbox (bzw.der Folie). Es ist selbstverständlich auch möglich, Elemente im Verhältnis zu anderen Ele-menten als der Seitenbox auszurichten. Details zur Positionierung finden Sie inKapitel 10.

Ein fest positioniertes Element wird dagegen, wie in Druckmedien auch, in jeder Seiten-box der Folienpräsentation angezeigt. Sie können also ein einzelnes Element wie zum Bei-spiel den Dokumenttitel auf jeder Folie wiedergeben, wie hier gezeigt:

h1 {position: fixed; top: 0; right: 0; font-size: 80%;}

Abbildung 14-9: Eine Folie


Dadurch lassen sich beispielsweise Fußzeilen oder grafische Seitenleisten für jede Folieanlegen, und noch vieles mehr.

Überlegungen für die Projektion

Oft wird gesagt, dass ein Webdesign flexibel sein soll und mit beliebigen Auflösungenfunktionieren sollte, was auch in den meisten Fällen stimmt. Stildefinitionen für Projektio-nen sind aber nicht das Gleiche wie Stile für das Web. Deshalb ist es bei Projektionen oftsinnvoll, ein Stylesheet für eine bestimmte Auflösung zu definieren. So haben die meistenProjektoren (beim Schreiben dieses Buches) eine Standardauflösung von 1024 × 768Pixel. Wenn Sie wissen, dass Ihre Projektion eine bestimmte Auflösung verwendet, ist esauch sinnvoll, Ihren CSS-Code danach auszurichten. Dabei können Schriftgrößen, diePlatzierung von Elementen und vieles andere so angepasst werden, dass für die Zielauflö-sung die bestmögliche visuelle Präsentation erreicht wird.

Es kann bei Projektionen also sinnvoll sein, verschiedene Stylesheets für verschiedeneAuflösungen anzulegen: eines für 800 × 600, ein weiteres für 1024 × 768 (sieheAbbildung 14-10) und ein drittes für 1280 × 1024, nur um die häufigsten Fälle abzu-decken.

Abbildung 14-10: Folie mit komplett definierten Stilen


Zudem sollten Sie bedenken, dass projizierte Dokumente für das Publikum besser lesbarsind, wenn Farben mit hohen Kontrasten benutzt werden. Das ist besonders wichtig,wenn der Projektor eine geringe Lichtstärke besitzt. In diesen Situationen ist es außerdemnoch unwahrscheinlicher, dass die Farbwiedergabe Ihren Vorstellungen entspricht (unddas ist schon vorsichtig formuliert).

Stildefinitionen für akustische MedienBenutzer, die nicht sehen können, werden von den visuellen Stildefinitionen, die CSSermöglicht, nicht viel haben. Für diese Benutzer sind nicht die Schatten oder die abgerun-deten Ecken wichtig, sondern der eigentliche Textinhalt einer Seite. Wenn auch blindeoder sehbehinderte Benutzer Ihre Seiten verstehen sollen, müssen die Dokumente hörbargemacht werden. Dabei ist es nicht einmal nur dieser Benutzerkreis, der von der auditivenDarstellung von Webinhalten profitieren kann. So könnte man ein Benutzerprogrammauch in ein Auto integrieren, das auditive Stildefinitionen verwendet, um beispielsweiseeine Wegbeschreibung oder auch die E-Mail des Fahrers vorzulesen.

Um auch auf die Bedürfnisse dieser Benutzer einzugehen, wurde mit CSS2 ein Abschnitteingeführt, der auditive Stildefinitionen beschreibt. Während dieses Buch geschriebenwird, unterstützen zwei Benutzerprogramme zumindest teilweise auditive Stildefinitio-nen: Emacspeak und Fonix SpeakThis. Trotz dieser Tatsache wird der Medientyp auralnebst allen dazugehörigen Eigenschaften in CSS2.1 wieder verworfen. Die gegenwärtigeSpezifikation enthält einen Hinweis, dass in zukünftigen Versionen von CSS vermutlichder Medientyp speech für die Sprachausgabe von Dokumenten benutzt wird. Es werdenaber keine Details genannt.

Auf Grund dieser verworrenen Zusammenhänge von neuen Implementierungen und wie-der verworfenen Konzepten werden wir uns die Eigenschaften für den Medientyp auralnur kurz ansehen.

SpracheAuf der untersten Ebene müssen Sie festlegen, ob ein bestimmtes Element überhauptakustisch dargestellt werden soll. In Stylesheets für den Medientyp aural geschieht dasmit der Eigenschaft speak.

speak

Werte: normal | none | spell-out | inherit

Startwert: normal


Vererbt: ja


Stildefinitionen für akustische Medien | 455

Der Standardwert normal wird benutzt, um anzuzeigen, dass ein Element gesprochen wer-den soll. Soll ein Element »verschwiegen« werden, wird der Wert none benutzt. Selbstwenn die auditive Darstellung für ein Element mit none unterdrückt wird, können Sie die-sen Wert bei seinen Nachfahren-Elementen überschreiben. Im folgenden Beispiel wirdder Text »Navigation:« akustisch nicht ausgegeben, der Text »Home« schon:

<div style="speak: none;">

Navigation:

<a href="home.html" style="speak: normal;">Home</a>

</div>

Gelegentlich ist es notwendig, die auditive Darstellung eines Elements und seiner Nach-kommen komplett zu verbieten. In diesem Fall ist es sinnvoller, die Anweisung display:none zu verwenden. Im unten stehenden Beispiel wird keiner der Inhalte des div-Elementsauditiv (oder sonstwie) dargestellt:

<div style="display: none;">

Navigation:

<a href="home.html" style="speak: normal;">Home</a>

</div>

Der dritte mögliche Wert für speak ist spell-out. Dieser sorgt dafür, dass ein entspre-chend markiertes Element (englisch) buchstabiert wird. Das unten stehende Elementwürde demnach akustisch als T-E-D-S oder »Ti i di ess« ausgegeben werden.

<acronym style="speak: spell-out;" title="Technology Evangelism and

Developer Support">TEDS</acronym>

Zeichensetzung und Zahlen

Es gibt noch zwei weitere Eigenschaften, die die auditive Darstellung von Inhalten beein-flussen. Die erste Eigenschaft befasst sich mit der Darstellung der Zeichensetzung undheißt speak-punctuation.

Mit dem Standardwert none werden Satzzeichen auditiv als Pause von angemessenerLänge ausgegeben, wobei die exakte Dauer in CSS nicht festgelegt ist. So könnte diePause für einen Punkt (also das Ende eines Satzes) doppelt so lang wie die Pause für einKomma sein. Die tatsächlichen Längen hängen jedoch sehr wahrscheinlich von der ver-wendeten Sprache ab.

speak-punctuation

Werte: code | none | inherit

Startwert: none


Vererbt: ja



Wird der Wert code verwendet, wird das Satzzeichen als solches ausgesprochen. Das fol-gende Beispiel würde also ausgegeben als »avast comma ye scalawags exclamation point«:

<p style="speak-punctuation: code;">Avast, ye scalawags!</p>

Im folgenden Beispiel würde die Ausgabe etwa lauten »a left bracket href right bracket leftcurly brace color colon red semicolon right curly brace«:

<code style="speak-punctuation: code;">a[href] {color: red;}</code>

Auf ähnliche Weise kann mit der Eigenschaft speak-numeral festgelegt werden, wie Zah-len und Zahlwörter ausgegeben werden sollen.

Der Standardwert continuous sorgt dafür, dass eine Zahl als Ganzes ausgegeben wird,während der Wert digits die Zahlen nacheinander vorliest. Zum Beispiel:

<p style="speak-numeral: continuous;">23</p>

<p style="speak-numeral: digits;">23</p>

Der erste Absatz würde als »twenty-three« ausgegeben, während der zweite Absatz als»two three« vorgelesen würde. Wie bei Satzzeichen ist auch die Ausgabe von Zahlwörternsprachabhängig, aber in CSS nicht weiter definiert.

Tabellenüberschriften vorlesen

Bei der Audiodarstellung einer Tabelle ist es recht leicht, den Überblick über die einzel-nen Zellendaten zu verlieren. Befinden Sie sich beispielsweise in der neunten Zeile einerzwölfzeiligen Tabelle und der Inhalt der sechsten Zelle lautet »21,77«, dann ist es rechtunwahrscheinlich, dass Sie noch wissen, was diese Zahl bedeutet. Normalerweise reichtein kurzer Blick auf die Spaltenüberschrift aus, um zu wissen, worum es geht. Um dieserSituation auch bei einer auditiven Darstellung gerecht zu werden, wurde in CSS2 dieEigenschaft speak-header eingeführt.

speak-numeral

Werte: digits | continuous | inherit

Startwert: continuous


Vererbt: ja


speak-header

Werte: once | always | inherit

Startwert: once

Anwendung auf: Elemente, die Tabellenkopfzeilen enthalten

Vererbt: ja



Standardmäßig wird der Inhalt einer Tabellenkopfzeile nur einmal (once) ausgegeben.Alternativ kann mit einer Tabellenzelle auch der Inhalt der dazugehörigen Überschriftausgegeben werden.

Nehmen wir beispielsweise folgende einfache Tabelle:

<table id="colors">

<caption>Favorite Color</caption>

<tr id="headers">

<th>Jim</th><th>Joe</th><th>Jane</th>

</tr>

<tr>

<td>red</td><td>green</td><td>blue</td>

<td>

</tr>

</table>

Ohne weitere Stildefinitionen würde diese Tabelle als »Favorite Color Jim Joe Jane redgreen blue« ausgegeben. Vermutlich können Sie das noch nachvollziehen. Jetzt stellen Siesich aber vor, die Tabelle enthielte die Lieblingsfarben von 10 oder sogar 20 Leuten, wäreaber mit den folgenden Stildefinitionen versehen worden:

#colors {speak-header: always;}

#headers {speak: none;}

Nun sollte die Tabelle als »Favorite Color Jim red Joe green Jane blue« ausgegeben wer-den, was, unabhängig von der Tabellengröße, wesentlich leichter zu verstehen ist.

Bedenken Sie, dass ein Element über die Dokumentsprache als Teil derKopfzeile einer Tabelle definiert wird. Zudem können bestimmte Markup-Sprachen Möglichkeiten bieten, bestimmte Elemente oder Elementgrup-pen mit Kopfzeilen-Informationen zu verbinden, wie das beispielsweisemit den Attributen scope und axis in HTML4 möglich ist.

Sprechgeschwindigkeit

Zusätzlich zur Festlegung der Aussprache bestimmter Elemente gibt es in CSS die Eigen-schaft speech-rate, mit der festgelegt werden kann, wie schnell der Inhalt ausgegebenwerden soll.

speech-rate

Werte: <Zahl> | x-slow | slow | medium | fast | x-fast | faster | slower | inherit

Startwert: medium


Vererbt: ja

Berechneter Wert: eine absolute Zahl


Folgende Werte sind möglich:

<Zahl> Bezeichnet die Anzahl der Wörter pro Minute. Dieser Wert ist vermutlich stark vonder jeweiligen Sprache abhängig, da manche Sprachen schneller gesprochen werdenals andere.

x-slow Entspricht 80 Wörter pro Minute.

slow

Entspricht 120 Wörter pro Minute.

medium

Entspricht 180–200 Wörter pro Minute.

fast

Entspricht 300 Wörter pro Minute.

x-fast Entspricht 500 Wörter pro Minute.

faster

Erhöht die gegenwärtige Sprechgeschwindigkeit um 40 Wörter pro Minute.

slower Reduziert die gegenwärtige Sprechgeschwindigkeit um 40 Wörter pro Minute.

Hier zwei Beispiele für extreme Änderungen in der Sprechgeschwindigkeit:

*.duh {speech-rate: x-slow;}

div#disclaimer {speech-rate: x-fast;}

In CSS ist nicht definiert, wie die Sprechgeschwindigkeit genau verändert werden soll. EinBenutzerprogramm könnte die einzelnen Wörter in die Länge ziehen, die Pausen zwi-schen den Wörtern vergrößern oder beides.

LautstärkeEiner der wichtigsten Parameter in einem akustischen Kontext ist die Lautstärke, die inCSS durch die Eigenschaft volume geregelt wird.

volume

Werte: <Zahl> | <Prozentwert> | silent | x-soft | soft | medium | loud | x-loud |inherit

Startwert: medium


Vererbt: ja



Folgende Werte sind möglich:

<Zahl> Drückt die Lautstärke als numerischen Wert aus. Der Wert 0 steht für die kleinst-mögliche Lautstärke, was etwas anderes ist als vollkommene Stille, während derWert 100 für größtmögliche Lautstärke steht.

<Prozentwert> Berechnet die Lautstärke als Prozentwert des geerbten Wertes.

silent

Es wird kein Ton ausgegeben. Damit unterscheidet sich dieser Wert von 0. DieserWert ist die akustische Entsprechung von visibility: hidden.

x-soft

Entspricht dem numerischen Wert 0.

soft


medium


loud


x-loud


Dabei ist zu beachten, dass der Wert von volume (sagen Sie das einmal fünfmal soschnell!) die mittlere Lautstärke festlegt, nicht aber die exakte Lautstärke eines ausgegebe-nen Tons. Die Anweisung volume: 50; kann für bestimmte Klänge also wesentlich lauteroder eben auch leiser ausfallen, besonders wenn die Vorlesestimme dynamisch sehr starkmoduliert wird.

Der Grenzen des numerischen Bereichs werden sehr wahrscheinlich vom Benutzer festge-legt. So kann der Benutzer die minimale (0) und die maximale Lautstärke (100) selbst ein-stellen. Wenn wir davon ausgehen, dass sich diese Werte für einen Hörer zwischen 34und 84 dB bewegen, ergibt sich ein Lautstärkebereich von 50 dB, der auf die Werte zwi-schen 0 und 100 verteilt werden muss. Für jeden Einerschritt wird die Lautstärke also umein halbes dB angehoben. Die Regel volume: soft; würde demnach einen mittleren Laut-stärkewert von 46,5 dB ergeben.

Prozentwerte funktionieren so ähnlich wie bei der Eigenschaft font-size. Sie erhöhenoder verringern den Wert basierend auf dem Wert des Elternelements. Zum Beispiel:

div.marine {volume: 60;}

big {volume: 125%;}

<div class="marine">

When I say jump, I mean <big>rabbit</big>, you maggots!

</div>


Nach dem oben beschriebenen Lautstärkebereich sollte der Inhalt des div-Elements miteiner mittleren Lautstärke von 64 dB wiedergegeben werden. Eine Ausnahme bildet dasbig-Element, das mit 125% der Lautstärke seines Elternelements (60) ausgegeben werdensoll. Der berechnete Wert ist 75, was einer tatsächlichen Lautstärke von 71,5 dB entspricht.

Würde ein Prozentwert den berechneten Wert außerhalb des Bereichs zwischen 0 und 100platzieren, wird dieser auf den nächsten gültigen Wert gerundet, wie hier:

div.marine {volume: 60;}

big {volume: 200%;}

Der volume-Wert für das big-Element würde in diesem Fall mit 120 berechnet. DieserWert wird nun auf den nächsten gültigen Wert, 100, abgerundet, was einer mittlerenLautstärke von 84 dB entspricht.

Der Vorteil bei dieser Art der Lautstärkebestimmung liegt darin, dass das gleiche Style-sheet in verschiedenen Umgebungen benutzt werden kann. So werden sich beispielsweisedie Grundeinstellungen für 0 und 100 in einer Bibliothek von denen in einem Auto unter-scheiden, wobei sich die Werte quasi »an die Umgebung anpassen«.

StimmenWir wissen nun, wie man auditive Präsentationen steuern kann. Dabei haben wir dieAuswahl der Vorlesestimme aber noch nicht behandelt. Ähnlich wie bei font-family gibtes in CSS auch eine Eigenschaft namens voice-family (Stimmenfamilie).

Wie bei font-family kann auch für voice-family eine durch Kommas getrennte Liste ver-schiedener Werte für Stimmen angegeben werden, die für die Darstellung des Inhaltseines Elements benutzt werden sollten. Das Benutzerprogramm sieht sich den Namen derersten Stimme an und überprüft, ob diese zur Verfügung steht. Wenn nicht, probiert esdas Programm mit der nächsten Stimme in der Liste und so weiter, bis eine Stimme gefun-den wird oder keine Möglichkeit mehr übrig ist.

Dank der Wertesyntax können Sie eine beliebige Anzahl spezifischer oder allgemeinerStimmenfamilien in beliebiger Reihenfolge angeben. Es ist also möglich, die Liste auchmit einem spezifischen Wert zu beenden:

h1 {voice-family: Mark, male, Joe;}

voice-family

Werte: [[<Spezifische Stimme> | <Allgemeine Stimme> ],]* [<Spezifische Stimme> | <Allgemeine Stimme> ] | inherit



Vererbt: ja



Bezüglich der möglichen Namen der Stimmenfamilien werden in CSS2.x keine näherenAngaben gemacht. Es wird aber gesagt, dass auf jeden Fall male, female und child mög-lich sind. Sie könnten für ein XML-Dokument also folgende Stildefinitionen zuweisen:

rosen {voice-family: Gary, Scott, male;}

guild {voice-family: Tim, Jim, male;}

claud {voice-family: Donald, Ian, male;}

gertr {voice-family: Joanna, Susan, female;}

albert {voice-family: Bobby, Paulie, child;}

Die tatsächliche Auswahl der Stimmen für ein bestimmtes Element beeinflusst demnachdie Wahrnehmung des Elements durch den Benutzer, da die Stimmen unterschiedlichhohe Tonlagen besitzen oder mehr oder weniger monoton sind. Diese Aspekte der Spra-che können ebenfalls von CSS gesteuert werden.

Die Stimme ändernNachdem Sie das Benutzerprogramm einmal dazu gebracht haben, eine bestimmteStimme für die akustische Darstellung bestimmter Inhalte zu benutzen, können Sie auchweitere Aspekte anpassen. Vielleicht gefällt Ihnen eine Stimme, aber die Tonhöhe istetwas zu hoch. Eine andere Stimme hat vielleicht einen zu großen Dynamikumfang. Auchfür diese stimmlichen Aspekte gibt es in CSS spezielle Eigenschaften.

Die Tonhöhe anpassen

Unterschiedliche Stimmen haben auch unterschiedliche Tonhöhen. So bewegen sichMännerstimmen um 120 Hz, während Frauenstimmen eher im Bereich von 210 Hz zufinden sind. Daher hat auch jede Stimmenfamilie eine Standardtonhöhe. Diese könnenSie in CSS mit der Eigenschaft pitch verändern.

Für die Schlüsselwörter zwischen x-low und x-high gibt es keine exakte Definition. Eslässt sich höchstens sagen, dass jeder Wert eine höhere Frequenz erzeugt als sein Vorgän-ger. Das hat Ähnlichkeit mit den Schlüsselwörtern für Schriftgrößen von xx-small bis xx-large. Dabei ist auch nur definiert, dass der Wert für ein Schlüsselwort größer sein mussals der des vorangegangenen.

Werte für Frequenzen sind eine andere Sache. Wenn Sie einen expliziten Wert für dieTonhöhe definieren, wird die Stimme so verändert, dass die durchschnittliche Tonhöhedem angegebenen Wert entspricht. Zum Beispiel:

pitch

Werte: <Frequenz> | x-low | low | medium | high | x-high | inherit

Startwert: medium


Vererbt: ja

Berechneter Wert: der absolute Frequenzwert


h1 {pitch: 150Hz;}

Die Auswirkungen können besonders bei unbekannten Stimmen drastisch sein. Nehmenwir beispielsweise ein Element, dem zwei Stimmenfamilien und eine Frequenz für dieTonhöhe zugewiesen wurden:

h1 {voice-family: Jethro, Susie; pitch: 100Hz;}

Wir gehen davon aus, dass die Standardtonhöhe von »Jethro« bei 110 Hz liegt, währenddie Standardtonhöhe für »Susie« mit 200 Hz festgelegt wurde. Wird »Jethro« ausgewählt,so werden h1-Elemente mit einer etwas tieferen Stimme vorgelesen. Steht »Jethro« nichtzur Verfügung, wird stattdessen »Susie« benutzt, was einen enormen, wenn nicht sogarbizarren Unterschied zur Standardtonhöhe der Stimme bedeutet.

Unabhängig von der Tonhöhe, die für die Darstellung eines Elements verwendet wird,können Sie den Dynamikumfang der Tonhöhe mit der Eigenschaft pitch-range (»Ton-umfang«) beeinflussen.

Der Zweck von pitch-range besteht darin, die Flexion einer gegebenen Stimme zu erhö-hen oder zu erniedrigen. Je kleiner der Wert für den Tonumfang, desto näher befindensich die einzelnen Tonhöhen am Durchschnittswert, wodurch die Stimme monotonererscheint. Der Standardwert 50 sorgt für eine »normale« Flexion. Höhere Werte verstär-ken die Tonbeugung, niedrigere Wert schwächen die Flexion einer Stimme ab.

Betonung und Fülle

Verwandt mit pitch-range ist die Eigenschaft stress, mit der Autoren die Betonungsmus-ter einer Sprache verstärken oder abschwächen können.

pitch-range

Werte: <Zahlwert> | inherit

Startwert: 50


Vererbt: ja


stress


Startwert: 50


Vererbt: ja



Jede Sprache besitzt Betonungsmuster unterschiedlicher Stärke. In vielen Sprachen wer-den die verschiedenen Teile eines Satzes unterschiedlich stark betont. Ein Beispiel:

<sentence>

<primary>In English,</primary>

<tertiary>for example,</tertiary>

<secondary>sentences have different parts that call for

different stress.</secondary>

</sentence>

Ein Stylesheet für die verschiedenen Betonungsstärken der einzelnen Teile könnte wiefolgt aussehen:

primary {stress: 65;}

secondary {stress: 50;}

tertiary {stress: 33;}

Mit abnehmender Wichtigkeit wird auch die Betonung der einzelnen Satzteile verringert.Die Werte für stress hängen stark von der benutzten Sprache ab. Der gleiche Wert kannalso zu sehr unterschiedlichen Betonungsstärken und -mustern führen. Diese Unter-schiede sind in CSS aber nicht weiter definiert (was Sie mittlerweile wohl auch nicht wei-ter überrascht).

Die nächste Eigenschaft heißt richness (»Fülle«) und ist stress in vielen Dingen ähnlich.

Je höher der Wert für richness, desto »voller« erscheint die Stimme und desto mehr»trägt« sie in einem Raum. Niedrige Werte sorgen für eine weiche, »schmeichlerische«Stimme (um einmal die CSS2-Spezifikation zu zitieren). Der Monolog eines Schauspielerskönnte also mit dem Wert richness: 80; wiedergegeben werden, während eine Nebenbe-merkung in sotto voce mit richness: 25; definiert werden könnte.

Pausen und akustische SignaleBeim visuellen Design können Sie bestimmte Elemente dadurch hervorheben, indem Siesie mit zusätzlichen Abständen oder Rahmen versehen und sie so optisch von den umge-benden Dingen trennen. Dadurch wird das Augenmerk auf diese Elemente gelenkt. Beiauditiven Präsentationen entspricht das am ehesten der Möglichkeit, Pausen und akusti-sche Signale um ein Element herum einzufügen.

richness


Startwert: 50


Vererbt: ja



Pausen

In allen gesprochenen Sprachen gibt es Pausen. Die kurzen Unterbrechungen zwischenWörtern, Satzteilen und Sätzen sind genauso wichtig für das Verständnis wie die Wörterselbst. Man könnte Pausen als eine Art hörbare Entsprechung für Außenabstände anse-hen, denn beide haben den Zweck, ein Element von den umgebenden Inhalten abzugren-zen. In CSS gibt es für das Einfügen von Pausen drei Eigenschaften namens pause-before(Pause vorher), pause-after (Pause danach) und pause.

Wird für den Wert das Format <Zeit> gewählt, so können Sie die Länge der Pause entwe-der in Sekunden oder Millisekunden angeben. Soll nach einem h1-Element immer einePause von 2 Sekunden eingefügt werden, können Sie hierfür eine der beiden unten ste-henden Regeln verwenden:

h1 {pause-after: 2s;}

h1 {pause-after: 2000ms;} /* gleichwertig mit '2s' */

Prozentwerte sind etwas komplizierter, da sie im Verhältnis zum Wert von speech-rateberechnet werden. Sehen wir uns das einmal genauer an:

h1 {speech-rate: 180;}

Die oben stehende Regel besagt, dass das h1-Element mit einer Rate von drei Wörtern proSekunde ausgegeben werden soll. Sehen Sie sich hierzu nun die folgende Ergänzung an:

h1 {speech-rate: 180; pause-before: 200%;}

Der Prozentwert wird basierend auf der durchschnittlichen Wortlänge berechnet. Inunserem Beispiel hat ein Wort die durchschnittliche Länge von 333,33 Millisekunden.200% entsprechen also 666,66 Millisekunden. Die Pause vor jedem h1-Element ist alsoetwa eine 2/3-Sekunde lang. Wenn Sie den Wert von speech-rate auf 120 ändern, wirddie Pause eine volle Sekunde lang.

Mit der Kurzschrift-Eigenschaft pause lassen sich die Eigenschaften pause-before undpause-after zusammenfassen.

Geben Sie hier nur einen Wert an, so wird er für beide Pausen (vor und nach dem Ele-ment) benutzt. Wenn Sie zwei Werte angeben, gilt der erste für die Pause vor dem Ele-ment und der zweite für die Pause danach. Die folgenden Regeln sind alsogleichbedeutend:

pre {pause: 1s;}

pause-before, pause-after

Werte: <Zeit> | <Prozentwert> | inherit

Startwert: 0

Angewendet auf: alle Elemente

Vererbt: nein

Berechneter Wert: die absolute Zeit


pre {pause: 1s 1s;}

pre {pause-before: 1s; pause-after: 1s;}

Akustische Signale (»Cues«)

Reicht eine Pause nicht aus, um die Aufmerksamkeit auf ein bestimmtes Element zu len-ken, so können Sie akustische Signale in Ihr Dokument einfügen, die in etwa den Rahmenin einem visuell dargestellten Dokument entsprechen. Wie bei den Pausen gibt es auchhier drei Eigenschaften: cue-before (Signal vorher), cue-after (Signal hinterher) und cue.

Durch die Angabe eines URI wird das Benutzerprogramm angewiesen, die Ressource zuladen und vor (bzw. nach) dem betreffenden Element abzuspielen. Wollen Sie auf jedenunbesuchten Link mit einem Glockenton und auf jeden besuchten Link mit einem Piep-ton hinweisen, könnten Sie das beispielsweise mit folgenden Regeln erreichen:

a:link {cue-before: url(chime.mp3);}

a:visited {cue-before: url(beep.wav);}

Die Kurzschrift-Eigenschaft cue funktioniert so, wie Sie es erwarten.

pause

Werte: [[<Zeit> | <Prozentwert>]{1,2} ] | inherit

Startwert: 0

Angewendet auf: alle Elemente

Vererbt: nein

Berechneter Wert: siehe die einzelnen Eigenschaften (pause-before usw.)

cue-before, cue-after


Startwert: none


Vererbt: nein


cue

Werte: [ <cue-before> || <cue-after> ] | inherit

Startwert: none


Vererbt: nein

Berechneter Wert: siehe die einzelnen Eigenschaften (cue-before usw.)


Wie bei pause bedeutet auch bei cue die Angabe eines einzelnen Wertes, dass dieser fürSignale vor und nach dem Element benutzt werden soll. Bei zwei Werten steht der erstefür das Signal vor dem Element und der zweite für das Signal danach. Die folgendenRegeln haben also die gleiche Bedeutung:

a[href] {cue: url(ping.mp3);}

a[href] {cue: url(ping.mp3) url(ping.mp3);}

a[href] {cue-before: url(ping.mp3); cue-after: url(ping.mp3);}

Pausen, Signale und erzeugte Inhalte

Sowohl Pausen als auch Signale werden »außerhalb« von erzeugten Inhalten abgespielt:

h1 {cue: url(fanfare.mp3);}

h1:before {content: "Seht her! ";}

h1:after {content: ". Wahrlich!";}

<h1>Der Anfang</h1>

Die akustische Darstellung dieses Dokuments sähe nun in etwa so aus: »(Fanfare) Sehther! Der Anfang. Wahrlich! (Fanfare).«

In CSS ist nicht weiter festgelegt, ob Pausen »außerhalb« von Signalen stehen sollen oderumgekehrt. Das Verhalten von auditiven Benutzerprogrammen lässt sich also in diesemPunkt nicht vorhersagen.

Klänge im HintergrundVisuelle Elemente können mit Hintergründen versehen werden. Daher ist es nur gerecht,wenn dies auch für hörbare Elemente ermöglicht wird. In auditiven Medien wird zu die-sem Zweck ein Klang abgespielt, während das Element gesprochen wird. Die Eigenschafthierfür heißt play-during.

Das einfachste Beispiel spielt zu Beginn der akustischen Darstellung eines Elements eineneinzelnen Klang ab:

h1 {play-during: url(trumpets.mp3);}

Nach dieser Regel wird immer dann, wenn ein h1-Element vorgelesen wird, gleichzeitigdie Klangdatei trumpets.mp3 einmal abgespielt. Ist die Abspielzeit des Hintergrundklangskürzer als die Sprechzeit für den Inhalt des Elements, dann hält der Hintergrundklang an,

play-during

Werte: <URI> | [mix || repeat]? | auto | none | inherit

Startwert: auto


Vererbt: nein

Berechneter Wert: für <URI>-Werte der absolute URI; ansonsten wie angegeben


bevor der Inhalt zu Ende gesprochen ist. Ist der Hintergrundklang länger als die notwen-dige Sprechzeit, wird der Klang angehalten, sobald der gesamte Inhalt des Elements vor-gelesen wurde.

Soll der Hintergrundklang während der gesamten Sprechzeit wiederholt werden, erwei-tern Sie die Anweisung um das Schlüsselwort repeat. Das ist die auditive Entsprechungvon background-repeat: repeat:

div.ocean {play-during: url(wave.wav) repeat;}

Wie sichtbare Hintergründe werden auch Hintergrundklänge nicht miteinander ver-mischt. Betrachten wir beispielsweise die folgende Situation:

a:link {play-during: url(chains.mp3) repeat;}

em {play-during: url(bass.mp3) repeat;}

<a href="http://www.example.com/">This is a <em>really great</em> site!</a>

Hier wird der Klang chains.mp3 während der gesamten Ausgabe des Linktexts abgespielt,außer bei der Ausgabe des enthaltenen em-Elements. An dieser Stelle ist nicht chains.mp3,sondern bass.mp3 zu hören. Hätten beide Elemente sichtbare Hintergründe, wäre derHintergrund des Elternelements hinter dem em-Element auch nicht sichtbar.

Sollen beide Hintergrundklänge zu hören sein, brauchen Sie das Schlüsselwort mix:


em {play-during: url(bass.mp3) repeat mix;}

Jetzt ist chains.mp3 während der gesamten Ausgabe des Linktexts, inklusive des Texts imem-Element, zu hören. Bei der Ausgabe von em wird zusätzlich bass.mp3 abgespielt; beideKlänge werden zusammengemischt.

Die Ähnlichkeit mit sichtbaren Hintergründen endet, wenn wir zum Wert none kommen.Mit diesem Schlüsselwort wird das Abspielen aller Hintergrundklänge abgeschaltet.Hierzu gehören auch die akustischen Hintergründe sämtlicher Vorfahren-Elemente.Nach den unten stehenden Regeln werden für den em-Text also weder bass.mp3 nochchains.mp3 zu hören sein:


em {play-during: none;}

<a href="http://www.example.com/">This is a <em>really great</em> site!</a>

Klänge positionierenSolange nur eine Person spricht, scheint der Klang immer von der gleichen Position imRaum zu kommen – sofern sich die Person nicht bewegt. Bei einem Gespräch zwischenmehreren Personen kommen die Stimmen jedoch aus unterschiedlichen Richtungen.

Durch die Verfügbarkeit von hoch entwickelten Audiosystemen und dreidimensionalerKlangdarstellung sollte es möglich sein, Klänge innerhalb dieses Raums zu positionieren.


In CSS2.x wird das mit Hilfe zweier Eigenschaften erreicht, die den Klang entlang einerhorizontalen bzw. einer vertikalen Ebene positionieren. Für die horizontale Ebene gibt esdie Eigenschaft azimuth.

Die Werte für den Winkel können in einer von drei Maßeinheiten angegeben werden: inGrad (deg), Gradienten (grad) und nach dem Bogenmaß (rad). Die möglichen Werte fürdie Maßeinheiten sind: 0–360deg, 0–400grad und 0–6.2831853rad. Zwar sind auch nega-tive Werte möglich, doch werden diese wieder in positive Werte umgerechnet. So ent-spricht die Angabe -45deg dem Wert 315deg (360–45); -50rad ist gleichwertig mit 350rad.

Die meisten Schlüsselwörter für azimuth entsprechen einfach bestimmten Winkeln undsind in Tabelle 14-1 noch einmal aufgelistet. Die letzte Spalte gibt die Winkel an, die sichbei der Benutzung des Schlüsselworts behind ergeben. Die grafische Darstellung inAbbildung 14-11 soll die Positionen der einzelnen Schlüsselwörter noch einmal verdeutli-chen.

Das Schlüsselwort behind kann nicht mit einem Wert für den Winkel kom-biniert werden, sondern nur mit einem der Schlüsselwörter inTabelle 14-1.

azimuth

Werte: <Winkel> | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards |rightwards | inherit

Startwert: center


Vererbt: ja

Berechneter Wert: normalisierter Winkel

Tabelle 14-1: Entsprechungen von Schlüsselwörtern und Winkeln für die Eigenschaft azimuth

Schlüsselwort Winkel mit »behind«

center 0 180deg –180deg

center-right 20deg –340deg 160deg –200deg

right 40deg –320deg 140deg –220deg

far-right 60deg –300deg 120deg –240deg

right-side 90deg –270deg 90deg –270deg

center-left 340deg –20deg 200deg –160deg

left 320deg –40deg 220deg –140deg

far-left 300deg –60deg 200deg –120deg

left-side 270deg –90deg 270deg –90deg


Zusätzlich zu den in Tabelle 14-1 genannten gibt es noch die zwei Schlüsselwörterleftwards (»nach links«) und rightwards (»nach rechts«). Durch die Verwendung vonleftwards werden vom aktuellen Wert 20deg (Grad) subtrahiert, bei rightwards werden20deg zum gegenwärtigen Winkel addiert. Zum Beispiel:

body {azimuth: right-side;} /* entspricht 90deg */

h1 {azimuth: leftwards;} /* wird berechnet als 70deg */

Der berechnete azimuth-Winkel für das h1-Element beträgt 70deg. Nehmen Sie nun diefolgende Situation:

body {azimuth: behind;} /* entspricht 180deg */

h1 {azimuth: leftwards;} /* wird berechnet als 160deg */

Nach diesen Regeln würde die Angabe von leftwards bewirken, dass der Klang sich nachrechts bewegt – nicht nach links. Der Grund für dieses seltsame Verhalten liegt in derBenutzung des Schlüsselworts behind. Das Schlüsselwort rightwards im vorigen Beispielbewirkt ebenfalls eine Verschiebung der Klangquelle für das h1-Element um 20 Grad nachrechts. Das ist zwar seltsam, aber so ist CSS nun einmal angelegt.

Abbildung 14-11: Die horizontale Ebene in der Draufsicht


Für die Positionierung von Klängen auf der vertikalen Ebene gibt es die Eigenschaftelevation. Sie funktioniert ähnlich wie azimuth, nur einfacher.

Wie bei azimuth sind auch für elevation Grad-, Gradienten- und Bogenmaß-Angabenmöglich. Zu den Winkelangaben gibt es drei Schlüsselwörter, die in Abbildung 14-12dargestellt sind: above (90 Grad), level (0) und below (–90 Grad).

Für die relative Platzierung einer Klangquelle gibt es die Schlüsselwörter higher (+ 10Grad) und lower (- 10 Grad). h1-Elemente, die Kindelemente von body sind, werden nachden folgenden Regeln also 10 Grad über der horizontalen Ebene dargestellt:

elevation

Werte: <Winkel> | below | level | above | higher | lower | inherit

Startwert: level


Vererbt: ja


Abbildung 14-12: Die vertikale Ebene von rechts betrachtet


body {elevation: level;} /* entspricht 0 */

body > h1 {elevation: higher;}

azimuth und elevation miteinander kombinieren

Zusammen beschreiben die Werte für azimuth und elevation einen Punkt innerhalb einerimaginären Kugel, in deren Zentrum sich der Hörer (Benutzer) befindet. Eine Darstellungdieser Kugel, der wichtigsten Punkte und der dazugehörigen Werte finden Sie in Abbil-dung 14-13.

Stellen Sie sich vor, Sie schauen genau nach Norden auf den Horizont. Suchen Sie nuneinen Punkt, der nordöstlich von Ihnen und auf halber Höhe zwischen dem Horizont unddem Zenit liegt. Die Position dieses Punkts lässt sich in CSS mit den Werten azimuth:45deg; elevation: 45deg; ausdrücken. Wenn Sie nun eine Klangquelle auf der gleichenHöhe, aber südwestlich von Ihnen beschreiben wollten, könnten Sie eine der folgendenDefinitionen benutzen:

azimuth: -135deg; elevation: 45deg;

azimuth: 215deg; elevation: 45deg;

azimuth: left behind; elevation: 45deg;

Die Positionierung von Klängen kann dem Benutzer auf jeden Fall dabei helfen, Signalevon unterschiedlichen Klangquellen auseinander zu halten. Sie kann aber auch für voll-kommen andere Dinge eingesetzt werden:

a[href] {cue: url(ping.wav); azimuth: behind; elevation: 30deg;}

voices.onhigh {play-during: url(choir.mp3); elevation: above;}

Abbildung 14-13: Dreidimensionaler auditiver Raum


ZusammenfassungDie erste Stufe der Webentwicklung hat sich noch größtenteils in visuellen Medien abge-spielt. Der Bedarf, die Inhalte auch in anderen Medien darzustellen, führte jedoch dazu,dass medienspezifische Stildefinitionen in die CSS-Spezifikation aufgenommen wurden.Die Möglichkeit, die Präsentation eines Dokuments an ein bestimmtes Ausgabemediumanzupassen, ist sehr mächtig. Hauptsächlich wird diese Macht dazu benutzt, um »dru-ckerfreundliche« Stile für Dokumente zu erstellen. Wir haben aber auch gesehen, wie Stil-regeln für die Projektion benutzt werden können, um mit Opera Folienpräsentationen zuerzeugen.

Auch wenn auditive Stylesheets für blinde Benutzer sehr nützlich sein können, gibt es,während diese Zeilen geschrieben werden, nur zwei Programme, die diesen Bereich vonCSS unterstützen – und auch das nur teilweise. Zudem wird der in CSS2.x definierteMedientyp aural in späteren Versionen nicht weiter gepflegt werden. Stattdessen wurdeder Medientyp speech für die zukünftige akustische Darstellung von Dokumenten reser-viert.

| 473

ANHANG A

Eigenschaften-Referenz

Visuelle Medien

backgroundEine Kurzschrift-Eigenschaft, mit der die Werte aller Hintergrund-Eigenschaften in einer Dekla-ration angegeben werden können. Es wird empfohlen, diese Eigenschaft anstelle der einzelnenEigenschaften zu verwenden, da sie von älteren Browsern besser unterstützt wird und wenigerEingaben nötig sind.

Werte: [ <background-color> || <background-image> || <background-repeat> ||<background-attachment> || <background-position> ] | inherit



Vererbt: nein

Prozentwerte: erlaubt für <background-position>


background-attachmentMit dieser Eigenschaft wird festgelegt, ob beim Scrollen des Dokuments der Hintergrund einesElements mitgescrollt werden soll. Mit dieser Eigenschaft lassen sich Hintergründe »ausrich-ten«. Details finden Sie in Kapitel 9.

Werte: scroll | fixed | inherit

Startwert: scroll


Vererbt: nein


474 | Anhang A: Eigenschaften-Referenz

background-colorLegt für den Hintergrund eines Elements eine einheitliche Farbe fest. Diese füllt Inhalt, Innen-abstände und Rahmenbereiche des Elements aus und erstreckt sich bis zur Außenkante desRahmens. Hintergründe sind durch die gegebenenfalls transparenten Bereiche eines Rahmenshindurch zu sehen (z.B. bei gestrichelten Rahmen).


Startwert: transparent


Vererbt: nein


background-imageBenutzt ein Bild als Hintergrund für ein Element. Abhängig vom Wert für background-repeatwird das Bild gegebenenfalls entlang einer der möglichen Achsen gekachelt. Die Platzierung desursprünglichen Hintergrundbilds (d.h. des Ausgangsbilds) wird anhand des Wertes fürbackground-position vorgenommen.


Startwert: none


Vererbt: nein

Berechneter Wert: ein absoluter URI

background-positionMit dieser Eigenschaft wird die Position des Ausgangsbilds für den Hintergrund (definiertdurch background-image) festgelegt. Von diesem Punkt aus werden gegebenenfalls die Wieder-holungen vorgenommen.

Werte: [[<Prozentwert> | <Entfernung> | left | center | right] [<Prozentwert> |<Entfernung> | top | center | bottom]?] || [[left | center | right] || [top |center | bottom]] | inherit

Startwert: 0% 0%

Anwendung auf: Block- und ersetzte Elemente

Vererbt: nein

Prozentwerte: beziehen sich auf den entsprechenden Punkt des Elements und desUrsprungsbilds

border-bottom | 475

Berechneter Wert: die Abweichungen von der absoluten Entfernung, wenn <Entfernung>angegeben wurde; ansonsten Prozentwerte

background-repeatLegt fest, nach welchem Schema das Hintergrundbild gekachelt werden soll. Werte, die sichauf eine bestimmte Achse beziehen, sorgen für Bildwiederholungen in beide Richtungen entlangder angegebenen Achse. Die Wiederholungen beginnen beim Ausgangsbild, das mitbackground-image definiert und anhand von background-position platziert wurde.

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

Startwert: repeat


Vererbt: nein


borderDiese Kurzschrift-Eigenschaft beschreibt Breite, Rahmenstil und Farbe eines Rahmens. Obwohlkein Wert zwingend angegeben werden muss, sorgt das Fehlen eines Wertes für border-styledafür, dass der Rahmen nicht dargestellt wird, weil in diesem Fall der Standardwert nonebenutzt wird.

Werte: [ <border-width> || <border-style> || <border-color> ] | inherit



Vererbt: nein


border-bottomDiese Kurzschrift-Eigenschaft beschreibt Breite, Farbe und Rahmenstil der Rahmenunterseiteeines Elements. Wie bei border sorgt das Fehlen eines Wertes für border-style dafür, dass dieRahmenunterkante nicht dargestellt wird.




Vererbt: nein

Berechneter Wert: siehe die einzelnen Eigenschaften (border-width usw.)


border-bottom-colorDiese Eigenschaft definiert die Farbe für die sichtbaren Teile der Rahmenunterseite eines Ele-ments. Es kann nur eine Farbe definiert werden. Der Rahmenstil muss einen anderen Werthaben als none oder hidden, damit diese Rahmenseite auch angezeigt wird.




Vererbt: nein

Berechneter Wert: wurde kein Wert angegeben, der berechnete Wert der Eigenschaft color fürdas betreffende Element; ansonsten wie angegeben

border-bottom-styleDiese Eigenschaft definiert den Rahmenstil für die Rahmenunterseite eines Elements. Damitdieser Teil des Rahmens dargestellt wird, muss ein anderer Wert als none angegeben werden. InCSS1 mussten HTML-Benutzerprogramme nur die Werte solid und none unterstützen.

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

Startwert: none


Vererbt: nein


border-bottom-widthDiese Eigenschaft definiert die Breite der Rahmenunterseite eines Elements. Diese Definitionhat nur Auswirkungen, wenn für den Rahmenstil etwas anderes angegeben wurde als none. Istder Rahmenstil none, wird die Rahmenbreite auf den Wert 0 gesetzt. Negative Längenangabensind nicht erlaubt.


Startwert: medium


Vererbt: nein

Berechneter Wert: die absolute Breite; 0, wenn der Wert für border-style auf none oder hiddengesetzt wurde

border-left-color | 477

border-colorMit dieser Kurzschrift-Eigenschaft wird die Farbe für die sichtbaren Bereiche der Rahmenseiteneines Elements definiert. Es kann für jede Seite ein eigener Wert definiert werden. Damit derRahmen dargestellt wird, muss border-style für das betreffende Element einen anderen Werthaben als none oder hidden.

Werte: [ <Farbwert> | transparent ]{1,4} | inherit



Vererbt: nein

Berechneter Wert: siehe die einzelnen Eigenschaften (border-top-color usw.)

border-leftDiese Kurzschrift-Eigenschaft beschreibt Breite, Farbe und Rahmenstil der linken Rahmenseiteeines Elements. Fehlt der Wert für den Rahmenstil, so wird, wie bei border, kein Rahmen ange-zeigt.




Vererbt: nein


border-left-colorDiese Eigenschaft definiert die Farbe für die sichtbaren Teile der linken Rahmenseite eines Ele-ments. Es kann nur eine Farbe definiert werden. Damit der Rahmen dargestellt wird, mussborder-style für das betreffende Element einen anderen Wert haben als none oder hidden.




Vererbt: nein

Berechneter Wert: wurde kein Wert angegeben, der berechnete Wert der Eigenschaft color fürdas betreffende Element; ansonsten wie angegeben


border-left-styleDiese Eigenschaft definiert den Rahmenstil für die linke Rahmenseite eines Elements. Damitdieser Teil des Rahmens dargestellt wird, muss ein anderer Wert angegeben werden als none. InCSS1 mussten HTML-Benutzerprogramme nur die Werte solid und none unterstützen.


Startwert: none


Vererbt: nein


border-left-widthDiese Eigenschaft definiert die Breite der linken Rahmenseite eines Elements. Wenn der Wertfür border-style mit none angegeben wurde, wird die Breite des Rahmens auf 0 zurückgesetzt.Negative Längenangaben sind nicht erlaubt.


Startwert: medium


Vererbt: nein

Berechneter Wert: die absolute Breite; 0, sofern border-style den Wert none oder hidden hat

border-rightDiese Kurzschrift-Eigenschaft beschreibt Breite, Farbe und Rahmenstil der rechten Rahmenseiteeines Elements. Wenn kein Wert für border-style angegeben wurde, wird diese Rahmenseite,wie bei border, nicht angezeigt.




Vererbt: nein


border-right-width | 479

border-right-colorDiese Eigenschaft definiert die Farbe für die sichtbaren Teile der rechten Rahmenseite einesElements. Es kann nur eine Farbe definiert werden. Der Rahmenstil muss einen anderen Werthaben als none oder hidden, damit der Rahmen auch dargestellt wird.




Vererbt: nein

Berechneter Wert: wurde kein Wert angegeben, wird der berechnete Wert der Eigenschaftcolor für das betreffende Element benutzt; ansonsten wie angegeben

border-right-styleDiese Eigenschaft definiert den Rahmenstil für die rechte Rahmenseite eines Elements. Damitdieser Teil des Rahmens dargestellt wird, muss ein anderer Wert angegeben werden als none. InCSS1 mussten HTML-Benutzerprogramme nur die Werte solid und none unterstützen.


Startwert: none


Vererbt: nein


border-right-widthDiese Eigenschaft definiert die Breite der rechten Rahmenseite eines Elements. Wurde der Wertfür border-style mit none angegeben, wird die Rahmenbreite mit dem Wert 0 überschrieben.Negative Längenangaben sind nicht erlaubt.


Startwert: medium


Vererbt: nein

Berechneter Wert: die absolute Breite; 0, sofern der Wert von border-style none oder hidden ist


border-styleMit dieser Kurzschrift-Eigenschaft wird der Rahmenstil für alle oder einzelne Rahmenseitenfestgelegt. Damit die Rahmenseite(n) dargestellt werden, muss diese Eigenschaft einen anderenWert haben als none.

Werte: [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset |outset ]{1,4} | inherit



Vererbt: nein


Hinweis: HTML-Benutzerprogramme müssen nur die Werte solid und none unter-stützen; die übrigen Werte (außer hidden) können als solid interpretiertwerden

border-topDiese Kurzschrift-Eigenschaft beschreibt Breite, Farbe und Rahmenstil der oberen Rahmenseiteeines Elements. Wie bei border sorgt das Fehlen eines Wertes für den Rahmenstil dafür, dassdiese Rahmenseite nicht dargestellt wird.




Vererbt: nein


border-top-colorDiese Eigenschaft definiert die Farbe für die sichtbaren Teile der Rahmenoberseite eines Ele-ments. Es kann nur eine Farbe definiert werden. Damit der Rahmen dargestellt wird, muss dieEigenschaft border-style für dieses Element einen anderen Wert haben als none oder hidden.


Startwert: der Wert für die Eigenschaft color des betreffenden Elements


Vererbt: nein

Berechneter Wert: wurde kein Wert angegeben, wird der berechnete Wert der Eigenschaftcolor für das betreffende Element verwendet; ansonsten wie angegeben

border-width | 481

border-top-styleDiese Eigenschaft definiert den Rahmenstil für die obere Rahmenseite eines Elements. Damitdieser Teil des Rahmens dargestellt wird, muss ein anderer Wert angegeben werden als none. InCSS1 mussten HTML-Benutzerprogramme nur die Werte solid und none unterstützen.


Startwert: none


Vererbt: nein


border-top-widthDiese Eigenschaft definiert die Breite der Rahmenoberseite eines Elements. Wurde der Wert fürborder-style mit none angegeben, so wird die Breite des Rahmens auf 0 zurückgesetzt. NegativeLängenangaben sind nicht erlaubt.


Startwert: medium


Vererbt: nein

Berechneter Wert: die absolute Breite; 0, wenn der Rahmenstil für die Rahmenoberseite denWert none oder hidden hat

border-widthMit dieser Kurzschrift-Eigenschaft kann die Breite für alle oder einzelne Rahmenseiten festge-legt werden. Hat die Eigenschaft border-style den Wert none, so wird die Rahmenbreite aufden Wert 0 zurückgesetzt. Negative Längenangaben sind nicht erlaubt.

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



Vererbt: nein



bottomDiese Eigenschaft definiert für ein positioniertes Element den Abstand zwischen der Außen-kante des unteren Außenabstands und der Unterkante des umgebenden Blocks.

Werte: <Abstand> | <Prozentwert> | auto | inherit

Startwert: auto

Anwendung auf: positionierte Elemente (d.h. Elemente, deren Wert für position nichtstatic ist)

Vererbt: nein


Berechneter Wert: für relativ positionierte Elemente siehe Hinweis; für statisch positionierteElemente auto; für Abstandsangaben der absolute Abstand; für Prozent-werte der angegebene Wert; ansonsten auto

Hinweis: haben bei relativ positionierten Elementen sowohl bottom als auch top denWert auto, so ist der berechnete Wert für beide 0; hat einer der beiden denWert auto, wird dieser durch den negativen Wert des anderen ersetzt; hatkeiner von beiden den Wert auto, erhält bottom den negativen Wert von top

clearDamit werden die Seiten eines Elements festgelegt, an denen kein Float stehen darf. In CSS1und CSS2 wird dazu der obere Außenabstand des betreffenden Elements automatisch vergrö-ßert. In CSS2.1 wird stattdessen oberhalb des oberen Außenabstands eine Aussparung hinzuge-fügt, ohne dass dabei der Außenabstand selbst verändert wird. In beiden Fällen wird die obereRahmen-Außenkante des Elements bündig mit der Außenabstand-Unterkante des Floats darge-stellt.

Werte: left | right | both | none

Startwert: none


Vererbt: nein


clipMit dieser Eigenschaft kann ein Beschneidungs-Rechteck definiert werden, in dem der Inhalteines absolut positionierten Elements sichtbar ist. Teile des Inhalts, die sich außerhalb desBeschneidungsbereichs befinden, werden gemäß dem Wert von overflow behandelt. DerBeschneidungsbereich kann größer oder kleiner als der Inhaltsbereich des Elements sein.

Werte: rect(oben, rechts, unten, links) | auto | inherit

counter-increment | 483

Startwert: auto

Anwendung auf: absolut positionierte Elemente (in CSS2 konnte clip nur auf Block- undersetzte Elemente angewendet werden)

Vererbt: nein

Berechneter Wert: bei der Definition eines Rechtecks ein Satz von vier berechneten Längen-werten, die sich auf die Kanten des Beschneidungs-Rechtecks beziehen;ansonsten wie angegeben

colorMit dieser Eigenschaft wird die Vordergrundfarbe eines Elements definiert. In HTML-Darstel-lungen ist das der Text des Elements. Auf Bilder hat dieser Wert keinen Einfluss. Er gilt außer-dem für alle Rahmenseiten des Elements, sofern diese nicht durch border-color oder eine deranderen Rahmen-Eigenschaften (border-top-color usw.) überschrieben werden.

Werte: <Farbwert> | inherit



Vererbt: ja


contentMit dieser Eigenschaft kann erzeugter Inhalt definiert werden, der vor oder nach dem betreffen-den Element platziert werden soll. Dabei handelt es sich standardmäßig um Inline-Inhalte,deren Darstellungsrolle aber mit der Eigenschaft display verändert werden kann.

Werte: normal | [ <Zeichenkette> | <URI> | <Zähler> | attr(<Identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

Startwert: normal

Anwendung auf: die Pseudo-Elemente :before und :after

Vererbt: nein

Berechneter Wert: für <URI>-Werte ein absoluter URI; für Attribut-Referenzen der Ergebnis-string; ansonsten wie angegeben

counter-incrementMit dieser Eigenschaft können Zähler um einen beliebigen Wert inkrementiert (hochgezählt)oder dekrementiert werden. Wurde kein <Integerwert> angegeben, wird der Standardwert 1benutzt.





Vererbt: nein


counter-resetMit dieser Eigenschaft können Zähler auf einen beliebigen positiven oder negativen Wert einge-stellt (bzw. initialisiert) werden. Wurde kein <Integerwert> angegeben, wird standardmäßig 0benutzt.




Vererbt: nein


cursorDefiniert, welcher Cursor benutzt werden soll, wenn sich der Mauszeiger über dem betreffen-den Element befindet. (In CSS2.1 ist allerdings nicht genau festgelegt, wo in diesem Sinne dieGrenzen des Elements sind.)

Werte: [[<URI>,]* [ auto | default | pointer | crosshair | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help | progress ]] | inherit

Startwert: auto


Vererbt: ja

Berechneter Wert: für <URI>-Werte ein absoluter URI; ansonsten wie angegeben

directionMit dieser Eigenschaft wird die grundsätzliche Schreibrichtung für Block-Elemente, Einbettun-gen und das Überschreibungsverhalten für den Unicode-Bidirektional-Algorithmus festgelegt.Benutzerprogramme, die keinen bidirektionalen Text unterstützen, dürfen diesen Wert ignorie-ren.

Werte: ltr | rtl | inherit

float | 485

Startwert: ltr


Vererbt: ja


displayMit dieser Eigenschaft wird festgelegt, welche Art von Box ein Element bei seiner Darstellungerzeugt. Wird display in HTML-artigen Dokumenttypen zu unvorsichtig eingesetzt, kann dasdie in HTML bereits definierte Darstellungshierarchie durcheinander bringen. Im Fall vonXML, das keine eigene Darstellungshierarchie besitzt, ist die Verwendung von display absolutunverzichtbar.


Startwert: inline


Vererbt: nein

Berechneter Wert: unterschiedlich für Floats, positionierte und Wurzelelemente (siehe CSS2.1,Abschnitt 9.7); ansonsten wie angegeben

Hinweis: die Werte compact und marker waren Teil von CSS2, wurden auf Grundmangelnder Unterstützung aber aus CSS2.1 wieder entfernt

floatDefiniert ein Element als Float (»schwebendes« Element). Diese Eigenschaft wurde ursprüng-lich verwendet, damit Bilder von Text umflossen werden konnten. In CSS können Sie jedochein beliebiges Element als Float definieren. Unabhängig vom eigentlichen Typ des Elementswird für Floats eine Blockbox erzeugt. Nicht-ersetzte Floats sollten mit einer expliziten Breiteversehen werden, weil sie sonst so schmal wie möglich dargestellt werden.

Werte: left | right | none | inherit

Startwert: none


Vererbt: nein



fontMit dieser Kurzschrift-Eigenschaft können zwei oder mehr Aspekte der Schrift für ein Elementauf einmal definiert werden. Zudem kann der verwendete Zeichensatz mit Schlüsselwörternwie icon an die Systemumgebung des Benutzers angepasst werden. Wird kein Schlüsselwortbenutzt, muss zumindest ein Wert für die Schriftfamilie (font-family) und -größe (font-size)angegeben werden.

Werte: [[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>] | caption | icon | menu | message-box |small-caption | status-bar | inherit



Vererbt: ja

Prozentwerte: beziehen sich auf den Wert von <font-size> des Elternelements und dieberechnete Zeilenhöhe des Elements

Berechneter Wert: siehe die einzelnen Eigenschaften (font-style usw.)

font-familyLegt fest, welche Schriftfamilie für die Darstellung des Elements benutzt werden soll. Einebestimmte Schriftfamilie (z.B. Geneva) kann nur dann benutzt werden, wenn Sie auf dem Rech-ner des Benutzers auch verfügbar ist. Mit dieser Eigenschaft können keine Schriften herunterge-laden werden. Es wird daher dringend empfohlen, eine allgemeine Schriftfamilie alsAusweichlösung mit anzugeben.

Werte: [[<Schriftfamilie> | <allgemeine Schriftfamilie>],]* [<Schriftfamilie> | <allgemeine Schriftfamilie>] | inherit



Vererbt: ja


font-sizeDefiniert die für ein Element verwendete Schriftgröße. Genauer gesagt bezeichnet diese Angabedie Höhe der Zeichenboxen der benutzten Schrift. Die tatsächlichen Schriftzeichen (Glyphen)können größer oder auch kleiner (das ist die Regel) als die Boxen ausfallen. Jedes Schlüsselwortmuss größer sein als das nächstgeringere und kleiner als das nächstgrößere. Negative Höhenan-gaben und Prozentwerte sind nicht erlaubt.

Werte: xx-small | x-small | small | medium | large | x-large | xx-large | smaller |larger | <Höhe> | <Prozentwert> | inherit

font-weight | 487

Startwert: medium


Vererbt: ja

Prozentwerte: beziehen sich auf den berechneten Wert von font-size des Elternelements

Berechneter Wert: die absolute Höhe

font-styleDamit wird festgelegt, ob ein kursiver (italic), geneigter (oblique) oder normaler Schriftschnittverwendet werden soll. Kursive Schrift besitzt innerhalb einer Schriftfamilie meistens eineneigenen Zeichensatz. Es ist theoretisch auch möglich, dass ein Benutzerprogramm einen abge-schrägten Schriftschnitt anhand des normalen Zeichensatzes berechnet.

Werte: italic | oblique | normal | inherit

Startwert: normal


Vererbt: ja


font-variantDiese Eigenschaft wird benutzt, um Text in Kapitälchen darzustellen. Theoretisch ist es mög-lich, dass ein Benutzerprogramm Kapitälchen anhand des normalen Schriftschnitts berechnet.

Werte: small-caps | normal | inherit

Startwert: normal


Vererbt: ja


font-weightMit dieser Eigenschaft wird das Schriftgewicht festgelegt, das bei der Darstellung eines Ele-ments benutzt werden soll. Der numerische Wert 400 entspricht dem Schlüsselwort normal, 700ist gleichbedeutend mit bold. Das Schriftgewicht für einen numerischen Wert muss mindestensso »leicht« sein wie der nächstkleinere numerische Wert und mindestens so »schwer« wie dernächsthöhere.

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


Startwert: normal


Vererbt: ja

Berechneter Wert: einer der numerischen Werte (100 usw.), oder einer der numerischen Werteund einer der relativen Werte (bolder oder lighter)

heightMit dieser Eigenschaft wird die Höhe des Inhaltsbereichs für ein Element festgelegt. Um denInhaltsbereich herum werden gegebenenfalls definierte Innenabstände, Rahmen und Außenab-stände angelegt. Bei nicht-ersetzten Inline-Elementen wird diese Eigenschaft ignoriert. NegativeHöhen- und Prozentwerte sind nicht erlaubt.

Werte: <Höhe> | <Prozentwert> | auto | inherit

Startwert: auto


Vererbt: nein

Prozentwerte: werden im Verhältnis zur Höhe des umgebenden Blocks berechnet

Berechneter Wert: für auto und Prozentwerte wie angegeben; ansonsten eine absolute Höhe,sofern die Eigenschaft auf das betreffende Element anzuwenden ist (sonstauto)

leftDiese Eigenschaft definiert den Abstand zwischen der linken Außenkante des Außenabstandseines positionierten Elements und der linken Kante des umgebenden Blocks.


Startwert: auto


Vererbt: nein


Berechneter Wert: für relativ positionierte Elemente siehe Hinweis; für statisch (static) posi-tionierte Elemente auto; für Abstandsangaben die absolute Entfernung; fürProzentwerte der angegebene Wert; ansonsten auto

Hinweis: für relativ positionierte Elemente ist der berechnete Wert von left immergleich dem Wert von right

list-style | 489

letter-spacingMit dieser Eigenschaft wird festgelegt, wie viel Leerraum zwischen den einzelnen Zeichenboxeneingefügt werden soll. Da die Glyphen für die einzelnen Zeichen meistens schmaler sind als ihreZeichenboxen, legt die angegebene Breite keinen absoluten Abstand fest, sondern verändertden bereits vorhandenen Zwischenraum. Das Schlüsselwort normal entspricht dem numeri-schen Wert 0 und bedeutet keine Veränderung des vorhandenen Abstands. Negative Werte sor-gen dafür, dass die Buchstaben enger zusammenstehen.

Werte: <Abstand> | normal | inherit

Startwert: normal


Vererbt: ja

Berechneter Wert: für Abstandsangaben die absolute Breite; ansonsten normal

line-heightMit dieser Eigenschaft können Sie die Höhe der Zeilenboxen verändern. Wird diese Eigenschaftauf ein Block-Element angewendet, bezieht sich der Wert auf den minimalen Abstand zwischenden Grundlinien in diesem Element. Die Differenz zwischen line-height und font-size (demso genannten »Durchschuss«) wird halbiert und zu gleichen Teilen dem oberen und unterenTeil des Inhaltsbereichs der einzelnen Elemente in der betreffenden Zeile zugeschlagen. Diekürzeste Box, die sämtliche Inhalte enthalten kann, ist die Zeilenbox. Ein einfacher numeri-scher Wert wird als Skalierungsfaktor betrachtet, der anstelle eines berechneten Werts vererbtwerden kann. Negative Werte sind nicht erlaubt.

Werte: <Höhe> | <Prozentwert> | <Zahlwert> | normal | inherit

Startwert: normal

Anwendung auf: alle Elemente (Details zu Block-Elementen finden Sie im Text)

Vererbt: ja

Prozentwerte: relativ zur Schriftgröße (font-size) des Elements

Berechneter Wert: für Höhen- und Prozentwerte der absolute Wert; ansonsten wie angegeben

list-styleMit dieser Kurzschrift-Eigenschaft können die Werte der einzelnen Listen-Eigenschaftengemeinsam angegeben werden. In HTML und XHTML sind das ausschließlich li-Elemente;prinzipiell kann diese Eigenschaft aber auf ein beliebiges Element angewendet werden, dessendisplay-Wert als list-item definiert ist.

Werte: [ <list-style-type> || <list-style-image> || <list-style-position> ] | inherit



Anwendung auf: Elemente, deren Wert für display mit list-item angegeben wurde

Vererbt: ja


list-style-imageMit dieser Eigenschaft kann ein Bild angegeben werden, das als Marker für die Elemente vongeordneten oder ungeordneten Listen verwendet werden soll. Die Platzierung des Bildes imVerhältnis zum Inhalt des Listeneintrags kann mit der Eigenschaft list-style-position defi-niert werden.


Startwert: none

Anwendung auf: Elemente, deren display-Wert mit list-item angegeben wurde

Vererbt: ja


list-style-positionMit dieser Eigenschaft kann festgelegt werden, wo sich der Marker für einen Listeneintragbefinden soll. Der Marker kann entweder inner- oder außerhalb des Inhaltsbereichs für denjeweiligen Eintrag platziert werden. Marker, die sich außerhalb des Inhaltsbereichs befinden,haben einen gewissen Abstand zur Außenkante des Rahmens. Die Breite dieses Abstands wirdin CSS aber nicht genauer angegeben. Innerhalb platzierte Marker werden am Anfang desInhaltsbereichs für den betreffenden Listeneintrag eingefügt.

Werte: inside | outside | inherit

Startwert: outside

Anwendung auf: Elemente, deren display-Wert mit list-item angegeben wurde

Vererbt: ja


list-style-typeWird benutzt, um festzulegen, welcher Marker-Typ bei der Darstellung einer Liste verwendetwerden soll.

margin-bottom | 491

CSS2.1-Werte: disc | circle | square | decimal | decimal-leading-zero | upper-alpha |lower-alpha | upper-roman | lower-roman | none | inherit

CSS2-Werte: disc | circle | square | decimal | decimal-leading-zero | upper-alpha |lower-alpha | upper-roman | lower-roman | lower-greek | hebrew | armenian |georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | none | inherit

Startwert: disc


Vererbt: ja


marginMit dieser Kurzschrift-Eigenschaft kann die Breite für einen oder mehrere Außenabstände (inder Reihenfolge im Uhrzeigersinn: oben, rechts, unten, links) eines Elements definiert werden.Außenabstände von vertikal aneinander grenzenden Block-Elementen werden zusammenge-fasst (»kollabieren«). Inline-Elemente haben keine oberen und unteren Außenabstände. Die lin-ken und rechten Außenabstände von Inline- und Float-Elementen werden nichtzusammengefasst. Negative Werte für Außenabstände sind möglich, sollten aber mit Vorsichtbenutzt werden.

Werte: [ <Breite> | <Prozentwert> | auto ]{1,4} | inherit



Vererbt: nein



margin-bottomDefiniert die Breite des unteren Außenabstands für ein Element. Negative Werte für Außenab-stände sind möglich, sollten aber mit Vorsicht benutzt werden.


Startwert: 0


Vererbt: nein




margin-leftDefiniert die Breite des linken Außenabstands für ein Element. Negative Werte für Außenab-stände sind möglich, sollten aber mit Vorsicht benutzt werden.


Startwert: 0


Vererbt: nein



margin-rightDefiniert die Breite des rechten Außenabstands für ein Element. Negative Werte für Außenab-stände sind möglich, sollten aber mit Vorsicht benutzt werden.


Startwert: 0


Vererbt: nein



margin-topDefiniert die Breite des oberen Außenabstands für ein Element. Negative Werte für Außenab-stände sind möglich, sollten aber mit Vorsicht benutzt werden.


Startwert: 0


Vererbt: nein



min-height | 493

max-heightDer Wert dieser Eigenschaft legt die maximale Höhe eines Elements fest. Ein Element kannalso niedriger als der angegebene Wert sein, nicht aber höher. Negative Werte sind nichterlaubt.

Werte: <Höhe> | <Prozentwert> | none | inherit

Startwert: none

Anwendung auf: alle Elemente außer nicht-ersetzte Inline- und Tabellen-Elemente

Vererbt: nein


Berechneter Wert: für Prozentwerte wie angegeben; für Höhenangaben die absolute Höhe;ansonsten none

max-widthDer Wert dieser Eigenschaft legt die maximale Breite eines Elements fest. Ein Element kannalso schmaler als der angegebene Wert sein, nicht aber breiter. Negative Werte sind nichterlaubt.

Werte: <Breite> | <Prozentwert> | none | inherit

Startwert: none


Vererbt: nein


Berechneter Wert: für Prozentwerte wie angegeben; für Breitenangaben die absolute Breite;ansonsten none

min-heightDer Wert dieser Eigenschaft legt die minimale Höhe eines Elements fest. Ein Element kann alsohöher als der angegebene Wert sein, nicht aber niedriger. Negative Werte sind nicht erlaubt.

Werte: <Höhe> | <Prozentwert> | inherit

Startwert: 0


Vererbt: nein



Berechneter Wert: für Prozentwerte wie angegeben; für Höhenangaben die absolute Höhe

min-widthDer Wert dieser Eigenschaft legt die minimale Breite eines Elements fest. Ein Element kann alsobreiter als der angegebene Wert sein, nicht aber schmaler. Negative Werte sind nicht erlaubt.


Startwert: 0


Vererbt: nein


Berechneter Wert: für Prozentwerte wie angegeben; für Breitenangaben die absolute Breite;ansonsten none

outlineMit dieser Kurzschrift-Eigenschaft können die einzelnen Eigenschaften für den Umriss (Out-line) eines Elements gemeinsam festgelegt werden. Umrisse können eine unregelmäßige Formhaben. Sie haben keinen Einfluss auf die Platzierung von Elementen.

Werte: [ <outline-color> || <outline-style> || <outline-width> ] | inherit



Vererbt: nein

Berechneter Wert: siehe die einzelnen Eigenschaften (outline-color usw.)

outline-colorDiese Eigenschaft definiert die Farbe für die sichtbaren Teile des gesamten Umrisses eines Ele-ments. Ähnlich wie bei Rahmen muss auch hier der Stil (outline-style) einen anderen Werthaben als none, damit der Umriss zu sehen ist.

Werte: <Farbwert> | invert | inherit

Startwert: invert (oder abhängig vom Benutzerprogramm; siehe Kapitel 13)


Vererbt: nein


overflow | 495

outline-styleDiese Eigenschaft definiert den Stil für den Umriss eines Elements. Damit der Umriss darge-stellt wird, muss diese Eigenschaft einen anderen Wert haben als none.

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

Startwert: none


Vererbt: nein


outline-widthLegt die Breite des Umrisses für ein Element fest. Wurde für die Eigenschaft outline-style desbetreffenden Elements der Wert none festgelegt, wird der Wert automatisch auf 0 gesetzt, wasdie Darstellung des Umrisses verhindert. Negative Werte sind nicht erlaubt.


Startwert: medium


Vererbt: nein

Berechneter Wert: die absolute Breite; 0, sofern der Umrissstil mit none oder hidden angegebenwurde

overflowMit dieser Eigenschaft kann definiert werden, was mit Inhalten passiert, wenn das Element fürdie Darstellung zu klein ist. Beim Wert scroll stellt das Benutzerprogramm einen Scroll-Mechanismus bereit, auch wenn dieser eigentlich nicht gebraucht wird, zum Beispiel wenn dar-gestellter Text eigentlich in die Inhaltsbox passen würde.

Werte: visible | hidden | scroll | auto | inherit

Startwert: visible


Vererbt: nein



paddingMit dieser Kurzschrift-Eigenschaft können die einzelnen Eigenschaften für eine oder mehrereInnenabstände (in der Reihenfolge oben, rechts, unten, links) gemeinsam festgelegt werden.Innenabstände für nicht-ersetzte Inline-Elemente haben keinen Einfluss auf die Berechnung derZeilenhöhe. Elemente mit Innenabständen und Hintergrund können sich also eventuell aufandere Zeilen erstrecken oder andere Inhalte überlappen. Der Hintergrund des Elementserstreckt sich auch über den Bereich der Innenabstände. Negative Werte sind nicht erlaubt.

Werte: [ <Breite> | <Prozentwert> ]{1,4} | inherit



Vererbt: nein


Berechneter Wert: siehe die einzelnen Eigenschaften (padding-top usw.)


padding-bottomMit dieser Eigenschaft wird die Breite des unteren Innenabstands eines Elements festgelegt. Beinicht-ersetzten Inline-Elementen haben untere Innenabstände keinen Einfluss auf die Berech-nung der Zeilenhöhe. Elemente mit Innenabständen und Hintergrund können sich also eventu-ell auf andere Zeilen erstrecken oder andere Inhalte überlappen. Negative Werte sind nichterlaubt.


Startwert: 0


Vererbt: nein




padding-leftMit dieser Eigenschaft wird die Breite des linken Innenabstands eines Elements festgelegt. Beinicht-ersetzten Inline-Elementen wird der linke Innenabstand nur links von der ersten Inlineboxdes betreffenden Elements dargestellt. Negative Werte sind nicht erlaubt.


padding-top | 497

Startwert: 0


Vererbt: nein




padding-rightMit dieser Eigenschaft wird die Breite des rechten Innenabstands eines Elements festgelegt. Beinicht-ersetzten Inline-Elementen wird der rechte Innenabstand nur rechts von der letztenInlinebox des betreffenden Elements dargestellt. Negative Werte sind nicht erlaubt.


Startwert: 0


Vererbt: nein




padding-topMit dieser Eigenschaft wird die Breite des oberen Innenabstands eines Elements festgelegt. Beinicht-ersetzten Inline-Elementen haben obere Innenabstände keinen Einfluss auf die Berech-nung der Zeilenhöhe. Elemente mit Innenabständen und Hintergrund können sich also eventu-ell auf andere Zeilen erstrecken oder andere Inhalte überlappen. Negative Werte sind nichterlaubt.


Startwert: 0


Vererbt: nein





positionMit dieser Eigenschaft wird festgelegt, nach welchem Schema das betreffende Element positio-niert werden soll. Es können beliebige Elemente positioniert werden, wobei Elemente mit demposition-Wert absolute oder fixed prinzipiell eine Blockbox erzeugen, egal, um was für eineArt von Element es sich handelt. Wird ein Element relativ positioniert, beziehen sich die Positi-onsangaben auf seine ursprüngliche Platzierung im normalen Textfluss.

Werte: static | relative | absolute | fixed | inherit

Startwert: static


Vererbt: nein


quotesMit dieser Eigenschaft wird festgelegt, welche Zeichen als Anführungszeichen in (gegebenen-falls verschachtelten) Zitaten verwendet werden sollen. Die mit dieser Eigenschaft definiertenZeichen werden mit Hilfe der Eigenschaft content eingefügt.

Werte: [<Zeichenkette> <Zeichenkette>]+ | none | inherit



Vererbt: ja


rightDiese Eigenschaft definiert den Abstand zwischen der Außenkante des rechten Außenabstandseines positionierten Elements und der rechten Kante des umgebenden Blocks.


Startwert: auto


Vererbt: nein


Berechneter Wert: für relativ positionierte Elemente siehe Hinweis; für Elemente, die alsstatic definiert wurden, auto; für Entfernungsangaben die absolute Entfer-nung; für Prozentwerte der angegebene Wert; ansonsten auto

text-indent | 499

Hinweis: für relativ positionierte Elemente entspricht der berechnete Wert für leftimmer dem Wert von right

text-alignMit dieser Eigenschaft wird die horizontale Textausrichtung definiert, indem ein Punkt für dieAusrichtung der Zeilenboxen festgelegt wird. Der Wert justify (Blocksatz) wird unterstützt,indem Benutzerprogramme die Buchstaben- und Wortabstände in einer Zeile verändern dür-fen. Die Ergebnisse können programmabhängig sein.

CSS2.1-Werte: left | center | right | justify | inherit

CSS2-Werte: left | center | right | justify | <Zeichenkette> | inherit

Startwert: abhängig vom Benutzerprogramm; kann unter Umständen auch von derSchreibrichtung abhängen


Vererbt: ja


Hinweis: In CSS2 gab es die Möglichkeit, eine <Zeichenkette> anzugeben. DieserWert wurde mangels ausreichender Unterstützung aus CSS2.1 wiederentfernt.

text-decorationMit dieser Eigenschaft lassen sich verschiedene Text-Effekte wie beispielsweise Unterstreichun-gen erzielen. Die definierten »Verzierungen« erstrecken sich auch über Nachkommen-Ele-mente, für die kein Wert für text-decoration angegeben wurde. Der Wert blink muss vonBenutzerprogrammen nicht unterstützt werden.

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

Startwert: none


Vererbt: nein


text-indentLegt fest, wie weit die erste Zeile eines Block-Elements eingerückt werden soll. Wird häufigbenutzt, um einen »Tabulator-Effekt« zu erzielen. Negative Werte sind erlaubt und sorgen füreine »hängende Einrückung«.

Werte: <Abstand> | <Prozentwert> | inherit


Startwert: 0


Vererbt: ja


Berechneter Wert: für Prozentwerte wie angegeben; für Abstandsangaben der absoluteAbstand

text-transformMit dieser Eigenschaft kann festgelegt werden, ob die Buchstaben des betreffenden Elements,unabhängig von ihrer eigentlichen Groß- und Kleinschreibung, groß- oder kleingeschriebenwerden sollen. Welche Buchstaben beim Wert capitalize großgeschrieben werden sollen, istnicht genau festgelegt und hängt davon ab, was die einzelnen Benutzerprogramme unter einem»Wort« verstehen.

Werte: uppercase | lowercase | capitalize | none | inherit

Startwert: none


Vererbt: ja


topDiese Eigenschaft definiert den Abstand zwischen der Außenkante des oberen Außenabstandseines positionierten Elements und der Oberkante des umgebenden Blocks.


Startwert: auto


Vererbt: nein


Berechneter Wert: für relativ positionierte Elemente siehe Hinweis; für statisch positionierteElemente auto; für Abstandsangaben der absolute Abstand; für Prozent-werte der angegebene Wert; ansonsten auto

Hinweis: sind bei relativ positionierten Elementen sowohl top als auch bottom mitauto definiert, werden die berechneten Werte für beide auf 0 gesetzt; isteiner der beiden auto, wird der negative Wert des anderen benutzt; istkeiner von beiden auto, erhält bottom den negativen Wert von top

visibility | 501

unicode-bidiErmöglicht Autoren innerhalb des Unicode-Einbettungs-Algorithmus das Anlegen zusätzlicherEinbettungsebenen. Benutzerprogramme, die bidirektionalen Text nicht unterstützen, dürfendiese Eigenschaft ignorieren.

Werte: normal | embed | bidi-override | inherit

Startwert: normal


Vererbt: nein


vertical-alignMit dieser Eigenschaft kann die vertikale Ausrichtung der Grundlinie eines Inline-Elementsfestgelegt werden. Diese wird im Verhältnis zur Grundlinie der Zeilenbox ermittelt, in der sichdas Element befindet. Negative Abstände und Prozentwerte sind erlaubt und verschieben dasElement nach unten anstatt nach oben. In Tabellenzellen wird diese Eigenschaft zur Ausrich-tung des Zelleninhalts innerhalb der Zellenbox verwendet.

Werte: baseline | sub | super | top | text-top | middle | bottom | text-bottom |<Prozentwert> | <Abstand> | inherit

Startwert: baseline

Anwendung auf: Inline-Elemente und Tabellenzellen

Vererbt: nein

Prozentwerte: beziehen sich auf den Wert von line-height für das betreffende Element

Berechneter Wert: für Prozentwerte und Abstandsangaben der absolute Abstand; ansonstenwie angegeben

Hinweis: bei der Anwendung auf Tabellenzellen werden nur die Werte baseline, top,middle und bottom berücksichtigt

visibilityMit dieser Eigenschaft kann festgelegt werden, ob die von einem Element erzeugte Box darge-stellt wird. Wird der Wert hidden verwendet, wird bei der Darstellung des Dokuments der Platzfür das Element reserviert, allerdings ohne dass das Element selbst angezeigt wird. Der Wertcollapse wird in Tabellen benutzt, um Spalten oder Tabellenzeilen von der Darstellung derTabelle auszunehmen.

Werte: visible | hidden | collapse | inherit

Startwert: inherit



Vererbt: nein


white-spaceLegt fest, wie Whitespace-Zeichen bei der Darstellung behandelt werden sollen. Die Werte pre-wrap und pre-line sind in CSS2.1 neu hinzugekommen.

Werte: normal | nowrap | pre | pre-wrap | pre-line | inherit

Startwert: normal

Anwendung auf: alle Elemente (CSS2.1); Block-Elemente (CSS1 und CSS2)

Vererbt: nein


widthMit dieser Eigenschaft wird die Breite des Inhaltsbereichs eines Elements festgelegt. Außerhalbdes Inhaltsbereichs werden eventuelle Innenabstände, Rahmen und Außenabstände hinzuge-fügt. Für nicht-ersetzte Inline-Elemente wird diese Eigenschaft ignoriert. Negative Prozentwerteund negative Angaben für die <Breite> sind nicht erlaubt.


Startwert: auto

Anwendung auf: Block- und ersetzte Inline-Elemente

Vererbt: nein


Berechneter Wert: für auto und Prozentwerte wie angegeben; ansonsten die absolute Breite, essei denn, die Eigenschaft wird nicht auf das Element angewendet (dannauto)

word-spacingMit dieser Eigenschaft kann festgelegt werden, wie viel Leerraum zwischen den einzelnen Wör-tern eines Elements eingefügt werden soll. In diesem Kontext ist ein »Wort« definiert als Zei-chenkette, die von Whitespace-Zeichen (Leerzeichen, Tabulator usw.) umgeben ist. DieAngabe eines Abstands wirkt sich auf den bestehenden Abstand aus. Der Wert normal ent-spricht dem Abstandswert 0 und verändert demnach den bestehenden Wortabstand nicht.Negative Abstandswerte sind erlaubt und sorgen dafür, dass Wörter enger bei einander darge-stellt werden.

border-collapse | 503

Werte: <Abstand> | normal | inherit

Startwert: normal


Vererbt: ja

Berechneter Wert: für den Wert normal der absolute Abstand 0; ansonsten der absoluteAbstand

z-indexMit dieser Eigenschaft kann die Platzierung eines positionierten Elements entlang der z-Achsefestgelegt werden. Diese Achse erstreckt sich »durch« den Darstellungsbereich, also auf denBenutzer zu bzw. vom Benutzer weg. Positive Werte liegen näher am Benutzer, negative Werteweiter entfernt.

Werte: <Integerwert> | auto | inherit

Startwert: auto

Anwendung auf: positionierte Elemente

Vererbt: nein


Tabellen

border-collapseMit dieser Eigenschaft wird definiert, welches Darstellungsmodell für die Tabellenrahmen ver-wendet werden soll, die sich z.B. zwischen Zellen, Tabellenzeilen usw. befinden. Obwohl dieseEigenschaft nur bei Tabellen zur Anwendung kommt, wird der Wert auf alle in der Tabellebefindlichen Elemente vererbt.

Werte: collapse | separate | inherit

Startwert: separate


Vererbt: ja


Hinweis: in CSS2 war der Standardwert collapse


border-spacingDefiniert im Modell der »getrennten Rahmen« den Abstand zwischen den Rahmen der einzel-nen Zellen. Die erste der beiden möglichen Abstandsangaben bezieht sich auf den horizontalenAbstand, die zweite auf den vertikalen Abstand. Diese Eigenschaft wird nur berücksichtigt,wenn border-collapse den Wert separate hat. Obwohl diese Eigenschaft nur bei Tabellen zurAnwendung kommt, wird der Wert auf alle in der Tabelle befindlichen Elemente vererbt.

Werte: <Abstand> <Abstand>? | inherit

Startwert: 0


Vererbt: ja

Berechneter Wert: zwei absolute Abstände

Hinweis: Eigenschaft wird nur berücksichtigt, wenn border-collapse den Wertseparate hat

caption-sideGibt an, wo eine Tabellenüberschrift im Verhältnis zur Tabellenbox platziert werden soll. DieÜberschrift wird als Block-Element dargestellt, das direkt vor oder nach der Tabelle eingefügtwird.

Werte: top | bottom

Startwert: top

Anwendung auf: Elemente mit dem display-Wert table-caption

Vererbt: nein


Hinweis: In CSS2 gab es zusätzlich noch die Werte left und right. Diese wurdenmangels ausreichender Unterstützung aber wieder aus CSS2.1 entfernt.

empty-cellsMit dieser Eigenschaft wird festgelegt, ob Tabellenzellen ohne Inhalt dargestellt werden sollenoder nicht. Ist der Wert show (leere Zellen zeigen), werden auch die Rahmen der Zelle darge-stellt. Diese Eigenschaft wird nur berücksichtigt, wenn border-collapse den Wert separatebesitzt.

Werte: show | hide | inherit

Startwert: show

Anwendung auf: Elemente mit dem display-Wert table-cell

page-break-after | 505

Vererbt: ja


Hinweis: Eigenschaft wird nur berücksichtigt, wenn border-collapse auf separategesetzt wurde

table-layoutLegt fest, nach welchem Layout-Verfahren die Tabelle dargestellt werden soll. Das Verfahrenfür den Wert fixed ist schneller, aber weniger flexibel; das Verfahren für auto ist langsamer,spiegelt dabei aber die Behandlung traditioneller HTML-Tabellen wider.

Werte: auto | fixed | inherit

Startwert: auto


Vererbt: ja


Seitenbasierte Medien

orphansGibt eine minimale Anzahl von Textzeilen innerhalb eines Elements an, die für sich am unterenEnde einer Seite stehen dürfen. Der Wert dieser Eigenschaft kann die Platzierung von Seitenum-brüchen innerhalb des Elements beeinflussen.


Startwert: 2


Vererbt: ja


page-break-afterMit dieser Eigenschaft wird festgelegt, ob Seitenumbrüche nach einem Element platziert wer-den sollen. Es ist zwar möglich, einen Seitenumbruch mit dem Wert always zu erzwingen, abernicht, ihn ausdrücklich zu verbieten. Es kann nur angegeben werden, dass Seitenumbrüche ver-mieden (avoid) werden sollen.


Startwert: auto


Anwendung auf: nicht als Float definierte Block-Elemente, deren Wert für position

entweder relative oder static ist

Vererbt: nein


page-break-beforeMit dieser Eigenschaft wird festgelegt, ob Seitenumbrüche vor einem Element platziert werdensollen. Es ist zwar möglich, einen Seitenumbruch mit dem Wert always zu erzwingen, abernicht, ihn ausdrücklich zu verbieten. Es kann nur angegeben werden, dass Seitenumbrüche ver-mieden (avoid) werden sollen.


Startwert: auto



Vererbt: nein


page-break-insideMit dieser Eigenschaft kann festgelegt werden, ob Seitenumbrüche innerhalb eines Elementsplatziert werden sollen. Da ein Element größer als die Seitenbox sein kann, ist es nicht möglich,Seitenumbrüche vollkommen auszuschließen. Es kann nur angegeben werden, dass Seitenum-brüche vermieden (avoid) werden sollen.

Werte: auto | avoid | inherit

Startwert: auto



Vererbt: ja


widowsGibt eine minimale Anzahl von Textzeilen innerhalb eines Elements an, die für sich am oberenEnde einer Seite stehen dürfen. Der Wert dieser Eigenschaft kann die Platzierung von Seitenum-brüchen innerhalb des Elements beeinflussen.


Startwert: 2

font-stretch | 507


Vererbt: ja


Aus CSS2.1 entfernte EigenschaftenDie folgenden Eigenschaften waren Teil von CSS2, wurden aber auf Grund mangelnderUnterstützung aus CSS2.1 wieder entfernt. Es werden keine Informationen über berech-nete Werte angegeben, weil berechnete Werte erst in CSS2.1 definiert wurden.

Stildefinitionen für visuelle Medien

font-size-adjustDer Zweck dieser Eigenschaft besteht darin, Autoren eine Skalierung von Zeichensätzen zuermöglichen, um den Unterschied zwischen einer Ersatzschrift und dem eigentlich gewünsch-ten Font nicht allzu groß erscheinen zu lassen, selbst wenn die Ersatzschrift eine andere x-Höhehat.

Werte: <Zahlwert> | none | inherit

Startwert: none


Vererbt: ja

font-stretchMit dieser Eigenschaft können die Glyphen einer Schrift breiter oder schmaler gemacht werden.Dabei wird idealerweise ein entsprechender Schriftschnitt ausgewählt.

Werte: normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit

Startwert: normal


Vererbt: ja


marker-offsetDiese Eigenschaft legt den Abstand zwischen der nächstgelegenen Rahmenkante einer Marker-Box und der dazugehörigen Elementbox fest.

Werte: <Abstand> | auto | inherit

Startwert: auto

Anwendung auf: Elemente mit dem display-Wert marker

Vererbt: nein

Hinweis: Diese Eigenschaft wurde in CSS2.1 verworfen und wird sehr wahrschein-lich nicht Teil von CSS3 sein. Das Gleiche gilt für den display-Wert marker.Während dieses Buch geschrieben wird, sind scheinbar andere Mecha-nismen geplant, um diese Effekte zu erzielen.

text-shadowMit dieser Eigenschaft kann der Text eines Elements mit einem oder mehreren Schatten verse-hen werden. Die ersten zwei Längenangaben definieren den horizontalen bzw. den vertikalenAbstand zum Text. Der dritte, optionale Wert gibt den Radius der verwendeten Weichzeich-nung an.

Werte: none | [<Farbwert> || <Abstand horizontal> <Abstand vertikal><Weichzeichnungs-Radius>? ,]* [<Farbwert> || <Abstand horizontal><Abstand vertikal> <Weichzeichnungs-Radius>?] | inherit

Startwert: none


Vererbt: nein

Seitenbasierte Medien

marksDiese Eigenschaft definiert, ob Passermarken (cross marks) außerhalb des Inhaltsbereichs, aberinnerhalb des druckbaren Bereichs platziert werden sollen. Die genaue Platzierung und Darstel-lung der Marken ist nicht definiert.

Werte: [ crop || cross ] | none | inherit

Startwert: none

Anwendung auf: Seitenkontext

Vererbt: nein

azimuth | 509

pageZusammen mit der Eigenschaft size kann mit dieser Eigenschaft ein bestimmter Seitentypangegeben werden, der beim Druck des Elements benutzt werden soll.

Werte: <Identifier> | inherit

Startwert: auto


Vererbt: ja

sizeMit dieser Eigenschaft kann die Größe und Ausrichtung des Druckbereichs festgelegt werden.Diese Eigenschaft kann, muss aber nicht, zusammen mit page verwendet werden.

Werte: <Längenangabe>{1,2} | auto | portrait | landscape | inherit

Startwert: auto

Anwendung auf: den Druckbereich einer Seite

Vererbt: nein

Stildefinitionen für auditive Medien

azimuthLegt mit Hilfe eines Winkels fest, aus welcher Richtung in der horizontalen Ebene ein Klangkommen soll. Zusammen mit elevation kann mit dieser Eigenschaft ein Klang in einem hypo-thetischen dreidimensionalen Raum platziert werden, in dessen Zentrum sich der Hörer befin-det.

Werte: <Winkel> | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards |rightwards | inherit

Startwert: center


Vererbt: ja



cueMit dieser Kurzschrift-Eigenschaft kann ein Autor festlegen, ob ein akustisches Signal (»cue«,eine Art akustisches Icon) vor oder nach der Audiodarstellung eines Elements abgespielt wer-den soll.

Werte: [ <cue-before> || <cue-after> ] | inherit

Startwert: none


Vererbt: nein

Berechneter Wert: siehe die einzelnen Eigenschaften (cue-before usw.)

cue-afterMit dieser Eigenschaft kann ein Autor ein akustisches Signal festlegen, das nach der auditivenDarstellung des Inhalts eines Elements abgespielt wird.


Startwert: none


Vererbt: nein


cue-beforeMit dieser Eigenschaft kann ein Autor ein akustisches Signal festlegen, das vor der auditivenDarstellung des Inhalts eines Elements abgespielt wird.


Startwert: none


Vererbt: nein


elevationMit dieser Eigenschaft wird mit Hilfe eines Winkels eine Richtung ober- oder unterhalb derhorizontalen Ebene (dem »Horizont«) festgelegt, aus der ein Klang kommen soll. Zusammenmit der Eigenschaft azimuth kann damit ein Klang innerhalb eines hypothetischen dreidimensi-onalen Raums platziert werden, in dessen Mitte sich der Hörer befindet.

pause-before | 511

Werte: <Winkel> | below | level | above | higher | lower | inherit

Startwert: level


Vererbt: ja


pauseMit dieser Kurzschrift-Eigenschaft können Pausen definiert werden, die vor und nach der Audio-darstellung des Inhalts eines Elements eingefügt werden sollen. Eine »Pause« ist in diesem Kon-text ein Zeitraum, in dem kein Inhalt akustisch dargestellt wird, auch wenn Hintergrundklängeweiterhin hörbar sind.

Werte: [[<Zeit> | <Prozentwert>]{1,2} ] | inherit

Startwert: 0


Vererbt: nein

Berechneter Wert: siehe die einzelnen Eigenschaften (pause-before usw.)

pause-afterMit dieser Eigenschaft kann die Dauer einer Pause nach der Audiodarstellung des Inhalts einesElements festgelegt werden.


Startwert: 0


Vererbt: nein

Berechneter Wert: der absolute Wert für die Zeit

pause-beforeMit dieser Eigenschaft kann die Dauer einer Pause vor der Audiodarstellung des Inhalts einesElements festgelegt werden.


Startwert: 0


Vererbt: nein

Berechneter Wert: der absolute Wert für die Zeit


pitchGibt die durchschnittliche Tonhöhe (Frequenz) der Sprechstimme an, die verwendet wird, umden Inhalt des betreffenden Elements akustisch wiederzugeben. Die durchschnittliche Tonhöhehängt sehr stark von der verwendeten Stimmfamilie (z.B. männlich oder weiblich) ab.

Werte: <Frequenz> | x-low | low | medium | high | x-high | inherit

Startwert: medium


Vererbt: ja

Berechneter Wert: der absolute Wert für die Frequenz

pitch-rangeDiese Eigenschaft legt fest, wie sehr die Tonhöhe (bezogen auf die durchschnittliche Tonhöhe)variiert werden soll, wenn der Inhalt des betreffenden Elements akustisch wiedergegeben wird.Je geringer der Wert von pitch-range, desto »monotoner« erscheint die Stimme.


Startwert: 50


Vererbt: ja


play-duringMit dieser Eigenschaft kann ein Klang definiert werden, der im Hintergrund abgespielt wird,während der Inhalt des Elements ausgegeben wird. Der Klang kann mit anderen Hintergrund-geräuschen gemischt werden (indem play-during für ein Vorfahren-Element definiert wird)oder die Klänge von Vorfahren-Elementen ersetzen.

Werte: <URI> | [mix || repeat]? | auto | none | inherit

Startwert: auto


Vererbt: nein

Berechneter Wert: für <URI>-Werte der absolute URI; ansonsten wie angegeben

speak-header | 513

richnessJe höher der Wert für richness, desto »voller« erscheint die Stimme, die für die akustische Dar-stellung des Inhalts eines Elements benutzt wird, und desto mehr »trägt« sie in einem Raum.


Startwert: 50


Vererbt: ja


speakMit dieser Eigenschaft wird festgelegt, ob und gegebenenfalls wie der Inhalt eines Elementsakustisch dargestellt wird. Der Wert spell-out wird in der Regel für die Ausgabe von Akrony-men wie W3C oder CSS verwendet. Ist der Wert none, wird dieses Element übersprungen (seineakustische Darstellung hat keine Dauer).

Werte: normal | none | spell-out | inherit

Startwert: normal


Vererbt: ja


speak-headerMit dieser Eigenschaft wird festgelegt, ob der Inhalt von Tabellenkopfzeilen vor jeder Zelle derentsprechenden Spalte erneut gesprochen werden soll. Standardmäßig wird der Inhalt derKopfzeile nur einmal ausgegeben.

Werte: once | always | inherit

Startwert: once

Anwendung auf: Elemente, die Tabellenkopfzeilen enthalten

Vererbt: ja



speak-numeralDiese Eigenschaft gibt an, ob Zahlen bei der akustischen Ausgabe als Ganzes (»Vierundzwan-zig« – continuous) oder als einzelne Zahlen (»Zwei-Vier« – digits) gesprochen werden sollen.

Werte: digits | continuous | inherit

Startwert: continuous


Vererbt: ja


speak-punctuationDiese Eigenschaft legt fest, wie Satzzeichen bei der Audioausgabe wiedergegeben werden sol-len. Durch den Wert code werden Interpunktionszeichen »wörtlich« ausgegeben (z.B. einKomma als »Komma«).

Werte: code | none | inherit

Startwert: none


Vererbt: ja


speech-rateLegt die durchschnittliche Geschwindigkeit fest, mit der die Wörter gesprochen werden sollen,wenn der Inhalt eines Elements akustisch dargestellt wird.

Werte: <Zahlwert> | x-slow | slow | medium | fast | x-fast | faster | slower |inherit

Startwert: medium


Vererbt: ja


stressMit dieser Eigenschaft kann das Betonungsmuster einer Sprache bei der akustischen Wieder-gabe eines Elements beeinflusst werden.


volume | 515

Startwert: 50


Vererbt: ja


voice-familyÄhnlich der Eigenschaft font-family kann mit Hilfe dieser Eigenschaft eine Liste von Stimmfa-milien festgelegt werden, die für die Audiodarstellung des Inhalts eines Elements verwendetwerden sollen. Für die Angabe von allgemeinen Stimmfamilien sind die Werte male, female undchild erlaubt.

Werte: [[<Spezifische Stimme> | <Allgemeine Stimme> ],]* [<Spezifische Stimme> | <Allgemeine Stimme> ] | inherit



Vererbt: ja


volumeMit dieser Eigenschaft wird die mittlere Lautstärke der Wellenform für akustisch dargestellteInhalte festgelegt. Hat die Wellenform hohe Spitzen oder tiefe Täler, so wird sich die Lautstärkefür diese Stellen stark vom definierten Mittelwert unterscheiden. Der Wert 0 ist nicht das Glei-che wie silent.

Werte: <Zahlwert> | <Prozentwert> | silent | x-soft | soft | medium | loud | x-loud | inherit

Startwert: medium


Vererbt: ja


516 | Anhang B: Referenz der Selektoren, Pseudoklassen und Pseudoelemente

ANHANG B

Referenz der Selektoren, Pseudoklassen und Pseudoelemente

Selektoren

Universeller SelektorDieser Selektor passt auf den Namen eines beliebigen Elements innerhalb der Dokument-sprache. Hat eine Regel keinen expliziten Selektor, wird automatisch der universelleSelektor benutzt.

Muster: *

Beispiele:

* {color: red;}

div * p {color: blue;}

Typ-Selektor (Element-Selektor)Dieser Selektor passt auf den Namen eines Elements in der Dokumentsprache. Es wirdjede Instanz des Elementnamens innerhalb des Dokumentbaums gefunden.

Muster: element1

Beispiele:

body {background: #FFF;}

p {font-size: 1em;}

Nachfahren-Selektor (Kontext-Selektor)Mit diesem Selektor kann ein Element ausgewählt werden, das von einem anderen Ele-ment innerhalb der Dokumenthierarchie »abstammt« (d.h. ein Kind-, Enkel-, Großenkel-Element usw.).

Selektoren | 517

Muster: element1 element2

Beispiele:

body h1 {font-size: 200%;}

table tr td div ul li {color: purple;}

Kind-SelektorMit diesem Selektor kann ein Element ausgewählt werden, das innerhalb der Dokument-hierarchie ein Kindelement eines anderen Elements ist. Dieser Selektor ist restriktiver alsder Nachfahren-Selektor, da er nur auf ein direktes Nachkommenelement, d.h ein Kind-element, passt.

Muster: element1 > element2

Beispiele:

div > p {color: cyan;}

ul > li {font-weight: bold;}

Selektor für benachbarte GeschwisterelementeMit diesem Selektor kann der Autor ein Element auswählen, das in direkter Nachbar-schaft zu einem anderen Element auf der gleichen Ebene in der Dokumenthierarchie steht(z.B. ein Absatz, der direkt auf eine Tabelle folgt). Jeglicher Text zwischen den Elementenwird ignoriert. Es werden nur Elemente und ihre Position innerhalb der Dokumenthierar-chie berücksichtigt.

Muster: element1 + element2

Beispiele:

table + p {margin-top: 2.5em;}

h1 + * {margin-top: 0;}

Klassen-SelektorIn manchen Sprachen wie HTML, SVG und MathML ist die Definition von Klassenerlaubt. Mit Hilfe der »Punktnotation« können Elemente ausgewählt werden, die einerbestimmten Klasse angehören (z.B. <p class="urgent">). Die Bezeichnung der Klassekann aus einem oder mehreren verketteten Werten bestehen. Der Name für den Wert derKlasse muss direkt auf den Punkt folgen. Wird dem Punkt kein Elementname vorange-stellt, so passt der Selektor auf alle Elemente, die den entsprechenden Klassenwert enthal-ten.

Muster: element1.classname element1.classname1.classname2


Beispiele:

p.urgent {color: red;}

a.external {font-style: italic;}

.Beispiel {background: olive;}

ID-SelektorIn manchen Sprachen wie z.B. HTML ist die Definition von IDs möglich (z.B. <h1id="page-title">). In CSS können mit Hilfe des ID-Selektors Elemente ausgewählt wer-den, die einen oder mehrere bestimmte ID-Werte besitzen. Dazu wird dem ID-Wertunmittelbar ein Doppelkreuz (#) vorangestellt. Steht vor dem Doppelkreuz kein Element-name, passt der Selektor auf alle Elemente mit einem entsprechenden ID-Wert.

Muster: element1#idname

Beispiele:

h1#page-title {font-size: 250%;}

body#home {background: silver;}

#Beispiel {background: lime;}

Einfacher Attribut-SelektorMit Hilfe dieses Selektors können Autoren Elemente auswählen, die ein bestimmtes Attri-but besitzen. Der Wert des Attributs spielt dabei keine Rolle.

Muster: element1[attribut]

Beispiele:

a[rel] {border-bottom: 3px double gray;}

p[class] {border: 1px dotted silver;}

Selektor für exakte AttributwerteMit Hilfe dieses Selektors können Autoren Elemente anhand des genauen und vollständi-gen Attributwerts auswählen.

Muster: element1[attribut="wert"]

Beispiele:

a[rel="Home"] {font-weight: bold;}

p[class="urgent"] {color: red;;}

Selektor für teilweise AttributwerteMit Hilfe dieses Selektors kann der Autor ein beliebiges Element anhand eines Teils derdurch Leerzeichen getrennten Attributwerte auswählen. Die Formulierung [class~="value"]ist gleichbedeutend mit .value (siehe oben).


Muster: element1[attr~="value"]

Beispiele:

a[rel~="friend"] {text-transform: uppercase;}

p[class~="warning"] {background: yellow;}

Selektor für SprachattributeMit diesem Selektor kann der Autor ein beliebiges Element mit einem lang-Attribut aus-wählen. Der Wert dieses Attributs ist eine durch Bindestriche getrennte Werteliste. Umein bestimmtes Element auszuwählen, muss der erste Wert dieser Liste mit dem im Selek-tor angegebenen Wert übereinstimmen.

Muster: element1[lang|="lc"]

Beispiel:

html[lang|="en"] {color: gray;}

Pseudoklassen und Pseudoelemente

:activeDiese Pseudoklasse bezieht sich auf ein Element, während es aktiviert wird. Das häufigsteBeispiel ist ein angeklickter Hyperlink in einem HTML-Dokument. Solange die Maus-taste gedrückt wird, ist der Link aktiv. Es gibt theoretisch auch noch andere Möglichkei-ten, um ein Element zu aktivieren. Außerdem ist es theoretisch möglich, auch andereElemente zu aktivieren. Diese Dinge sind in CSS jedoch nicht weiter definiert.

Art: Pseudoklasse

Anwendung auf: ein aktiviertes Element

Beispiele:

a:active {color: red;}

*:active {background: blue;}

:afterMit Hilfe dieses Pseudoelements können am Ende eines Elements erzeugte Inhalte einge-fügt werden. Standardmäßig erzeugen diese Inhalte eine Inlinebox, was aber mit derEigenschaft display geändert werden kann.

Art: Pseudoelement

Erzeugt: ein Pseudoelement, das den erzeugten Inhalt enthält, der nach dem eigentlichenInhalt eines Elements platziert wurde


Beispiele:

a.external:after {content: " " url(/icons/globe.gif);)

p:after {content: " | ";}

:beforeMit Hilfe dieses Pseudoelements können am Anfang eines Elements erzeugte Inhalte ein-gefügt werden. Standardmäßig erzeugen diese Inhalte eine Inlinebox, was aber mit derEigenschaft display geändert werden kann.

Art: Pseudoelement

Erzeugt: ein Pseudoelement, das den erzeugten Inhalt enthält, der vor dem eigentlichenInhalt eines Elements platziert wurde

Beispiele:

a[href]:before {content: "[LINK] ";)

p:before {content: attr(class);}

:first-childMit dieser Pseudoklasse kann das Suchmuster auf Elemente eingeschränkt werden, diedas erste Kindelement eines anderen Elements sind. Die Formulierung p:first-childpasst demnach auf ein beliebiges p-Element, das das erste Kindelement eines anderen Ele-ments ist. Trotz gegensätzlicher Annahme wird nicht das erste Kindelement eines Absat-zes ausgewählt. Dafür müsste der Autor stattdessen p > *:first-child schreiben.

Art: Pseudoklasse

Anwendung auf: ein beliebiges Element, das das erste Kindelement eines anderen Ele-ments ist

Beispiele:

body *:first-child {font-weight: bold;}

p:first-child {font-size: 125%;}

:first-letterMit Hilfe dieses Pseudoelements kann der erste Buchstabe eines Elements ausgewähltwerden. Gehen dem ersten Buchstaben irgendwelche Satzzeichen voran, gilt die Stildefi-nition auch für sie. Manche Sprachen enthalten Buchstabenkombinationen, die als ein-zelnes Zeichen angesehen werden sollen; ein Benutzerprogramm könnte die Stildefinitionfür den ersten Buchstaben also auf beide anwenden. Vor CSS2.1 konnte :first-letternur auf Block-Elemente angewendet werden. In CSS2.1 ist die Anwendung auf alle Ele-mente möglich. Für den ersten Buchstaben gibt es nur eine eingeschränkte Menge mögli-cher Eigenschaften.


Art: Pseudoelement

Erzeugt: ein Pseudoelement, das den ersten Buchstaben eines Elements enthält

Beispiele:

h1:first-letter {font-size: 166%;}

a:first-letter {text-decoration: underline;}

:first-lineMit Hilfe dieses Pseudoelements kann die erste Textzeile eines Elements ausgewählt wer-den, unabhängig davon, wie viele Wörter diese Zeile enthält. :first-line kann nur aufBlock-Elemente angewendet werden. Für die erste Zeile gibt es nur eine eingschränkteMenge möglicher Eigenschaften.

Art: Pseudoelement

Erzeugt: ein Pseudoelement, das die erste formatierte Zeile eines Elements enthält

Beispiel:

p.lead:first-letter {font-weight: bold;}

:focusDiese Pseudoklasse bezieht sich auf ein Element, das gerade den Fokus hat. Ein HTML-Beispiel wäre eine Eingabebox, in der sich gerade der Texteingabe-Cursor befindet.Beginnt der Benutzer zu schreiben, wird der eingegebene Text in der Box dargestellt.Andere Elemente, wie etwa Hyperlinks, können ebenfalls den Fokus haben, allerdings istin CSS nicht definiert, welche Elemente das sind.

Art: Pseudoklasse

Anwendung auf: ein Element, das gerade den Fokus hat

Beispiele:

a:focus {outline: 1px dotted red;}

input:focus {background: yellow;}

:hoverBezieht sich auf ein Element, über dem sich gerade der Mauszeiger befindet. Der Benutzerwählt dieses Element aus, ohne es zu aktivieren. Das häufigste Beispiel hierfür ist dasBewegen des Mauszeigers über einen Hyperlink in einem HTML-Dokument. Theoretischkönnen sich auch andere Elemente im »hover«-Zustand befinden, allerdings ist in CSSnicht definiert, welche Elemente das sind.

Art: Pseudoklasse

Anwendung auf: ein Element, über dem sich gerade der Mauszeiger befindet


Beispiele:

a[href]:hover {text-decoration: underline;}

p:hover {background: yellow;}

:langMit dieser Pseudoklasse können Elemente anhand der für sie festgelegten natürlichenSprache ausgewählt werden. Diese Informationen müssen entweder im Dokument selbstdefiniert werden oder auf andere Weise mit dem Dokument verbunden werden. Sie kön-nen nicht mit CSS zugewiesen werden. Die Behandlung von :lang entspricht der Funkti-onsweise von |= - Attributselektoren.

Art: Pseudoklasse

Anwendung auf: ein beliebiges Element mit Informationen über die verwendete natürli-che Dokumentsprache

Beispiele:

html:lang(en) {background: silver;}

*:lang(fr) {quotes: '« ' ' »';}

:linkDiese Pseudoklasse bezieht sich auf einen Link zu einem bisher »unbesuchten« URI. EinLink gilt als »besucht«, wenn er sich in einer hierfür vom Benutzerprogramm angelegtenVerlaufsliste befindet. Dieser Zustand und der Zustand :visited (besucht) schließen sichgegenseitig aus.

Art: Pseudoklasse

Anwendung auf: einen Link auf eine unbesuchte Ressource

Beispiele:

a:link {color: blue;}

*:link {text-decoration: underline;}

:visitedDiese Pseudoklasse bezieht sich auf einen Link zu einem bereits besuchten URI, dasheißt, der Link befindet sich bereits in der Verlaufsliste des Benutzerprogramms. DieserZustand und der Zustand :link (unbesuchter Link) schließen sich gegenseitig aus.

Art: Pseudoklasse

Anwendung auf: einen Link auf eine bereits besuchte Ressource

Beispiele:

a:visited {color: purple;}

*:visited {color: gray;}

| 523

ANHANG C

Beispiel für ein HTML 4-Stylesheet

Das folgende Stylesheet wurde aus dem Anhang D der CSS2.1-Spezifikation übernom-men. Dabei gibt es zwei wichtige Dinge zu beachten. So wird in CSS2.1 zwar gesagt, dass»Entwickler [dieses Beispiel] als Standard-Stylesheet für ihre Implementierungen benut-zen sollten«, das ist aber nicht immer möglich. So gibt es beispielsweise eine Regel, diebesagt:

ol, ul, dir, menu, dd

{margin-left: 40px;}

Dabei wird mit Hilfe von linken Rändern die früher übliche 40 Pixel breite Einrückungvon Listen nachgebildet. Manche Browser verwenden hierfür jedoch eine linke Auffül-lung. (Details finden Sie in Kapitel 12.) Sie können sich also nicht darauf verlassen, dassdieses als exaktes Standard-Stylesheet für ein beliebiges Benutzerprogramm benutzt wird.Das hier gezeigte Stylesheet soll eher Illustrations- und Lernzwecken dienen.

Zweitens muss man darauf hinweisen, dass nicht alle HTML-Elemente in diesem Style-sheet vollständig und genau beschrieben werden können, weil CSS dafür nicht detailliertgenug ist. Das klassische Beispiel sind Formularelemente, die nach eigenen, speziellenRegeln formatiert werden müssen. Submit-Buttons sind ersetzte Elemente; die Unter-kante ihrer Box sollte demnach an der Grundlinie ausgerichtet werden. Andererseits wirdeher erwartet, dass der Text innerhalb des Buttons an der Grundlinie des übrigen Texts inder betreffenden Zeile ausgerichtet wird. Diese Erwartungshaltung ist gut nachvollzieh-bar. CSS bietet (während dieses Buch geschrieben wird) aber keine Möglichkeit, dasgeforderte Verhalten zu beschreiben. Daher lautet die Regel für diese Elemente auch nur:

button, textarea, input, object, select, img {

display:inline-block;}

Die übrigen Aspekte der Formatierung dieser Elemente bleiben dem Benutzerprogrammüberlassen.

524 | Anhang C: Beispiel für ein HTML 4-Stylesheet

Mit diesen Vorbehalten im Hinterkopf stellen wir Ihnen nun das Stylesheet vor (mit klei-neren Änderungen in der Formatierung), das in der CSS2-Spezifikation enthalten ist.Änderungen, die sich nicht auf das Format beziehen, sind in Kommentaren vermerkt:

html, address, blockquote, body, dd, div, dl, dt, fieldset,

form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes,

ol, p, ul, center, dir, hr, menu, pre {

display: block;}

li {display: list-item;}

head {display: none;}

table {display: table;}

tr {display: table-row;}

thead {display: table-header-group;}

tbody {display: table-row-group;}

tfoot {display: table-footer-group;}

col {display: table-column;}

colgroup {display: table-column-group;}

td, th {display: table-cell;}

caption {display: table-caption;}

th {font-weight: bolder; text-align: center;}

caption {text-align: center;}

body {margin: 8px; line-height: 1.12em;}

h1 {font-size: 2em; margin: .67em 0;}

h2 {font-size: 1.5em; margin: .75em 0;}

h3 {font-size: 1.17em; margin: .83em 0;}

h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu {

margin: 1.12em 0;}

h5 {font-size: .83em; margin: 1.5em 0;}

h6 {font-size: .75em; margin: 1.67em 0;}

h1, h2, h3, h4, h5, h6, b, strong {

font-weight: bolder;}

blockquote {margin-left: 40px; margin-right: 40px;}

i, cite, em, var, address {

font-style: italic;}

pre, tt, code, kbd, samp {

font-family: monospace;}

pre {white-space: pre;}

button, textarea, input, object, select, img {

display:inline-block;}

big {font-size: 1.17em;}

small, sub, sup {font-size: .83em;}

sub {vertical-align: sub;}

sup {vertical-align: super;}

s, strike, del {text-decoration: line-through;}

hr {border: 1px inset;}

ol, ul, dir, menu, dd {

margin-left: 40px;}

ol {list-style-type: decimal;}

ol ul, ul ol, ul ul, ol ol {

margin-top: 0; margin-bottom: 0;}

u, ins {text-decoration: underline;}

br:before {content: "\A";}

center {text-align: center;}

Beispiel für ein HTML 4-Stylesheet | 525

abbr, acronym {font-variant: small-caps; letter-spacing: 0.1em;}

:link,:visited {text-decoration: underline;}

:focus {outline: thin dotted invert;}

/* Einstellungen für bidirektionalen Text (nicht verändern) */

BDO[DIR="ltr"] {direction: ltr; unicode-bidi: bidi-override;}

BDO[DIR="rtl"] {direction: rtl; unicode-bidi: bidi-override;}

*[DIR="ltr"] {direction: ltr; unicode-bidi: embed;}

*[DIR="rtl"] {direction: rtl; unicode-bidi: embed;}

@media print {


h1, h2, h3, h4, h5, h6 {

page-break-after: avoid;}

ul, ol, dl {page-break-before: avoid;}

}

| 527

Index

��

!important-Deklaration 70, 75" (doppelte Anführungszeichen)

in erzeugtem Inhalt 407–409, 498in font-family-Deklaration 105

# (Doppelkreuz)in hexadezimaler Farbnotation 86in ID-Selektoren 39

% (Prozentzeichen) in Eigenschaftswert 81' (einfache Anführungszeichen)

in erzeugtem Inhalt 407–409, 498in font-family-Deklaration 104

* (Asterisk)als universeller Selektor 31, 36, 516in Eigenschaftensyntax XVII

+ (Pluszeichen)in Eigenschaftensyntax XVIIin Selektoren für benachbarte Geschwister-

elemente 52, (Komma)

in Eigenschaftensyntax XVIIin Selektoren 30

. (Punkt) in Klassenselektoren 35/ (Schrägstrich)

in Eigenschaftensyntax XVII, 29zwischen Werten für Schriftgröße und Zeilen-

höhe 129: (Doppelpunkt)

in Selektoren für Pseudoklassen oder Pseudo-elemente 54

zwischen Eigenschaft und Wert 28; (Semikolon) nach Deklarationen 28, 32 (HTML-Kommentare) 22

> (Größer-als-Zeichen) in Kindselektoren 51? (Fragezeichen)

Cursor 426in Eigenschaftensyntax XVII

\A, Newline-Zeichen 405\ (Backslash) Verhindern von Zeilenumbrüchen

405@font-face-Regel 133–135@import-Direktive 20, 23, 435<> (spitze Klammern) in Eigenschaftensyntax

XVII[] (eckige Klammern)

in Attribut-Selektoren 41in Eigenschaftensyntax XVII

{} (geschweifte Klammern) in Eigenschaften-syntax XVIII

| (vertikaler Balken)in Attribut-Selektoren 45in Eigenschaftensyntax XVII

|| (doppelter vertikaler Balken) in Eigenschaften-syntax XVII

~ (Tilde) in Attribut-Selektoren 45⁄* *⁄ (CSS-Kommentare) 22

�

a-Element (siehe Links)\A, Newline-Zeichen 405absolute Längeneinheiten 88–90absolute Positionierung 321, 336–342

Einfluss von Höhe und Breite auf 339, 342–348

ersetzte Elemente 346–348nicht-ersetzte Elemente 342–346

528 | Index

Scrollen und 339Stapelkontext und Reihenfolge für 351–354überlappende Elemente 349–354umgebende Blöcke und 321, 336–339auf z-Achse 349–354

absolute URL 95Abstände (siehe Durchschuss; letter-space

(Eigenschaft); white-space (Eigen-schaft); word-space (Eigenschaft))

Abstands-Eigenschaften 322–324, 340:active (Pseudoklasse) 57, 264, 519ActiveBorder-Systemfarbe 420ActiveCaption-Systemfarbe 420:after (Pseudoelement) 63, 401–404, 519akustische Darstellung von Inhalten (siehe audi-

tive Stilregeln)akustische Signale bei Sprachausgabe 465, 510align-Attribut, img-Element 300alink-Attribut, body-Element

:active (Pseudoklasse) und 57ersetzen durch color-Eigenschaft 264

allgemeine Schriftenfamilien 100–102, 103alt-Attribut, Attribut-Selektoren für 42alternative Stylesheets 17Anführungszeichen

als erzeugte Inhalte 407–409, 498in font-family-Deklaration 104

»angeschnittene«Seiten 450.ani-Dateiendung 427animierter Cursor 427Ansichtsverhältnis von Zeichensätzen 125AppWorkspace-Systemfarbe 420Asterisk (*)

als universeller Selektor 31, 36, 516in Eigenschaftensyntax XVII

Attribut-Selektoren 41–46, 518, 519auf mehrere Attribute anwenden 43einfache Attribut-Selektoren 41, 518für Formularelemente 268Selektoren für exakte Attributwerte 43–44,

518spezielle Attribut-Selektoren 45Spezifität von 66, 69für Teilwerte 44, 518

Attributwerte, als erzeugte Inhalte 405–407auditive Stildefinitionen 454

akustische Signale bei Sprachausgabe 465, 510

Einheiten für 97

Hintergrundklänge für 466, 512Lautstärke für 458, 515Medientyp angeben für 16Pausen 464, 466, 511Positionierung von Klängen für 467–471,

509, 510Sprechgeschwindigkeit für 457, 514Sprechpausen 511verwendete Stimme 460–463, 512, 513, 514,

515zu sprechende Inhalte festlegen 454–458,

513, 514Aufklappmenüs, Systemzeichensatz für 418Auflösung

absolute Maßeinheiten und 89relative Maßeinheiten und 91Stile für Projektionsmedien und 453(siehe auch Pixel)

aural-Medientyp 16, 454Ausgabegeräte, spezielle Stylesheets für 16Ausgangsbild 290Ausrichtung

Abstände und 154an der Unterkante der Zeilenbox 148an Oberkante von Zeilenbox 149an Textoberkante 149an Textunterkante 148Blocksatz 141, 154Grundlinie 147, 150horizontal 139–142in Elementmitte 150Superskript und Subskript 147vertikal 142, 146–151von Zelleninhalt 387–390

Außenabstände 167, 221, 491durch clear-Eigenschaft verbreitern 318für Inline-Elemente 205, 209, 236–237für jede Seite einzeln angeben 232, 491, 492für Seitenboxen 438gemeinsam festlegen 225–232Hintergrund von 168interne Tabellenelemente ohne 360negative Werte für 209, 233, 312Positionierung und 323von Element-Boxen 172–179, 181–189von Floats 301, 312zusammenfassen 184–189, 234

Auswahlcursor 424Autor als Quelle von Deklarationen 75azimuth (Eigenschaft) 468, 471, 509

Index | 529

�

background (Eigenschaft) 296–299, 473background-attachment (Eigenschaft) 291–296,

473background-Attribut, body-Element 272background-color (Eigenschaft) 269–271, 474

mit background-image (Eigenschaft) kombi-nieren 276–277

(siehe auch background (Eigenschaft))background-image (Eigenschaft) 273–275, 474

mit background-color (Eigenschaft) kombi-nieren 276–277

(siehe auch background (Eigenschaft))background-position (Eigenschaft) 280–289,

474Längenangaben für 286–289negative Werte für 287Prozentwerte für 283–286Schlüsselwörter für 282–283Standardwerte für 286(siehe auch background (Eigenschaft))

background-repeat (Eigenschaft) 277–280, 290, 475

(siehe auch background (Eigenschaft))Background-Systemfarbe 420Backslash (\) zum Verhindern von Zeilen-

umbrüchen 405basefont-Element 8:before (Pseudoelement) 63, 401–404, 520Beispiel-Stylesheet 523benannte Farbwerte 82, 87benutzerdefinierte Stylesheets 7Benutzerprogramme 9

als Quelle von Deklarationen 75Emacspeak 98, 454Fonix SpeakThis 454Gewichtung von Deklarationen und 76Standard-Stildefinitionen von 76(siehe auch Browser)

BenutzerschnittstelleCursor 422–427Farben für 420–422Umrisse 427–433Zeichensätze für 417–419

beständige Elemente, feste Positionierung für356

Betriebssystem-Icons, Systemzeichensatz für 418bevorzugte Stylesheets 18

Bewegungs-Cursor 424bidirektionaler Text 501Bilder

als Cursor 426als erzeugte Inhalte 402, 405als Hintergrund (siehe Hintergrundbilder)Einfluss von Einrückungen 137für Marker für Listeneinträgen 394, 490in Links, Rahmenstile 241in Tabellenzelle, Zwischenräume 147Innenabstand für 259mit HTML als Floats definieren 300vertikal ausrichten 146–151(siehe auch ersetzte Elemente)

Bildschirm (siehe Monitor; Pixel)Bildschirmleseprogramme, Medientyp für (siehe

aural-Medientyp)blinkender Text 157Block, umgebend (siehe umgebender Block)Block-Boxen

Floats überlappend 315für Floats 304für Listeneinträge 391, 398für positionierte Elemente 321für Tabellen 362für Tabellenüberschriften 371mit display (Eigenschaft) erzwingen 11, 217Run-In-Elemente und 217Seitenumbrüche zwischen 447

Blöcke, @media 435Block-Elemente 10–13, 170

erzeugte Inhalte als 402Grenzen 170horizontale Formatierung von 171–180in Inline-Elemente umwandeln 212vertikale Formatierung von 180–189(siehe auch Inline-Block-Elemente)

Blocksatz-Ausrichtung 141Zwischenräume und 154

body-Elementalink-Attribut 57als umgebender Block für positionierte

Elemente 338als Wurzelelement 321background-Attribut 272Ersetzung von Farbattributen durch color

(Eigenschaft) 264link- und vlink-Attribute 55Vererbung von Hintergrundstilen 72

530 | Index

border (Eigenschaft) 72, 251, 475border-bottom (Eigenschaft) 181, 248–250, 475border-bottom-color (Eigenschaft) 247, 476border-bottom-style (Eigenschaft) 242, 476border-bottom-width (Eigenschaft) 243, 476border-collapse (Eigenschaft) 373, 503border-color (Eigenschaft) 168, 246–248, 266,

477(siehe auch border (Eigenschaft))

border-left (Eigenschaft) 172, 248–250, 477border-left-color (Eigenschaft) 247, 477border-left-style (Eigenschaft) 242, 478border-left-width (Eigenschaft) 243, 478border-right (Eigenschaft) 172, 248–250, 478border-right-color (Eigenschaft) 247, 479border-right-style (Eigenschaft) 242, 479border-right-width (Eigenschaft) 243, 479border-spacing (Eigenschaft) 374, 504border-style (Eigenschaft) 182, 239–243, 480

(siehe auch border (Eigenschaft))border-top (Eigenschaft) 181, 248–250, 480border-top-color (Eigenschaft) 247, 480border-top-style (Eigenschaft) 242, 481border-top-width (Eigenschaft) 243, 481border-width (Eigenschaft) 243–246, 481

(siehe auch border (Eigenschaft))bottom (Eigenschaft) 322–324, 482Boxen

(siehe auch Block-Boxen; Element-Boxen; Inline-Boxen)

Boxen für Tabellenzeilen 360em-Boxen (Geviert) 113Seitenboxen 438, 450Spaltenboxen 361Zeilenboxen 143, 194, 197

ersetzte Inline-Elemente und 207Höhe 196, 203Konstruktion 194Seitenumbrüche und 448

Zellenboxen 361Braille-Medientyp 16Browser

als bildschirmbasierte Benutzerprogramme16

ältere VersionenUnterscheidung zwischen Groß- und

Kleinschreibung bei Klassen- und ID-Selektoren 41

Zugriffsmöglichkeiten 21

Attribut-Selektoren 41, 268Ausdruck von fest verankerten Hinter-

gründen 296background (Eigenschaft) 298Beschneidung 335CSS-Unterstützung XVDehnen und Anpassen von Zeichensätzen

nicht implementiert 124Einrückung von Listeneinträge 399erzeugte Inhalte 401Farben für Formularelemente 268Farbnamen 83fehlende Implementierung von Textschatten

160Fehler in der CSS-Unterstützung XVInhalt »escapen« 405Innenabstand für Bilder 259list-style-type-Standardwerte 396nicht-implementierte-font face-Regeln 133nicht-rechteckige Umrisse 427Platzierung von Floats 309Platzierung von Umrissen 428Positionierung entlang der z-Achse 354Run-In-Elemente 219Textverzierungen 159transparente Rahmen 248Unterstützung für Projektionsmedien 450Vererbung, Unterstützung von 73Voreinstellungen für Pixelgröße 90(siehe auch Benutzerprogramme)

Buchstaben, Abstände zwischen 153, 154, 489(siehe auch content; Glyphen; Text)

ButtonFace-Systemfarbe 420ButtonHighlight-Systemfarbe 421Buttons

Systemfarben für 421Systemzeichensatz für 418

ButtonShadow-Systemfarbe 421ButtonText-Systemfarbe 421

�

caption-side (Eigenschaft) 371, 504CaptionText-Systemfarbe 421Cascading Style Sheets (CSS)

Browserunterstützung für XVeinmalige Merkmale von CSS2 und CSS2.1

(siehe CSS2; CSS2.1)Geschichte 4in diesem Buch behandelte Versionen XV

Index | 531

Merkmale 4–8Zukunft 8(siehe auch Kaskadierungsregeln; Selektoren;

Stilregeln; Stylesheets)cellspacing-Attribut 374center-Element 8, 140class-Attribut 35clear (Eigenschaft) 316–320, 482clip (Eigenschaft) 331–335, 482cm (Zentimeter), Längeneinheiten 88col-Element 363colgroup-Element 363color (Eigenschaft) 263–269, 483

Auswirkung auf Rahmen 266Einfluss auf Formularelemente 267mit background-color (Eigenschaft) kombi-

nieren 271Vererbung und 268

complexspiral distorted-Beispiel 295content (Eigenschaft) 404–409, 483

Anführungszeichen-artige Werte von407–409

Zähler verwendet mit 411–413counter-increment (Eigenschaft) 410, 483counter-reset (Eigenschaft) 410, 484CSS (siehe Cascading Style Sheets)CSS2

@font-face-Regel 133–135@page-Regeln 440Attribut-Selektoren 41, 268clip (Eigenschaft), in Frage kommende

Elemente 483collapse als Wert der Eigenschaft visibility

336Dehnen und Anpassen von Zeichensätzen

124Einheiten für auditive Stilregeln 97font-size-adjust (Eigenschaft) 507font-stretch (Eigenschaft) 507herunterladbare Zeichensätze 99Kontrolle über transparente Rahmen 248links oder rechts positionierte Tabellenüber-

schriften 372marker-offset (Eigenschaft) 189, 400, 508marks (Eigenschaft) 508min-max-Eigenschaften 327Nummerierung von Listeneinträgen 391page (Eigenschaft) 440, 509Rahmenkanten verschieben 323

Referenz-Pixelrate 94Run-In-Elemente 217Seitenbox, Größe 438size (Eigenschaft) 439, 509Skalierungsfaktor 114speak-header (Eigenschaft) 456Spezifität von eingebetteten Stildefinitionen

77Spezifität von Pseudoelemente 66Stildefinitionen für Listen 392Textschatten 160text-shadow (Eigenschaft) 508universeller Selektor 31

CSS2.1als »important« markierte Regeln 70Block- und Inline-Elemente 10dynamische Pseudoklassen 56erzeugte Inhalte 64Farbnamen 82:first-letter (Pseudoelement), Geltungsbereich

von 520Floats

erweitern, um Nachfahren-Floats zu umgeben 311

überlappende Inhalte im normalen Text-fluss 315

Hintergrund, Ausdehnung 239Höhe des Inhaltsbereichs im Verhältnis zum

Zeichensatz 207Inhaltsbereich, Definition 193inherit-Schlüsselwort 97Inline-Block-Elemente 214Kaskadierungsregeln 75list-style-position (Eigenschaft) 396Platzierung von Außenabständen 205Pseudoelemente 61Pseudoklassen für Links 55Pseudoklassen kombinieren 60Rahmenkanten verschieben 323reale Zahlen, Definition 81Referenz-Pixelrate 94Spezifität von eingebetteten Stildefinitionen

77Spezifität von Pseudoelemente 66statische Positionierung 341Stildefinitionen für Listen 392umgebender Block, Regeln zum Bestimmen

168, 321Vorrang von eingebetteten Stildefinitionen 70

532 | Index

Wert progress für die Eigenschaft cursor 425Werte pre-wrap und pre-line für die Eigen-

schaft white-space 163zu stark einschränkende relative Positionie-

rung 358.css-Dateiendung 15cue (Eigenschaft) 466, 510cue-after (Eigenschaft) 465, 510cue-before (Eigenschaft) 465, 510.cur-Dateiendung 426Cursor 422–427, 484

animiert 427Bewegungs-Cursor 424Cursor zur Textauswahl 424drehender Ball 425eigener 426Fadenkreuz-Cursor 424Fortschritts-Cursor 425Hilfe-Cursor 426Stundenglas-Cursor 425über Fensterecken und -kanten 425Uhr-Cursor 425verändern 423–427Warte-Cursor 425Zeigecursor 423

cursor (Eigenschaft) 423–427, 484

�

Dateiendungfür animierte Grafiken 427für grafische Cursor 426für Stylesheets 15

deg (Grad) 97Deklarationen 26, 28, 32–34

(siehe auch Eigenschaften)Deklarationsblock 26, 28Dialogboxen, Systemzeichensatz für 418direction (Eigenschaft) 484display (Eigenschaft) 10, 212–219, 485

Werte für die Darstellungsrolle von Elementen 212–219

Werte für erzeugte Inhalte 402Werte für Listen 393Werte für Tabellen 362–364

Document Type Definition (DTD) 9Dokumente 1

akustische Darstellung von (siehe auditive Stilregeln)

Breite 170

DarstellungCSS-Merkmale für 4HTML-Elemente für 2Kaskadierungsregeln und 79Zentralisierung 5–7

Darstellung als Folienpräsentation (siehe Stil-definitionen für Projektionsmedien)

drucken (siehe Stile für Druckmedien)eingebettete Stildefinitionen in 19–21Hierarchie von Elementen in 46Höhe 170mehrere, Stylesheets einbinden 6, 17mit CSS Dateigröße verringern 8strukturiert, Vorteile 3Stylesheets einbinden 14–19, 20URLs nicht relativ zu 95

Dokument-Stylesheets (siehe eingebettete Stil-definitionen)

Doppelkreuz (#)in hexadezimaler Farbnotation 86in ID-Selektoren 39

Doppelpunkt (:)in Selektoren für Pseudoklassen oder Pseudo-

elemente 54zwischen Eigenschaft und Wert 28

doppelte Anführungszeichen (")in erzeugtem Inhalt 407–409, 498in font-family Deklaration 105

doppelter vertikaler Balken (||), in Eigenschaf-tensyntax XVII

drehender Ball, Cursor 425Drucker, Telex, Medientyp für 16DTD (siehe Document Type Definition)durchgestrichener Text 156, 159Durchschuss 142, 143dynamische Pseudoklassen 56–58

�

eckige Klammern ([])in Attribut-Selektoren 41in Eigenschaftensyntax XVII

Eigenschaften 26, 28Farben als Werte von 82–88Frequenzen als Werte von 98Längeneinheiten für Werte von 88–94Prozentwerte als Werte von 81Schlüsselwörter als Werte von 96syntaktische Konventionen in diesem Buch

XVII

Index | 533

URLs als Werte von 95Werte von 26, 28Winkel als Werte von 97Zahlen als Werte von 81Zeit als Wert von 98(siehe auch Stilregeln; die einzelnen Eigen-

schaften)Eigenschaftswert 26, 28

Farben als 82–88Frequenzen als 98Längeneinheiten für 88–94Prozentwerte als 81Schlüsselwörter als 96URLs als 95Winkel als 97Zahlen als 81Zeit als 98

einfache Anführungszeichen (')in erzeugtem Inhalt 407–409, 498in font-family-Deklaration 104

einfache Attribut-Selektoren 41, 518eingebettete Stildefinitionen 19–21, 23, 69, 77Einheiten

für auditive Stilregeln 97für Längenangaben 88–94

Element-Boxen 9, 167, 221Außenabstände von 172–179, 181–189, 491,

492Breite 171–180, 325–329, 493, 494, 502für nicht-ersetzte Inline-Elemente 196Höhe 180, 181–189, 325–329, 493in einer Textzeile (siehe Inline-Elemente)Innenabstand von 178, 496Typ festlegen 212, 485Überlappen von 222Umbrüche vor und nach (siehe Block-

Elemente)Umrisse von 494, 495(siehe auch Rahmen; Umrisse)

Elemente 9–13aktiviert, Pseudoklasse für 57, 519als Float definieren (siehe Floats)beständig, feste Positionierung für 356Block-Elemente (siehe Block-Elemente) 10Breite 170, 222–224Darstellung in HTML 2DTD, Angabe von 9Einfügen von Inhalt vor und nach, Pseudo-

elemente für 63Elternelemente 47

ersetzte Elemente 170erste Zeile in, Pseudoelement für 62, 63, 521erster Buchstabe in, Pseudoelement für 61,

63, 520Flussrichtung 501fokussiert, Pseudoklasse für 521Geschwister 51Hierarchie 46Hintergrund von (siehe Hintergrund; Hinter-

grundbilder)Höhe 170, 222–224, 488, 493Inline (siehe Inline-Elemente)Inline-Block-Elemente 214–217Kindelemente 47, 59, 520mit Eingabefokus, Pseudoklasse für 57Nachfahren 48nicht-ersetzte Elemente 9, 169Run-In-Elemente 217–219Sichtbarkeit 335, 501statische Positionierung 341Textfluss und 169Textrichtung und 484über denen sich der Mauszeiger befindet,

Pseudoklasse für 57, 521Überschneidungen 234umgebender Block 168Umwandlung zwischen Inline- und Block-

Elementen 212verworfen in XHTML 8Vordergrund 262Vordergrundfarben 263–269, 483Vorfahren 48Wurzelelement 170(siehe auch die einzelnen Elemente und Tags)

Elementselektoren 27, 66, 516elevation (Eigenschaft) 470, 510Elternelemente 47em (em-Höhe), Längeneinheiten 91–93, 94em-Box (siehe Geviert)Emacspeak 98, 454embossed-Medientyp 16empty-cells (Eigenschaft) 375, 504ersetzte Elemente 170

absolute Positionierung 346–348Grundlinien und 209–212horizontale Formatierung 179Inline

Außenabstände für 237Formatierung 206–212

Innenabstand für 259

534 | Index

erzeugte Inhalte 401Anführungszeichen als 407–409Attributwerte als 405–407Definition als Floats verboten für 402Inhalt festlegen für 404–409, 483Platzierung festlegen für 401–404Positionierung verboten für 402Pseudoelemente für 64Rahmen und 402Sprechpausen und akustische Signale

verwenden mit 466URIs als Wert von 405Vererbung und 403Zähler für geordnete Listen 409–416Zeichenketten als Wert von 404

ex (x-Höhe), Längeneinheiten 91–93, 94Extensible Markup Language (siehe XML)externe Stylesheets 15, 20

�

Fadenkreuz-Cursor 424fantasy-Zeichensätze 101Farben

Designaspekte bei 261Ersetzen von body-Attributen für 264Hintergrund 269–272Rahmen 168Stile für Projektionsmedien 454Systemfarben 420–422Umrisse 429, 431–433, 494Vererbung und 268von Text-Ausschmückungen 158, 160Vordergrund 263–269, 483websichere Farben 87

Farbumkehrung für Umrisse 430, 432Farbwerte 82–88

benannte Farben 82, 87RGB-Farben 83–88Tabelle der Entsprechungen 87

FehlerAbstand zwischen Rahmen und Innen-

abstand in Navigator 4 253Behandlung in diesem Buch XVBehandlung von multiplen Klassenselektoren

in Internet Explorer 38falsche Behandlung von fest positionierten

Hintergründen bei Nicht-body-Elementen 295

falsche Behandlung von Höhe und Breite in Internet Explorer 224

keine Vererbung von Stildefinitionen in Tabellen 73

Standard-Schriftgröße in Internet Explorer114

Fernsehen, Medientyp für 16Festbreiten-Zeichensätze 101feste Positionierung 321, 354–356:first (Pseudoklasse) 441:first-child (Pseudoklasse) 59, 520:first-letter (Pseudoelement) 61, 63, 520:first-line (Pseudoelement) 62, 63, 521float (Eigenschaft) 301, 485Floats 300–303

Anordnung 301, 485Außenabstände von 301Breite 329breiter als Elternelement 314erweitern, um Nachfahren-Floats zu

umgeben 311erzeugte Block-Boxen für 304erzeugte Inhalte verboten als 402Hintergrund und 312Höhe 329höher als Elternelement 310–311negative Außenabstände und 312nicht-ersetzte Elemente 302Platzierung außerhalb von Elternelement 312Platzierung in der Nähe bestimmter Elemente

verhindern 316–320, 482Platzierungsregeln für 304–309sich gegenseitig überschneidend 305sich gegenseitig überschreibend 304umgebende Blöcke und 303unterbinden 303von Block-Boxen überlappt 315von Inline-Boxen überlappt 315vorhergehenden Inhalt überschreibend 314

:focus (Pseudoklasse) 57, 521Folienpräsentation, Stylesheets für (siehe Stile

für Projektionsmedien)Fonix SpeakThis 454font (Eigenschaft) 127–130, 486

Schrägstrich (/) zum Trennen von Schlüssel-wörtern 29

Systemzeichensätze, festlegen 130, 418weggelassene Werte, Verhalten 129

Index | 535

Font-Download-Methode, @font-face-Regel134

font-Element 8@font-face-Regel 133–135font-family (Eigenschaft) 101–105, 486

allgemeine Schriftenfamilien festlegen mit101, 103

alternative Schriftenfamilien festlegen mit103

Anführungszeichen in 104bestimmte Schriftfamilie festlegen mit 103mehrere Schriftenfamilien festlegen mit 104(siehe auch font (Eigenschaft))

font-size (Eigenschaft) 112–120, 486für nicht-ersetzte Inline-Elemente 196Längeneinheiten für 119–120Prozentwerte für 116Schlüsselwörter für absolute Größen 113Schlüsselwörter für relative Größen 115Schriftenvergleich und 132Skalierungsfaktor verwenden mit 114(siehe auch font (Eigenschaft))

font-size-adjust (Eigenschaft) 125, 507font-stretch (Eigenschaft) 124, 507font-style (Eigenschaft) 120–123, 133, 487

(siehe auch font (Eigenschaft))font-variant (Eigenschaft) 123, 132, 487

(siehe auch font (Eigenschaft))font-weight (Eigenschaft) 105–112, 487

bold-Schlüsselwort, Umsetzung 108bolder-Schlüsselwort, Umsetzung 109–111lighter-Schlüsselwort, Umsetzung 111normal-Schlüsselwort, Umsetzung 108numerische Werte, Umsetzung 106Schriftenvergleich und 132(siehe auch font (Eigenschaft))

Formulareingaben, vertikal ausrichten 146–151Formularelemente

Attribut-Selektoren für 268Farbe 267Innenabstand für 259(siehe auch ersetzte Elemente)

fortlaufendes Medium 436Fortschritts-Cursor 425Fragezeichen (?)

Cursor 426in Eigenschaftensyntax XVII

Frames, feste Positionierung als Ersatz für 354Frequenzwerte 98

funktionale RGB-Notation 84–86Fußzeilen, Tabelle 363

�

geschweifte Klammern ({}) in Eigenschaften-syntax XVIII

Geschwister von Elementen 51Geviert 113Gewichtung von Stilregeln 75Gitterzellen 360, 361Glyphen, Inhaltsbereich und 207

(siehe auch Zeichensätze)grad (Gradienten) 97GrayText-Systemfarbe 421Groß- und Kleinschreibung 155

von class und ID-Selektoren 41von Text 155, 500

Größer-als-Zeichen (>) in Kindselektoren 51Grundlinien

Elemente ausrichten anhand von 147, 150ersetzte Elemente und 209–212Zeilenhöhe und 203

�

handheld-Medientyp 16hängende Einrückungen 137Hash-Zeichen (siehe Doppelkreuz)height (Eigenschaft) 180, 181–189, 222–224,

488positionierte Elemente und 325Prozentwerte für 182Tabellen und 386Wert automatisch ermitteln ("auto") 181, 183(siehe auch max-height (Eigenschaft);

min-height (Eigenschaft))Hertz (Hz) 98hexadezimale Farbnotation 86Highlight-Systemfarbe 421HighlightText-Systemfarbe 421Hilfe-Cursor 426Hintergrund 269

Ausdehnung in Innenabstand 224, 254, 269Ausdehnung in Rahmen 238, 239, 269Design-Aspekte 276–277Farben für 264, 269–272, 296–299, 474Floats und 312für leere Tabellenzellen 375für Spalten und Spaltengruppen 365

536 | Index

Stile für Druckmedien ohne 437überlappend, für nicht-ersetzte Inline-

Elemente 207von Inhaltsbereich 168

Hintergrundbilder 272–277, 296–299, 474angeben 273–275in sichtbaren Bereich einbinden 291–296,

473Kacheln 272, 273, 277–280, 290, 475Positionierung 280–289, 474Scrollen 293Scrollen verhindern 291–296Spezialeffekte mit 294Ursprungsbild 281Vererbung und 275

Hintergrundklänge 466, 512Hochformat 439horizontale Ausrichtung

von Text 139–142von Zelleninhalt in Tabellen 387

horizontale Formatierung von Block-Elementen171–180

:hover (Pseudoklasse) 57, 521href-Attribut, Link-Tag 16HTML

Beispiel-Stylesheet für 523Elemente für Darstellung 2Elementselektoren für 27Geschichte 1–4mit CSS Dateigröße verringern 8strukturelle Elemente 3verworfene Elemente 8XML als Ersatz für 8Zukunft 8(siehe auch die einzelnen Elemente und Tags)

html-Element 170als Wurzelelement 48, 321Vererbung von Hintergrundstilen 72

Hyperlinks (siehe Links)Hypertext Markup Language (siehe HTML)Hz (Hertz) 98

�

»I-Balken«-Icon (siehe Cursor, Cursor zur Text-auswahl)

Iconsin diesem Buch verwendete XVISystemzeichensatz für 130, 418

id-Attribut 39ID-Selektoren 39–41, 518

Attribut-Selektoren als Ersatz für 41, 44, 69Einmaligkeit von 40Groß- und Kleinschreibung von 41kombinieren mit Pseudoklassen 56Spezifität von 66, 69Sprachen mit Unterstützung für 40, 41

»Images, Tables, und Mysterious Gaps«-Artikel147, 210

img-Element, align-Attribut 300@import-Direktive 20, 23, 435!important-Deklaration 75in (Inches), Längeneinheiten 88InactiveBorder-Systemfarbe 421InactiveCaption-Systemfarbe 421InactiveCaptionText-Systemfarbe 421Inches (in), Längeneinheiten 88InfoBackground-Systemfarbe 421InfoText-Systemfarbe 421Inhalte vorlesen (siehe auditive Stilregeln)Inhaltsbereich 142, 167

Außenabstände von 172–179Beschneiden 331–335, 482Breite 171–180, 325–329, 502für nicht-ersetzte Inline-Elemente 196Glyphen und 207Hintergrund von 168Höhe 180, 181–189, 325–329, 488Überfließen 495überlaufen 329–335(siehe auch erzeugte Inhalte; Seitenbereich;

Text)Inhaltskante 169inherit-Schlüsselwort 97Inline-Block-Elemente 214–217

(siehe auch Run-In-Elemente)Inline-Boxen 142, 193

Floats überlappend 315für inline-level-Tabellen 362mit display-Eigenschaft erzwingen 11, 217

Inline-Elemente 10–13, 170Außenabstände für 205, 236–237Einfluss auf Abstand von Textzeilen 211ersetzt, Formatierung 206–212erzeugte Inhalte als 402Geschichte der Formatierung von 211in Block-Elemente umwandeln 212

Index | 537

Innenabstand für 205, 258nicht-ersetzt

Formatierung 196–206Höhe und Breite 222

Rahmen für 204, 252Tabellen als 362überlappende Hintergründe von 207vertikal ausrichten 501Zeilenhöhe 195(siehe auch Inline-Block-Elemente)

Innenabstand 167, 253–258, 496Ausdehnung von Hintergrund in 224, 254,

269für einzelne Seite festlegen 257für ersetzte Elemente 259für ersetzte Inline-Elemente 208für Inline-Elemente 205, 258für jede Seite einzeln angeben 496, 497Hintergrund von 168Inline-Elemente einrücken mit 137negative Einrückung und 138Positionierung und 323transparente Rahmen als 248von Element-Boxen 178

Integer 81intelligenter Schriftenvergleich, @font-face-

Regel 134interne Tabellenelemente

ohne Außenabstände 360Positionierung 361

Internet Explorerempty-cells (Eigenschaft) 376Erweiterung des Inhaltsbereichs zum

Umgeben von Markern für Listen-einträgen 399

erzeugte Inhalte nicht unterstützt 401fehlende Unterstützung für Attribut-Selektor

41fehlende Unterstützung für feste Positionie-

rung 356fehlende Unterstützung für Kindselektoren

53fehlende Unterstützung für kombinierte

Pseudoklassen 61fehlende Unterstützung für min-max-Eigen-

schaften 327fehlende Unterstützung für Selektoren für

benachbarte Geschwisterelemente53

fehlende Unterstützung für Zuweisung von tabellenbezogenen display-Werten an HTML-Elemente 364

fest positionierte Hintergründen bei nicht-body-Elementen 295

:first-child (Pseudoklasse) nicht unterstützt60

Implementierung von Höhe und Breite 224multiple Klassenselektoren und 38Platzierung von @import-Direktive und 21Standard-Schriftgröße 114Unterstützung für dynamische Pseudoklassen

58Interpunktion, vorlesen 455, 514

�

JavaScriptfür feste Positionierung 356Unterstützung für min-max-Eigenschaften

327

�

Kacheln von Hintergrundbildern 272, 273, 277–280, 290, 475

Kapitälchen, als Schriftvariante 123, 487Kaskadierungsregeln 7, 74–79Kindelemente 47, 59, 520Kindselektoren 50, 517Klänge (siehe auditive Stilregeln)Klassenselektoren 35–39, 517

Attribut-Selektoren als Ersatz für 41, 45Groß- und Kleinschreibung von 41mehrfach 37–39mit Pseudoklassen kombinieren 56Spezifitätswert von 66Sprachen mit Unterstützung für 40, 41wann verwenden 39–41

klein geschriebener Text 155Kombinator

in Kindselektoren 51in Nachfahren-Selektoren 49in Selektoren für benachbarte Geschwister-

elemente 51Spezifitätswert von 66

Komma (,)in Eigenschaftensyntax XVIIin Selektoren 30

Kommentare 22

538 | Index

Kontext-Selektoren (siehe Nachfahren-Selek-toren)

Kontrollemente, mit kleinen Überschriften, Systemzeichensatz für 418

Kopfzeilen, Tabelle 363, 456kursive Zeichensätze 101kursiver Text

als Stildefinition für Zeichensätze 121Verwendung in diesem Buch XVI

�

:lang (Pseudoklasse) 60, 522Längeneinheiten 88–94

absolute Längeneinheiten 88–90relative Längeneinheiten 91–94

lebende Titel 449:left (Pseudoklasse) 441left (Eigenschaft) 322–324, 340, 488Leser (Benutzer) als Quelle von Deklarationen

75letter-spacing (Eigenschaft) 153, 154, 489line-height (Eigenschaft) 142–146, 489

für den gesamten Absatz 202für ersetzte Inline-Elemente 207, 208für Inline-Elemente 195, 196, 198, 201Grundlinien und 203mit Hilfe von font-Eigenschaft festlegen 128Skalierungsfaktor für 203–204

:link (Pseudoklasse) 50, 55, 264, 522link-Attribut, body-Element 55, 264Links

besucht, Pseudoklasse für 54, 522Bilder in, Rahmenstile 241Darstellung als Block-Elemente 213Einfügen von Icons am Ende 402erzeugte Inhalte voranstellen 401Höhe und Breite 222horizontal mit gleichem Abstand darstellen

217Pseudoklassen für 55Rahmen nur im »hover«-Zustand sichtbar

248unbesucht, Pseudoklasse für 54, 522Unterstreichung verhindern 157Zeige-Cursor 423

link-Tag 14–19Listen 391–394

Arten 397Darstellung 398–400

Einrückung von Listeneinträgen 399Formatierung von Listeneinträgen 189Marker für Listeneinträge 392

als erzeugte Inhalte 401Arten 392–394, 397, 489, 490Bilder als 394, 397, 489, 490Positionierung 396, 397, 398, 400, 489,

490Vererbung und 394, 395

Zähler für geordnete Listen 409–416list-style (Eigenschaft) 397, 489list-style-image (Eigenschaft) 394, 490list-style-position (Eigenschaft) 190, 396, 490list-style-type (Eigenschaft) 392–394, 490

�

margin (Eigenschaft) 226, 491Breitenangaben für 227negative Werte für 233Prozentwerte für 228–231Werte wiederholen 231

margin-bottom (Eigenschaft) 181–189, 491Außenabstände zusammenfassen mit

184–189negative Werte für 187–189, 233Wert automatisch ermitteln ("auto") 181(siehe auch margin (Eigenschaft))

margin-bottom (Eigenschaft) 232margin-left (Eigenschaft) 172–179, 232, 492

negative Werte für 176–178, 233Prozentwerte für 178Wert automatisch ermitteln ("auto")

172–176(siehe auch margin (Eigenschaft))

margin-right (Eigenschaft) 172–179, 232, 492negative Werte für 176–178, 233Prozentwerte für 178Wert automatisch ermitteln ("auto")

172–176(siehe auch margin (Eigenschaft))

margin-top (Eigenschaft) 181–189, 232, 492Außenabstände zusammenfassen mit

184–189negative Werte für 187–189, 233Wert automatisch ermitteln ("auto") 181(siehe auch margin (Eigenschaft))

::marker (Pseudoelement) 400

Index | 539

Marker für Listeneinträge 392als erzeugte Inhalte 401Arten 392–394, 397, 489, 490Bilder als 394, 397, 489, 490Formatierung 189Positionierung 396, 397, 398, 400, 489, 490Vererbung und 394, 395

marker-offset (Eigenschaft) 189, 400marks (Eigenschaft) 508max-height (Eigenschaft) 327–329, 493max-width (Eigenschaft) 327–329, 493@media-Blöcke 435media-Attribut, link-Tag 16, 434medienspezifische Stylesheets

@media-Blöcke in 435basierend auf bestimmten Ausgabegeräten,

fehlende Unterstützung 437Einschränkungen bei @import 435festlegen 434(siehe auch auditive Stilregeln; Stile für

Druckmedien; Stile für Projektions-medien)

Megahertz (mHz) 98Menu-Systemfarbe 421Menu-Systemzeichensatz 130, 418MenuText-Systemfarbe 421message-box-Systemzeichensatz 130, 418Methode zum Vergleich von Zeichensatznamen,

@font-face-Regel 134Methode zur Fontsynthese, @font-face-Regel

134mHz (Megahertz) 98Microsoft Internet Explorer (siehe Internet

Explorer)Millimeter (mm), Längeneinheiten 88Millisekunden (ms) 98min-height (Eigenschaft) 327–329, 493min-width (Eigenschaft) 327–329, 494mm (Millimeter), Längeneinheiten 88Mobiltelefone, Web-fähig, Medientyp für 16Möglichkeiten der Stildefinitionen von CSS 4Mondrian-Effekt 234Monitor

Dimensionen in Pixeln 89Medientyp für 16

ms (Millisekunden) 98

�

Nachfahren von Elementen 48(siehe auch Vererbung)

Nachfahren-Selektoren 48–50, 51, 516Navigator 4

Abstand zwischen Rahmen und Innen-abstand 253

Farben für Formularelemente 268Farbersetzungen 264URLs relativ zum Dokument, nicht zum

Stylesheet 96Netscape Navigator (siehe Navigator 4)Newline-Zeichen, in erzeugtem Inhalt 405nicht-ersetzte Elemente 9, 169

absolute Positionierung von 342–346Floats 302Inline

Außenabstände für 236Formatierung 196–206Höhe und Breite 222Innenabstand für 258

none-Schlüsselwort 96normaler Textfluss 169

�

orphans (Eigenschaft) 445–447, 448, 505outline (Eigenschaft) 431–433, 494outline-color (Eigenschaft) 429, 494

(siehe auch outline (Eigenschaft))outline-style (Eigenschaft) 428, 495

(siehe auch outline (Eigenschaft))outline-width (Eigenschaft) 429, 495

(siehe auch outline (Eigenschaft))overflow (Eigenschaft) 329–331, 495

�

padding (Eigenschaft) 253–257, 496Padding (siehe Innenabstand)padding-bottom (Eigenschaft) 181, 257, 496padding-left (Eigenschaft) 172, 178, 257, 496padding-right (Eigenschaft) 172, 178, 257, 497padding-top (Eigenschaft) 181, 257, 497@page-Regel

Seitengröße und -ränder einstellen 438Seitentypen einstellen 440

page (Eigenschaft) 440, 509page-break-after (Eigenschaft) 442–445, 447,

451, 505

540 | Index

page-break-before (Eigenschaft) 442–445, 447, 451, 506

page-break-inside (Eigenschaft) 445, 447, 448, 506

Passermarken (»cross marks«) 508pause (Eigenschaft) 464, 511pause-after (Eigenschaft) 464, 511pause-before (Eigenschaft) 464, 511Pausen in der Sprachausgabe 464pc (Picas), Längeneinheiten 89PDAs, Medientyp für 16persistente Stylesheets 19Personal Digital Assistants, Medientyp für 16Picas (pc), Längeneinheiten 89pitch (Eigenschaft) 461, 512pitch-range (Eigenschaft) 462, 512Pixel 83

absolute Längenangaben und 89als relative Längeneinheit 91Länge 93Monitorgröße in 89

play-during (Eigenschaft) 466, 512Pluszeichen (+)

in Eigenschaftensyntax XVIIin Selektoren für benachbarte Geschwister-

elemente 52(siehe auch Fadenkreuz-Cursor)

Polsterung (siehe Innenabstand)position (Eigenschaft) 320–322, 498Positionierung 300, 320–324, 498

absolut 321, 336–342Abstands-Eigenschaften für 322–324, 482,

488, 498, 500außerhalb von umgebendem Block 322, 324Breite von positioniertem Element 325–329erzeugte Inhalte ausgenommen von 402fest 321, 354–356Höhe von positioniertem Element 325–329Inhalt beschneiden durch 331–335, 482Platzierung auf der z-Achse 349–354, 503relativ 321, 356–358Sichtbarkeit von Elementen und 335statisch 320überlaufender Inhalt mit 329–335umgebende Blöcke im Verhältnis zu 321,

336–339von Hintergrundbildern 280–289

von internen Tabellenelementen 361von Marker für Listeneinträge 396, 397, 398,

400, 489, 490Präsentationselemente

CSS-Merkmale für 4Kaskadierungsregeln für 79verworfen in XHTML 8Zentralisierung 5–7(siehe auch Stylesheets)

print-Medientyp 16projection-Medientyp 16proportionale Zeichensätze 100Prozentwerte 81Pseudoelemente

für erste Zeile eines Elements 62, 63, 521für ersten Buchstaben eines Elements 61, 63,

520Platzierung 63Spezifitätswert 66zum Einfügen von Text vor und nach

Elementen 63, 401–404, 519, 520Pseudoelementselektoren 61–64Pseudoklassen

dynamisch, als Ergebnis des Benutzerverhal-tens 56–58

für aktivierte Elemente 57, 264, 519für die erste Seite im Dokument 441für Element mit Eingabefokus 57für Element, über dem sich der Mauszeiger

befindet (»hover«) 57, 521für erstes Kindelement 59, 520für fokussiertes Element 521für Links 55, 264, 522für Sprachen 60, 522in einem Selektor kombinieren 60Notwendigkeit erneuter Darstellung des

Dokuments 58Reihenfolge, in Selektor 57Spezifitätswert von 66

Pseudoklasse-Selektoren 54–61pt (Punkte), Längeneinheiten 89Punkt (.) in Klassenselektoren 35Punkte (pt), Längeneinheiten 89px (Pixel), Längeneinheiten 91, 93, 94

�

Querformat von Druckpapier (»landscape«) 439quotes (Eigenschaft) 407–409, 498

Index | 541

�

rad (Bogenmaß) 97Rahmen 168, 221, 238

als Vordergrund von Elementen 262Ausdehnung von Hintergrund in 238, 239,

269Breite 238

festlegen 243–246, 248–250, 481für jede Seite einzeln angeben 243, 476,

478, 479, 481Existenz ermöglichen 239, 245Farbe

Auswirkungen von color-Eigenschaft 266festlegen 246–250, 477für jede Seite einzeln angeben 476, 477,

479, 480Standard 168, 239, 241

für ersetzte Inline-Elemente 208für Inline-Elemente 204, 252für leere Tabellenzellen 375für Spalten und Spaltengruppen 365für Tabellenzellen

Abstände zwischen 374, 504getrennt 372, 373–376zusammengefasst 373, 376–380, 503

Innenabstand und 254Positionierung und 323Rahmenstil 238

festlegen 239–243, 248–250, 480für jede Seite einzeln angeben 241, 476,

478, 479, 481Seiten

einzeln angeben 248–250, 475, 477, 478, 480

gemeinsam festlegen 251transparent 248verstecken 239(siehe auch Umrisse)

Randbereich für Seitenboxen 438reale Zahlen 81Regeln (siehe Stildefinitionen)Regeln überschreiben (siehe Kaskadierungs-

regeln)Reihenfolge von Stildefinitionen 75, 77rel-Attribut, link-Tag 15, 17relative Längeneinheiten 91–94relative Positionierung 321, 356–358relative URL 95

RGB-Farben 83–88richness (Eigenschaft) 463, 513Richtung von Textfluss (siehe Textrichtung):right (Pseudoklasse) 441right (Eigenschaft) 322–324, 340, 498Run-In-Elemente 217–219

(siehe auch Inline-Block-Elemente)

�

s-Element 8s (Sekunden) 98Schlüsselwort-Werte 28, 96schräger Text, als Stildefinition für Zeichensätze

121Schrägstrich (/)

in Eigenschaftensyntax XVII, 29zwischen Werten für Schriftgröße und Zeilen-

höhe 129Schriftenfamilien 100–105

allgemein 100–102Fantasieschriften 101Festbreite 101festlegen 101–102, 486kursive Zeichensätze 101serifenlose Zeichensätze 101Zeichensätze mit Serifen 100

Schriftgröße 112–120basierend auf Ansichtsverhältnis anpassen

125, 507festlegen 486für Druckausgabe 437für nicht-ersetzte Inline-Elemente 196mit Hilfe von Geviert ermitteln 113Schriftenvergleich und 132Vererbung und 117

screen-Medientyp 16Scrollbar-Systemfarbe 422Scrollen

absolute Positionierung und 339von Hintergründen 291–296

seitenbasierte Medien 436(siehe auch Stile für Druckmedien; Stile für

Projektionsmedien)Seitenbereich 438Seitenboxen 438, 450Seitenumbrüche 442–449, 505, 506Sekunden (s) 98Selektoren 26

542 | Index

Attribut-Selektoren 41–46, 268, 518, 519Elementselektoren 27, 516für benachbarte Geschwisterelemente 51–53,

517Gruppierung 30–32, 33ID-Selektoren 39–41, 518Kindselektoren 50, 517Klassenselektoren 35–39, 39–41, 517Nachfahren-Selektoren 48–50, 516Pseudoelementselektoren 61–64Pseudoklasse-Selektoren 54–61Spezifität von 65–70universeller Selektor 31, 516(siehe auch Stildefinitionen)

Semikolon (;) nach Deklarationen 28, 32Serifen 101serifenlose Zeichensätze 101Sichtbarkeit von Elementen 335, 501Silbentrennung

Groß- und Kleinschreibung 155Text im Blocksatz und 141

size (Eigenschaft) 439, 506, 509Skalierungsfaktor

für Schriftgrößen 114für Zeilenhöhe 145

small-caption-Systemzeichensatz 130, 418Spalten, Tabelle

aus Tabellenzeilen abgeleitet 364Breite 365Ebene für 370festlegen 363Hintergrund für 365Rahmen für 365Sichtbarkeit von 365

Spalten, Text, Stile für Druckmedien 438Spaltenboxen 361Spaltengruppen

Breite 365Ebene für 370festlegen 363Hintergrund für 365Rahmen für 365Sichtbarkeit von 365

speak (Eigenschaft) 454, 513speak-header (Eigenschaft) 456, 513speak-numeral (Eigenschaft) 456, 514speak-punctuation (Eigenschaft) 455, 514speech-Medientyp 454speech-rate (Eigenschaft) 457, 514

spezielle Attribut-Selektoren 45Spezifität 65–70

berechnen 66Kaskadierungsregel für 75, 76Konflikte auflösen (siehe Kaskadierungs-

regeln)vom universellen Selektor 66, 74von »wichtigen« Regeln 70von Attribut-Selektoren 66, 69von eingebetteten Stildefinitionen 69von Elementselektoren 66von geerbten Werten 73von gruppierten Selektoren 67von ID-Selektoren 66, 69von Klassenselektoren 66von Kombinator 66von multiplen Regeln 67von Präsentationselementen, die kein CSS

sind 79von Pseudoelementen 66von Pseudoklassen 66

Spezifität von Präsentationselementen, die kein CSS sind 79

spitze Klammern (<>) in EigenschaftensyntaxXVII

SprachenAttribut-Selektoren 519Pseudoklasse für 60, 522

Sprachsynthesizer, Medientyp für (siehe aural-Medientyp)

Sprechlautstärke 458, 515Sprechpausen 466, 511Stapelkontext, für absolute Positionierung 351statische Elementposition 341statische Positionierung 320, 321Statuszeilen, Systemzeichensatz für 131, 418Stildefinitionen 21, 25–30

auditiv (siehe auditive Stildefinitionen)eingebettet 23, 77Gewichtung 75multiple, Spezifität von 67Reihenfolge, in Kaskadierungsregeln 75, 77seitenbasiert (siehe Stile für Druckmedien;

Stile für Projektionsmedien)Teile von 26Ursprung 75wichtige Regeln 70, 75(siehe auch Eigenschaften; Selektoren)

Stile (siehe Stildefinitionen)

Index | 543

Stile für Druckmedien 436Behandlung von "Waisen" 445–447Behandlung von "Witwen" 445–447Elemente außerhalb der Seite, Behandlung

450festlegen 436–438Medientyp angeben für 16mehrere Seitentypen für 440, 509Passermarken (»cross marks«) für 508Seitenausrichtung 439Seitengröße 438, 506, 509Seitenumbrüche in 442–449, 505, 506wiederholte Elemente 449

Stile für Projektionsmedien 450Auflösung 453Designaspekte 453Farben für 454Medientyp angeben für 16Positionierung von Elementen in 452Seitenumbrüche für Aufteilung in einzelne

Folien 451Stimme für Sprachausgabe 460–463, 512, 513,

514stress (Eigenschaft) 462, 514strike-Element 8strukturierte Dokumente 3Stundenglas-Cursor 425style-Attribut 23, 77style-Element 19–21, 22Stylesheets

alternative Stylesheets 17Beispiel 523benutzerdefinierte Stylesheets 7bevorzugte Stylesheets 18Dateiendung für 15externe Stylesheets 15, 20in Dokument einbetten 19–21in Dokumente einbinden 14–19, 20in mehrere Dokumente einbinden 6Kommentare in 22medienabhängig 16mehrere, in Dokument einbinden 17persistente Stylesheets 19URLs relativ zu 95

Subskript 147Superskript 147syntaktische Konventionen in diesem Buch XVIISystemfarben 420–422Systemzeichensätze 130, 417–419

�

Tabellen 359als Block-Element 362als Inline-Element 362anonyme Tabellenobjekte 366–369automatisches Layout für 383–386, 505Breite 381–386Ebenen 370Elemente festlegen für 362–364fehlende Bestandteile 366–369Festbreiten-Modell für 381–383, 505Fußzeilen für 363Gitterzellen für 360Höhe 386Kopfzeilen für 363Kopfzeilen, vorlesen 456, 513Regeln für die Anordnung 360–361Überschriften für 363, 371, 504versteckte Rahmen und 239zeilenbasiertes Modell für 364(siehe auch Zellen; Spalten, Tabelle; Tabel-

lenzeilen)Tabellen-Fußzeilen (siehe Fußzeilen, Tabelle)Tabellen-Kopfzeilen (siehe Kopfzeilen, Tabelle)Tabellenspalten (siehe Spalten, Tabelle)Tabellenüberschriften (siehe Überschriften für

Tabellen)Tabellenzeilen

Boxen 360Ebene für 370explizit deklariert 364festlegen 362

Tabellenzeilen-GruppenEbene für 370festlegen 362

table-Element 362Ebene für 370interne Tabellenelemente 360

table-layout (Eigenschaft) 381, 505tags (siehe Elemente; die einzelnen Elemente und

Tags)tbody-Element 362td-Element 363Telexdrucker, Medientyp für 16Text

als Blocksatz definieren 141blinkend 157, 499Buchstabenabstände 153, 154

544 | Index

durchgestrichen 156, 159, 499Durchschuss 142einrücken 136–139, 499Farbe 158, 160Groß- und Kleinschreibung 155, 500horizontal ausrichten 139–142, 499Inhaltsbereich von 142Inline-Box für 142Leerzeichen zwischen Wörtern und Zeilen

162–164Schatten für 160, 508Silbentrennung von 141überstrichen 156, 159, 499umbrechen 163unterstrichen 156, 159, 499vertikal ausrichten 142, 146–151, 501Wagenrücklauf-Zeichen in 162Wortabstände 152, 154, 502Zeilenhöhe 142–146Zeilenumbrüche in 162zentrieren 140, 175(siehe auch Zeichensätze)

Text einrücken 136–139Text umbrechen 163Text zentrieren 140, 175text-align (Eigenschaft) 139–142, 499

Abstände und 154für Tabellenüberschriften 372für Zelleninhalt 387im Vergleich mit margin-left und margin-right

175text-Attribut, body-Element, ersetzen durch

color-Eigenschaft 264text-bottom-Ausrichtung 148text-decoration (Eigenschaft) 156–160, 499Textfluss

bidirektional 501normal 169

Textfluss, Umrisse nicht Teil von 432text-indent (Eigenschaft) 136–139, 499Textrichtung, festlegen 484Textschatten 160text-shadow (Eigenschaft) 160, 508text-top-Ausrichtung 149text-transform (Eigenschaft) 155, 500Textzeilen

Anlage von 142Beeinflussung durch Inline-Elemente 211Höhe 128, 142–146, 252, 489

tfoot-Element 363th-Element 363thead-Element 363ThreeDDarkShadow-Systemfarbe 422ThreeDFace-Systemfarbe 422ThreeDHighlight-Systemfarbe 422ThreeDLightShadow-Systemfarbe 422ThreeDShadow-Systemfarbe 422Tilde (~) in Attribut-Selektoren 45title-Attribut

Attributselektoren verwenden mit 42link-Tag 17

Tooltip, Attributselektoren verwenden mit 42top (Eigenschaft) 322–324, 340, 500tr-Element 362transparente Rahmen 248tty-Medientyp 16tv-Medientyp 16type-Attribut, link-Tag 15Typselektoren (siehe Elementselektoren)

�

u-Element 8Überschriften für Tabellen 371

festlegen 363Platzierung von 371, 504

Überschriften-Kontrollelemente, Systemzeichen-satz für 418

Überschriften-Systemzeichensatz 130, 418überstrichener Text 156, 159Uhr-Cursor 425Umbrüche

erzeugt von Block-Elementen 10Seitenumbrüche 442–449, 505, 506

umgebender Block 168absolute Positionierung und 336–339Höhe, Einfluss auf Positionierung 324Positionierung und 321von Floats 303

Umrisse 427–433, 494Breite 429, 431–433, 495Farbe 429, 431–433, 494Stil 428, 431–433, 495Überlappungen 432von anderen Elementen verdeckt 432(siehe auch Rahmen)

underline-Schlüsselwort 96unicode-bidi (Eigenschaft) 501

Index | 545

Uniform Resource Identifier (siehe URI)Uniform Resource Locator (siehe URL)universeller Selektor 31, 516

in ID-Selektoren 39in Klassenselektoren 36, 37Spezifität von 66, 74

unterstrichener Text 156, 159URI (Uniform Resource Identifier), festlegen 98URL (Uniform Resource Locator)

festlegen 95relativ zu Stylesheet 95

Ursprung von Stildefinitionen 75ursprünglicher umgebender Block

(siehe Wurzelelement)Ursprungsbild 281

�

Vererbung 65, 71–74Ausnahmen 72inherit-Schlüsselwort 97Programmierfehler bei der Implementierung

von 73Spezifität und 73Text-Ausschmückungen und 158–160Zeilenhöhe und 144(siehe auch Kaskadierungsregeln; Spezifität)

vertical-align (Eigenschaft) 146–151, 198–201, 501

für Zelleninhalt in Tabellen 387–390text-decoration und 159

vertikale Ausrichtungvon nicht-ersetzten Inline-Elementen

198–201von Text 142, 146–151von Zelleninhalten in Tabellen 387–390

vertikale Formatierung von Block-Elementen180–189

vertikaler Balken (|)in Attribut-Selektoren 45in Eigenschaftensyntax XVII

visibility (Eigenschaft) 335, 501:visited (Pseudoklasse) 55, 264, 522vlink-Attribut, body-Element 55, 264voice-family (Eigenschaft) 460, 515volume (Eigenschaft) 458, 515Vordergrundfarben 263–269, 483Vorfahren-Elemente 48

�

W3C (siehe World Wide Web Consortium)Wagenrücklauf-Zeichen

in erzeugtem Inhalt 405white-space (Eigenschaft) und 162

Warte-Cursor 425Web, Geschichte 1–4Webbrowser (siehe Browser)Web-fähige Mobiltelefone, Medientyp für 16Websichere Farben 87Weichzeichnungsradius für Textschatten 161Werkzeugleisten, Links horizontal darstellen in

217white-space (Eigenschaft) 162–164, 502Whitespace-Zeichen, Behandlung von 502wichtige Regeln 70, 75widows (Eigenschaft) 445–447, 448, 506width (Eigenschaft) 171–180, 222–224, 502

Einfluss von negativen Außenabständen auf176–178

ersetzte Elemente und 179positionierte Elemente und 325Prozentwerte für 178Spalten und Spaltengruppen 365Wert automatisch ermitteln ("auto")

172–176(siehe auch max-width (Eigenschaft);

min-width (Eigenschaft); table-layout (Eigenschaft))

Wildcard-Zeichen (siehe universeller Selektor)WindowFrame-Systemfarbe 422Window-Systemfarbe 422WindowText-Systemfarbe 422Winkel als Werte 97word-spacing (Eigenschaft) 152, 154, 502World Wide Web Consortium (W3C), verwor-

fene HTML-Elemente 4Wörter, Abstände 152, 154, 502

(siehe auch content; text)Wurzelelement 48, 170, 321

�

XHTML, verworfene Elemente 8, 23XML

als Ersatz für HTML 8Elementselektoren für 27

546 | Index

�

z-Achse, absolute Positionierung entlang349–354, 503

Zahlenals Eigenschaftswerte 81vorlesen 456, 514

Zähler für geordnete Listenanzeigen 411–413für mehrere Verschachtelungsebenen defi-

nieren 414Geltungsbereich von 414inkrementieren 410, 412, 483negative Werte für 410, 411Stildefinitionen für 413zurücksetzen 410, 412, 484

Zeichensätzealle Werte gemeinsam festlegen 127–130Ansichtsverhältnis 125dehnen 124, 507Durchschuss und 142, 143em (em-Höhe), Wert von 91ex (x-Höhe), Wert von 92Familie festlegen 101–105für Bildschirmausgabe 436für Druckausgabe 436Gewicht festlegen 105–112, 487Größe festlegen 112–120herunterladen 134in diesem Buch verwendete XVIproportional 100Stile definieren für 120–123, 487Systemzeichensätze 130, 417–419Varianten festlegen 123, 487verfügbare mit angegebenen vergleichen

131–135Verfügbarkeit 99, 132Zeilenhöhe und 128(siehe auch Text)

Zeichensätze mit fester Breite (siehe Festbreiten-Zeichensätze)

Zeichensätze mit Serifen 100Zeige-Cursor 423Zeiger (siehe Cursor)zeilenbasiertes Tabellenmodell 364Zeilenboxen 143, 194, 197

Elemente ausrichten mit 148, 149ersetzte Inline-Elemente und 207Höhe 196, 203Konstruktion 194Seitenumbrüche und 448

Zeilenumbrüchein erzeugtem Inhalt 405white-space (Eigenschaft) und 162

Zeitwerte 98Zellen

Ausrichtung von Inhalt in 387–390Bilder in, Zwischenräume 147Ebene für 370Elemente vertikal ausrichten in 146festlegen 363Gitterzellen 360leer 375, 504Positionierung 361Rahmen für

Abstände zwischen 374, 504getrennt 372, 373–376zusammengefasst 373, 376–380, 503

über mehrere Tabellenzeilen bzw. -spalten361

Zellenboxen 361Zentimeter (cm), Längeneinheiten 88z-index (Eigenschaft) 349–354, 503Zugriffsmöglichkeiten für ältere Browser 21

Über den Autor

Eric A. Meyer arbeitet seit Ende 1993 mit dem Web und ist ein international anerkannterExperte auf den Gebieten HTML, CSS und Webstandards. Als weithin gelesener Autorist er auch Gründer der Firma Complex Spiral Consulting (www.complexspiral.com), dieMacromedia und Wells Fargo zu ihren Kunden zählt und die sich darauf konzentriert,Kunden dabei zu helfen, Geld zu sparen und die Effizienz zu steigern, indem sie standard-orientierte Webdesign-Techniken verwendet.

Seit Anfang 1994 war Eric als Campus-Web-Koordinator für die optische Gestaltung derWebsite der Case Western Reserve University zuständig, wo er auch eine weithin aner-kannte Reihe von drei HTML-Tutorials schrieb. Er war außerdem Projektkoordinator fürdie Online-Version der Encyclopedia of Cleveland History und des Dictionary of Cleve-land Biography (ech.cwru.edu), der ersten Enzyklopädie städtischer Geschichte, die voll-ständig und frei im Web veröffentlicht wurde.

Als Autor von Cascading Style Sheets: The Definitive Guide (O’Reilly), Eric Meyer on CSS(New Riders) und CSS2.0 Programmer’s Reference (Osborne/McGraw-Hill) sowie zahl-reicher Artikel für das O’Reilly Network, Web Techniques und Web Review hat Eric außer-dem die CSS Browser Compatibility Charts kreiert und koordinierte die Entwicklung undErzeugung der offiziellen CSS Test Suite des W3C. Er hielt Vorträge für eine große Aus-wahl an Institutionen inklusive dem Los Alamos National Laboratory, der New YorkPublic Library, der Cornell University und der University of Northern Iowa. Außerdemsprach Eric auf zahlreichen Konferenzen, unter anderem der IW3C2 WWW, Web DesignWorld, CMP, SXSW, der User Interface-Konferenzreihe und The Other DreamweaverConference.

In seiner Freizeit fungiert Eric als List Chaperone (»Anstandswauwau«) der höchst akti-ven Mailing-Liste css-discuss (www.css-discuss.org), die er zusammen mit John Allsoppvon Western Civilisation mitbegründet hat und die nun von evolt.org betreut wird. Ericlebt in Cleveland, Ohio, das eine wesentlich nettere Stadt ist, als man Ihnen glaubenmachen will, und er ist der Moderator von »Your Father’s Oldsmobile«, einer Radiosen-dung mit Musik aus der Big Band-Ära, die wöchentlich auf WRUW 91.1 FM in Clevelandausgestrahlt wird (www.wruw.org). Wenn er nicht anderweitig beschäftigt ist, geht er fürgewöhnlich seiner Frau Kat auf die eine oder andere Weise auf die Nerven.

Über den Übersetzer

Jørgen W. Lang lebt als freier Übersetzer, Webdesigner und -programmierer sowie alsDozent für Webdesign und CGI-Programmierung in Hamburg. Neben der Musik widmeter sich, falls er Zeit hat, der Beantwortung von Fragen in den deutschsprachigen Perl-Newsgruppen. Unter der Adresse http://www.worldmusic.de/perl/ hat er eine Reihe vonRessourcen zusammengetragen, die besonders Anfängern den Einstieg in Perl erleichternsollen. Zu erreichen ist er unter [email protected].

Kolophon

Bei den Fischen auf dem Cover von Cascading Style Sheets – Das umfassende Handbuchhandelt es sich um Lachse. Zur Familie der Lachse (Salmonidae) gehören viele verschie-dene Arten. Zwei der häufigsten Arten sind der Pazifische Lachs und der AtlantischeLachs.

Der Pazifische Lachs (Oncorhynchus spec.) lebt in den Gewässern des Nordpazifiks vorden Küsten Nordamerikas und Asiens. Es gibt fünf Arten des Pazifischen Lachses, die einDurchschnittsgewicht zwischen zehn und dreißig Pfund erreichen. Pazifische Lachseschlüpfen im Herbst im Süßwasser, wo sie im kiesigen Flussbett während des Wintersheranwachsen und dann als einige Zentimeter große Jungfische hervorkommen. Sie lebendaraufhin noch ein bis zwei Jahre in Flüssen oder Seen, um sich anschließend flussab-wärts in Richtung Meer aufzumachen. Dort leben sie einige Jahre, bis sie wieder exakt anden Ort ihrer Geburt zurückkehren, um abzulaichen und zu sterben.

Der Atlantische Lachs (Salmo salar) lebt im Nordatlantik vor den Küsten Nordamerikasund Europas. In Europa gibt es viele verschiedene Arten in der Familie der Salmoniden,zu denen auch die Forelle (Salmo trutta) und der Saibling (Salvelinus spec.) gehören. IhrDurchschnittsgewicht liegt zwischen 10 und 20 Pfund. Der Lebenszyklus des Atlanti-schen Lachses ähnelt dem des Pazifischen Lachses. Ein wichtiger Unterschied ist jedoch,dass der Atlantische Lachs nach dem Ablaichen nicht stirbt. Er kann ins Meer zurückkeh-ren und dann den Fluss zum erneuten Ablaichen aufsuchen, in der Regel zwei- bis drei-mal.

Lachse sind anmutige Fische von silberner Farbe mit schwarzen Flecken auf dem Rückenund den Flossen. Ihre Nahrung besteht aus Plankton, Insektenlarven, Garnelen und klei-nen Fischen. Ihr außerordentlich guter Geruchssinn hilft den Lachsen, aus dem Ozeanflussaufwärts vorbei an vielen Hindernissen an ihren Geburtsort zurückzufinden. EinigeLachsarten verbringen jedoch ihr gesamtes Leben im Süßwasser und suchen nie das Meerauf.

Lachse sind ein wichtiger Teil des Ökosystems, unter anderem weil ihre verwesendenKörper das Flussbett düngen. Ihr Bestand ist jedoch über die vergangenen Jahre starkzurückgegangen. Ursachen für diesen Rückgang gibt es viele, wie die Zerstörung ihrerLebensräume, Überfischung, Verbauung ihrer Wege zurück in die Laichgewässer durchSchleusen und Dämme, saurer Regen, Trockenheiten, Überflutung und Verschmutzung.

Der Umschlagsentwurf dieses Buches basiert auf dem Reihenlayout von Edie Freedmanund stammt von Ellie Volckhausen, die hierfür einen Stich des Dover Pictorial Archive ausdem 19. Jahrhundert verwendet hat. Das Coverlayout der deutschen Ausgabe wurde vonEllie Volckhausen, Hanna Dyer & Clay Fernald mit Quark XPress 4.1 unter Verwendungder Schriftart ITC Garamond von Adobe erstellt. Als Textschrift verwenden wir die Lino-type Birka, die Überschriftenschrift ist die Adobe Myriad Condensed und die Nichtpro-portionalschrift für Codes ist LucasFont’s TheSans Mono Condensed. Nicole Arigo undJoachim Kurtz haben das Kolophon geschrieben.

Documents

CSS - Das Umfassende Handbuch