CSS: Missing Manual: Das fehlende Handbuch zu Ihrer Website 9783897218901 [PDF]

Zitiervorschau

---

Das

fehlende

Handbuch

zu Ihrer

Website

POGUE PRESS'

Q'REILLY®

David Sawyer McFarland Deutsche Übersetzung von Jorgen W. Lang

css

MISSING MANUAL

David Sawyer McFarland Deutsche Übersetzung von J0rgen W. Lang

POGUE PRESS'

O'REILLY·

Beijing· Cambridge· Famham . Köln · Sebastopol· Taipei· Tokyo

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 fiir eventuell verbliebene Fehler und deren Folgen. AUe Waren namen 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 cinsch1ießl.ich aller seiner Teile ist urheberrechtlieh geschützt. Alle Rechte vorbehalten einsch1ießlich der Vervielfältigung. Übersetzung, Mikro­ verfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

Kommentare und Fragen können Sie gerne an uns richten: O'Reilly Verlag Balthasarstr. 81 50670 Köln E-Mail: [email protected]

Copyright der deutschen Ausgabe: by O'Reilly Verlag GmbH & Co. KG I. Auflage 2009

02009

Die Originalausgabe erschien 2006 unter dem ntel CSS: The Missing Manual bei Pogue PresslO'Reilly Media, lnc. Der Name .Missing Manual«, das korrespondierende Logo sowie die Bezeichnung .Das fehlende Hand­ buch zu Ihrer Software« sind eingetragene Warenzeichen von Pogue PresslO'Reilly Media.

Bibliografische Information Der Deutschen Bibliothek Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.ddb.tkabrufbar. Deutsche Übersetzung und Aktualisierung: '0rgen W. Lang, Oberlauterbach Lektorat: lnken Kiupel, Köln Korrektomt: Sibylle Feldmann, Düsseldorf Satz: lU-satz, Husby, www.drei-satz.de Produktion: Andrea Miß, Köln Belichtung. Druck und buchbinderische Verarbeitung: Druckerei Kösel, KrugzeU; www.koeselbuch.de

ISBN

978-3-89721-890-1

Dieses Buch ist auf 100% chlorfrei gebleichtem Papier gedruckt

Inhaltsverzeichnis Die fehlenden Danksagungen..

.

. ... .. .. . .. .. ......... ... . ... .... ... . . .. XI

Einleitung. . . . .. .. . . .. . . .. . . .. . . . .. . . ... .... . .. .. .. .. ..... . . . . . .. .. .. . .. . . .. XV .

Teil 1: C55-Grundlagen Kapitell: HTML-Code für C55 optimieren . . . .. . . .. . . ............. .. .

HTMl: Vergangenheit und Zukunft . . . . . . . . . . . . . . . . . .. . . , . . . . . . . . . . . . . . . . . . . . . . HTMl in der Vergangenheit: Hauptsache, es sieht gut aus. ... . HTMl heute: Das Grundgerüst für (55 . ... . HTMl-Code für die Verwendung mit CSS schreiben , . .... . . . . . . . . . . . . . . . . . . . . . . •

. .

HTMl = Struktur . Zwei neue HTMl-Tags. . .

.

.

. .

.

.

.

.

. .

.

.

. .

.

.

. .

.

. .

. .

.

.

.

.

. .

.

.

.

.

. .

.

.

. .

. .

HTMl-Code, den Sie am besten vergessen.. Ein paar Tipps für unterwegs. Die Bedeutung der Dokumenttyp-Definition .

. .

.

.

. .

.

. .

.

.

. .

.

.

.

.

.

.

.

.

.

. .

.

.

.

.

. .

.

.

Stylesheets verstehen

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Intern oder extern - die richtige Wahl. Interne Stylesheets .

Externe Stylesheets .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. .

.

.

. .

.

.

. .

.

.

. .

Stylesheets mit HTMl einbinden Stylesheets mit (55 einbinden

.

.

.

.

.

. .

Inline-Stile definieren

.

.

.

.

.

.

.

.

.

.

•

.

.

. . .

•

.

.

.

.

. .

.

.

. .

.

. . .

•

.

.

.

.

.

.

.

.

.

.

.

.

.

. •

.

.

.

.

.

.

.

. .

.

.

.

.

•

.

.

.

. . . . • . .

.

. . . .

.

.

•

.

.

.

.

.

.

.

. .

.

.

.

.

.

.

.

.

•

•

•

.

.

.

.

.

•

•

.

.

.

.

.

.

.

.

.

.

.

.

.

•

.

. ,

.

.

. •

.

•

. .

.

.

. .

•

.

.

.

.

.

.

.

. .

.

.

.

•

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

. .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

..

.

.

.

.

.

. .

.

.

.

. . . . . . •

.

•

.

,

, .

.

.

. .

.

.

. . . . . •

.

•

.

.

.

.

.

.

.

.

.

• .

.

.

. .

•

.

.

.

.

.

.

.

. .. . . . . .

22

.. . ...

23

•

.

. . .. . . . .

24 25

... . ... .

25 28

.

.

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

.

.

.

.

•

.

•

.

, . . . . •

.

.

.

. .

.

.

.

•

.

• .

. •

.

Interne Stylesheets erstellen. . . . . . . . . . . . . . .. . . .. . . . . . . . . . . . . . . . . . . . . . . . . . .

.

.

..

.

.

.

.

.

.

.

17

, . .... . . . ... . . . . . .. . . . .

,

.

.

Externe Stylesheets emellen ......... .

13

20 21

.

.

. .

.

9 10

20

.

.

.

.

6 7

... . ... .

.

.

.

.

4 5 6

, . . . . . . . .. . . . . . . . . . . . .

.

.

.

•

.

3

. . . .. . . .. .. ... . ... ... . . . 17

.

.

.

......

.

.

.

. .

.

. .

.

.

... . . .. . .

.

.

.

.

•

•

. .

.

.

.

.

.

.

.

. . . . . •

.

. .

.

.

.

.

.

.

.

•

. . . . . • .

.

.

. •

•

.

.

. •

.

• .

.

.

•

.

•

. .

.

.

.

.

.

.

.

.

.

.

. .

.

.

•

.

.

. .

.

.

. .

.

.

.

. .

.

.

.

.

.

.

.

• .

.

. .

.

.

.

.

.

Übung: Ihre ersten eigenen Stildefinitionen

.

.

Kapitel 1: Stildefinitionen und 5tylesheets Anatomie einer Stildefinition

.

3

.

.

.

.

.

.

.

.

.

. .

.

. .

.

.

.

. .

.

.

. .

.

31

Kapitel 3: 5elektoren-Grundlagen: Welcher Stil für wen? .. .... 35 . .

Typ-Selektoren: Stile für die ganze Seite

, . . . . . . . . . . . . . . . .. . . . . .

36

Klassen-Selektoren: zielgenaue Kontrolle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

36

ID-Selektoren: Regeln für ein bestimmtes Seitenelement

39 41

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Stildefinitionen für verschachtelte Tags

.

.

.

.

.

.

.

.

.

.

.

.

Der HTMl-Stammbaum . . Selektoren für Nachfahren-Elemente verwenden .

.

.

.

.

.

.

.

.

.

.

.

.

Stile für mehrere Tags auf einmal definieren

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

•

.

•

.

.

.

.

.

.

.

.

.

.

.

•

.

.

.

.

. .

.

. ,

•

.

•

. ,

.

.

• .

•

.

.

.

, . . • '

, ..

.

.

.

, .

•

.

• .

.

.

.

•

.

•

.

. .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

,

,

•

•

•

.

.

.

.

.

•

•

•

•

, .

.

.

. • .

.

.

.

.

.

.

.

, .

•

.

.

.

.

.

.

• .

•

.

. .

.

.

. • .

.

, ,

.

.

.

. •

.

. . . . . . . . . • .

.

"

•

.

.

.

•

.

.

Selektoren gruppieren ........................... Der universelle Selektor (Asterisk, *)

.

.

•

.

.

,

,

.

. .

.

.

•

. .

.

.

. .

•

•

.

.

.

.. ..

44

..

47

.. ..

42 46 47

v

Pseudoklassen und Pseudoelemente

.

.

.

.

.

.

.

.

.

Stildefinitionen für links. Noch mehr Pseudoelemente und -klassen . .

.

Selektoren für Fortgeschrittene Kind-Selektoren.

.

. .

.

.

.

. .

.

. .

.

.

. .

.

.

.

.

. .

.

.

. .

.

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

•

.

.

.

.

. .

.

.

. .

.

.

• .

.

.

. .

.

.

.

• .

.

. .

.

.

.

. •

.

. .

.

.

. .

.

.

. .

•

.

.

. .

.

.

. .

•

. .

.

.

.

. •

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

•

.

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

.

. .

.

. •

.

.

. .

.

.

.

. •

.

.

. .

.

.

. .

•

.

.

.

. .

.

.

.

•

.

.

.

. .

.

•

.

•

.

. .

.

.

•

.

.

.

. .

.

.

•

.

.

. .

.

• .

.

.

. .

.

. •

.

.

. .

.

.

.

. •

.

.

. .

.

• .

.

.

. .

.

.

.

. .

.

.

. .

.

.

Übung: Beispiele für Selektoren Selektoren gruppieren. Klassen-Selektoren anlegen und verwenden .

.

.

Benachbarte Geschwister-Elemente.. Attribut-Selektoren

.

.

.

. .

.

.

.

.

.

. .

.

. .

.

.

.

. .

. .

.

.

. .

.

.

. .

.

.

. .

.

.

.

ID-Selektoren erstellen und anwenden .

.

.

.

.

. .

.

.

. •

.

.

. .

.

. .

.

.

. .

.

.

. .

•

.

.

. .

.

.

.

.

.

.

.

.... .... .

.

.

.

. ..

54 54

.

. . .. . . ......

. .

•

.

.

. .

.

.

• .

.

.

. .

•

. .

.

.

.

. •

.

.

. .

.

.

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. .

.

.

.

•

.

.

. .

.

.

. .

•

.

. .

.

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

• .

.

.

. .

.

.

. •

.

.

49 52 52

.

. .

48

....

. .

Nachfahren-Selektoren erstellen und verwenden.

48

....

55 58

59 62 64

Kapitel 4: Zeit sparen durch Vererbung . .. .... .. .. .. .. .. .. .. .. .. .... 67 .

Was ist Vererbung? Wie die Vererbung Stylesheets vereinfachen kann . .

.

.

.

.

.

.

.

.

.

.

Einschränkungen der Vererbung

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

•

.

.

.

.

. .

.

.

. .

•

.

. .

.

.

.

. .

•

. .

.

.

. .

•

.

.

.

.

.

.

.

•

•

.

.

.

.

.

•

.

.

.

.

.

•

.

.

.

.

.

.

.

.

.

.

.

.... .

.

.

.

Übung: Vererbung . ..... Ein einfaches Beispiel: Eine Vererbungsebene . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

.

.

.

. .

.

.

. .

.

.

. .

.

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

.

. .

.

.

. .

.

• .

.

.

.

.

. .

.

. .

.

.

.

.

•

.

.

.

.

.

. .

.

.

. .

.

. .

•

.

.

.

Vererbung verwenden, um eine ganze Seite umzugestahen.. Ausnahmen von der Vererbung.

.

. .

.

.

. .

.

.

. .

.

.

.

. .

.

.

. .

.

.

. .

... . .

.

67 68 70 70 72 74 76

Kapitel 5: Mit mehreren Stilen umgehen: die Kaskade. . .. .. .... 79 . .

Wie Stile kaskadiert werden

.

. .

.

.

.

. .

.

.

. .

.

.

. .

Vererbte Stile werden zusammengefasst..

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

.

.

.

.

. .

.

.

. .

.

. .

. .

.

.

. .

.

.

. .

.

.

.

.

.

. •

.

.

. .

.

.

.

.

.

•

. .

.

...

Der nächste Vorfahr gewinnt .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Direkt zugewiesene Stildefinitionen gewinnen . Ein Tag, viele Stile .

.

. .

.

. .

.

Spezifltät: Welcher Stil gewinnt?

.

.

.

.

.

.

.

. .

.

.

. .

•

.

.

.

.

. .

.

.

.

. .

.

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

.

. .

.

.

. .

.

. .

.

.

.

.

•

.

.

. .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

•

.

.

.

.

.

. .

.

.

. .

.

.

. •

.

.

.

. .

.

.

. .

.

.

. •

.

.

. .

.

. .

.

. .

.

.

.

.

. .

.

. •

.

.

Das Zünglein an der Waage: Der zuletzt definierte Stil gewinnt . Die Kaskade unter Kontrolle behahen Die Spezifität ändern.

.

.

. .

Selektives Überschreiben .

.

.

.

.

. .

.

.

. .

.

.

.

. .

.

.

. .

. .

Übung: Die Kaskade in Aktion Eine hybride Stildefinition erstellen . .

.

.

.

.

.

.

.

.

.

.

.

.

. .

. .

.

.

.

.

. .

.

.

. .

.

.

. .

.

.

.

.

.

.

. .

.

.

.

.

. .

.

. .

.

. .

.

.

.

.

. .

.

. .

.

.

.

•

.

.

.

. .

.

.

. •

.

.

. .

.

.

. .

•

.

.

. .

.

.

. .

•

.

. .

.

.

. •

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

.

. .

.

.

Kaskadierung und Vererbung kombinieren Konflikte ausräumen.

. .

. .

. .

.

.

. .

.

•

. .

.

.... .

.

. .

.... .... .

. .

.

.

.

. .

.

.

•

.

.

.

. .

.

.

.

•

.

.

. .

.

.

.

.

•

.

.

.

.

.

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

•

.

•

.

.

.

.

.

.

•

.

.

.

. .

.

.

. .

.

.

• .

.

.

.

. .

.

.

• .

.

.

. .

.

.

. •

.

.

.

.

... .

.

.

....

80 80 81 82 82 84 86 87 88 88 90 91 92 94

Teil 2: Angewandtes C55 Kapitel 6: Textformatierung . .... .. . .. . . .. .. .... .. .. .. .. .. .. .. .. .. .... 99 . .

Text formatieren

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Die richtige Schrift auswählen Farbiger Text

.

.

.

.

Die Schriftgröße ändern

.

.

.

.

.

.

.

•

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

•

.

.

.

. .

.

.

.

. .

.

.

. .

.

.

. .

.

.

• .

.

.

.

. .

.

.

• .

.

.

.

.

.

.

.

•

.

.

.

.

.

............

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

•

.

.

.

.

.

Pixel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Schlüsselwörter, Prozentwerte und ern-Einheiten. .... . .

Wörter und Buchstaben formatieren . Kursiv- und Fettschrift.

VI

CSS: Missing Manual

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

.

.

. .

. .

.

.

. .

.

.

. .

.

.

. .

•

.

.

•

.

. .

. .

.

.

.

.

.

. .

.

.

. .

. .

.

.

. .

.

.

.

. .

.

.

. .

•

.

. .

.

.

. •

.

.

.

.

. .

•

. .

.

.

.

. •

.

. .

.

.

• .

.

.

. .

.

.

. •

.

.... ....

99 101 102 104 105 105 109 110

Großbuchstaben ..

.

.

Ausschmückungen ..

. .

.

.

.

.

.

. .

.

.

.

.

.

.

.

. .

.

.

Buchstaben- und WOI1abstände . Ganze Absätze formatieren

.

.

.

.

. .

. .

.

. .

. .

.

.

.

. .

. .

.

.

. .

.

.

.

.

.

. .

.

.

. .

•

.

.

. .

.

.

.

.

.

. .

.

.

.

.

. .

.

.

. .

.

.

. .

.

. .

.

.

.

. .

.

.

.

.

.

. .

.

. .

.

.

.

.

.

.

. •

. . . . . . . .. . . . . . . . ..

111

.. ..

113

.

.

. •

. .

.

. . .

.

. .

•

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . • . . . . . . . . • . . . . . . . . . . .

Zeilenabstand anpassen..

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . •

.

111

. . . . . . . ...

114 114

Textausr1chtung........... .............................................

116 Zeilen einrücken und unerwünschte Ränder entfernen........................ 117 Oen ersten Buchstaben oder die erste Zeile eines Absatzes formatieren. . . . . . . . . .

118

Stildefinitionen für listen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . .. . . . . . . . . . . . . . . . Verschiedene Aufzählungszeichen oder: die Quadratur des Kreises .. . . . . . . . . . . .

119 119

Aufzählungszeichen positionieren..

.. . .

122

.. .. ... . . .. . . .

123 125

. .

Grafische Aufzählungszeichen . Übung: Textformatierung in der Praxis .. .

Die Seite einrichten..

.

.

. .

.

.

. .

.

.

. .

.

.

.

.

.

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

. .

. .

.

. .

.

. .

.

.

. .

. .

.

.

.

.

.

.

.

.

.

.

.

.

. .

.

.

.

. .

. .

.

.

.

.

.

. .

. .

.

.

. .

.

.

.

.

. .

.

. .

. .

. .

.

.

.

. •

.

.

.

.

.

• .

. .

.

.

•

.

.

.

.

.

.

.

.

.

•

.

.

. .

.

.

. .

.

.

• .

.

.

. .

. .

.

. .

.

.

. .

.

.

.

. .

.

.

. .

•

.. .

125

.. . .

127

listen formatieren.. .... Der letzte Schliff . . . . .. . . . . . . . . . . . . . . . . . . . . . . . .. . . .. . . .. . . . . . . . . . . . .. . . .

129

. .

.

.

. .

.

.

Überschriften und Absätze formatieren . .

. .

.

.

. .

.

.

. .

.

.

. .

.

.

.

. .

.

.

•

. .

. .

.

. .

.

.

.

. .

Kapitel 7: Rahmen. Innen- und AuBenabstände Das Boxmodell verstehen

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. .

.

.

• .

.

.

. .

.

.

. •

.. ... ....... .... . . .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

•

. •

.

.

.

.

Den leerraum mit Innen- und Außenabständen kontrollieren ...................... Kurzschrift-Eigenschaften für Innen- und Außenabstände

132

In 137 139

. .. . .

140 141

. .... . . . . . .. . . .

143 144

Rahmen ..................................................................

146

Die Kurzschrift-Eigenschaft für Rahmen ... . . . .. . . . . . . .. . . . ... . . . . . . . . . . . . . .

148

Rahmenseiten einzeln formatieren ..

148 150

Wenn Außenabstände kollabieren .... .... . . . .

. .

.

.

.

.

.

.

... .... .. .

.

. . •

Negative AuBenabstände zum Entfernen von leerraum........ Inline- und Blod-Elemente darstellen...

Hintergrundfarben

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. •

.

. .

.

.

.

•

.

. .

.

.

.

.

.

.

.

.

. .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Höhe und Breite festlegen Die tatsächliche Höhe und Breite einer Box berechnen..

. .

.

•

. . . . . •

.

.

.

. .

.

.

. .

.

.

. •

. •

.

.

.

.

.

•

•

. . . . . . . . . . . . . . . . . . . . . . . . . . •

. .

.

.

•

.

.. .. . . . .

.

.

.

.

.

.

.

.

.

.

.

.

.

•

.

•

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

•

.

•

.

.

.

.

.

.

. .

.

.

. .

.

.

.

. .

.

.

. .

•

.

.. . . .

151 152

Textüberlauf im Griff mit der Eigenschaft overflow ... . . . . ..... . . . . . . . . . .. . . . .

153

Das defekte Boxmodell des Internet Explorer 5 reparieren.

154 159

.

Elemente umfließen lassen

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. .

.

.

. .

.

.

. •

.

.

.

.

.

.

.

•

.

.

.

•

. . .. . . . . .

.

.

.

.

.

.

.

Hintergründe, Rahmen und Roats......................................... Umfließen verhindern.. Übung: Außenabstände, Hintergründe und Rahmen .

. .

.

.

. .

.

.

. .

.

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

.

. .

.

.

. .

.

. .

•

.

.

.

.

.

.

.

.

.

•

.

.

.

.

.

•

.

.

.

.

.

.... . ... .

.

.

.

.

.

.

.

161 162 164

Seitenränder anpassen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .... . . . . . . . . . . . . . . . .

164

Den leerraum zwischen den Elementen anpassen . . Text mit Hintergrunden und Rahmen hervorheben. Eine Seitenleiste erstellen..

166 167

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

.

.

.

.

.

.

.

.

. .

.

. .

.

.

.

. .

.

.

. .

.

.

.

.

. .

. •

.

..

.

. .

.

. .

.

. . •

. •

.

. . .. . . . .

. . . . . . . . .. . . .. . . . .

. .

•

170

. .. . . . . . .

174

Weitere SChriHe........................................................

177

Die Programmierfehler ausbügeln .............

. . . . . . . . . •

Kapitel 8: Webseiten mit Grafiken venehen .......

.

. . . . . •

. .

•

.... .......... 179 .

CSS und das-Tag . . . . . . . . . .... . .. . . . . . . . . . . . ... . . . . . ....... . . . . . . . . . . . Hintergrundbilder . .. . .. . . . .

.

.

.

.

.

.

Bildwiederholungen steuern

.

.

.

.

.

.

.

.

. .

.

.

. .

.

.

. .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Hintergrundbilder positionieren

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

. .

.

.

•

.

•

•

.

.

.

.

.

.

.

.

.

.

179 180 184

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . • . . . . . . . . . . . .

185

Schlüsselwörter . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .... . . . . . , . . . . . . . . . . .

185

Inhaltsverzeichnis

Vll

Präzise Werte. Prozentwerte

. .

.

.

. .

.

.

. .

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

. •

.

.

. .

.

.

•

. .

.

.

. .

.

.

• .

.

. .

.

.

. .

.

.

. .

.

.

.

. .

.

.

. .

.

. •

.

.

. .

.

.

. •

.

.

. .

.

.

. .

.

.

. .

.

.

. •

.

.

. .

.

.

• .

•

.

....

187

......

188

Hintergrundbilder fixieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Die Kurzschrift-Eigenschaft für Hintergründe

190 192

Übung: Eine Fotogalerie erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Bilder rahmen . ....

192

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

•

.

.

.

.

.

193 195

....

199

........................................................

203 206

.

.

. .

.

. .

Eine Fotogalerie erstellen . .

.

....

. .

.

.

.

. .

Bildunterschriften hinzufügen . Schatt.nwürt.

.

.

.

. .

.

.

.

.

. .

.

.

.

.

. .

Übung: Hintergrundbilder verwenden

.

. .

.

.

.

.

.

.

. .

.

.

.

. .

.

.

. •

.

.

. .

.

.

•

. .

.

.

.

.

•

.

.

.

.

. .

.

.

.

.

.

.

. .

. .

.

.

. •

.

.

.

. .

.

.

. •

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. .

.

.

.

. .

.

.

.

.

• .

.

.

.

.

.

.

.

.

. .

. .

.

.

.

.

•

.

. .

.

.

• .

•

.

.

. .

.

.

.

• .

.

.

.

.

.

.

.

•

.

.

.

.

.

.

. .

.

.

.

. .

•

. .

.

.

.

. •

.

. .

.

.

. .

.

.

.

•

.

. .

.

.

.

.

.

•

.

.

.

.

.

. •

.

Ein Bild als Hintergrund für Seitenelemente verwenden . Rahmenlinien durch Grafiken ersetzen . . .

. .

•

.

.

.

.

.

.... .

...

Eigene Grafiken als Aufzählungszeichen für listen. .... Abgerundete Ecken für die Seitenleiste . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

.

.

. .

.

.

. .

.

.

.

• .

.

. .

.

.

.

. •

.

Ein externes Stylesheet anlegen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Ihre Website

Kapitel 9: ZeitgemäBe Navigation für

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Entscheiden, welche links formatiert werden sollen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Den link-Zustand verstehen. .... .

. .

.

Nur bestimmte links formatieren links gestalten .

.

.

.

. .

.

.

. .

links unterstreichen . Buttons erstellen . .

. .

Grafiken verwenden .

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

.

• .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

. .

.

.

.

.

. .

.

.

. •

.

.

. .

.

.

. .

•

.

.

. .

.

.

. .

•

.

. .

.

.

. •

.

.

.

. .

.

.

. •

.

.

. .

.

.

. .

•

.

.

. .

.

.

. .

•

.

. .

.

.

. •

.

.

.

. .

.

.

. .

.

.

. •

.

.

.

. .

.

•

. .

.

.

. .

.

.

• .

.

.

. .

.

. •

.

. .

.

• .

.

.

.

.

. .

.

.

.

.

. .

.

.

.

.

.

.

. .

.

.

.

.

.

. .

.

. .

.

.

.

• .

.

.

. .

.

.

. •

.

.

. .

.

.

. .

•

.

.

. .

.

.

• .

.

.

.

.

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

•

.

.

.

.

. .

.

.

. .

.

.

. •

.

.

. .

.

.

. .

•

.

.

. .

.

.

. .

•

.

. .

.

.

. •

.

.

.

. .

.

.

. .

.

.

. •

.

.

. .

.

.

.

. •

.

.

. .

.

.

. .

•

.

. .

.

.

. •

.

.

. .

.

.

. .

.

.

. •

.

.

. .

.

.

. .

.

. .

.

.

. .

•

.

. .

.

.

. •

.

.

.

.

. .

.

.

. .

.

.

. •

.

.

. .

.

.

• .

.

.

.

. .

.

.

• .

.

. .

.

.

.

. •

.

.

.

.

.

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

•

.

•

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

.

.

. .

. .

. .

.

.

. •

.

.

.

. .

.

•

. •

.

.

. .

.

.

• .

.

.

. .

.

.

.

.

.

. .

.

.

. .

.

.

. .

.

. .

.

.

. •

.

.

. .

.

.

. .

•

.

.

.

. •

.

.

. .

.

.

. .

•

. .

.

.

. .

•

.

.

.

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

.

. .

.

.

. .

.

.

. .

.

•

.

.

.

.

. .

.

.

. .

.

.

. .

. .

.

.

. .

.

.

. .

. .

.

.

.

. .

.

.

. .

.

.

. .

.

.

.

.

Rahmen anlegen .

.

.

. .

. .

.

. .

.

.

.

CSS: Missing Manual

.

.

. .

.

.

.

• .

.

.

• .

.

.

. .

.

.

.

• .

.

. .

.

.

.

. .

.

.

• .

.

.

. .

.

.

. •

.

. .

.

.

. .

.

.

. .

•

.

. .

.

.

. •

.

.

. .

.

.

• .

.

. .

.

.

.

.

.

. .

.

.

.

. .

.

.

. .

.

.

. .

.

.

. .

•

.

.

.

. .

.

.

. .

.

.

. .

•

....

231

.... ....

232 235

....

241

.

.

.

.

....

250

....

251

.... ....

254 255

...........

............

259 262

.....

264

.

.

.

.

. •

.

.

.

. •

.

.

.

.

. .

.

.

. .

.

. .

.

.

.

. .

.

.

. •

.

.

. .

.

.

• .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

.

.

.

.

. .

.

.

. .

.

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

. .

•

.

. .

.

.

.

. .

•

.

.

.

.

. .

•

.

.

. .

.

.

. .

•

.

.

. .

.

.

. .

•

.

. .

.

.

. •

.

. .

.

.

. .

.

.

. .

.

.

.

• .

.

.

. .

.

• .

•

.

.

.

.

•

.

.

. .

.

.

. .

•

.

.

. .

.

.

•

.

.

.

. .

.

.

•

.

.

.

. .

. .

.

.

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

. .

. .

.

.

. .

.

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

.

242

....

. .

.

.

Zeilen und Spalten gestalten.

VIII

• .

.

.

Innenabstände Vertikale und horizontale Ausrichtung anpassen . .

.

.

.

Kapitel 10: Tabellen und Formulare .

.

. .

228 231

248

. .

.

. .

.

248

.

.

.

.

.....

•

. •

.

... .

227

...........

.

.

223

244 245

.

.

.

222

....

• .

. •

.

. .

•

•

.

. .

. .

Rollover-Effekte und »Sie sind hier«-links.

.

.

.

.

Tabellen richtig verwenden

•

.

.

Von vertikal nach horizontal.

.

.

224

.

.

.

.

221

225

.

. .

.

.

221

....

.

.

.

.

214 218

.... .....

.

.

Programmierfehler im Internet Explorer ausbügeln.

. .

.

. .

.

. .

.

. .

Besuchte Seiten markieren. Ein vertikales Navigationsmenü erstellen

.

.

.

Externe links speziell kennzeichnen

.

.

.

links mit Hintergrundbildern versehen.

.

•

.

Grundsätzliche Formatierungen für links.

Tabellen mit Stil .

.

.

.

Übung: links fonnatieren

.

. .

Große. anklickbare Buttons CSS-basierte Rollover-Effekte . .

.

. .

Fortgeschrittene Techniken für links .

.

. .

.

Horizontale Navigationsleisten

.

.

.

Vertikale Navigationsleisten

.

. .

.

.

. .

.

.

Navigationsleisten erstellen Ungeordnete listen verwenden.

Sliding Doors

.

206 210 212

.

269 269

...

271

.... ....

272

...

274 275

...

272

Fonnulare mitStil

.

.

.

.

.

.

.

.

.

.

HTMl·Fonnularelemente Fonnulardesign mit CSS. Übung: Stile für Tabellen .

.

Übung: Stile für Formulare

.

.

.

.

.

.

.

•

.

.

.

. .

.

•

.

.

.

.

.

.

•

.

.

.

.

.

.

.

•

.

.

.

.

.

.

•

.

.

.

. .

.

•

. .

.

.

. .

•

.

. .

.

•

. •

•

.

.

. .

.

• •

.

. .

.

.

. .

.

.

. .

•

.

.

.

.

.

.

. .

.

.

.

.

•

.

.

.

,

.

.

•

.

• '

.

.

.

•

.

. .

•

.

.

•

.

.

•

• • •

.

.

.

.

, .

.

•

' •

.

.

.

.

.

.

.

. .

.

.

•

.

.

•

• • .

•

277

" .." .

.

.

.

.

,

278

. . .. . . . .

280

. . . . . . . . . . .. . . . . . . ... . . . . . . . . . . . . . . . . .

282

.

•

.

.

.

.

.

.

•

.

•

.

.

.

. .

.

.

•

.

•

.

.

.

. .

.

•

.

•

.

.

.

.

.

.

.

.

.

.

.

. ,

.

.

.

•

.

•

.

.

.

.

•

.

.

.

.

.

.

.

.

.

.

.

.

287

Teil 3: SeHenlayout mH CSS Kapitel 11: Float-basierte Layouts Wie das layout mit (SS funktioniert Das mächtige -Tag

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. ,

.

.

. ,

.

.

.

.

•

.

.

. ,

.

.

•

,

•

.

. ,

.

.

. ,

.

.

. ,

.

.

•

•

•

.

.

.

.

.

.

•

•

.

. ,

.

.

.

.

•

.

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

•

.

.

.

.

.

•

.

•

.

.

.

Verschiedene Arten von Webseitenlayouts

.

.

.

197

,...,...

297

,...,...

298

.

.

.

•

.

.

.

.

299

Grundlagen des Float·basierten layouts . . . . . . . . . . . . . . . ......... . .. . . .. . . .. . . ..

301

Roats für Ihre layouts einsetzen .

...

305

..

306

. ..

308

. .. Probleme mit Roats lösen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . , . . .. . . . . . . . .. . . . . . . . . Das Umfließen von Roats steuern . ..

310 314

.

. .

.

Alle Spalten als Float definieren.. Aoats in Roats

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. .

.

.

.

. .

.

.

. •

.

.

. .

.

.

. .

.

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

•

.

. .

.

. .

.

.

, .

.

Elemente mit negativen Außenabständen positionieren,

.

.

.

.

.

.

.

Spalten über die gesamte Höhe der Seite. Das Verrutschen von Roats verhindern

.

.

3·Pixel--lücken

.

.

.

.

.

.

.

.

.

.

.

.

. .

•

. .

.

. .

.

.

•

.

.

.

. .

.

.

• .

.

.

.

.

.

. .

•

.

•

.

.

.

.

. •

.

.

. .

.

.

.

•

.

.

. .

.

•

. •

.

.

. .

.

•

. •

.

.

.

.

.

.

.

.

.

.

.

.

.

,

.

.

.

.

.

.

.

. • .

. . . . . •

.

.

.

. .

.

.

. .

.

.

.

. •

.

.

. .

.

. •

.

•

. .

.

.

.

. • .

.

.

.

.

.

.

.

.

.

.

. •

.

.

.

.

.

•

.

•

.

.

.

.

.

.

•

.

•

•

•

.

.

.

.

•

.

. . .

.

. • •

.

.

.

.

.

.

.

•

•

•

•

•

. .

.

.

.

. .

.

.

. .

.

.

. .

.

.

.

. .

.

.

. .

.

.

•

• •

.

.

. .

.

. •

.

. .

.

.

.

.

.

. .

.

.

.

.

.

.

.

.

.

.

•

.

•

. ,

.

.

•

. • .

•

.

.

. .

.

.

. .

•

. .

. .

.

.

• . .

.

.

.

Programmierfehler im Internet Explorer umgehen Der lOouble-Margin«·8ug

.

.

Weitere Probleme mit dem Internet Explorer.

• •

. .

.

.

.

. . .

.

. • .

.

.

• .

. • .

•

.

.

•

.

•

.

.

. .. .

.

.

.

.

.

Die layoutregeln erstellen

.

Weitere Spalten hinzufügen

.

.

. .

.

.

. .

.

.

.

.

.

.

.

. .

•

. .

.

.

.

.

•

.

•

.

. .

.

. .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. ,

.

.

. .

.

.

. .

.

.

. •

•

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. ,

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

.

.

.

.

. .

.

.

. .

.

.

. .

. .

325 327

•

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. .

.

•

. •

.

.

.

.

. .

.

.

•

•

.

. .

.

. .

.

.

. .

•

.

.

.

. .

.

.

. .

.

. .

.

.

. •

.

.

. .

.

•

• •

.

. . . . • •

•

. .. . . . .

343

. . . . . ..

347

.

.

.

.

. .

.

.

.

. •

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

"

•

.

. . . . . •

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

, .

•

.

• .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. .

•

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

.

. .

.

. •

.

.

.

. .

.

•

. • .

.

. .

.

. .

. .

.

.

. .

.

.

. .

.

.

.

.

.

.

.

.

.

.

. .

.

.

. .

.

.

. .

.

.

.

.

.

. .

.

.

. .

. .

.

.

.

. .

Positionierung innerhalb eines Elements . Ein Element außerhalb seiner Box darstellen. .

.

.

.

.

.

.

. .

.

.

.

.

. .

.

.

.

. . .

.

.

.

. .

.

.

.

.

.

. • .

. ,

.

.

•

. .

339

. .

.

.

•

.. . . . . .. . . . .

.

.

.

.

.

. .

.

• . .

.

. • •

. •

• .

. • .

. . . .

. • . • .

. .

.

.

. . .

.

. • .

.

.

.

.

.

.

.

. .

.

.

. .

.

.

. •

.

•

. .

.

. •

. •

.

.

.

.

.

.

.

.

.

.

.

.

•

. .

.

.

.

. •

.

•

.

.

.

.

.

.

. .

.

.

.

.

•

.

.

.

.

.

. • •

•

.

.

.

. .

•

.

. .

.

•

. •

•

.

CS5--Positionierung für das Seiten layout verwenden .

.

. .

.

• .

.

.

.

•

. .

.

.

.

.

337

.

.

. .

.

. .

334 335

... .. . . .. . •

. .

.

. .

.

.

. ... . . .

.

. .

.

.

332

.

.

.

Elemente stapeln Teile einer Seite verstecken . Sinnvolle Strategien für die Positionierung .

.

. .

.. . . .

•

•

. .

.

.

. .

.

330 331

.

.

Einstein und die absolute Positionierung Wann (und wo) relative Positionierung sinnvoll ist . .

.

.

329

...

•

.

Wie CS5--Eigenschaften für die Positionierung funktionieren .

.

.

.

325

. .. . .

.

Kapitel 11: HTML-Elemente posHionieren Die Positionierung steuern.

. .

.

Die Spalten als Roats definieren letzte Anpassungen

.

.

Übung: layout mit negativen Außenabständen Das layout zentrieren. .

.

.

Spalten über die ganze Höhe der Seite (»Faux Columns«) Die Breite korrigieren . .

. .

322

...

Übung: Mehrspaltige layouts . . . . . . . . . . . . . . . . . . . . . . . . . .... . . . .... . . ... . . . . . . . Strukturieren Sie den HTMl·Code.

315 319

.

. ... . . .

338

349 350 352

. . ... ... .

356

. . ...

356

.......

•

.

. .

. . . .. . . .

360 361

.........

363

. . ..

363 364

. .

.

.

.

. •

.

.. . . . . . . . .. . ... . . .

Frames mit CSS und fester Positionierung . . . . . . . . . . . . . . . . .... ... . . . . . . . . . . .

365 371

Inhaltsverzeichnis

IX

Übung: Seitenelemente positionieren .

. .

.

.

. .

.

.

•

.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375

Den Kopfteil einer Seite verbessern.

.

.

.

. .

.

.

. •

.

.

. .

.

.

•

Fotos mit Beschriftungen versehen .

.

.

.

. .

.

.

. •

.

.

. .

.

.

. .

. .

.

.

. .

.

.

. •

.

.

. .

.

.

.

Seitenlayout

.

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

..... .....

375 380 382

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

l91

. .

.

.

. .

.

.

• .

.

.

. .

.

.

.

•

.

.

. .

.

.

. .

•

.

. .

.

.

. •

•

. •

.

.

. .

.

.

. .

•

.

. .

.

.

. •

.

....

Teil 4: FortgeschriHenes C55 Kapiteln: C55 für gedruckte Seiten

Wie medienspezifische Stylesheets funktionieren

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

. .

.

. .

.

.

.

. .

.

.

. •

.

.

. .

.

.

•

.

.

.

.

. .

.

.

. .

.

.

.

. .

•

.

.

.

.

. •

Medienspezifische Stylesheets einbinden Medientypen für ein externes Stylesheet angeben. .

.

. .

.

.

. .

.

.

.

.

.

.

.

.

.

.

...... .....

Medientypen innerhalb eines Stylesheets angeben . . . . . . . . . . . . . . . . . . . . . . . . . . . Stylesheets für den Ausdruck erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

391 394 394 394 395

Regeln zur Bildschirmdarstellung mithilfe von !important überschreiben . . . . . . . . .

396

Textstile überarbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Hintergründe für den Ausdruck formatieren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

397 398

.

Unerwünschte Bereiche einer Seite ausblenden. Seitenumbrüche für das Ausdrucken hinzufügen.

. .

.

.

. .

. .

.

.

.

.

. .

. .

.

.

.

.

. .

.

.

.

. .

.

.

. .

•

.

. .

.

.

.

. .

.

.

. .

.

.

.

•

.

.

.

.

.

.

.

•

.

•

.

Übung: Ein Stylesheet für die Druckversion einer Webseite erstellen

.

.

. . . . 400 . . . . 401 403

.

.

.

.

. . . . 403 Unerwünschte Seitenelemente entfernen . . . . . . 405 Hintergründe entfernen und das layout anpassen. Den Text neu formatieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407 .

Das logo darstellen. URls mit ausdrucken. . .

.

.

.

.

. .

. .

.

.

. .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

. .

Kommentare Stildefinitionen und Stylesheets sinnvoll ordnen .

.

.

.

.

.

.

Aussagekräftige Namen verwenden.

.

.

.

.

.

.

.

.

.

.

. .

.

Kapitel 14: Besseren C55-Code schreiben .

.

.

. .

.

. .

. .

.

.

.

.

. .

.

.

. .

.

.

.

. .

.

.

.

. .

.

.

. .

.

.

. .

.

.

. .

•

.

.

.

.

.

.

. .

.

.

. .

•

.

•

.

.

.

. .

.

.

. .

.

• .

•

. . . . . . . . . . . 408 . . . . . . . . . . . 408

. . . . . . . . . . . . . . . . . . . . . . . . . . . .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

.

.

.

.

.

.

. .

.

.

.

. .

.

.

. .

.

.

. .

.

.

. .

•

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

.

Stile durch thematische Zusammenfassung ordnen.

.

.

.

. .

.

.

. .

.

.

• .

.

.

. .

.

.

.

• .

.

.

. .

.

.

. .

.

.

• .

.

.

. .

.

.

. •

Mehrere Stylesheets verwenden

.

. .

.

.

.

. .

.

.

Unterschiede in der Browserdarstellung beheben Nachfahren-Selektoren verwenden Unterteilen Sie Ihre Seiten Mein Körper gehört mir .

.

. .

.

.

. .

.

.

.

.

. .

.

.

. .

.

411 412

. . . . . . . . . . . . 412 414

. .

Mehrere Klassen gleichzeitig verwenden

411

.

.

.

.

.

. . . . 416

. . . . . 417

420 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423

.

.

. .

. .

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

•

.

•

•

.

.

.

. .

.

.

. .

.

.

. .

•

.

. .

.

.

. •

.

.

. .

.

.

. .

. .

.

.

. .

.

.

. .

.

.

.

. •

.

.

. .

.

.

. .

•

.

. .

.

.

. •

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

•

.

.

.

.

.

.

.

.

. .

.

.

. .

.

.

. .

.

.

. .

.

.

.

. .

.

. .

.

.

.

. •

.

.

.

. .

.

.

. .

.

.

. •

.

.

. .

. .

.

.

Mit Hacks für den Internet Explorer umgehen

.

Entwickeln Sie zuerst für aktuelle Browser

Isolieren Sie CSS-Code für den IE mit Conditional Comments.

•

.

.

.

.

.

. . . . . 424 . . . . . 425 .

.

.

.

.

428

. . . . . 428 . . . . . 429

Teil 5: Anhänge Anhang A: Referenz der C55-Eigenschaften Anhang B: C55-Ressourcen Index

x

. . . . . . . . . . . . . . . . . . . . . . . . . .

435

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4&5

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

CSS: Missing Manual

475

Die fehlenden Danksagungen

Über den Autor David Sawyer McFariand ist Präsident der Sawyer McFariand Media, Ine., einer Firma für Website-Entwicklung und -Training in Portland, Oregon. David entwirft seit 1995 Websites, sein ers­ tes Werk war ein Onlinemagazin für Profis aus der Kommunika­ tionsbranche. Er arbeitete als Webmaster für die University of California in Berkeley und das Berkeley Multimedia Research Center. Außerdem leitete er das komplett CSS-basierte Redesign von Macworld.com. Neben dem Webdesign arbeitet David als Autor, Trainer und Dozent. Er unterrich­ tete unter anderem an der UC Berkeley Graduate School of Journalism, dem Cen­ ter for Electronic Art, dem Academy of Art College. dem Ex'Pressions Center for New Media und der Portland State University. Artikel von David fmden Sie bei­ spielsweise in den Magazinen Practical

Web Design, MX Developer's Journal, Mac­

world magazine und CreativePro.com. Rückmeldungen zu diesem Buch sind willkommen. Bitte benutzen Sie hierfür die Adresse

[email protected]. Wenn

Sie technische Untersützung benötigen, hilft

Ihnen sicher die Ressourcenliste in Anhang B.

Über das kreative Team Nan Barber (Lektorin) ist seit den Anfangen mit der Missing Manual-Reihe betraut. Das sind inzwischen so viele Jahre, dass sie sich noch daran erinnert, wie sie ihren Computer mit einer Floppy-Disk gestartet hat. Peter Meyers (Lektor) arbeitet bei O'Reilly Media als Lektor für die Missing Manual-Reihe. Er lebt mit seiner Frau in New York City.

Die fehlenden Danksagungen

XI

Die fehlenden Danksagungen Mark Levitt (Fachgutachter) ist Senior Web Producer für die Online Publishing Group von O'Reilly Media. Ursprünglich von der Informatik kommend, liegen seine beruflichen Schwerpunkte auf interaktiven Medien. Lernmedien sowie auf Webentwicklung. Er ist bekannt dafür, zu allen Tageszeiten Müsli zu essen.

Justin Watt (Fachgutachter) arbeitet momentan als Author Services Engineer für Federated Media Publishing, einer Firma für Werbung in Blogs aus Sausalito. Kali­ fornien. Sein Blog fmden Sie unter justinsomnia.org, wo Sie sich über seine Aben­ teuer in Nordkalifornien informieren können.

Jergen W. Lang (Übersetzer) lebt als freier Übersetzer, Webdesigner. Programmie­ rer. Dozent und Musiker im Elsass. Als er sich 1996 seinen ersten Mac zulegte, ahnte er noch nicht, dass er einmal über 14 Bücher für den O'Reilly-Verlag überset­ zen würde. Eines davon halten Sie gerade in den Händen. Zu erreichen ist J0rgen unter der E-Mail-Adressejwl@worldmusic de. .

Danksagungen Vielen Dank an alle. die an diesem Buch mitgearbeitet haben, inklusive meiner Stu­ denten, die mir immer wieder helfen, technische Themen mit den Augen eines

Anfcingers zu sehen. Danke an meine technischen Sachverständigen Mark Levitt und Justin Watt. die mich vor so manch peinlichem Fehler bewahrt haben. Danke auch an Zoe Gillenwater für ihre wertvollen Ratschläge und all die großzügigen Seelen auf der CSS-Discuss-Mailingliste, die ihr reichhaltiges Wissen über CSS mit mir geteilt haben. Außerdem sind wir den vielen Webdesignern zu Dank verpflich­ tet. die neues Terrain für die kreative Nutzung von CSS erschlossen haben und ihre Entdeckungen mit der Webdesign-Gemeinschaft teilen. Danke natürlich auch an David Pogue. dessen unermüdliche Begeisterung und Ausdauer eine große Inspiration sind. Danke ebenfalls an Nan Barber für die Ver­ feinerung meiner Texte, Peter Meyers für das Aufpolieren meiner Formulierungen und dafür. mich "auf der Spur" zu halten. Danke an meine Frau Scholle für die Motivation, dieses Projekt zu Ende zu bringen. und an meinen Sohn Graham, der keine Ahnung hat und dem es auch egal ist, was ich beruflich mache.

Die Missing Manual-Reihe Missing Manuals sind clevere, verständlich geschriebene Handbücher zu Software und Gadgets, Anwendungen und Sprachen, die ohne gedruckte Handbücher daherkommen (also praktisch alle). Jedes Buch hat einen handverlesenen Index und konkrete Querverweise zu bestimmten Seiten (nicht nur zu Kapiteln). Auf deutsch liegen folgende Missing Manuals vor:

XII

•

JavaScript: Missing Manual von David Sawyer MeFarland

•

Websites: Missing Manual von Matthew MacDonald (in Vorbereitung)

•

Mac OS X: Missing Manual Tiger-Ausgabe von David Pogue

CSS: Missing Manual

Die fehlenden Danksagungen • •

Mac OS X Leopard: Missing Manual von David Pogue David Pogues Digitale Fotografie: Missing Manual von reitung)

David Pogue (in Vorbe-

•

iPhone: Missing Manual von David Pogue & Christian Hieber

•

iPod: Missing Manual von J.D. Biersdorfer

•

Dein Gehirn: Das fehlende Handbuch von Matthew MacDonald

Die fehlenden Danksagungen

XIII

Einleitung

Cascading Style Sheets. kurz CSS. geben Ihnen die vollständige kreative Kontrolle über das Layout und die Gestaltung Ihrer Webseiten. Mithilfe von CSS können Sie Texte mit Überschriften. Initialen (schmückende Anfangsbuchstaben) und Rah­ men versehen, die ins Auge springen und die Sie sonst nur aus Hochglanzmagazi­ nen kennen. Sie können Bilder mit großer Genauigkeit im Dokument platzieren, mehrspaltige Layouts verwenden und Ihre Textlinks mit dynamischen Rollover­ Effekten hervorheben. Aber das muss doch ganz schön schwierig sein, oder? Ganz und gar nicht! Schließ­ lich wurde CSS entwickelt. um die Gestaltung von Webseiten zu vereinfachen. Auf den folgenden Seiten werden Sie die Grundlagen von CSS kennenlernen. Schon in Kapitel 1 werden Sie Ihre erste CSS-basierte Webseite anlegen.

Wie C55 funktioniert Wenn Sie in Textverarbeitungsprogrammen wie Microsoft Word oder Layoutpro­ grammen wie Adobe InDesign bereits mit Stilvorgaben gearbeitet haben, wird Ihnen CSS bekannt vorkommen. Ein Stil bzw. eine Stildefinition ist einfach eine Regel, die beschreibt, wie ein bestimmter Teil einer Webseite formatiert werden soll. Und ein

Stylesheet ist dann eine Sammlung mehrerer Stildefmitionen.

CSS ist nicht das Gleiche wie HTML. Mit HTML strukturieren Sie ein Dokument, indem Sie es in Überschriften, Absätze, Aufzählungslisten und so weiter aufteilen. CSS ist eine vollkommen andere Sprache. Aber sie arbeitet Hand in Hand mit Ihrem Webbrowser, damit die Informationen im HTML-Dokument gut aussehen. So verwenden Sie beispielsweise HTML, um einen bestimmten Satz als Überschrift ersten Grades «h 1 » zu kennzeichnen, die den Inhalt der übrigen Seite einleitet.

Einleitung

xv

Die Vorteile von (55

Mit CSS sorgen Sie dafür, dass diese Überschrift beispielsweise in großen, roten, fett gedruckten Buchstaben dargestellt wird und 50 Pixel vom linken Rand des Ansichtsbereichs beginnt. In CSS geht es also darum, dass Erscheinungsbild von HTML-Dokumenten zu steuern (und bestenfalls zu verbessern). Sie können auch Stilvorgaben entwickeln, die spezielle Stile für die Gestaltung von Bildern definieren. So könnte eine Stildeftnition beispielsweise dafür sorgen, dass ein Bild am rechten Rand einer Webseite angezeigt wird. Außerdem wird es mit einem farbigen Rand umgeben und durch einen 50 Pixel breiten Außenabstand vom umgebenden Text getrennt. Sobald Sie einen Stil angelegt haben, können Sie diesen auf Texte, Bilder, Über­ schriften und andere Seitenelemente anwenden. So können Sie beispielsweise eine bestimmte Schriftart sowie -farbe und -größe festlegen, die sofort die Darstellung verändern. Sie können aber auch bestimmte HTML-Elemente mit eigenen Stilvor­ gaben versehen, sodass z.B. alle Überschriften ersten Grades «hl>-Tags) auf der gesamten Website im gleichen Stil dargestellt werden, egal an welcher Stelle sie stehen.

Die Vorteile von C55 Bevor es CSS gab, waren Webdesigner auf die in HTML selbst vorhandenen Mög­ lichkeiten für Layout und Gestaltung beschränkt. Wenn Sie sich eine Webseite aus dem Jahr 1995 ansehen, wissen Sie, was hier mit beschränkt gemeint ist. Wie Sie später in dieser Einleitung sehen werden, bildet HTML zwar immer noch die Grundlage der meisten Seiten im World Wide Web, aber es ist einfach kein Design­ werkzeug. Sicher bietet HTML auch weiterhin einfache Formatierungsoptionen für Texte, Bilder, Tabellen und andere Elemente, und Webdesigner mit genügend Geduld und Akribie können Seiten auch mit reinem HTML-Code gut aussehen lassen. Die resultierenden Dokumente sind aber meistens überladen mit Code und dazu behäbig in der Darstellung, die oftmals kaum vorhersehbar ist. Im Gegensatz

XVI

dazu hat CSS folgende Vorteile:

•

Stylesheets bieten wesentlich mehr Formatierungsoptionen als HTML. Mit CSS können Sie Absätze so formatieren wie in Büchern und Zeitungen (z.B. indem Sie die erste Zeile einrücken und ohne Zwischenräume zwischen den Absätzen darstellen). Sie können den sogar den Durchschuss (also den Zeilenabstand) anpassen, wenn Ihnen danach ist.

•

Binden Sie Ihr Hintergrundbild per CSS in eine Seite ein, können Sie entschei­ den, wie (und ob) das Bild gekachelt (vertikal und horizontal wiederholt) wer­ den soll. Diese Möglichkeiten fehlen in HTML komplett.

•

Der Platzbedarf für CSS-basierte Stildefinitionen ist wesentlich geringer als die HTML-eigenen Formatierungsoptionen, wie beispielsweise das vielgehasste -Tag. Mit CSS können Sie eine textüberladene Webseite um viele Kilo{byte) leichter machen. Das Ergebnis sieht nicht nur besser aus, sondern wird auch schneller geladen.

CSS: Missing Manual

HTML:

•

Das Grundgerüst

Außerdem erleichtern Stylesheets die Aktualisierung Ihrer Site. Sie können sämtliche Stildefinitionen in einem externen Stylesheet speichern, das alle Sei­ ten Ihrer Site gemeinsam nutzen. W enn Sie einen Stil ändern, wirkt sich diese Änderung sofort auf

sämtliche

Teile Ihrer Site aus, in denen diese Definition

verwendet wird. Sie können das Aussehen Ihrer Seiten also komplett umkrem­ peln, indem Sie lediglich ein einziges Stylesheet verändern. _: HTMl i� mittlerweile so betagt, dass das World Wid€ Web Consortium I!NJQ, die für Defini­

tion der Standards im Web zuständige Organisation, viele HTMl-Tags als deprecated (nicht mehr offiziell unterstützt veraltet) bezeichnet Hierzu gehören besonders Tags, die für die Darstellung verwendet wurden (wie beispielsweise das uns-Tag).

Was Sie wissen müssen Wir gehen in diesem Buch davon aus, dass Sie bereits über HTML-Grundwissen (und vielleicht auch schon über ein wenig Erfahrung mit CSS) verfügen, dass Sie vielleicht schon die eine oder andere Website gebaut haben (oder zumindest mal eine Webseite) und dass Sie sich mit den Tags «html>.

, ,

usw.) auskennen, aus denen die Hypertext Markup Language besteht. Ohne HTML ist CSS quasi wertlos. Wenn Sie also weiterkommen wollen, müssen Sie zumindest wissen. wie Sie mit einfachen HTML-Mitteln eine Webseite erstellen können. Haben Sie bereits Webseiten mit HTML erstellt. werden aber das Gefühl nicht los, dass Ihr Wissen ein wenig angestaubt ist, geben wir Ihnen auf den folgenden Seiten einen kleinen mentalen Staubwedel an die Hand.

1IhIweIs: Damit Sie beim lernen von HTMl keine nassen Füße bekommen, gibt es eine Reihe von kos­ tenlosen Onlineanleitungen. Die umfassendste deutschsprachige Seite ist wohl http./lde.selfhtml.orglvon

Stefan Münz. Für leute, die des Englischen mächtig sind, gibt es außerdem HTMl Dog (www.html­ dog.comjguidesjhtmfbeginnerf) und W3Schools (www.w3schoofs.comjhrmff). Wenn Sie gedruckte Setten bevorzugen, empfehlen wir Ihnen Websites erstellen: Missing Manual oder HTML mit C55 & XHTML von Kopf bis Fuß (beide O'Reilly Verlag).

HTML: Das Grundgerüst HTML (Hypertext Markup Language) verwendet eine Reihe einfacher Anweisun­ gen.

Tags genannt, um die verschiedenen Teile einer Webseite zu strukturieren. Der

folgende HTML-Code erzeugt eine (sehr) einfache Webseite:

. •

Alle Tags (auch die leeren) müssen geschlossen werden. Um in XHTML einen Absatz zu markieren, müssen Sie mit

beginnen und mit

aufhören. Das Problem ist nur, dass manche Tags lieber allein unterwegs sind, also keine Paare

bilden. Diese werden als

leere Tags

bezeichnet, weil ihnen das schließende

Gegenstück fehlt. Ein Beispiel ist der Tag für den Zeilenumbruch. Einen leeren Tag schließen Sie, indem Sie vor die schließende spitze Klammer einen Schräg­ strich stellen, Z.B.
.

Die Auswirkungen der Dokumenttyp-Deklaration Im XHTML-Beispielcode ist alles unterhalb des -Teils

genau so

wie im

zuvor gezeigten HTML-Beispiel. Dafür unterscheiden sich die Informationen

am

Anfang der Seite besonders stark. Jede XHTML-Seite beginnt mit ein paar Zeilen, die beschreiben, um welche Art von Dokument es sich handelt und nach welchem Standard sie sich richtet. Diese

Dokumenttyp-Definitionen

(oder kurz

DTD)

ver­

weisen auf Dateien im Internet, die im Einzelnen regeln, wie dieser Dateityp zu behandeln ist. In unserem Fall besagt die DTD nur, dass es sich um ein XML-Dokument handelt,

genauer gesagt um ein XHTML-Dokument. Der Dokumenttyp spielt eine entschei­ dende Rolle dabei, wie der Browser die CSS-Anweisungen umsetzt. Ein falscher Dokumenttyp kann leicht dafür sorgen, dass bestimmte Versionen des Internet Explorer die Darstellung einer Seite, die viel CSS verwendet, komplett durcheinan­ derWÜTfelt. Mehr zu Dokumenttypen und deren Bedeutung für CSS fmden Sie in Kapitel I.

Einleitung

XXI

Software für (SS

Hillwels: Das scheint für den Anfang eine Menge Stoff zu sein, wenn Sie noch nicht so viel Erfahrung mrt dem Erstellen von Webserten haben. Stimmt. In Kaprtel l werden Sie aber auch ein Werkzeug kennenler­ nen, mrt dem Sie sicherstellen können, dass Ihr XHTML-Code korrekt ist: den

W3C Vofidotor. Er überprüft

Ihre Seite und teilt Ihnen mit, ob alles in Ordnung ist Noch wichtiger ist es allerdings, dass Sie auch noch lernen, CSS-freundlichen XHTML-Code zu schreiben.

Software für CSS Um (X)HTML- und CSS-basierte Webseiten zu erstellen, brauchen Sie nicht viel mehr als einen einfachen Texteditor wie Notepad (Wmdows) oder TextEdit (Mac). Nachdem Sie Ihre ersten paar hundert Zeilen HTML und CSS eingegeben haben, werden Sie sich aber ein Programm wünschen, das die Arbeit mit Webseiten etwas leichter macht. Im folgenden Abschnitt fmden Sie einige häufig verwendete Pro­ gramme; manche gibt es kostenlos, andere müssen Sie kaufen. Hillwels: Es gibt Hunderte verschiedener Werkzeuge, die Ihnen beim Erstellen von Webseiten helfen können. Daher ist die folgende Liste auch nicht vollständig. sondern eher so eine Art .Greatest Hits« der Programme, die CSS-Fans heutzutage am liebsten benutzen.

Kostenlose Programme Für das Erstellen und Bearbeiten von Webseiten und Stylesheets gibt es reichlich kostenlose Programme. Wenn Sie immer noch mit Notepad oder TextEdit herum­ basteln, probieren Sie es doch einmal mit einem der folgenden Programme:

www.chami.com/htmI-kit/). Dieser mächtige (X)HTML­ Editor besitzt eine Reihe nützlicher Fähigkeiten, z.B. die Möglichkeit einer Websei­ tenvorschau direkt im Programm (damit Sie nicht ständig zwischen Editor und Browser wechseln müssen), außerdem Abkürzungen für HTML-Tags und vieles mehr. HTML-Kit (Windows,

TextWrangler (Mac,

www.barebones.com/products/textwrangler/). Dieses kosten­

lose Programm ist im Prinzip eine abgespeckte Version von BBedit, einem hoch entwickelten und wohlbekannten Textbearbeitungsprogramm für den Mac. Text­ Wrangler besitzt zwar nicht alle Fähigkeiten von BBEdit, verfügt aber immerhin über Syntax-Highlighting (d.h.• (X)HTML-Tags und CSS-Eigenschaften werden in unterschiedlichen Farben hervorgehoben, wodurch Sie die einzelnen Teile einer Seite leichter unterscheiden können), FTP-Unterstützung (damit Sie die Dateien direkt aus dem Programm heraus auf einen Webserver hochladen können) und vieles andere.

Kommerzielle Software Programme für die Webentwicklung reichen von kostengünstigen Texteditoren bis hin zu kompletten Website-Konstruktionswerkzeugen mit allem Drum und Dran:

XXII

CSS: Missing Manual

Über die§e§ Buch

•

EditPlus (Windows. www.editplus.com) ist ein preiswerter ($35) Texteditor. Er verfügt über Syntax-Highlighting, FTP-Funktionen. automatische Codevervoll­ ständigung und andere handgelenkschonende Eigenschaften.

•

skEdit (Mac, www.skti.org) ist ebenfalls ein günstiger ($34,95) Webseiten­ Texteditor. Seine Funktionen umfassen FTP-/SFTP-Unterstützung, Syntax­ HigWighting, automatische Codevervollständigung, eine Funktion zum »Auf­ räumen_ von HTML-Code und vieles mehr.

•

BBEdit (Mac, www.barebones.com/products/bbedit). Dieser viel geliebte Texte­ ditor für den Mac ($125. Studenten: $49) ist vollgepackt mit Werkzeugen zur Arbeit mit HTML, XHTML. CSS und diversen anderen Programmiersprachen. BBedit enthält eine Menge nützlicher Werkzeuge und Hilfestellungen zum Erstellen von Websites.

•

Dreamweaver (Mac und Windows, http://www.adobe.com/de/products/dream­ weaver/) ist ein visuelles Editorprogramm für Websites (570 €). Sie können die Seiten so bearbeiten. wie sie nachher im Webbrowser dargestellt werden. Das Programm verfügt außerdem über einen mächtigen Texteditor und ausgezeich­ nete Werkzeuge zum Erstellen und Verwalten von CSS. Eine vollständige Anlei­ tung zu diesem mächtigen Programm finden Sie beispielsweise im Buch Dreamweaver CS4: The Missing Manual.

•

Expression Web Designer (Windows, www.microsojt.com) ist Microsofts neues Webdesignprogramm. Es ersetzt FrontPage und enthält eine Menge professio­ neller Webdesignwerkzeuge. inklusive einer recht guten Unterstützung bei der CSS-Ersteilung_

•

Coda

(Mac. www.panic.com/coda) ist ein recht neues Webdesignwerkzeug für den Mac ($99). Es fasst alle Entwicklungsschritte in einem Fenster zusammen und enthält neben umfassenden XHTML-Fähigkeiten eine große Zahl nützli­ cher Werkzeuge rur die Arbeit mit CSS.

HlIIWeIs: Die verschiedenen in diesem Abschnitt besprochenen Programme sind Mehrzweckwerkzeuge, mit denen Sie sowhl (X)HTML als auch CSS bearbeiten können. Auf diese Weise brauchen Sie nur ein Pro­ gramm für die Webentwicklung zu lernen. Wenn Sie sich bereits auf ein Programm zum Schreiben von (X)HTML festgelegt haben, finden Sie in Anhang B eine Liste von speziellen CSS-Editoren.

Über dieses Buch Das World Wide Web ist so einfach zu benutzen. dass selbst eine Rentnerin aus Obereglfing oder ein Erstklässler aus Meuselwitz an der Schnauder damit klarkom­ men sollte. Leider sind die Regeln, nach denen das Web funktioniert, nicht so ein­ fach zu verstehen. Die Informatiker und Techniker, die die offizielle Dokumenta­ tion schreiben. haben wenig Interesse daran, ihre Konzepte normalsterblichen Webbenutzern zu erklären. Wenn Sie einen Blick auf die offizielle Spezifikation zu CSS (2) werfen. bekomen Sie einen guten Eindruck von dem technischen Kauder-

Einleitung

XXIII

Über dieses Bu(h

IM HÖCHSTEN GANG

Die verschiedenen C55-Versionen Wie Betriebssysteme und iPods wird auch CSS beständig weiter­ entwickelt. Das 1996 veröffentlichte (55 1 legte das Fundament zur Verwendung von (ascading Style Sheets. Die grundSätzliche Struktur einer Stildefinition, das Konzept der Selektoren (s. Kapitel 3) und die meisten in diesem Buch behandelten (55Eigenschaften waren bereits Teil von Version 1 . I n CSS 2 kamen neue Fähigkeiten hinzu, beispielsweise die Möglichkeit, (55 für bestimmte Ausgabegeräte (Drucker, Moni­ tore, Projektoren usw., s. Seite 391) separat zu definieren. Seit (55 2 ist es außerdem möglich, Elemente pixelgenau im Ansichtsbereich der Webseite zu positionieren. Dieses Buch basiert auf (55 2.1, dem gegenwärtigen Standard für (ascading Style Sheets. Dieser Standard enthält sämtliche Elemente von (55 1 sowie eine Vielzahl neuer Eigenschaften (Properties) und korngiert eine Reihe von Problemen mit (55 2. Dabei enthält CSS 2.1 gegenüber Version 2 keine radikalen Änderungen, und die meisten Webbrowser haben die neuen

Regeln mittlerweile ganz gut verinnerlicht. Vielen Dank! (Eine bemerkenswerte Ausnahme bildet der Internet Explorer 6 für Windows. Aus diesem Grund werden Sie in diesem Buch auch eine Reihe von Lösungen finden, mIt denen sich diese Pro­ bleme umgehen lassen. Zum Glück wurden die meisten teils haarsträubenden Fehler 1m Internet Explorer 7 behoben, und der Internet Explorer 8 hält sich sogar noch besser an die Stan­ dards.) (55 3 ist bereits in den Startlöchern. Obwohl das W3( den Stan­ dard noch absegnen muss, werden die neuen Richtlinien und Funktionen in einigen Browsern bereits umgesetzt. So kann Apples Browser Safan dank (55 3 bereits mehrere Hintergrund­ bilder für em Element verwenden. Sowohl Safan als auch Firefox unterstützen außerdem die neuen Eigenschaften zum Erzeugen von abgerundeten Ecken. Da (55 3 aber immer noch nicht fer­ tiggesteUt ist, ist m den meisten Browsern noch mcht viel davon zu sehen - und so auch in diesem Buch.

welsch, das diese Leute sprechen (http://www.edition-w3c.de/TR/1998/REC-CSS219980512/ und das ist schon die deutsche Übersetzung!). -

Für Cascading Style Sheets gibt es kein offizielles Handbuch. Leute, die CSS lernen wollen, wissen oft nicht, wo sie anfangen sollen. Und die Feinheiten von CSS brin­ gen selbst gestandene Webprofis manchmal noch ins Stolpern. Dieses Buch soll Ihnen als Handbuch dienen, das CSS eigentlich mitgeliefert werden müsste. Hier finden Sie schrittweise Anleitungen, mit denen Sie lernen, wunderschöne Websei­ ten zu erstellen.

CSS: Missing Manual ist so angelegt, dass es Lesern aller technischen Wissenslevel als Hilfestellung dienen kann. Um das Optimale aus diesem Buch herausziehen zu können, sollten Sie ein gewisses Basiswissen zu HTML und vielleicht auch schon zu CSS besitzen. Wenn Sie noch nie zuvor eine Webseite erstellt haben, sehen Sie sich unsere Kurzanleitung auf Seite 25 an. Die meisten Erläuterungen in diesen Kapiteln sind für fortgeschrittene Anfcinger gedacht. Wenn Ihnen das Erstellen von Websei­ ten noch neu ist, finden Sie in den mit »Im höchsten Gang(( überschriebenen Käs­ ten die einführenden Informationen, die Sie für das Verständnis des jeweiligen Themas benötigen. Die Kästen mit der überschrift » Sprechstunde für Power-User« sind für erfahrene Webentwickler gedacht. Sie enthalten technische TIpps, Tricks und Schleichwege für diejenigen, die noch tiefer in die Materie eindringen wollen. Hillwels: Gelegentlich empfiehlt dieses Buch andere CSS-Bücher, die Themen behandeln, die viel zu speziell oder nicht so wichtig für dieses Handbuch sind. Manche TITel sind beim Missing Manual-Verlag O'Reilly erschienen, andere nicht Stammt ein großartiges Buch einmal nicht aus der O'Reilly-Familie, wer­ den wir darauf hinweisen.

XXIV

CSS: Missing Manual

Über die§e§ Buch

Wie dieses Buch aufgebaut ist CSS: Missing Manual besteht aus vier Teilen, die jeweils mehrere Kapitel umfassen. •

Teil ], CSS-Grundlageo, zeigt Ihnen, wie Sie Stylesheets erstellen können. und gibt Ihnen einen überblick über die wichtigsten CSS-Konzepte und Technolo­ gien. wie Vererbung, Selektoren und das Prinzip der Kaskade. Außerdem zeigen wir Ihnen, wie Sie (X)HTML-Code schreiben müssen, damit er optimal mit CSS funktioniert. Vier Übungen untermauern die wichtigsten Konzepte dieses Teils und geben Ihnen einen guten Vorgeschmack auf die Leistungsfahigkeit von CSS.

•

Teil 2, Angewandtes CSS. nimmt Sie mit in die wirkliche Welt des Webdesigns. Sie lernen die wichtigsten CSS-Eigenschaften kennen und deren Verwendung für die Textformatierung. das Anlegen nützlicher Navigationswerkzeuge und das Einbinden von GrafIken in Ihre Seiten. In diesem Teil gehen wir außerdem darauf ein, wie Sie das Aussehen von Webseiten beim Ausdrucken optimieren können. Zudem zeigen wir Ihnen, wie Sie Formulare und Tabellen ansprechend gestalten.

•

Teil 3, SeitenJayout mit CSS, hilft Ihnen bei einem der verwirrendsten, aber auch lohnendsten Aspekte von CSS: der Kontrolle über die Platzierung der Ele­ mente einer Seite. Wir zeigen Ihnen, wie Sie häufig verwendete Designs (wie zwei- oder dreispaltige Layouts) und Seitenleisten erstellen können. Außerdem geht es hier um Floats und Positionierung, zwei wichtige CSS-Techniken für die Kontrolle des Seitenlayouts.

•

Teil 4, Fortgeschrittenes CSS, zeigt Ihnen, wie eine Webseite auch ausgedruckt gut aussieht, und behandelt fortgeschrittene Techniken zur effektiveren und effizienteren Nutzung von CSS.

•

Teil 5, Anhänge, enthält zwei Arten von Ressourcen. Zunächst eine Referenz der CSS-Eigenschaften: Hier fInden Sie zu jeder CSS-Eigenschaft eine kurze Zusammenfassung. Diese kleinen, leicht verdaulichen Happen können Ihnen helfen, bereits vorhandenes Wissen etwas aufzumöbeln oder nachzuschlagen, wenn Ihnen die Einzelheiten zu einer Eigenschaft gerade nicht einfallen. Der zweite Anhang befasst sich mit Werkzeugen und Ressourcen, die Ihnen beim Erstellen und Verwenden von CSS helfen sollen, sowie listet hilfreiche Websites und Bücher zum Thema auf.

Der Beispielcode zum Buch Dieses Buch soll Ihnen dabei helfen, Ihre Arbeit im Web schneller und profeSSiO­ neller zu erledigen. Daher ist es nur natürlich, dass ergänzende Materialien im Web zu finden sind. Wahrend Sie dieses Buch lesen, stoßen Sie auf zahlreiche Schritt-für-Schritt-Übun­ gen, die Sie selbst mit Rohmaterialien (wie GrafIken und halbfertigen Webseiten) umsetzen können. Laden Sie sich dazu den Beispielcode zum Buch von der Ver-

Einleitung

xxv

Die absoluten Basi(S

lagswebsite unter

http://examples.oreilly.de/german3xamples/cssmmger/

herunter.

Das reine Durchlesen dieser Schritt-für-Schritt-Anleitungen wird Ihnen allerdings nicht viel bringen. Sie sollten sich die Zeit nehmen, die Übungen am Rechner durchzuarbeiten, und Sie werden feststellen, dass Ihnen diese Anleitungen einen guten Einblick in die Arbeitsweise professioneller Webdesigner geben. Die herunterladbaren Übungen aus diesem Buch enthalten außerdem die fertigen Seiten, damit Sie Ihre Arbeit mit dem Endergebnis vergleichen können. Wir zeigen Ihnen also nicht nur, wie die Seiten aussehen sollten, sondern die tatsächlichen Sei­ ten im Internet.

Ü ber MissingManuals.com Auf der Missing Manuals-Website

www.missingmanuals.com

finden Sie englisch­

sprachige Artikel, TIpps und Updates zu diesem Buch. Wir möchten Sie dazu ermuntern, uns Ihre Korrekturen und Aktualisierungen zur Verfügung zu stellen. Damit das Buch so aktuell und akkurat wie möglich ist, werden alle bestätigten Änderungen und Korrekturen bei Nachdrucken und Neuauflagen berücksichtigt. Auf der Website finden Sie außerdem eine Liste der Korrekturen für Ihr Buch. (Kli­ cken Sie auf den Namen des Buchs und dann auf den Errata-Link, um die Ände­

rungen zu sehen.) Eine Liste mit deutschen Errata fmden Sie unter www.oreilly.de/

catalog/cssmmger. In der Zwischenzeit würden wir uns freuen, Ihre Vorschläge für neue Titel der Mis­

sing Manuals-Buchreihe zu hören. Auch dafür gibt es einen Platz auf der Website. Dort haben Sie außerdem die Möglichkeit, unseren kostenlosen E-Mail-Newsletter zu abonnieren, der Sie über Neuerscheinungen informiert.

Die absoluten Basics Um dieses Buch zu verwenden, brauchen Sie einige Grundlagen. Dieses Buch geht davon aus, dass Sie mit folgenden Begriffen und Konzepten vertraut sind: •

Klicken. In diesem Buch können drei Arten von Anweisungen vorkommen, für die Sie die Maus oder das Trackpad Ihres Computers benutzen müssen.

Klicken

bedeutet, dass Sie den Mauszeiger (meistens ein Pfeilsymbol) an eine bestimmte Stelle auf dem Bildschirm bewegen und dann - ohne den Mauszeiger weiter zu bewegen - die (normalerweise linke) Maustaste (oder die entsprechende Taste an Ihrem Trackpad) drücken. Doppelklicken bedeutet, dass Sie diese Taste zwei­ mal in kurzer Folge drücken - auch dieses Mal, ohne dabei den Mauszeiger zu bewegen.

Ziehen mit der Maus bedeutet, den Mauszeiger bei gedrückter Maus­

taste zu bewegen. Ein

Strg-Klick an einem PC bzw. ein 3€-Klick am Mac bedeutet, dass Sie beim

Klicken gleichzeitig die Strg- bzw. 3€-Taste drücken sollen. In vielen Fällen funktioniert anstelle eines •

Strg-Klicks auch ein Klick mit der rechten Maustaste.

Menüs. Menüs sind die Wörter, die Sie an der Oberkante eines Fensters (Win­ dows) oder Ihres Bildschirms (Mac) sehen: Sie heißen Ablage,

XXVI

CSS: Missing Manual

Bearbeiten, Dar-

Die ab50luten Ba5ic5

stellung und so weiter. Wenn Sie auf eines dieser Menüs klicken, erscheint eine Liste mit Befehlen, als wären sie auf eine gerade entrollte Schriftrolle geschrie­ ben. •

Betriebssystemgrundlagen. In diesem Buch gehen wir davon aus, dass Sie wissen,

wie man ein Programm öffnet, im Web surft und Dateien herunterlädt. Sie sollten

wissen, wie man das Startmenü (Windows) bzw. das Dock (Mac OS X) sowie die Systemsteuerung (Windows) bzw. die Systemeinstellungen (Mac OS X) bedient. Wenn Sie diese Informationen verinnerlicht haben, besitzen Sie genügend Hinter­ grundwissen, um an CSS; Missing Manual Spaß zu haben,

Ü ber --> diese --> pfeile In diesem Buch und in der gesamten Missing Manuals-Reihe fmde Sie Sätze wie diesen: »Öffnen Sie den Ordner System -t Library -t Fonts.(( Diese Schreibweise ist

eine Abkürzung für eine viel kompliziertere Anleitung, die Sie zum Öffnen von drei ineinander verschachtelten Ordnern bewegen soll, und zwar so: »Auf Ihrer

System. Öffnen Sie diesen. Im System­ ein weiterer Ordner namens Library. Doppelklicken Sie auf ihn

Festplatte finden Sie einen Ordner namens ordnerfenster ist

und öffnen Sie ihn dadurch. In diesem Ordner befindet sich wiederum ein Ordner namens Fonts. Doppelklicken Sie auch auf diesen Ordner und öffnen Sie ihn damit. Auf ähnliche Weise hilft Ihnen diese Kurzschreibweise, die Auswahl von Menü­ befehlen zu vereinfachen, wie in Abbildung E-l gezeigt.

AlIIIild0"l E-I:

In diesem Buch hilft Ihnen die pfeilschreibweise bei der Navi­ gation durch Ordner und Menüs.Ansicht ----t Zoom ----t Vergrößern ist einfach nur eine kompaktere Schreibweise für: »Wählen Sie aus dem Menü Ansicht den Eintrag Zoom. Aus dem nun angezeigten Unter­ menü wählen Sie nun den Ein­ trag Vergrößern.«

,*' �' �I'T*p(IiCI' ??

" ".rn Ipcl)( ", , �, v;, lJJofr""''''' �''''1 ''' > lore", ;,""'" ikl>r , j, , mo< "'lJm 0010.- "t amet Laem ipsum doIco- "t amet ""d di�m

OOI'llrllTl)' nibh ecosmod bocidull1 ul AAlt,n u,,,

8

,"" I

,

saftige Sukkulenten li/r Ihr Schlel'llmmer

L",..m Ipscm do;j", sil a"",tLm""" pscm dDl", sit amel.. soo

AII.,1domg '-I: CSS-basiertes Webdesign erleichtert das Schreiben von HTML-Code. Die zwei hiergezeigten Designs sehen sich zwar sehr ähnlich, allerdingswurde die oben gezeigte Seite komplett mit CSS gestaltel während die untere aus· schließlich HTML verwendet Dazu beträgt die Größe der oberen Datei gerade mal 4 KByte, während die untere mit 14 KByte fast viermal so groß ist. Dasreinauf HTML basierende layout benötigt wesentlich mehr Code, um in etwa die gleichen visuel­ len Effekte zu erzielen: 213 Zeilen - im Gegensatz zu den 71 Zeilen Code der CSS-Version.

La,,", >P"'-'" ""'" so, "r�l

" o o; V/Qhru. !m.... r R ; 60.... . 1< Ioookhn I ,, ",", " .. n ' ;i r_ ,.

�,

AltikOll lasOln

HTML in der Vergangenheit: Hauptsache. es sieht gut aus

Als eine Handvoll Wissenschaftler das Web erfand, um technische Dokumentatio­

nen leichter gemeinsam nutzen und nachverfolgen zu können, hat niemand die GrafIkdesigner nach ihrer Meinung gefragt. Die Wissenschaftler brauchten HTML nur,

um

Informationen zum leichteren Verständnis klar zu strukturieren. So steht

das Tag für eine wichtige überschrift (»ersten Grades((), während weni­

ger Gewicht hat und meist als Untertitel für -Überschriften verwendet wird. Ein weiterer Favorit ist das

Zwei neue HTML-Tags Trotz der Vielfalt an HTML-Tags wird es Situationen geben, in denen genau das Tag, das Ihren Inhalt exakt beschreibt, vermutlich fehlt. Sicher ist gut geeig-

Kapitel l: HTMl-Code für CSS optimieren

1

HTML für (55 schreiben

ZUCKERSTÜCKCHEN

Suchmaschinen mögen einfaches HTML Zu Beginn sollten Sie sich HTMl als Mittel zur inhaltlichen Struk­ turierung Ihres Dokuments vorstellen und CSS für die Darstel­ lung. Wenn Sie das verinnerlicht haben, werden Ihnen die zusätzlichen Vorteile beim Schreiben von schlichtem und über­ sichtlichem HTML-Code klar werden. Zum einen kann sich Ihre Positionierung in Suchmaschinen wie Google, MSN oder Yahoo! drastisch verbessern. Wenn Suchmaschinen sich durchs Web bewegen, müssen sie beim Indizieren sämtlichen HTML-Code einer Seite nach dem eigentlichen Inhalt durchforsten. Das alte, rein HTMl-basierte Design mit seinen -Tags und ver­ schachtelten Tabellen ist den Suchmaschinen dabei im Weg. Einige Suchmaschinen lesen sogar nur eine bestimmte Anzahl von Zeichen am Anfang einer Seite. Wenn Sie HTML hauptsäch­ lich zu Designzwecken einsetzen, verpasst die Suchmaschine womöglich die eigentlich wichtigen Teile Ihrer Seite. Schlimms­ tenfalls wlfd Ihre Seite überhaupt nicht aufgeführL Im Gegensatz dazu ist einfacher und strukturierter HTML-Code leicht für eine Suchmaschine zu lesen und zu indiZieren. Es ist net.

um

eine gute Idee, das -Tag zu benutzen, um das wichtigste Thema Ihrer Seite zu markieren (anstatt die Überschrift einfach nur groß und fett zu formatieren). Suchmaschinen bewerten den Text innerhalb von stärker als den übrigen Inhalt einer Seite. (Es haI übngens keinen Sinn, alles als zu markieren. Derartige Seiten werden meistens von den Suchmaschinen komplett Ignoriert.) Googles Richtlinien für Webmasler finden Sie hier: http.1/ W\o1IWgoogle.comjsupportjwebmostersjbinjonswer.py?ons­ wer=35769&toPIC=1526O&hl=de. Es gibt außerdem einen ausgezeichneten englischsprachigen Podcast mit einem Vortrag zum Thema SEC (Suchmaschinen­ optimierung) von der Web Visions-Konferenz 2005: http.1/ W\o1IWwebvisionsevent.comjpodcostsj WV05_AfonJnecht.mp3. Einen Artikel des Sprechers zum glei­ chen Thema finden Sie hier: http://www.digitof-web.com/orti­ desjseo_ondyour_web_slte/.

den Quellcode eines Computerprogramms zu kennzeichnen. aber die

meisten Anwender würden praktischer finden. Leider gibt es so eins nicht. Glücklicherweise besitzt HTML zwei Tags, mit denen Sie Ihren Inhalt besser beschreiben und im gleichen Schritt auch noch mit passenden CSS-Anweisungen verknüpfen können. Die Tags und sind wie leere Gef aße. die Sie mit beliebigem Inhalt fül­ len können. Diese Elemente besitzen keine eigenen visuellen Eigenschaften. Sie können ihnen mit CSS ein beliebiges Aussehen geben. Das -Tag (für engl.

division,

Unterteilung) kennzeichnet einen eigenständigen Teil des Seiteninhalts.

ähnlich einem Absatz oder einer Überschrift. Sie können das -Tag aber auch verwenden, um beliebige andere Teile des Inhalts damit zu umgeben. z.B. eine Überschrift. mehrere Absätze oder eine Liste. Das -Tag eignet sich daher her­ vorragend.

um

eine Seite in mehrere logische Bereiche zu unterteilen. beispiels­

weise für das Logo. den Navigationsbereich. den Haupttext, die Fußzeile. usw. Mit­ hilfe von CSS können Sie die so markierten Bereiche später positionieren und auf diese Weise anspruchsvolle Seitenlayouts zu erstellen (ein Thema, das wir in Kapi­ tel 3 dieses Buchs ausführlich behandeln werden). Das -Tag wird für sogenannte Inline-Elemente verwendet. Das können ein­ zelne Wörter oder Sätze sein. die Teil eines längeren Absatzes oder einer Über­ schrift sind. Sie können verwenden wie andere Inline-Tags auch. z.B. (für das Einfügen von Links) oder (zum Hervorheben eines Worts in einem Absatz). Das -Tag kann beispielsweise benutzt werden.

um

einen Fir­

mennamen zu markieren. Anschließend können Sie CSS verwenden,

8

CSS: Missing Manual

um

den

HTML lür CSS s(hreiben Namen mit einer eigenen Schrift. Farbe o.Ä. hervorzuheben. Hier ein Beispiel für diese Tags in Aktion. inklusive eines kleinen Ausblicks auf die Attribute

id und

dass. die häufig verwendet werden, um bestimmte Teile einer Seite mit Stildefmiti­ onen zu versehen:

Copyright 2009. CosmoFarMer.com

Wir

sind

telefonisch

unter der Nummer 555-555- 5501

für Sie zu

erreichen . < Ip>

Diese Tags werden Ihnen auch außerhalb dieser kurzen Einführung noch häufig begegnen. Besonders in CSS-lastigen Websites werden sie oft und gerne benutzt. Im weiteren Verlauf dieses Buchs werden Sie lernen. wie Sie diese Tags in Kombi­ nation mit CSS verwenden können. um die kreative Kontrolle über Ihre Website

voll auszunutzen (s. Seite 40)

HTML-Code, den Sie am besten vergessen CSS vereinfacht das Schreiben von HTML aus einem wichtigen Grund: Sie brau­ chen keine Berge von Tags und Attributen mehr. um Ihre Seiten besser aussehen zu

lassen. Das -Tag ist hierfür das strahlendste Beispiel. Sein einziger Zweck besteht darin. Farbe. Größe und Schrift eines Texts festzulegen. Zum Verständnis der Seitenstruktur trägt er jedoch überhaupt nicht bei. Hier eine Liste der Tags und Attribute. die Sie einfach durch CSS ersetzen können: •

Die Verwendung des -Tag

für die Darstellung von Text gehört auf den

Müll. CSS kann wesentlich besser (und vielfältiger) mit Text umgehen. (Techni­ ken zur Textformatierung finden Sie übrigens in Kapitel 6.) •

Hören Sie damit auf. und zu benutzen, um Text fett oder kursiv darzu­ stellen. Mit CSS können Sie jedes Tag fett oder kursiv darstellen. Diese format­ spezifischen Tags sind also nicht mehr nötig. Wenn Sie dagegen tatsächlich ein bestimmtes Wort oder einen Satz hervorheben wollen, verwenden Sie dafiir das -Tag (das von den meisten Browsern sowieso fett dargestellt wird). Sol­

len Textteile nur leicht hervorgehoben werden. verwenden Sie (für eng!.

emphasis - Betonung). Die meisten Browser stellen Text innerhalb dieser Tags kursiv dar. HIo_ Soll der rrtel einer Publikation kurs� dargestem werde� schlägt das in HTML), um innerhalb von Absätzen Zeilen­ umbrüche herbeizuführen, haben wir etwas Besonderes für Sie. (Browser fügen automatisch und oftmals zum Ärger des Webdesigners einen gewissen Leer­ raum zwischen Absätzen, aber auch zwischen Absätzen und

-Tags ein. In der Vergangenheit haben Webdesigner ausgeklügelte Methoden entwickelt, um das Erzeugen dieser automatischen Zwischenräume zwischen den

-Tags zu umgehen. Sie benutzten mehrere
-Tags hintereinander und drehten dann per die erste Zeile so sehr durch die Mangel, dass sie aussah wie eine überschrift.) CSS hält eine Reihe von Möglichkeiten bereit, Innen- wie Außen­ abstände genau einzustellen - und zwar nicht nur für Absätze, sondern auch für andere Block-Elemente wie beispielsweise Überschriften (s. Seite 139).

Allgemein gilt: Sämtliche Tag-Attribute für die Deftnition von Farben, Rahmen, Hintergrundbildern oder die Ausrichtung (das gilt auch für Tabellen) gelten kom­ plett als veraltet und sollten nicht mehr benutzt werden. Das Gleiche gilt für die Ausrichtung von Bildern (z.B. align=left) und das Zentrieren von Text innerhalb eines Absatzes (z.B. align=center oder noch schlimmer: dlpl.cl�g ollt, ••d

dlam ""nummy nl�h "ul.mo-d tincldUnl ul IlInreel dolore magM

AII.,ldu"l ''': Verwenden Sie die Überschriften-Tags « hl>, lIqUlOm .m' yolu'P't. Ut wl.1 c�lm .d mlnlm ,cn"m, ""I.

""st,ud e�.rutom "al "um Irlu...

--Ein Linealka.nn helfen

'-'>..m lpoum dolor ,I< omet, O>nnseC1eluer ad,pfs.,"') eilt, ••d

dlom I>nummy nlbh eul.m-Tag. Hierdurch werden Webbrowser angewiesen, die CSS-Regeln auf alle

-Tags anzuwenden. Mit der großen Zahl an möglichen Selektoren und ein wenig Kre­ ativität werden Sie die Formatierung Ihrer Seiten schnell in den Griff bekom­ men. (Wir werden die Selektoren im folgenden Kapitel ausführlich besprechen.)

•

Deklarationsblock. Der auf den Selektor folgende Code enthält die Formatie­ rungsanweisungen für den betreffenden Selektor. Ein Deklarationsblock beginnt immer mit einer öffnenden geschweiften Klammer ({) und endet mit einer schließenden geschweiften Klammer (l).

•

Deklaration. Zwischen den geschweiften Klammern des Deklarationsblocks können Sie eine oder mehrere Deklarationen, die Formatierungsanweisungen, angeben. Hierbei besteht jede Deklaration aus einer Eigenschaft und einem oder mehreren Werten. Eigenschaft und Wert werden durch einen Doppelpunkt (:) voneinander getrennt. Eine Deklaration wird prinzipiell mit einem Semikolon (;) beende!.

•

Eigenschaft. CSS besitzt eine Vielzahl von Formatierungsoptionen, den soge­ nannten Eigenschaften. Eine Eigenschaft besteht aus einem oder mehreren durch Bindestriche verbundenen Wörtern, die sich auf einen bestimmten Aspekt oder Effekt beziehen. Die meisten Eigenschaften besitzen mehr oder weniger selbsterklärende Namen wie background-color (Hintergrundfarbe) oder jont-size (Schriftgröße). Mit der Eigenschaft background-color definieren Sie beispielsweise (wer hätte das gedacht?) die Hintergrundfarbe für eines oder mehrere Elemente. Im Laufe dieses Buchs werden Sie Unmengen von CSS­ Eigenschaften kennenlernen.

lJpp: Ene pra�isdle Übefsicht der CSS-Eigenschaften finden Sie in Anhang A •

Wert. Um Ihrem kreativen Talent angemessen Ausdruck verleihen zu können, können Sie den Eigenschaften bestimmte Werte zuweisen. Diese sorgen dafür, dass ein Hintergrund beispielsweise blau, rot, purpur oder gelblich-grun (wenn es unbedingt sein muss) dargestellt wird. Wie Sie in den folgenden Kapiteln sehen werden, haben verschiedene CSS-Eigenschaften bestimmte Arten von Werten, Z.B. eine Farbe (wie red oder #ffOOOO), eine Längenangabe (z.B. 18px, 2in oder Sem), eine URL (z.B. bilder/hintergrund.gif) oder ein bestimmtes Schlüsselwort (beispielsweise top, center oder bottDm),

Kapitel 2: Stildefinitionen und Stylesheets

19

Stylesheets verstehen

Se/ektor

c±J

Deklarationsblock Deklaration Deklaration

({ (COlor , red;) (font-size,1. 5emV }) I

I

I

I

Eigenschaft. Wert

I

I

Eigenschaft. Wert

Abbildun, 2-2: Eine Stildefinition (oder Regel) besteht aus zwei wesentlichen Teilen: dem Selektor, der dem Web­ browser mitteilt, was formatiert werden soU, und einem Deklarationsblock, der festlegt, wie die selektierten Elemente formatiert werden sollen.

Hierbei muss die Stildefmition nicht unbedingt aufeiner Zeile stehen, wie in Abbil­ dung 2-2. Viele Stildefinitionen enthalten mehrere Eigenschaften. Sie können die Lesbarkeit Ihrer Regeln deutlich erhöhen, wenn Sie sie auf mehrere Zeilen vertei­ len. Hierbei ist es üblich, den Selelctor und die öffnende geschweifte Klammer auf die erste Zeile zu stellen und jede Deklaration sowie die schließende geschweifte Klammer in jeweils eine eigene Zeile zu schreiben, wie hier: p

{ color: red; font-size: 1. 5em;

} Es ist außerdem hilfreich, die Eigenschaften mithilfe von Tabulatorschritten oder ein paar Leerzeichen etwas einzurücken, um die Selektoren und die Eigenschaften visuell leichter voneinander unterscheiden zu können. Das Leerzeichen zwischen dem Doppelpunkt und dem Eigenschaftswert ist optional, erhöht aber ebenfalls die Lesbarkeit. Sie können so viele Leerzeichen einfügen, wie Sie wollen; color:red, color: red und color: red funktionieren gleichermaßen.

Stylesheets verstehen Natürlich verwandelt eine Stildefinition eine Webseite nicht gleich in ein Kunst­ werk. Vielleicht wird die Schrift in Ihren Absätzen jetzt rot dargestellt, aber das macht Ihre Website nicht gleich zu einer Design-Ikone - dafür werden mehrere Stildefinitionen gebraucht. Eine Sammlung von CSS-Regeln wird als Stylesheet bezeichnet. Je nachdem, ob das Stylesheet in der HTML-Seite selbst oder in einer externern Datei gespeichert wird, spricht man von internen oder externen Style­ sheets.

Intern oder extern - die richtige Wahl In den meisten Fällen werden Sie externe Stylesheets verwenden wollen, weil sie das Erstellen von Webseiten vereinfachen und eine Aktualisierung mehrerer Seiten auf einmal wesentlich schneller geht. Bei externen Stylesheets können alle Informa­ tionen in einer Datei gespeichert werden. Mit nur einer Codezeile können Sie das externe Stylesheet in Ihre HTML-Seiten einbinden und dadurch das Aussehen komplett verändern. Mit nur wenigen Handgriffen an einer einfachen Textdatei, dem Stylesheet, können Sie das Erscheinungsbild einer ganzen Website anpassen.

20

CSS: Missing Manual

Interne Stylesheets

Beim Benutzer hat das zur Folge. dass Webseiten schneller geöffnet werden. Bei der Verwendung externer Stylesheets enthält die Webseite nur die nötigen HTML­ Informationen. aber keine kostspieligen Tabellenlayouts. -Tags oder direkt in die Seite eingebettete Stilregeln. Hinzu kommt. dass Webbrowser externe Style­ sheets auf dem Rechner des Benutzers zwischenspeichern (in einem sogenannten Cache). um schneller darauf zugreifen zu können. Wenn der Besucher andere Sei­ ten Ihrer Website aufruft. die dasselbe externe Stylesheet verwenden. muss der Browser die bereits gespeicherten Informationen nicht erneut aus dem Netz laden. Er kann direkt auf die Version im lokalen Zwischenspeicher, dem Cache. zugreifen. was deutliche Geschwindigkeitsvorteile bringen kann. 1IhnwIs: Wenn Sie an einer Website arbeiten und eine Vorschau im Browser betrachten wollen, kann

der cache gelegentlich ein Hindernis bedeuten. Im Kasten auf Seite 26 wird eine Möglichkeit beschrieben

dieses Problem zu umgehen.

Interne Stylesheets Ein internes Stylesheet ist eine Sammlung von Stildefinitionen. die direkt in den HTML-Code einer Seite eingebettet werden. Interne Stylesheets stehen prinzipiell innerhalb der -Sektion und werden mit einem -Tag-Paar umgeben. Hier ein Beispiel:

/* Hier steht der

Rest Ihrer Seite

. . .

*/

,..rreIs; Zwar können die -Tags an beliebiger Stelle im Kopfteil einer Seite stehen (z.B. vor dem -Tag). OblichelWeise platzieren Webdes�ner interne StyIesheets allerdings direkt vor dem shinweis : lorem ipsum dolor

60

CSS: Missing Manual

Übung: Beispiele für Selektoren

Achten Sie darauf, nicht aus Versehen class=".hinweis" einzugeben. Der Punkt ist nur im CSS-Code nötig, um die Klasse als solche zu kennzeichnen, im HTML-Code ist der Punkt nicht erlaubt. HlIIWfis: Es ist vollkommen legal, diese Klasse auch anderen Tags zuzuweisen - nicht nur dem

-Tag.

Für das -Tag würden Sie beispielsweise schreiben. 7.

Sichern Sie die Seite und betrachten Sie sie im Browser Ihrer Wahl.

Jetzt ist der als hinweis gekennzeichnete Absatz gut sichtbar hervorgehoben, wie in Abbildung 3-9 zu sehen. Ann

K'4l.�J

a

C

D< .. "".,�,. n .

"

x

c.-,�> .

AbbUdung J-9: M�hilfe von Klassen·Selektoren können Sie die Darstellung einer Seite sehr prä­ zise anpassen. Hier gibt eine klassenba­ sierte Stilregel eine Formatierung vor, die sich von den übrigen Absätzen deutlich unterscheidet.

A

COSMOFARMER Die Onli,.,..Auresse fÜl IrIllo-Giir1n.,," or

Wie Sie die Erde ins 10. Stockwerk befördern, ohne dass der HausDleister etwas Dlerkt Sehen Sie vorher nach, ob der Fahrshlhl funktioniert Lcyem iplum dOOf:;i1 omeL coruecleluer odlplsctng el". sed dom nonummy . UI wisi

nibh euismod lineiounl ulloorccl dolore rrogno aliq...om mol volulpat

enm ad mlnm venIam, quis nostrud exerci lation ullamcorper ;u�cipl' lobortis

nis ul oliquip ex eo coml1"odo consequol. Duis oule." vel

..um iilXe dolor in

hendreril in vulp..Jlole velit esse molestie consequat. 'lei iIIum dolore eu feug 01 nlAla fad

HlNWEIS: Lorcm ip'um dolo< s t omot, con,oclotuor odipiscing olit, sed dom ""�ummy ntbh euhmocl tincidunt ut 100 nist ul oliqup e)( ea commodo comequal. Ouis autem vel eum iriure dolor in nendrerir In vulpulale velil esse moleslle consequat. vel lilum dolore eu feuglal nula foel

Beachten Sie, wie die Änderungen an der Schriftfarbe der

-Tags auch die darin enthaltenen Tags beeinflussen. Der Text innerhalb der - und -Tags ist ebenfalls blaugrün, wobei die kursive bzw. fette Darstellung für diese Elemente jedoch beibehalten wird. Dieses Verhalten ist äußerst sinnvoll. Schließlich ent­ spricht es den Erwartungen, dass sämtlicher Text eines Absatzes die Farbe wechselt - unabhängig von den enthaltenen Tags. Ohne die Vererbung der Schriftfarbe wäre der Arbeitsaufwand ungleich höher. In diesem Fall müssten Sie für und zusätzliche Regeln formulieren, um die Farbe anzupassen. Möglicherweise müssten Sie Selektoren für Nachfahren­ Elemente wie p em und p strong verwenden, um die Formatierung zu ändern.

Kapitel4: Zeit sparen durch Vererbung

73

Übung: Vererbung

Vererbung verwenden. um eine ganze Seite umzugestalten Die Vererbung funktioniert genauso gut mit klassenbasierten Stilen. Jedes Tag mit dem korrekten Wert für das Attribut dass gibt die Eigenschaftswerte an seine Nachfahren weiter. Mit diesem Wissen ist es nicht mehr schwer. schnelle und umfassende Änderungen an einer ganzen Seite vorzunehmen. 1.

Kehren Sie zu Ihrem Texteditor und der Datei vererbung.hbnl zurück. Unterhalb des Stils für das

-Tag wird nun eine weitere Regel angelegt.

2.

Klicken Sie direkt hinter die schließende geschweifte Klammer der Regel für das

-Tag. Drücken Sie die Enter-Taste und geben Sie .seitenstil { ein. Im Folgenden erstellen Sie eine neue CSS-Klasse. die auf das -Tag angewandt werden soll.

3.

Drücken Sie erneut die Enter-Taste und geben Sie die folgenden Eigen­ schaften und Werte für die Stilregel ein: font-farnily: Arial, Helvetica, sans-serif; font-size: lern; color: #fdd04l;

4.

Beenden Sie die Stilregel wie gewohnt durch Drücken der Enter-Taste und Eingabe der schließenden geschweiften Klammer. Das Ganze sollte nun so aussehen: . seitenstil { font-farnily: Arial, Helvetica, sans-serif; font-size: lern; color: #fdd04l; } Die fertige klassenbasierte CSS-Regel legt Schriftart, -größe und -farbe für das -Tag fest. Dank der Vererbung können nun alle Tags innerhalb des ... -Tag-Paars das gleiche Schriftformat verwenden.

5.

Erweitern Sie das öffnende -Tag um das Attribut class="seitenstil". Das Tag sollte nun so aussehen: . Auf diese Weise wird die gerade definierte Klasse auf das -Tag angewendet.

6.

Sichern Sie Ihre Webseite und betrachten Sie sie in einem Webbrowser. Wie Sie in Abbildung 4-4 sehen können. sorgt diese einzelne Stildefinition für ein nahtloses. konsistentes Aussehen für den gesamten Text der Seite. Sowohl Überschriften als auch Absätze innerhalb der -Tags haben das neue Schriftformat angenommen.

74

CSS: Missing Manual

Übung: Vererbung

Alllldu li "l"': Wie Sie im Browser leicht erkennen können, werden die für das -Tag defi­ nierten Eigenschaftswerte automatisch an die enthalte­ nen Tags vererbt Auf diese Weise ist es einfach, globale Formatierungen an einer Seite vorzunehmen.

COSMOFARMER Die OnIine-Adresse für InSI: IlKliQ;T.'" corucqua:, vd illurn dolore cu tcuSlat nulla rad

Kapitel4: Zeit sparen durch Vererbung

n

Kapitel

5 Mit mehreren Stilen umgehen: die Kaskade

Je komplexer Ihre Stildefinitionen werden, desto mehr fragen Sie sich vennutlich. wie ein Seitenelement trotz scheinbar widersprüchlicher Anweisungen das korrekte Aussehen erhält. Wie im vorigen Kapitel besprochen. sorgt die Möglichkeit der Vererbung in CSS dafür. dass ein Tag bestimmte Eigenschaftswerte von den umge­ benden Tags erhen kann. So kann das -Tag Formatierungen an einen ent­ haltenen Absatz weitergeben, und der Absatz gibt diese Anweisungen an einen ent­ haltenen Link weiter. Das heißt aber auch, dass der Link CS$-Eigenschaftswerte sowohl vom

-

als auch vom

-Tag erben kann. Ohne weitere Anweisun­

gen würde diese Möglichkeit zu einer Art »Die Fliege((-Effekt führen, der auf unvorhersehbare Weise Teile aus beiden CSS-Regeln miteinander kombiniert. Manchmal kommt es aber auch vor, dass in mehreren Stilregeln für das gleiche HTML-Element unterschiedliche Werte für die gleiche Eigenschaft definiert wer­ den (beispielsweise wenn in einem externen und einem internen Stylesheet unter­ schiedliche Schriftfarben für das

-Tag festgelegt werden). In solchen Fällen können recht seltsame Dinge passieren, etwa dass Text hellblau dargestellt wird, obwohl Sie in einer CSS-Klasse ausdrücklich eine rote Textfarbe zugewiesen haben. Tatsächlich sehen Sie hier ein grundsätzliches CSS-Prinzip bei der Arbeit: die Kas­

ko.de,

von der die Cascading Style Sheets übrigens ihren Namen haben. Sie

bestimmt, wie die verschiedenen Stildefinitionen zusammenwirken und welche Stile bei einem Konflikt vor anderen Vorrang (Präzedenz) bekommen. _: In diesem Kaprtd geht es um Probleme bei der Er5Iellung komplexer Styleshee�. die stark von

der Vererbung und zusammengesetzten Selektoren, wie z.B. mehreren verschachte�en Nachfahren-Selek­ toren (s. Seite 39), Gebrauch machen. Die Regeln sind zwar logisch, aber ungefähr so interessant und

Kapitel S: Mit mehreren Stilen umgehen: die Kaskade

79

Wie Stile kaskadiert werden spannend wie die Gelben Seiten. Wenn Ihre Motivation hierfür nicht ausreicht, können Sie Details auch überspringen und gleich mit der Übung auf Seite 90 weitermachen, um einen Eindruck von der Kaskade und ihrer Bedeutung zu bekommen. Oder Sie machen gleich mit dem nächsten Kapitel weiter, in dem es um optisch anspre

r1IOO

tntbIl clloru>cij>jl �u. ni>I '" allqoip oom:rodo """"""1_. DU> au:em Id ""'" t:. 0U:5 3oY.em Id a.m .

_

134

CSS: Missing Manual

AbbIlduna '-1]: Schon m� ein paar CSS· Regeln können Sie schlich· ten Text m� einem starken Design versehen, das Ihre Leser bei der Navigation durch die Informationen auf Ihrer Site unterstützt

Ubung: Textforma· tierung in der Praxis Herzlichen Glückwunsch! In diesem Kapitel haben Sie eine große Zahl an CSS­ Eigenschaften zur Textformatierung kennengelernt und eine NullachtfünfZehn­ HTML-Seite mit einem ansprechenden Design versehen. Im nächsten Kapitel wer­ den Sie CSS-Eigenschaften zur Formatierung von Grafiken. Rahmen sowie von Innen- und Außenabständen kennenlernen. Außerdem zeigen wir Ihnen einige weitere Designoptionen von CSS.

Kapitel 6: Textformatierung

135

Kapitel

7 Rahmen, Innen- und Außenabslände

Jedes HTML-Tag ist von einer ganzen Welt aus CSS-Eigenschaften umgeben, die das Aussehen des Tags im Webbcowser bestimmen. Einige Eigenschaften. wie Rah­ men oder Hintergrundfarben. sind sofort mit bloßem Auge erkennbar. Andere scheinen dagegen unsichtbar, Z.B. Innen- und Außenabstände. Sie bestimmen, wie viel Leerraum um die einzelnen HTML-Elemente dargestellt wird. Wenn Sie die Funktionsweise dieser Eigenschaften begriffen haben. können Sie attraktive. spal­ tenbasierte Layouts und dekorative Seitenleisten erstellen und selbst bestimmen, wie groß der Abstand (bzw. Leerraum oder

white space)

zu den anderen HTML­

Elementen sein soU. Mit wenigen CSS-Regeln erscheint Ihre Seite nicht mehr so überladen, sondern leichter und professioneller. Gemeinsam bilden die in diesem Kapitel besprochenen CSS�Eigenschaften eines der wichtigsten Konzepte von CSS: das Boxmodell.

Das Boxmodell verstehen Wenn Sie an Absätze oder überschriften denken, stellen Sie sich dabei vermutlich Buchstaben, Wörter und Sätze vor. Beim �Tag haben Sie Fotos, Logos und Bilder vor Augen. Ein Webbrowser behandelt diese (und auch alle anderen) Tags als kleine Kästen (eng!.

boxes), die die

Sätze, Bilder, Überschriften usw. enthalten,

wie in Abbildung 7� 1 gezeigt. Die den Inhalt umgebende Box besteht aus verschiedenen Teilen: •

Der

Innenabstand (padding)

ist der Leerraum zwischen dem Inhalt und dem

Rahmen. Der Innenabstand sorgt beispielsweise fur einen gewissen Abstand zwischen einem Foto und seinem Rahmen.

Kapitel 7: Rahmen. Innen- und Außenabstände

1]7

Das Boxmodell ver­ stehen •

Der Rahmen (border) steht in CSS für die visuelle Begrenzung (meistens eine durchgehende Linie, Details finden Sie im weiteren Verlauf dieses Kapitels), um das HTML-Element herum. Ein Rahmen muss so definiert werden, dass er das gesamte Element umgibt oder nur an bestimmten Seiten dargestellt wird (oder auch gar nicht).

•

Die Hintergrund/arbe (background-color) füllt den vom Rahmen begrenzten Raum innerhalb der Box (auch wenn der Rahmen nicht angezeigt wird).

•

Der Außenabstand (margin) bezeichnet den Leerraum, der einzelne Tags von­ einander trennt. Ein Beispiel für Außenabstände ist der Leerraum, den ein Browser standardmäßig zwischen dem Rand des Browserfensters und dem eigentlichen Inhalt Ihrer Seite darstellt.

oberer Außenabstand

oberer Rahmen

oberer Innenabstand r--------,

linker Außen­ abstand

linker Rahmen

linker Innenabstand

: , : :

'-."In, IO'''' ' bereich

: rechter , : Innen­ :, abstand

rechter Rahmen

rechter Außen­ abstand

, ---------

unterer Innenabstand unterer Rahmen unterer Außenabstand

AII.11dung 7-1: Das CSS-Boxmodell umgibt den Inhalt eines Tags (z.8. Text) von innen nach außen mit einem Innen­ abstand (padding), einem Rahmen (border) und einem Außenabstand (margin). Für den Bereich innerhalb des Rahmens (Inhalt plus Innenabstand) können Sie außerdem eigene Hintergrund-Eigen­ schaften (z.8. background-color) definieren. Die Hintergrundfarbe erstreckt sich bis zur Außenkante des Rahmens. Wenn Sie für den Rahmen also eine gestrichelte Linie definieren, »scheint« dazwischen die Hintergrundfarbe durch (s. Seite 150).

Lorem ipsum dolor sit �met, consectetuer �ipi!Cil1i eilt, sed diam oonummy nlbh eullmod lIncklun! ut laoreet dolore magna allquam erat volutpat, Ut wi�i enim ad minim veniam, qUI� nostrud exerd

o

tati n ullamcorper susdpit loborti! nisl ut �liquip mn5e!1uaL Dul� autem I u e_

vel eum tl r

Lorem ip9.Jm dolor sit amet, consectctuer

ex ea commodo

n '����;::L_L_ Inh0,,�be ;, reieh Rahme

eht, sed di;,m nonLJmmy nibh eui:smod tincidunt magna allquam etat o utpat. ut wisi enlm ad minim �enlam, uis nostrud exerci tation ullamcorper �u!dpit IOOOrti5 ni51 ut aliquip ex e� c m do con>equat, Dui.

laornet dolore om o

q

vl

autem vel eum !nur .

Innenabstand

FT-

- - - - -

Lorem ipsum dolor sit amet, conse .I""rn r.oot voloJtp�t. Ut wi.i g":m .d mll lm """,am, Q,rs n05trud exer.",i, ni� .. uq,' .... «."''''"'".''''' ''"' 1)0"

line-hight: 400%

bc: o.1rr rMID " , k 'll] . o] ew l l

C""'"

qu>1. ",I oLiJmdokJr
� ..... _ .. ""' ...... """ ___.. ...... _""_""'> .... ,., ..... """"-- '""""" _ ... _--...'""' ...... .. ...._ " ". ...�""--...... ....... _ -..�. "' _ .. .. � � �....... ...

Mit (55 können Sie Hinter· grundfarben und -bilder gemeinsam benutzen. Das ist in diesem Beispiel besonders praktisch. Der Hauptbereich besitzt eine weiße Hintergrund­ farbe, die hilf� diesen Teil optisch vom Farbverlauf im Sei­ tenhintergrund zu trennen. Zusätzlich bieten die beiden seitlich am Text verlaufenden Linien ein zusätzliches gestalte­ risches Detail.

-,"" .."., - �

laac Miznohi Strohhüte

-""'_ ...... -- -", .... ... ,"" - - _ .-... .._ .."" ""1"' ....... . ,,'" _"'�� .. .. "' ''''''' __ ... . '''''"''' ...... ,''.., '''"''''' ''' '''''... _ ''''' .. ��, ..._ ,_ ,on-. """...... .. _ .,. ... . «r«o _ _ .. -.""_""_ ... ... .... """""" _ _ _ .. _ -'''''"'' '''' "....... '' ''''''' - ....... ..._ .. ,.",.,.,"'--"' '''''''"' _ .... _ - '''''' ... .... ""'.- """"""' ...... .-... .... ......

'- ....., ."", ...... -Tags innerhalb der Seite, die sich innerhalb eines Elements mit der ID #hauptteil befmden. In die­ ser Seite ist der Haupttext im -Container mit der ID #hauptteil enthalten. Diese Methode vereinfacht die Definition von Stilen, die ausschließlich für den Hauptteil der Seite gelten sollen. Es wird also nur die Farbe der Links inner­ halb des -Tags verändert. Wenn Sie sich die Seite jetzt ansehen, werden Sie feststellen, dass der Link am unteren Ende der Seite von der Änderung nicht betroffen ist, weil er von einem eigenen -Container umgeben wird. Jetzt ist es an der Zeit, die langweilige Unterstreichung unter den Links zu ent­ fernen.

248

CSS: Missing Manual

Übung: Links formatieren

o

AbbIldu., '-11 :

(OImo''''''''

.JORI.ULTUR I1 DER BIIEWANNE

"'",rn I_m �"'" ilt �rn... mn I�t;," ulllfllCO'­ ",,>doit loborti. n�1 ut elouicr "" .. «rmr1lOdo 00"""....1. . Oui;eot"'" ""I .u�mod tintidunt ul I""",.. ;,,; Mim .. minim �en"m. oui. ,.,.INd'''_ �t;," ulllfl>CO""" dolofe rna ",,�mOO �ncidunt ut 100'­ dolofe ""'Il"" �ioo"'" ....�I .oIutpol, ut "i" ""im .. minim ''''' ''m, oui. ,.,.tNd �,=> I�t;,n 011lfllCO'­ ",,>doil loborti. n�1 ut elou" "" .. «,m,nodO 00"""....1. . Oo""ot"", ""I .um i'",fe, "'",m ipsum d,,"''';' .met, mn""Iet"", od,,,,""ng ci',..,d dtom nonu",""" n!b� ",,�mOO �ncidunt u. 1..,.-

minim ''''' ''m, ouio ,.,.t",d �,=> I�t;,o ulomco,i . «>rI'Vl'IOdO -Container mit der 10

copyright.

Die gerade erstellte Regel sorgt dafür, dass nur der E-Mail-Link grau darge­ stellt wird. Mit der Eigenschaft

background soll außerdem links neben dem no-repeat bewirkt, dass die Gra­

Link eine Graflk angezeigt werden. Der Wert

fik nicht wiederholt wird. Wir müssen also nur noch dafür sorgen, dass das E-Mail-Symbol nicht vom Linktext überlagert wird (Abbildung 9-13 Mitte), sondern tatsächlich daneben erscheint.

2. Erweitern Sie die gerade erstellte #copyright a-Regel um einen linken Innenabstand von 20 Pixeln: padding-left: 20px; Bedenken Sie, dass der Innenabstand den Leerraum zwischen dem Inhalt und dessen Rahmen bestimmt. Durch die oben stehende Deklaration wird der Text

um 20 Pixel nach links verschoben, wobei sich das Hintergrundbild aber nicht mitbewegt und dadurch komplett sichtbar wird. Abschließend wollen wir den gesamten Link noch ein Stück vom Copyright-Hinweis entfernen.

3.

Erweitern Sie die Regel um einen linken Außenabstand von 10 Pixeln. Die gesamte Stildefmition soUte nun so aussehen: Itcopyright a { color: #666666; background: url(bilder/email.gif) no-repeat left center; padding-left: 20px; margin-left: 10px;

) Diese kleine Anpassung verdeutlicht, dass das Symbol zum Link und nicht zum Copyright-Hinweis gehört (Abbildung 9-13 unten).

Externe Links speziell kennzeichnen Gelegentlich wollen Sie Links auf externe Websites besonders kennzeichnen. Auf diese Weise sollen Ihre Besucher darauf aufmerksam gemacht werden, dass weitere Informationen an anderer Stelle im Internet zu finden sind oder dass sie beim Anklicken des Links Ihre Website verlassen. In den folgenden Schritten werden wir fur externe Links spezielle CSS-Regeln definieren.

Kapitel 9: Zeitgemäße Navigation für Ihre Website

251

Übung: Links formatieren

�

Säubern Sie regelmäßig das Übcrlaufventil

Lore'" 'psum oo!...- Slt �met.. wn.enK'Qc.,. DuO. o"lom ,01 oum in.lre.

�

AbbUd••, '-IJ: Ein paar kleine Anpassungen reichen aus, und schon ist klar, um was für einen Link es sich handelt. In diesem Fall wurde ein neu­ traler Link (links) so gestaltet dass deutlich erkennbar ist, dass es sich um eine E-Mail­ Adresse handelt (unten).

Säubern Sie regelmäßig das Übcrlaufventil

Lore'" 'psum oo!...- Slt �met.. wn.elJI�'

.c' ,.>orti. nid tn:ldunt ul '�'ee! do"'", m'9n• •'iQ� .�t ...o! jt�." lJt "..i .",m "" minim von;""", QU;'; nore. Lorem ip,um 001",oi' orrrl. CQC'enK'Qc.,. DuO. o"lom ,01 oum in.lre.

1.

Erweitern Sie das interne Stylesheet in badewanne.html um die folgende Regel: #hauptteil a .externer_link { background-image: url(bilder/globus.png); background-repeat: no-repeat; background-position: right top; padding-right: 18px; border-bottom: none; }

Wie beim gerade erstellten E-Mail-Link wird auch bei dieser Regel ein speziel­ les Hintergrundbild verwendet, diesmal allerdings rechts vom Linktext. Durch die Deklaration border-bottom: none; wird die grün gestrichelte untere Begren­ zungslinie entfernt, die normalerweise für Links auf andere Seiten von Cosmo­ Farmer.com verwendet wird. Allein durch die Definition der Regel verändern sich die externen Links aber nicht. Dafür müssen Sie den Links, die Sie formatieren wollen, zunächst die Klasse .externer_link zuweisen. 2.

Im HTML-Code der Seite finden Sie drei externe Links. (Tipp: Sie befin­ den sich in einer

-Tags an. Dadurch schrumpft das r �Ie ome t,

Lor�", I ps"m lorem ;pum dok>r �Ie

"Idtrisc�

""

,,!dtrisc�

4

Sil

79li O O '

m&cron.ch

8314,00 �

�a l" �"rnl l.>ion

Afrol No �

Sie können sämtliche Seiten­ layout- und Designaufga­ ben mit CSS erledigen und Tabellen gemäß ihrem eigentlichen Zweck verwen­ den. Die Definition der Schriften, Rahmen und Hin­ tergrundfarben dieser Tabelle wurde ausschließlich mit CSS umgesetzt. Die eigentliche Struktur der Tabelle wurde dagegen mit HTML definiert.

,,,. ••

Coal

lam m I p,,,m Dolor 300 J ohn Dee,,, l o ft-Wähdre>cher

omet

..... U ..

AlIIIi.du"l IG-1:

.....

DoIoo �Ie om�t

••

omo', ...dlpilClng .In lorem ",um dolor �Ie 0""" E. I.mod Hn

Tabelle 1 : Der richtige Rasenmäher für Ihre Wohnung

. Mithilfe von Nachfahren-Selektoren wie .oktienkurse td oder .oktienkurse th können Sie die Zellen dieserTabelle nun getrenntvom Rest der SeITe fonnatieren. Mehr zu Selektoren und Klassen finden Sie in KapITel 3.

Rahmen anlegen

Die CSS-Eigenschaft border (Seite 146) funktioniert für Tabellen im Prinzip genau wie für andere Elemente auch. Allerdings gibt es ein paar Besonderheiten zu beach­ ten. Wenn Sie für das

-Tag einen Rahmen defInieren, gilt dieser nur für die Außenkanten der Tabelle, aber nicht für die einzelnen Zellen. Weisen Sie den ein­ zelnen Zellen einen Rahmen zu (z.B. td ( border: Ipx solid black; j), wird standard­ mäßig zwischen den einzelnen Zellen eine kleine Lücke gelassen, wie in Abbildung 10-5 oben. Um dieses Verhalten zu steuern, müssen Sie wissen, wie das HTML­ Attribut cellspacing bzw. die CSS-Eigenschaften border-spacing und border-collapse funktionieren. •

Den Leerraum zwischen den Tabellenzellen kontrollieren. Standardmäßig stellen Browser die einzelnen Zellen um ein paar Pixel voneinander entfernt dar. Diese Lücke wird besonders gut sichtbar, wenn Sie die Zellen mit einem Rah­ men versehen. Anhand der CSS-Eigenschaft border-spacing können Sie selbst bestimmen, wie groß dieser Zwischenraum sein soll. Da diese Eigenschaft aber erst ab der Version 8 vom Internet Explorer unterstützt wird, ist es möglicher­ weise sinnvoll, für ältere IE-Versionen das HTML-Attribut cellspacing zu ver­ wenden. Um einen Zellenzwischenraum von 10 Pixeln zu definieren, könnten Sie beispielsweise folgenden HTML-Code verwenden: . (Wenn Sie hier den Wert 0 einsetzen, wird der Zwischenraum komplett ent­ fernt. Allerdings sollten Sie dann auch einen passenden Wert für die Eigenschaft border-collapse verwenden, zu der wir gleich kommen.)

•

Doppelte Rahmenlinien entfernen. Wenn Sie den Zwischenraum zwischen den Zellen entfernen, rücken die Rahmenlinien zusammen und erscheinen ver­ doppelt. Es wird sowohl die untere Rahmenlinie einer Zelle angezeigt als auch die obere Rahmenlinie der darunter befindlichen Zelle (Abbildung 10-5 Mitte). Am besten lässt sich dies (und die Zellenzwischenräume gleich dazu) vermei­ den, indem Sie die Eigenschaft border-collapse verwenden. Zwei Werte sind möglich: separate und collapse. Die Option separate entspricht der Standarddar­ stellung mit Zellenzwischenräumen und verdoppelten Rahmenlinien. Durch die Einstellung collapse werden die Rahmen angrenzender Zellen dagegen zusammengefasst, und die Zwischenräume verschwinden (Abbildung 10-5 unten). Diese Eigenschaft wird für das -Tag defIniert, wie hier gezeigt: table { border-collapse: collapsej }

214

CSS: Missing Manual

Tabellen mit Stil

I

-

I=.-�...pportok (;0 (l7-in in XHTML), « input type="password" I»

und . . . erzeugen verschiedene Formen von Textfeldern. Diese Tags können mit CSS

am

ehesten browserunabhängig gestaltet werden. Sie können für Text­

felder eigene Schriftarten, -größen und -farben, aber auch andere Texteigen­ schaften bestimmen. Auch die Verwendung von Hintergrundfarben und Rahmen ist möglich. Neben IE, Opera und Firefox wird dies jetzt auch von Safari (ab Version 3) unterstützt. Mit der Eigenschaft width können Sie Textfel­ dem eine eigene Breite geben, allerdings wird eine Deftnition der Höhe mittels

218

CSS: Missing Manual

Formulare mit Stil

Firefox 3

Internet Explorer 8

I

SOlRlmN T,-- ",_""

SOlRIFTEN

I

I

...nm------,

-:':'-�'----

-

�- -----

_. AUSWÄHLEN __

0

_

0

-=.; :::u;tqal -

-I AUSWAiilfNI

__ 1_ _ 0

_ .

_c

-

I

-'- ,.: _ :1':

�!,!:!!,! l

101

_0

_0

':::: n··._111

.­ .-

-----

_..... .... -

_e

AbbUdu.g l.-7:

Safari 3

-

-

_ 0

�

_ 0

_ 0 -

·1....-1 .. ·

d....

I - ,: :::::::::::::::: - ,: :::::::::......-

: _ ..�,;{

_ 0

iIt . .. . . -....

·..........

,·-1.

.-

Die Browserunterstützung für Stile von Formulareie­ menten fällt immer noch unterschiedlich aus. Safari 3.2 (rechts) kann mittler­ weileauch Hintergrundbilder für Textbereiche anzeigen, während Intemet Explorer 8 (links) der einzige Browser ist. der Rahmen und Hinter­ grundfarben auch für Check­ boxen und Radiobuttons darstellt. Aufgrund der hier deutlich sichtbaren Unter­ schiede sollten Sie bei Ihrer Gestaltung besonders sorg­ fältig sein und nicht erwar­ ten. dass die Elemente brow­ serübergreifend gleich darstellt werden.

.

_______ _ . . . . __

...

-. � _ .

-; l. .

height nur von unterstützt, weil es sich hierbei um ein Block-Element handelt. •

Buttons. Formular-Buttons wie ermöglichen es Ihren Besu­ chern, Formulare abzuschicken, den Inhalt zurückzusetzen oder Aktionen zu steu­ ern. Auch hier hat Safari die anderen Browser inzwischen eingeholt, sodass Stildefinitionen für Buttons von IE, Firefox, Opera und Safuri gleichermaßen unter­

stützt werden. Da Buttons Inline-Elemente sind, können Sie sie mithilfe der Eigen­ schaft text-align (Seite 116) links, mittig oder rechts ausrichten.

•

Auswahllisten. Mit dem -Tag erzeugte Auswahllisten können zumin­

dest teilweise browserunabhängig mit CSS gestaltet werden. Während mittler­ weile so gut wie alle gängigen Eigenschaften für Schriften, Hintergründe und Rahmen browserübergreifend funktionieren, tut sich Safari mit der Gestaltung der aufgeklappten Listen und Größenänderungen noch schwer und benutzt weiterhin die Systemfarben und Schriften. Rahmen werden mittlerweile unter­ stützt.

Kapitel 10: Tabellen und Formulare

219

Formulare mit Stil

Hillwels: Weitere Informationen zur Darstellung von Formularelementen mit verschiedenen Browsem finden Sie unter WIAiW.456bereostreetcom/archive/200409/stylingjorm_controls/ und �456bereostreet.com/orchive/200410/styling_even_more_form_controlsf. •

Checkboxen und Radiobuttons. Die meisten Browser erlauben keine Forma­

tierung dieser Elemente. Opera unterstützt allerdings eine Hintergrundfarbe. die sich interessanterweise auf die Innenseite des Elements auswirkt. Der Inter­ net Explorer zeigt die Hintergrundfarbe um das Element herum an. Rahmen sind im IE ebenfalls möglich. Da die Darstellung in den verschiedenen Brow­ sero äußerst unterschiedlich ausfallt. sollten Sie bei Radiobuttons und Checkbo­ xen besser auf CSS-Stile verzichten. SPRECHST\JNDE FÜR POWER-USER

Attribute: Der 5elektor der Zukunft Wenn es um die Gestaltung von Formularen geht, hauen einen Typ-Selektoren nicht unbedingt vom Hocker. Schließlich wird für Textfelder, Radiobuttons, Checkboxen, Passwortfelder und But­ tons das gleiche HTML-Tag benutzt: . Eine Breitenan­ gabe von 200 Pixeln mag für ein Textfeld sinnvoll sein, Ihre Che-Tags inein­ ander verschachtelt Anein­ andergrenzende Zellen wur­ den zusammengefasst und feste Bre�en mit Spacer-Bil­ dern erzwunden. Auf diese Weise wurde ein starres Gerüst erzeugt (rechts). Sollte das Design geändert werden, musste das alte Ge­ rüst komplett eingerissen und ein neues errichtet werden.

Wenn auch Sie standardmäßig -Tags für das Layout verwendet haben, müs­ sen Sie umdenken, bevor Sie anfangen, CSS für das Seitenlayout einzusetzen. Als Erstes müssen Sie das Konzept von Zeilen und Spalten und die damit zusammen­ hängende gitterartige Struktur einer Tabelle in diesem Kontext vergessen. Das gibt es in CSS einfach nicht. Wenn Sie wollen, können Sie sich das -Tag als Tabel­ lenzelle vorstellen. Diese ist der logische Ort für den Inhalt, der an einer bestimm­ ten Stelle auf der Seite positioniert werden soll. Zusätzlich werden in CSS, wie bei Layouttabellen, oft mehrere -Tags ineinander verschachtelt, um einen bestimmten visuellen Effekt zu erreichen. Allerdings wird hierfür wesentlich weni­ ger HTML-Code benötigt als für Tabellen.

Das mächtige -Tag Egal mit welcher Methode Sie arbeiten, beim Layout von Webseiten geht es darum, bestimmte Teile des Inhalts an bestimmte Stellen der Webseite zu platzieren. Hier­ für werden in CSS so gut wie immer -Tags verwendet. Wie Sie von Seite 8 wissen, ist ein HTML-Element, das keine »eingebauten« Formatierungsvor­ gaben besitzt (abgesehen davon, dass es standardmäßig als Block-Element auf einer eigenen Zeile dargestellt wird). Stattdessen wird es verwendet, um andere Elemente zu gruppieren oder die Seite zu unterteilen. (Die Bezeichnung des Tags, , kommt vom englischen Wort division, Unterteilung.) Normalerweise umgeben Sie zusammengehörige HTML-Elemente mit . . . -Tags. In Abbildung 11-1 haben wir diese Methode für das Logo und die Navigationsleiste benutzt. Sie bilden den oberen Teil der Seite. Daher erscheint es sinnvoll, sie zusammenzufassen. Zumindest würden Sie die größeren Bereiche einer Seite auf diese Weise markieren, wie Kopfteil, Hauptinhalt, Fußteil und so weiter. Es ist aber auch möglich, mehrere -Tags ineinander zu verschachteln. Häufig wird der gesamte Inhalt des -Tags mit einem zusätzlichen ­ Container umgeben. Danach können Sie diesem Container eine Reihe von Forma­ tierungen zuweisen, die für die gesamte Seite gültig sein soll, wie die Breite für den

298

CSS: Missing Manual

Veruhiedene Arten von Webseitenlayouts

Inhalt der Seite oder linke und rechte Außenabstände. Oder Sie legen fest. dass der Inhalt in der Mitte des Ansichtsbereichs zentriert werden soll. (Ab Seite 337 kön­ nen Sie den Einsatz von -Containern selbst ausprobieren.) Sobald die -Tags an Ort und Stelle sind. können Sie ihnen IDs und Klassen zuweisen, um die einzelnen Container unterschiedlich zu gestalten. Teile der Seite. die nur einmal vorkommen. werden dabei üblicherweise mit IDs versehen. z.B. . Da Sie eine ID nur einmal pro Seite vergeben können. müssen Sie für Elemente. die mehrmals auftauchen. stattdessen eine Klasse verwenden. Das kann beispielsweise der Fall sein. wenn Sie -Tags für die Positionierung von Fotos verwenden. z.B. . Anband dieser Grundstruktur können Sie die verschiedenen Bestandteile der Seite jetzt positionieren. Mithilfe der Eigenschaft float können Sie Blöcke mit Inhalt an den linken oder rechten Rand einer Seite (oder des umgebenden Blocks. z.B. eines anderen -Containers) verschieben. WEISE WORTE

Wenn weniger mehr ist Auch wenn -Tags für CSS-Layouts notwendig sind, sollten Sie Ihre Seite nicht damit zupflastern. Viele Leute denken, sie müssten jedes Element einer Webseite mIt eigenen -Tags umgeben. Wenn Ihr NavIgationsmenü aus einer Aufzählungs­ liste mit Links besteht (zu sehen auf Seite 231), könnten Sie ver­ sucht sem, die Lmks mit -Tags zu umgeben: . __

.! .! � ""\.'J\�r

o.� �

_ - -

...

..

+-• • , . o: � ___ __���__ -_ ..� -� - .

. •. �

- �-�

I-' �"' . . "" ·· " " ,

Abbilduna 11-2: Es gibt mehrere Methoden, mit unbekannten Größen wie der Breite des Browserfens­ ters oder der voreingestellten Schriftgröße umzugehen_ Sie fest können die Tatsache, dass Ihre Besucher unterschiedli­ che Auflösungen verwenden, einfach ignorieren und eine feste Breite Ihrer Seite für alle erzwingen (oben). Oder Sie verwenden ein sogenanntes flüssiges Layout (Mitte), das sich automatisch der Fenster­ breite anpasst. Ein elastisches flüssig Layout (unten) passt sich dagegen nicht an die Breite, sondern an unterschiedliche Schriftgrößen an.

elastisch

Tastaturkürzel Strg-+ in Firefox), wird die Breite des Layouts entsprechend angepasst. In Abbildung 11-2 unten, sehen Sie ein elastisches Design einmal in der norma­ len Schriftgröße des Browsers (links) und zum anderen mit einer um einige Stufen höheren Einstellung (rechts). Bei einer Erhöhung der Schriftgröße wird automatisch die Breite aller Seitenelemente entsprechend angepasst. Bei elasti­ schen Designs behalten die einzelnen Teile Ihrer Seite ihre relative Größe. So können Menschen mit Sehschwierigkeiten die Darstellung » aufblasen«, und die Spalten, die den Text enthalten, wachsen einfach mit. In den Übungen am Ende dieses Kapitels werden Sie jeweils ein Design mit fester Breite und ein flüssiges Design erstellen.

Grundlagen des Float-basierten Layouts Float-basierte Layouts nutzen die Fähigkeit der Eigenschaft float, um Elemente nebeneinander anzuordnen und Spalten auf der Webseite anzulegen. Wie in Kapitel 7 (Seite 158) beschrieben, können Sie mit dieser Eigenschaft eine Art »Vakuumverpackung(( um z.B. ein Foto herum erzeugen. Wenn Sie float allerdings

Kapitel l ! : Float-basierte Layouts

301

Grundlagen des Float· basierten Layouts

für -Tags benutzen. werden sie zu einem mächtigen Layoutwerkzeug. Die Eigenschaftfloat sorgt dafür. dass ein Element an die linke oder rechte Seite einer Seite (oder des umgebenden Elements) verschoben wird. HTML-Code. der im Quelltext unterhalb eines Floats steht. wird in der Darstellung nach oben verscho­ ben und umfließt das als Float defInierte Element. Die Eigenschaft float kennt drei verschiedene Werte: left. right und none. Um ein Bild an den rechten Seitenrand zu verschieben, könnten Sie die folgende CSS­ Klasse anlegen und dem -Tag zuweisen: .float_rechts { float: fight; } Mit der gleichen Eigenschaft können Sie eine komplette links platzierte Seitenleiste erzeugen. Hierfür weisen Sie einem -Tag die folgende ID-basierte Regel zu; #seitenleiste { float: left; width: 170px; }

Hierbei ist der englische Name #seitenleiste natürlich nicht zwingend. Sie können der Seitenleiste einen beliebigen Namen geben. Abbildung 11-3 zeigt beide Regeln in Aktion. Hillwels: Der Wert none verhindert. dass ein Element umflossen wird. Es nimmt wieder seine normale Position im Textfluss ein. Das kann sinnvoll sein, wenn eine andere Regel überschrieben werden soll, die das Element bereits als Float definiert hat. Vielleicht haben Sie ein Element dem beispielsweise die Klasse .seiten/eiste zugewiesen wurde und das als Float nach rechts verschoben wird. Auf einer bestimmten Seite soll dieses Element aber nicht verschoben werden, sondern im normalen TextfIuss der Seite erscheinen, Z.B. als Kasten mit einem Hinweis wie diesem hier. Indem Sie dazu einen CSS-Selektor mit einer höheren Spezifität benutzen (Seite 87), der die Deklaration noat: none; enthält, können Sie das Umfließen dieses Elements unterbinden.

Ein einfaches zweispaltiges Layout wie das in Abbildung 11-3 lässt sich schon mit wenigen Schritten umsetzen; 1.

Umgeben Sie jede Spalte mit einem -Tag, das eine eigene ID oder Klasse zugewiesen bekommt. In Abbildung 11-3 erhielten die Kurznachrichten in der Seitenleiste einen eigenen -Container: . und ebenso der Hauptteil, der als definiert wurde.

2. Verschieben Sie die Seitenleisten als Float nach links oder nach rechts.

Bei der Arbeit mit Floats ist die Reihenfolge der Elemente im Quellcode. also welches HTML-Element nach dem anderen kommt. wichtig. Der HTML­ Code für den Float muss vor den Elementen stehen. von denen es umflossen werden soll.

302

CSS: Missing Manual

Grundlagen des Float­ basierten Layouts

AII.11domg 11-3:

(0""0 Farm., 2.0

r

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree Cookies