CSS Missing Manual

Transcription

CSS Missing Manual

Das
fehlende
Handbuch
zu Ihrer
Website
g
n
i
s
s
i
M
l
a
u
n
Ma
he
sc b e
ut ga
De u s
A
CSS
»Die Missing Manuals
gehören zu den klüg
sten und nützlichsten
Computerbüchern
überhaupt«
— Kevin Kelly,
Mitbegründer
von Wired
David Sawyer McFarland
Deutsche Übersetzung von Jørgen W. Lang
Inhaltsverzeichnis
Die fehlenden Danksagungen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XI
Einleitung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XV
Teil 1: CSS-Grundlagen
Kapitel 1: HTML-Code für CSS optimieren . . . . . . . . . . . . . . . . . . . . . . . . . . .
3
HTML: Vergangenheit und Zukunft . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
HTML in der Vergangenheit: Hauptsache, es sieht gut aus . . . . . . . . . . . . . . . . . . . . .
HTML heute: Das Grundgerüst für CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3
4
5
6
6
7
9
10
13
Kapitel 2: Stildefinitionen und Stylesheets . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Anatomie einer Stildefinition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Stylesheets verstehen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Intern oder extern – die richtige Wahl. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Interne Stylesheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Externe Stylesheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Stylesheets mit HTML einbinden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Stylesheets mit CSS einbinden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Übung: Ihre ersten eigenen Stildefinitionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Inline-Stile definieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Interne Stylesheets erstellen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Externe Stylesheets erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
17
20
20
21
22
23
24
25
25
28
31
Kapitel 3: Selektoren-Grundlagen: Welcher Stil für wen? . . . . . . . . 35
Typ-Selektoren: Stile für die ganze Seite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Klassen-Selektoren: zielgenaue Kontrolle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
ID-Selektoren: Regeln für ein bestimmtes Seitenelement . . . . . . . . . . . . . . . . . . . . . . . . . .
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, *) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
36
36
39
41
42
44
46
47
47
V
Pseudoklassen und Pseudoelemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Stildefinitionen für Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Noch mehr Pseudoelemente und -klassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Selektoren für Fortgeschrittene . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Kind-Selektoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Benachbarte Geschwister-Elemente. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Attribut-Selektoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Übung: Beispiele für Selektoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Selektoren gruppieren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Klassen-Selektoren anlegen und verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
ID-Selektoren erstellen und anwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Nachfahren-Selektoren erstellen und verwenden. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
48
48
49
52
52
54
54
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 umzugestalten . . . . . . . . . . . . . . . . . . . .
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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Spezifität: Welcher Stil gewinnt? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Das Zünglein an der Waage: Der zuletzt definierte Stil gewinnt . . . . . . . . . . . . . . . . .
Die Kaskade unter Kontrolle behalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
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 CSS
Kapitel 6: Textformatierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Text formatieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Die richtige Schrift auswählen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Farbiger Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Die Schriftgröße ändern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Pixel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Schlüsselwörter, Prozentwerte und em-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 Wortabstände . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ganze Absätze formatieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Zeilenabstand anpassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Textausrichtung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Zeilen einrücken und unerwünschte Ränder entfernen. . . . . . . . . . . . . . . . . . . . . . . .
Den ersten Buchstaben oder die erste Zeile eines Absatzes formatieren. . . . . . . . . .
Stildefinitionen für Listen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Verschiedene Aufzählungszeichen oder: die Quadratur des Kreises . . . . . . . . . . . . .
Aufzählungszeichen positionieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Grafische Aufzählungszeichen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Übung: Textformatierung in der Praxis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Die Seite einrichten. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Überschriften und Absätze formatieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Listen formatieren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Der letzte Schliff . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
111
111
113
114
114
116
117
118
119
119
122
123
125
125
127
129
132
Kapitel 7: Rahmen, Innen- und Außenabstände . . . . . . . . . . . . . . . . . . . . 137
Das Boxmodell verstehen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Den Leerraum mit Innen- und Außenabständen kontrollieren . . . . . . . . . . . . . . . . . . . . . .
Kurzschrift-Eigenschaften für Innen- und Außenabstände . . . . . . . . . . . . . . . . . . . . .
Wenn Außenabstände kollabieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Negative Außenabstände zum Entfernen von Leerraum . . . . . . . . . . . . . . . . . . . . . . .
Inline- und Block-Elemente darstellen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Rahmen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Die Kurzschrift-Eigenschaft für Rahmen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Rahmenseiten einzeln formatieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Hintergrundfarben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Höhe und Breite festlegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Die tatsächliche Höhe und Breite einer Box berechnen. . . . . . . . . . . . . . . . . . . . . . . .
Textüberlauf im Griff mit der Eigenschaft overflow . . . . . . . . . . . . . . . . . . . . . . . . . . .
Das defekte Boxmodell des Internet Explorer 5 reparieren . . . . . . . . . . . . . . . . . . . . .
Elemente umfließen lassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Hintergründe, Rahmen und Floats. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Umfließen verhindern. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Übung: Außenabstände, Hintergründe und Rahmen . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Seitenränder anpassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Den Leerraum zwischen den Elementen anpassen . . . . . . . . . . . . . . . . . . . . . . . . . . .
Text mit Hintergründen und Rahmen hervorheben . . . . . . . . . . . . . . . . . . . . . . . . . . .
Eine Seitenleiste erstellen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Die Programmierfehler ausbügeln . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Weitere Schritte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
137
139
140
141
143
144
146
148
148
150
151
152
153
154
159
161
162
164
164
166
167
170
174
177
Kapitel 8: Webseiten mit Grafiken versehen . . . . . . . . . . . . . . . . . . . . . . . . 179
CSS und das <img>-Tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Hintergrundbilder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Bildwiederholungen steuern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Hintergrundbilder positionieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Schlüsselwörter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
179
180
184
185
185
Inhaltsverzeichnis
VII
Präzise Werte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Prozentwerte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Hintergrundbilder fixieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Die Kurzschrift-Eigenschaft für Hintergründe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Übung: Eine Fotogalerie erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Bilder rahmen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Bildunterschriften hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Eine Fotogalerie erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Schattenwürfe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ü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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
187
188
190
192
192
193
195
199
203
206
206
210
212
214
218
Kapitel 9: Zeitgemäße Navigation für Ihre Website . . . . . . . . . . . . . . . . 221
Entscheiden, welche Links formatiert werden sollen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Den Link-Zustand verstehen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Nur bestimmte Links formatieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Links gestalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Links unterstreichen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Buttons erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Grafiken verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Navigationsleisten erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ungeordnete Listen verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Vertikale Navigationsleisten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Horizontale Navigationsleisten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Fortgeschrittene Techniken für Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Große, anklickbare Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CSS-basierte Rollover-Effekte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Sliding Doors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Übung: Links formatieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Grundsätzliche Formatierungen für Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Links mit Hintergrundbildern versehen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Externe Links speziell kennzeichnen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Besuchte Seiten markieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ein vertikales Navigationsmenü erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Rollover-Effekte und »Sie sind hier«-Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Programmierfehler im Internet Explorer ausbügeln . . . . . . . . . . . . . . . . . . . . . . . . . . .
Von vertikal nach horizontal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
221
222
223
224
225
227
228
231
231
232
235
241
242
244
245
248
248
250
251
254
255
259
262
264
Kapitel 10: Tabellen und Formulare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Tabellen richtig verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Tabellen mit Stil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Innenabstände . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Vertikale und horizontale Ausrichtung anpassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Rahmen anlegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Zeilen und Spalten gestalten. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
VIII
CSS: Missing Manual
269
271
272
272
274
275
Formulare mit Stil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
HTML-Formularelemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Formulardesign mit CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Übung: Stile für Tabellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Übung: Stile für Formulare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
277
278
280
282
287
Teil 3: Seitenlayout mit CSS
Kapitel 11: Float-basierte Layouts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
Wie das Layout mit CSS funktioniert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Das mächtige <div>-Tag. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Verschiedene Arten von Webseitenlayouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Grundlagen des Float-basierten Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Floats für Ihre Layouts einsetzen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Alle Spalten als Float definieren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Floats in Floats. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Elemente mit negativen Außenabständen positionieren . . . . . . . . . . . . . . . . . . . . . . .
Probleme mit Floats lösen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Das Umfließen von Floats steuern. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Spalten über die gesamte Höhe der Seite. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Das Verrutschen von Floats verhindern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Programmierfehler im Internet Explorer umgehen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Der »Double-Margin«-Bug . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3-Pixel-Lücken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Weitere Probleme mit dem Internet Explorer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Übung: Mehrspaltige Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Strukturieren Sie den HTML-Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Die Layoutregeln erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Weitere Spalten hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Spalten über die ganze Höhe der Seite (»Faux Columns«) . . . . . . . . . . . . . . . . . . . . .
Die Breite korrigieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Übung: Layout mit negativen Außenabständen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Das Layout zentrieren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Die Spalten als Floats definieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Letzte Anpassungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
297
298
299
301
305
306
308
310
314
315
319
322
325
325
327
329
330
331
332
334
335
337
338
339
343
347
Kapitel 12: HTML-Elemente positionieren . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
Wie CSS-Eigenschaften für die Positionierung funktionieren . . . . . . . . . . . . . . . . . . . . . . .
Die Positionierung steuern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Einstein und die absolute Positionierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Wann (und wo) relative Positionierung sinnvoll ist . . . . . . . . . . . . . . . . . . . . . . . . . . .
Elemente stapeln. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Teile einer Seite verstecken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Sinnvolle Strategien für die Positionierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Positionierung innerhalb eines Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Ein Element außerhalb seiner Box darstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CSS-Positionierung für das Seitenlayout verwenden . . . . . . . . . . . . . . . . . . . . . . . . . .
Frames mit CSS und fester Positionierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
350
352
356
356
360
361
363
363
364
365
371
Inhaltsverzeichnis
IX
Übung: Seitenelemente positionieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Den Kopfteil einer Seite verbessern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Fotos mit Beschriftungen versehen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Seitenlayout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
375
375
380
382
Teil 4: Fortgeschrittenes CSS
Kapitel 13: CSS für gedruckte Seiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391
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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Regeln zur Bildschirmdarstellung mithilfe von !important überschreiben . . . . . . . . .
Textstile überarbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Hintergründe für den Ausdruck formatieren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Unerwünschte Bereiche einer Seite ausblenden. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Seitenumbrüche für das Ausdrucken hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Übung: Ein Stylesheet für die Druckversion einer Webseite erstellen . . . . . . . . . . . . . . . .
Unerwünschte Seitenelemente entfernen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Hintergründe entfernen und das Layout anpassen. . . . . . . . . . . . . . . . . . . . . . . . . . . .
Den Text neu formatieren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Das Logo darstellen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
URLs mit ausdrucken. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
391
394
394
394
395
396
397
398
400
401
403
403
405
407
408
408
Kapitel 14: Besseren CSS-Code schreiben . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411
Kommentare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Stildefinitionen und Stylesheets sinnvoll ordnen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Aussagekräftige Namen verwenden. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Mehrere Klassen gleichzeitig verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
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. . . . . . . . . . . . . . . . . . .
411
412
412
414
416
417
420
423
424
425
428
428
429
Teil 5: Anhänge
Anhang A: Referenz der CSS-Eigenschaften . . . . . . . . . . . . . . . . . . . . . . . . . . 435
Anhang B: CSS-Ressourcen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475
X
CSS: Missing Manual
9-
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 Rahmen versehen, die ins Auge springen und die Sie sonst nur aus Hochglanzmagazinen kennen. Sie können Bilder mit großer Genauigkeit im Dokument platzieren,
mehrspaltige Layouts verwenden und Ihre Textlinks mit dynamischen RolloverEffekten 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 CSS funktioniert
Wenn Sie in Textverarbeitungsprogrammen wie Microsoft Word oder Layoutprogrammen 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 Stildefinitionen.
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 (<h1>) zu kennzeichnen, die den Inhalt der übrigen Seite einleitet.
Einleitung
XV
Die Vorteile von CSS
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 Stildefinition 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, Überschriften 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 Stilvorgaben versehen, sodass z.B. alle Überschriften ersten Grades (<h1>-Tags) auf der
gesamten Website im gleichen Stil dargestellt werden, egal an welcher Stelle sie
stehen.
Die Vorteile von CSS
Bevor es CSS gab, waren Webdesigner auf die in HTML selbst vorhandenen Möglichkeiten 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 Designwerkzeug. 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 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 entscheiden, wie (und ob) das Bild gekachelt (vertikal und horizontal wiederholt) werden 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
<font>-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.
XVI
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 Seiten Ihrer Site gemeinsam nutzen. Wenn 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 umkrempeln, indem Sie lediglich ein einziges Stylesheet verändern.
Hinweis: HTML ist mittlerweile so betagt, dass das World Wide Web Consortium (W3C), die für Definition 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ägliche <font>-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>, <p>, <h1>, <table> 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.
Hinweis: Damit Sie beim Lernen von HTML keine nassen Füße bekommen, gibt es eine Reihe von kostenlosen Onlineanleitungen. Die umfassendste deutschsprachige Seite ist wohl http://de.selfhtml.org/ von
Stefan Münz. Für Leute, die des Englischen mächtig sind, gibt es außerdem HTML Dog (www.htmldog.com/guides/htmlbeginner/) und W3Schools (www.w3schools.com/html/). Wenn Sie gedruckte Seiten
bevorzugen, empfehlen wir Ihnen Websites erstellen: Missing Manual oder HTML mit CSS & XHTML von
Kopf bis Fuß (beide O’Reilly Verlag).
HTML (Hypertext Markup Language) verwendet eine Reihe einfacher Anweisungen, Tags genannt, um die verschiedenen Teile einer Webseite zu strukturieren. Der
folgende HTML-Code erzeugt eine (sehr) einfache Webseite:
<html>
<head>
<title>Hallo, ich bin der Titel dieser Webseite.</title>
</head>
<body>
Moin, und ich bin etwas Text im Körper (Body) der Seite.
</body>
</html>
Einleitung
XVII
Auch wenn das nicht besonders aufregend aussieht, enthält dieses Beispiel sämtliche wesentlichen Elemente einer Webseite. Sie sehen die html-Tags (innerhalb spitzer Klammern) ganz am Anfang und am Ende des Codes, einen Kopfteil (head),
einen Dokumentenkörper (body) und ein paar Dinge, die den eigentlichen Inhalt
der Seite bilden.
Wie HTML-Tags funktionieren
Im obigen Beispiel wie auch im HTML-Code aller anderen Webseiten wird Ihnen
auffallen, dass die meisten Anweisungen in Paaren auftreten, die ein Stück Text
oder auch andere Anweisungen umgeben. Innerhalb der spitzen Klammern stehen
die sogenannten Tags, Anweisungen, die dem Webbrowser mitteilen, wie das
Dokument strukturiert ist (Überschriften, Absätze, Links usw.). Diese Tags bilden
das Markup (die Markierung bestimmter Teile, z.B. als Tabelle, Bild usw.) der
Hypertext Markup Language. Gelegentlich sprechen wir im Buch der Einfachheit
halber davon, dass sich ein Tag innerhalb eines anderen Tags befindet. Tatsächlich
werden diese natürlich von einem Tag-Paar umgeben.
Das öffnende Tag eines Paars teilt dem Browser mit, wo die Anweisung beginnt,
während das schließende Tag anzeigt, wo die Instruktion zu Ende ist. Schließende
Tags enthalten prinzipiell einen Schrägstrich (/) nach der öffnenden spitzen Klammer (<).
Damit eine Webseite funktioniert, müssen mindestens drei Tags vorhanden sein:
• Das <html>-Tag erscheint immer am Anfang einer Webseite und am Ende
noch einmal (mit Schrägstrich). Dieses Tag-Paar zeigt dem Webbrowser an,
dass das Dokument in HTML geschrieben ist und nicht in irgendeiner anderen
Sprache. Sämtlicher Inhalt einer Seite, inklusive anderer Tags, steht zwischen
den öffnenden und schließenden <html>…</html>-Tags.
Wenn Sie sich die Struktur einer Webseite als Baum vorstellen, wäre das
<html>-Tag der Stamm. Dem Stamm entspringen zwei Äste, die die beiden
Hauptteile jeder Webseite bilden: der Kopfteil (head) und der Körper (body).
• Der Kopfteil einer Webseite (umgeben mit <head>-Tags) enthält den Titel der
Seite. Es kann außerdem noch eine Reihe für den Benutzer unsichtbare Informationen enthalten (z.B. Suchbegriffe), die Browser und Suchmaschinen auswerten können.
Zusätzlich kann der Kopfteil Informationen enthalten, die der Webbrowser für
die Darstellung der Webseite und zusätzliche Interaktivität verwenden kann,
z.B. die Cascading Style Sheets. Auch JavaScript-Programme, -Funktionen und
-Variablen können im Kopfteil einer HTML-Datei deklariert werden.
• Im Körper (body) des HTML-Dokuments, der durch die <body>-Tags gekennzeichnet wird, stehen sämtliche Informationen, die im Browserfenster dargestellt werden – Überschriften, Text, Bilder und so weiter.
XVIII
CSS: Missing Manual
XHTML: HTML der
nächsten Generation
Innerhalb der <body>-Tags werden Sie häufig die folgenden Tags antreffen:
• Um einem Webbrowser mitzuteilen, wo ein Absatz beginnt und aufhört, verwenden Sie das <p>…</p>-Tag-Paar. (Das »p« steht hier für »paragraph«, das
englische Wort für Absatz.) Innerhalb dieses Paars können natürlich weitere
Tags stehen, wie wir gleich sehen werden.
• Das <strong>-Tag hebt Text hervor. Wenn Sie einen Textteil mit diesen Tags
umgeben, wird der Text in den meisten Fällen fett gedruckt dargestellt. Das
HTML-Schnipsel <strong>Warnung!</strong> teilt dem Browser mit, die Zeichenfolge »Warnung!« stark hervorzuheben.
• Wird ein Hyperlink, meistens einfach nur als »Link« bezeichnet, angeklickt,
wird eine beliebige andere Adresse im Web geöffnet. Sie können dem Browser
mitteilen, welche Adresse das sein soll, indem Sie diese in das öffnende <a>-Tag
schreiben, z.B.: <a href="http://www.missingmanuals.com/">Hier klicken!</a>.
Hiermit weisen Sie den Browser an, die Missing Manual-Website zu öffnen,
sobald jemand der Aufforderung »Hier klicken!« folgt. Der href-Teil im öffnenden Tag wird als Attribut bezeichnet. Dessen Wert ist eine sogenannte URL
(»Uniform Resource Locator«, sprich: Webadresse).
Wie jeder anderen Technologie ist HTML das Alter anzusehen. Auch wenn es seinen Zweck erfüllt hat, war es schon immer eine etwas schludrige Sprache. Unter
anderem können Tags in Groß- und Kleinbuchstaben verwendet werden (<body>
und <BODY> sind beispielsweise beide gültig). Auch nicht geschlossene Tags sind
möglich (ein öffnendes <p>-Tag reicht im Prinzip aus, um einen Absatz zu erzeugen). Zwar erleichtert diese Flexibilität das Schreiben von Seiten, auf der anderen
Seite erschwert es aber die Darstellung der Seiten durch Webbrowser, PDAs und
andere Geräte erheblich. Außerdem ist HTML mit der heißesten neuen Internetsprache nicht kompatibel: mit XML oder auch Extensible Markup Language
(erweiterbare Auszeichnungssprache).
XML ist ebenfalls eine Tag-basierte Sprache, ähnlich wie HTML. Mit ihr können
Daten in einer deutlichen und leicht verständlichen Weise organisiert werden,
damit Computer, Betriebssysteme und Programme schnell und einfach Daten austauschen können.
Im Gegensatz zu HTML ist XML dabei nicht auf eine Handvoll Tags beschränkt.
Anhand einiger Regeln können Sie im Prinzip sogar Ihre eigenen Tags definieren.
Vom RSS-Feed bis iTunes-Wiedergabeliste – überall kommt XML zum Einsatz.
Eine weitere Variante ist XHTML.
XHTML: HTML der nächsten Generation
Um mit der Zeit Schritt zu halten, findet eine neue HTML-Version mit dem
Namen XHTML ihren Weg auf immer mehr Websites. Wenn Sie HTML bereits
verstehen, ist die Umstellung recht einfach. XHTML ist keine revolutionäre neue
Einleitung
XIX
Index
Symbole
!important Deklaration 396
" (Anführungszeichen), Schriftnamen und
102
# (Doppelkreuz), ID-Selektoren und 62
* (Asterisk) als universeller Selektor 47
+ (Pluszeichen), benachbarte Geschwisterelemente und 54
. (Punkte), Klassenselektoren und 38
:active 48, 222
:after 50, 400
:before 49
:first-child 50
:first-letter 49, 118
:first-line 49, 118
:focus 51, 222
:hover 48, 222, 225
Bilder und 230
Buttons und 228
Internet Explorer und 242, 243
:link 48, 222
:visited 48, 222, 254
Bilder und 230
> (spitze Klammer), Kindselektoren und 52
@font-face-Direktive 101
@import-Direktive
Fehler im Internet Explorer 394
@media-Direktive 394
[] (eckige Klammern),Attributselektoren
und 54
Numerisch
3-Pixel-Fehler (Internet Explorer) 327
456BereaStreet.com 215
Webbrowser und Formulargestaltung
280
A
Absätze 49, 114, 118, 127
absolute Pfade 183
absolute Positionierung 297, 350, 363–365
Bedarf bestimmen 366
Beziehung zu Vorfahren-Elementen
und 356
Eigenschaft float und 350
Eigenschaft visibility und 361
Ressourcen 469
Spalten und 369
Stapeln (z-index) und 360
Übung 375–387
absolute URLs 400
Abstände (Text) 113
alistapart.com 246, 276
flüssige Layouts 311
Link-Adressen ausdrucken 400
all (Medientyp) 393
als Float definierte Elemente 159–164,
301–329
Begrenzungslinien und 161
Breite festlegen 303
clear-Eigenschaft und 162
Fehlersuche 314–329
Hintergründe/Rahmen und 161
Höhe und 201
horizontale Navigationsleisten und 239
in anderen Floats 308
Quellcode-Reihenfolge und 302, 307
Spalten 302–307
Umfließen verhindern 315–318
umgebend 240, 315–318
Anführungszeichen ("), Schriftnamen und
102
Anker-Tag (<a>) XIX
Ankreuzfelder 280
Ansichtsbereich (Viewport) 352
antix.co.uk 310
Aslett, Tony 317
Asterisk (*) als universeller Selektor 47
Attribute XIX
Attributselektor 280
cellspacing (Zellzwischenraum) 274
475
Attribute
class 39, 424
id 41, 424
Selektoren 54
src 123
title 54
Aufklappmenüs 238, 279, 467
Aufzählungsliste (siehe Listen, Aufzählung)
Aufzählungszeichen, von Listeneinträgen
entfernen 232
Ausdrucken von Hintergrundbildern 189
Ausdrucken von Webseiten 391–409
ausrichten
Tabellen 272
Text 116
Außenabstände zusammenfassen 142, 449
Auswahllisten (Formular) 279
auto (Schlüsselwort für die Eigenschaft
overflow) 154
auto-margin-Fehler (Internet Explorer 5)
209
B
background-attachment-Eigenschaft 191,
451
Internet Explorer und 191
Kurzschrift 192
background-color-Eigenschaft 138, 150,
451
Ausdrucken und 399
Buttons und 227
Kurzschrift 192
background-Eigenschaft 192, 450
als Float definierte Elemente und 161
Ausdrucken und 398
Buttons und 227
Rahmen und 151
Übung 164–178
background-image-Eigenschaft siehe Hintergrundbilder
background-position-Eigenschaft 185, 229,
452
absolute Werte und 187
gekachelte Bilder und 186
Kurzschrift 192
Prozentwerte und 188
Schlüsselwörter 185
Vorab-Laden und 244
background-repeat-Eigenschaft 184, 452
476
CSS: Missing Manual
Banner siehe Kopfteil
BBEdit XXIII
Begrenzungslinien (Rahmen), als Float
definierte Elemente und 161
benachbarte Geschwisterelemente (Tags)
44
Berechnen von Breite und Höhe 152
besuchte Links, Stildefintionen für 231
Beziehung zu Vorfahren-Elementen (Vererbung) 42, 67, 77, 80, 81, 82, 86, 92, 438
Bildbeschriftungen 195, 380
Bilder 179–219
:visited-Pseudoklasse und 230
als Links 228–231
Beschriftungen für 380
Hintergrund 180–192, 206
Höhe/Breite (Angaben für Formatierung) 200
im Voraus laden 244
kostenlose 191
Rahmen entfernen von 422
Rahmen für 193
Ressourcen 468
siehe auch Grafiken
Übung 192–206
verankern 190
verlinkte 225
wiederholen (kacheln) 184
blink (Wert für die-Eigenschaft text-decoration) 111
Block-Elemente 40, 144–146, 160, 233
Blocksatz 117
border-collapse-Eigenschaft 274, 460
border-color-Eigenschaft 446
border-Eigenschaft 138, 148–150, 446
Bilder und 179
Buttons und 227
Hintergründe und 151
img-Tags und 225
Tabellen und 274
Übung 164–178
Unterstreichung von Links und 226
zusammengefasste Rahmen 274
border-spacing-Eigenschaft 460
border-style-Eigenschaft 447
border-width-Eigenschaft 447
bottom-Eigenschaft 453
Double-Margin-Bug
Bowman, Douglas (Sliding DoorsMethode) 246
Boxmodell 137
Block-Boxen 144–146
Fehler im Internet Explorer 158, 176
Inline-Boxen 144–146
Ressourcen 468
braille (Medientyp) 393
Bullet Madness (Website mit Aufzählungszeichen) 191
Buttons 227–228
Formularbuttons 279
Navigationsbuttons, Formatierung 426
Text als 242
Text zentrieren auf 240
C
Cache (Browser-Zwischenspeicher) 26
caption-side-Eigenschaft 461
Cederholm, Dan 321
Celic, Tantek 423
cellspacing-Attribut 274
Tabellen und 274
chrispederick.com 420
Clagnut.com 204
clear-Eigenschaft 162, 453
als Float definierte Elemente und
315–318
Formulare und 282
Fußzeilen und 315
Navigationsleisten und 267
clip-Eigenschaft 453
Code, Formatierung 28
collapse (Wert für die Eigenschaft bordercollapse) 274
color-Eigenschaft 102, 435–436, 439
Ausdrucken und 397
Schlüsselwörter 104, 436
Conditional Comments (Internet Explorer) 429
content-Eigenschaft 400, 462
Creative Commons 191
CSS
Beispiel-Websites 467, 471
Bücher 471
CSS 3 (w3.org) 466
Geschichte von XXIV
Hilfe 466
im Vergleich mit HTML XVI
Ressourcen 465–473
Validierung 22
CSS Cheat Sheet (PDF) 466
CSSCreator.com 317, 467
CSS-Discuss (Mailingliste) 466
CSSHOVER 51
cssplay.co.uk 310
CSS-Positionierung 349
CSSzengarden.com 180
cursor-Eigenschaft 462
D
Darstellung als Großbuchstaben 111
Darstellungsrolle 146
Deklarationen 19
!important 396
\; (Semikolon) und 19
Deklarationsblöcke 17, 19
Designs für vertikale Menüs, kostenlos 468
Dezimalwerte (RGB-Farbnotierung) 436
Direktiven
@import 23–24, 87, 394
@media 394
display-Eigenschaft 146, 454
Druck-Stylesheets und 400
im Vergleich mit visibility-Eigenschaft
361
layout und (Internet Explorer) 330
none als Wert 146
verdoppelte Außenabstände im Internet Explorer und 326
div-Tag 8, 298–299, 424–425
als umgebendes Element 141
Stylesheets organisieren mit 424
Doctypes (Dokumenttyp-Deklarationen)
XXI, 13–15
automatisch 15
Document Type Definition (DTD)Dateien und 13
ermitteln 14
Frames und 15
Dokumenttyp-Deklarationen (DTD)Dateien 13
Doppelkreuz (#), ID-Selektoren und 62
Double-Margin-Bug (verdoppelte Außenabstände) im Internet Explorer 325
Index
477
doxdesk.com
doxdesk.com 310
Dreamweaver XXIII
Doctype-Deklarationen (automatisch)
15
Kaskadierung und 86
Druck-Stylesheets 391–409
!important-Direktive und 396
Elemente verstecken 400
Hintergründe und 398
Links und 400
page-break-before/after-Eigenschaften
402
Stildefinitionen für Text und 397
Übung 403–409
Druckvorschau 395
DTD-Dateien 13
Durchschuss XVI, 115
dynamische Menüs 238
E
Easy-Clearing-Methode (Floats) 317
eckige Klammern ([]), Attributselektoren
und 54
EditPlus XXIII
Edwards, Dean 51
Eigenschaften 19, 435–464
background 192, 398, 450–452
background-attachment 191
background-color 138, 399
background-image 180–184, 229
background-position 185, 229, 244
background-repeat 184
border 138, 148–150, 226, 274, 446, 460
border-collapse 274
border-color 446
bottom 453
caption-side 461
clear 162, 267, 282, 453
clip 453
color 102, 397, 435–436, 439
content 400, 462
cursor 462
display 146, 236, 361, 400, 454
empty-cells 461
float 159, 281, 301–329, 350, 455
font 116, 440
font-family 99
font-size 104, 107, 109
478
CSS: Missing Manual
font-style 110
font-variant 111
font-weight 110
für Listen 444–445
height 201, 455
layout 330, 359, 387
left 455
letter-spacing 113, 442
line-height 114, 115, 145, 442
list-style 124
list-style-image 123
list-style-position 122
list-style-type 119, 131
margin 117, 123, 128, 138–146, 232,
310–314, 449
max-/min-height/width 152, 310,
456–457
orphans 463
outline 447
overflow 153, 457
overflow: hidden 161
padding 123, 137–146, 272, 448
page-break 463
page-break-before/after 402
position 457
Positionierung 230, 350–374
right 458
Seitenlayout 453–460
table 460–461
table-layout 461
text 439–444
text-align 116, 209, 238, 272
text-decoration 111, 225
text-indent 117
text-transform 111
top 458
vererbt 67–77
vertical-align 272, 443
visibility 361, 459
w\idth 157
white-space 444
widows 464
width 234, 276, 459
word-spacing 113, 444
z-index 360, 459
zoom 162, 176, 319, 365
einfache Anführungszeichen ('), Internet
Explorer und 184
Firefox
elastische Layouts 300
Elemente
als Float definiert 159–164, 201, 239,
301–329
beim Ausdrucken verstecken 400
Block 40, 144–146, 160
Formular (HTML) 278
Inline 8, 144–146
Positionierung (Übung) 375–387
stapeln (z-index) 360
umgebend 160, 240
verschachtelt 44
Elemente auf der z-Achse anordnen
(stapeln) 360
Elemente verstecken (visibility-Eigenschaft) 361
Eltern-Beziehung (Tags) 43
embossed (Medientyp) 393
em-Einheiten 19, 437
background-position-Eigenschaft und
187
Buttons und 265
elastische Layouts und 301
Textgröße 107
empty-cells-Eigenschaft 461
erzeugter Inhalt 50, 124, 462
exploding-boy.com 247
Expression Web Designer XXIII
Extensible Markup Language (siehe XML)
externe Links
hervorheben (Übung) 251
Stildefinitionen für 223
externe Stylesheets 22–25, 31–34
.css-Dateiendung 31
@import-Direktive und 87, 417–419
@media-Direktive und 394
Angabe von Medientypen für 394
in Webseiten einbinden 23–25, 32
Speicherort für 87
F
falsche Spalten siehe Spalten, ganzer Höhe
Farben 435–436
Farbwähler 103
Fehler 428
Firefox
Positionierung von Hintergrundbildern 187
Text als Float 401
Internet Explorer 428–431, 470
:after-Selektor 400
@import-Direktive 394
3-Pixel-Lücke 327
auto als Wert für margin-Eigenschaft 209
Boxmodell 158, 176
content-Eigenschaft 400
double-margin (verdoppelter
Außenabstand) 325
Guillotine-Bug 329
kursiver Text 324
Links als Block-Elemente 235
max-height (bzw. -width), minheight (bzw. -width) 310
mehrzeilige Links 227
Peek-a-Boo 329
Platzierung 204
Positionierung 378
Positionierung mit den Eigenschaften right und bottom 354, 359
Rahmen 175
Zwischenräume zwischen Links
234, 263
Platzierung von Behebungen im Quellcode 203, 264, 265
Ressourcen 470
fehlerhafte Link-Abstände im Internet
Explorer 234, 263
feste Positionierung 351
float-Eigenschaft und 350
Frames und 371–374
Internet Explorer und 352, 372, 374
fettgedruckter Text 110
fieldset-Tag 278
Firefox
Cache, deaktivieren 26
CSS-Validator 22
Fehler bei Positionierung von Hintergrundbildern 187
HTML-Validator 11
Innenabstände und 123
overflow-Eigenschaft und 154
Probleme mit Text als Float 401
Textgröße anpassen 106
View Formatted Source (Erweiterung)
86
Web Developer (Erweiterung) 420
Index
479
fixed
fixed (Wert der Eigenschaft backgroundattachment) 191
Float-basierte Layouts 297–348
elastisch 300
Fehler im Internet Explorer 325–329
Fehlersuche 314–329
flüssig 300, 305, 310, 311
mehrspaltig (Übung) 330–339
mit fester Breite 300, 305, 310, 311
negative Außenabstände (Übung)
338–348
Probleme mit als Float definiertem Text
(Firefox) 401
Ressourcen 469
float-Eigenschaft 159, 301–329, 455
absolute Positionierung und 350
abstellen (clear-Eigenschaft) 162
Bilder und 180
feste Positionierung und 350
Formulare und 281
Fußzeilen und 315
mehrspaltige Layouts (Übung) 330–339
negative Außenabstände (Übung)
338–348
Quellcode-Reihenfolge und 161, 302
Spalten ganzer Höhe und 319
Verschiebung verhindern 322–325
Floats
Verschiebung 322–325
flüssige Layouts 300
Effekte mit negativen Außenabständen
311
in Layouts mit fester Breite umwandeln
305
min-/max-Eigenschaften und 310
font-Eigenschaft 116, 440
font-family-Eigenschaft 99, 440
font-size-Eigenschaft 104, 440
Vererbung und 107, 109
font-style-Eigenschaft 110, 441
font-variant-Eigenschaft 111, 441
font-weight-Eigenschaft 110, 133, 441
footers, float-Eigenschaft und 315
Formulare 277–282
Formatierung 280
Safari (Browser) und 279, 292
480
CSS: Missing Manual
Stildefinitionen für, Webbrowser und
277–280
Übung 287–293
fortgeschrittene Selektoren (siehe Selektoren, fortgeschritten)
Fotogalerie (Übung) 192–206
Fotografien (siehe Bilder, Grafiken)
Frames 371–374
Framesets 371
FrontPage XXIII
15
G
geneigter Text 110
geschweifte Klammern ({}) 28
GoLive, Doctype-Deklarationen (automatisch) 15
Grafiken 179–219
als Links 228–231
im Voraus laden 244
Rahmen ersetzen durch 210
Ressourcen 468
siehe auch Bilder
grafische Aufzählungszeichen 123
griechische Buchstaben (nummerierte
Listen) 120
Größenangaben 437–438
für Schriften 422
größer-als-Zeichen (>), Kindselektoren
und 52
Großschreibung entfernen 111
Guillotine-Bug im Internet Explorer 329
H
Hacks 177
CSSHOVER 51
Firefox
Probleme bei der Positionierung
von Hintergrundbildern
187
Probleme mit als Float definiertem
Text 401
IE7 (Selektoren) 51
Internet Explorer 428–431
3-Pixel-Lücke 327
auto-margin-Problem 209
Boxmodell-Fehler 176
Double-Margin-Bug 176, 325
feste Positionierung 374
ID-Selektoren
Guillotine-Bug 329
layout (Microsoft-eigene Bezeichnung) 359, 387
Links als Block-Element 235
mehrzeilige Links 227
Peek-a-Boo-Fehler 329
Probleme bei der Positionierung
mit den Eigenschaftren
right und bottom 359
Probleme mit Leerraum zwischen
Links 234, 263
Probleme mit max-height
(-width)/min-height
(-width) 310
Probleme mit Platzierung 204
Probleme mit Positionierung 378
Rahmen-Fehler 175
layout (Microsoft-eigene Bezeichnung),
overflow: hidden-Deklaration 162
Platzierung von 203
Ressourcen 470
Star-HTML-Hack (* html) 158
zoom-Eigenschaft 162, 319
handheld (Medientyp) 393
hängende Einzüge 117
Heerema, Matt 278
height-Eigenschaft 151, 201, 455
max-/min-height-Eigenschaften 310
tatsächliche Höhe berechnen 152
hexadezimale Farbnotation 104, 436
hidden (Schlüsselwort für die Eigenschaft
overflow) 154, 161
Hintergrundbilder
ausdrucken 189
ausdrucken und 399
background-image-Eigenschaft
180–184, 451
Kurzschrift 192
Links und 229
Übung 206–219
URLs und 183
fixieren 190
Kurzschrift (Eigenschaft background)
192
Links versehen mit 226
Links versehen mit (Übung) 250–252
positionieren 185–191
Stildefinitionen und 216
Übung 206–219
wiederholen (kacheln) 184
Hintergrundbilder kacheln
186
kostenlose Muster 191
Hintergrundbilder kacheln (vertikal/horizontal wiederholen) 184
Hintergrundfarben festlegen 150
horizontale Navigationsleisten 235–240
Übung 264–267
horizontale Platzierung (in Eigenschaften
für die Positionierung) 230
HTML XVII–XIX
Attribute XIX, 39, 41, 54
col- und colgroup-Tags 276
Doctype-Deklarationen 13–15
externe Stylesheets einbinden 23
Formular-Tags 278
Framesets 371
für Tabellen 269
Geschichte von 4
Quellcode-Reihenfolge 161, 308
Schlüsselwörter für Farben 104
Suchmaschinen und 8
Tags XVIII, XIX, 6–13
div-Tag 8, 40
Grundlagen 10, 13
nicht mehr unterstützte 9
Quellcode-Reihenfolge 161
span-Tag 8, 40
Vererbung und 67–77, 80–82, 92
verschachtelte 42–44
Text strukturieren 6
Übergangsversion (Transitional) 14
validieren 10, 41
Werte XIX
htmldog.com 238, 281
HTML-Kit XXII
HTML-Seiten (siehe Webseiten)
Hypertext Markup Language (siehe
HTML)
I
Icons, kostenlos 191
ID-Selektoren 39–42
HTML validieren und 41
im Vergleich mit Klassenselektoren 40,
299
Index
481
ID-Selektoren
JavaScript und 42
Übung 62–64
zum Verweisen auf bestimmte Teile
von Webseiten 42
IE Developer Toolbar 420
IE7 (JavaScript-Lösung) 51
img-Tag 179–180
ausdrucken und 189
border-Eigenschaft und 225
padding/Außenabstände und 145
Tabellen und 272
Inhalt umbrechen 159–164
Quellcode-Reihenfolge und 161
inherit-Schlüsselwort 438
inline styles (see styles, inline)
Inline-Boxen 144–146
Inline-Elemente 8, 144–146
Webbrowser, Positionierung und 382
interne Stylesheets 21–22, 28–31
@media-Direktive und 394
in externe umwandeln 23, 31
schließen 30
Internet Explorer
!important-Direktive und 88
' (einfache Anführungszeichen) und
184
:after-Selektor und 400
:hover-Selektor und Elemente, die keine
Links sind 243
angepasste Listen und 124
Außenabstände und 123
background-attachment-Eigenschaft
und 191
Cache, deaktivieren 26
Conditional Comments 429
content-Eigenschaft und 400
CSS 3-Selektoren für Links und 253
Fehler 470
3-Pixel-Lücke 327
auto-margin (automatische
Berechnung von
Außenabständen) 209
beheben (Platzierung) 264, 265
Boxmodell 158, 176
Float-bezogene 325–329
Guillotine-Bug 329
kursiver Text 324
482
CSS: Missing Manual
Link als Blockelement 235
Link-Zwischenräume 234, 263
Peek-a-Boo 329
Platzierung 204
Positionierung 378
Ressourcen 469
verdoppelte Außenabstände
(double-margin-bug)
325
feste Positionierung und 352, 372, 374
fieldset-Tags und 278
Hacks verwalten 428–431
IE Developer Toolbar 420
layout (Microsoft-eigener Begriff) und
330, 359, 387
max-/min-height/width-Eigenschaften
und 152, 310
mehrzeilige Links und 227
overflow: hidden-Deklaration und 162
Pixelwerte und 437
Positionierung mit der Eigenschaft
right und 354, 359
Pseudoklassen/Elemente und 49, 51
Quirks-Modus 154
Rahmen und 148
Rahmenfehler 175
Star-HTML-Hack (* html) für 158
Stylesheets für bestimmte Medientypen
und 394
Textgrößen und 106, 107, 109
verdoppelte Außenabstände (doublemargin-bug) 176
zoom-Eigenschaft und 162, 176
J
JavaScript
das Aussehen von Websites ändern mit
419
dynamische Menüs und 238
Erzeugung von Pop-Up-Tipps mit 362
für gestreifte Tabellen 276
ID-Selektoren und 42
IE7 51
Positionierung von Spalten mit 370
jeffhowden.com 282
List-U-Like,
CSS-Generator
K
Kaliber10000 191
Kapitälchen 111
Kaskadierung 79–95
Conditional Comments und 431
Linkzustände und 223
mehrere Stildefinitionen und 82
Spezifität 84–90
Stylesheets für den Druck 396
Übung 90–95
Vererbung und 80–82, 92
Kaskadierung Stylesheets siehe CSS
Kindbeziehungen (Tags) 44
Kindselektoren 52
Listenformatierung und 53
Klassenselektoren 36–39, 425
. (Punkt) und 38
im Vergleich mit ID-Selektoren 299
mehrere, auf einen Tag anwenden 414
Pseudoklasse 48–52
Regeln für die Benennung 38
Stildefinitionen für Links und 223
Übung 59
Kommentare 411
Kontrast (Text) 109
Kopfteil 186, 375
Kreis, Aufzählungszeichen für Listen 119
kursiver Text 110
L
Längen, Maßeinheiten 437–438
Layout Gala 306
Layouts
dreispaltiges Layout 367–371
Eigenschaften 453–460
elastisch 300
Float-basiert siehe Float-basierte Layouts
flüssiges in Layout mit fester Breite
umwandeln 305
Internet Explorer, Fehler und 330, 359,
387
kostenlose Schablonen 469
min/max-Eigenschaften und 310
Referenzen 468–470
Verwendung von CSS Positionierung
für 365
vorbereitet 306
Layouts mit fester Breite 300
aus flüssigem Layout erstellen 305
min-height (bzw. -width) und maxheight (bzw. -width) 310
negative Außenabstände und 311
Leerraum 137
left (Schlüsselwort für die Eigenschaft
float) 160
left-Eigenschaft 455
legend-Tag 278
letter-spacing-Eigenschaft 113, 442
line-height-Eigenschaft 114, 442
Inline-Elemente und 145
Vererbung und 115
line-through (Textausschmückungen) 111
Links 221–267
ausdrucken 400
besuchte, markieren 254
externe, hervorheben (Übung) 251
Grafiken als 228–231
Hintergrundbilder und (Übung)
250–252
in Register-Navigation 245
mehrzeilig, Internet Explorer und 227
mit Nachfahren-Selektoren gruppieren
224
Navigationsleisten 231–240
Stildefinitionen für 48, 221–231
Text auf Buttons zentrieren 240
Übungen 248–267
unterstreichen 225
Unterstreichung entfernen 422
Zustände 222–223
Links als Blockelemente (Fehler im Internet Explorer) 235
Listen
Formatierung 53, 109, 119–124, 129
mit Aufzählungszeichen 119–124, 187,
191, 212, 232
nummerierte 119–124
Übungen 240
ungeordnete 119, 231
List-O-Matic 240
list-style-Eigenschaften 119–124, 131,
444–445
List-U-Like, CSS-Generator 240
Index
483
margin-Eigenschaft
M
margin-Eigenschaft 117, 123, 128, 138–146,
421, 449
als Float definierte Inline-Elemente und
160
Bilder und 180
img-Tag und 145
Inline-Boxen und 145
Kurzschrift 140
Listen und 232
Maßeinheiten 140
negative Außenabstände 143, 204,
310–314
Opera-Browser und 166
Übung 164–178
verdoppelte Außenabstände im
Internet Explorer 325
zusammengefasste Außenabstände und
141, 449
Maxdesign.com.au 240
max-height/width-Eigenschaften 152, 310,
330, 456
Medientypen 393
mehrfache Stildefinitionen (Kaskadierung) 82
Menüs
Aufklappmenüs 238
Beispiel-Websites 468
Ressourcen 467
Microsoft Expression
15
min-height/width-Eigenschaften 152, 310,
330, 456
Mollio.org 306
Monitorgröße, Webseiten-Layouts und
299
Morgue File 191
Mozilla, Innenabstände und 123
N
Nachfahren-Beziehung (Tags) 42
Nachfahren-Selektoren 42, 44–46, 423–428
Bilder und 180
Links gruppieren mit 224
Übung 64–65
Navigation 221–267
Navigationsleisten 231–240, 426
Aufklappmenüs und 238
horizontal 235–240, 264–267
484
CSS: Missing Manual
Rahmen und 235
vertikal 232–235, 255–259
Register 240, 245–247
Ressourcen 467–468
Übungen 467
negative Außenabstände 143, 204, 310–314
Übung 338–348
verdoppelte Außenabstände (Fehler im
Internet Explorer) 314
Netscape Navigator 23
Neuladen von Webseiten erzwingen 26
none (Schlüsselwort für dieEigenschaft
float ) 160
none (Wert für die Eigenschaft display) 146
no-repeat (Wert für die Eigenschaft background-repeat) 184, 229
nummerierte Listen siehe Listen, nummeriert
O
Open Photo 191
Open Source Web Design 306
Opera-Browser
margin-Eigenschaft und 140, 166
overflow: hidden-Eigenschaft und 162
padding-Eigenschaft und 140, 166
projection (Medientyp) und 393
orphans-Eigenschaft 463
oswd.org 306
outline-Eigenschaft 447
overflow: hidden-Deklaration 161
Webbrowser und 162
overflow\
hidden-Deklaration
kursiver Text und 324
overflow-Eigenschaft 153, 457
P
padding-Eigenschaft 123, 137–146, 421, 448
als Float definierte Inline-Elemente und
160
Bilder und 180, 230
Buttons und 227
img-Tag und 145
Inline-Boxen und 145
Inline-Elemente und 230
Kurzschrift 140
Listen und 232
Quirks-Modus
Maßeinheiten 140
Opera-Browser und 166
Rahmen und 150
Tabellen und 272
zusammengefasste Außenabstände und
142
page-break-Eigenschaft 402, 463, 464
Passepartout (simuliert) 180
Pattern4u 191
Pederick, Chris (Web Developer Toolbar
für Firefox) 420
Peek-a-Boo-Fehler in Internet Explorer
329
Pfadangaben, relativ zum Wurzelverzeichnis 182–183
Pfade relativ zum Dokument 32, 182–183
Pixel 437
187
für Textgröße 105
Pixy-Methode 244
Platzierungsfehler im Internet Explorer
204
Pluszeichen (+), benachbarte Geschwisterelemente und 54
Pop-up
Meldungen 54
Tipps 362
position-Eigenschaft 350–374, 457
absolute Positionierung 356
Bedarf bestimmen 365
Elemente stapeln (auf der z-Achse
anordnen) 360
Elemente verstecken 361
feste Positionierung 371–374
Frames und 371–374
Internet Explorer-Fehler und 354, 359,
378
Positionierung innerhalb von Elementen 363
Positionierungsstrategien 363–374
relative Positionierung 356–360
Ressourcen 469
Schlüsselwörter 350–352
Spalten und 369
Übung 375–387
Werte horizontal/vertikal in 230
Positionierung mit der Eigenschaft bottom, Internet Explorer und 359
Positionierung mit der Eigenschaft right,
positioniseverything.net 329, 429
print (Medientyp) 393
Probleme mit mehrzeiligen Links im Internet Explorer 227
projection (Medientyp) 393
Prozentwerte 438
Außenabstände/Innenabstände und
141
188, 230
height/width-Eigenschaften und 152
mögliche Rundungsfehler im Webbrowser 323
RGB (Farbe) 436
Spalten ganzer Höhe und 322
Textgröße 107
Pseudoelemente 48–52
Formatierung von Absätzen und 118
Spezifität und 85
Pseudoklassen 48–52, 222, 242
:active 48, 222
:focus 222
:hover 48, 222, 225, 228, 230
:link 48, 222
:visited 48, 222, 230, 254
Bilder und 230
Spezifität und 85
Punkt statt Komma bei Nachkommastellen 108
Punkte (.), Klassenselektoren und 38
Punkte (Maßeinheit) 397
Q
Quadrat (Aufzählungszeichen für Listen)
119, 129
Quellcode-Reihenfolge 161
float-Eigenschaft und 302
negative Außenabstände und 310
Suchmaschinen und 308
Quirks-Modus 13, 154
Index
485
Radiobuttons
R
Radiobuttons 280
Rahmen 146–150, 446–448
durch Grafiken ersetzen 210
entfernen 422
Formatierung 148–149
Rahmen für Bilder 193
Regeln siehe Stildefinitionen
Register
Navigation 240, 245–247, 467
relative Positionierung 350, 356–360,
363–365
RGB (rot, grün, blau) Farbnotation 104,
436
right (Schlüsselwort für die Eigenschaft
float) 160
right-Eigenschaft 458
Rollbalken 154
Rollover-Effekte 244
Übung 259–260
Rot, Grün, Blau (RGB), Farbnotation 104,
436
RSS-Feeds 472
Rutter, Richard 204
S
Safari
Auswahllisten in Formularen Menüs
und 279
Cache deaktivieren 26
Element-Informationen (DevelopMenü) 86
Formulare und 279, 292
HTML-Validator 10
satzansatz.de 330
Schattenwürfe 203–206
Schlüsselwörter 438–439
background-position-Eigenschaft 185
border-Eigenschaft 147
clear-Eigenschaft 162
float-Eigenschaft 160
für Farbe 104, 436
486
CSS: Missing Manual
für Textgrößen 106
inherit 438
overflow-Eigenschaft 154, 161
Schriften 99–103, 422
(siehe auch Text)
Anführungszeichen (") und 102
screen (Medientyp) 393
scroll
Schlüsselwort für die Eigenschaft overflow 154
Wert für die Eigenschaft backgroundattachment 191
Seitenleisten 170–174
abgerundete Ecken für 214–218
ganzer Höhe 319
Seitenleisten erstellen 214–218
Selectoracle 52
Selektoren 17, 19, 35, 55–65
:active 48
:after 50, 400
:before 49
:first-child 50
:first-letter 49
:first-line 49
:focus 51
:hover 48
:link 48
:visited 48
Attribut 54, 280
benachbarte Geschwisterelemente 54
CSS 3 (für Links) 253
erweitert 52–55
gruppieren 46, 58, 427
Übung 58
ID 39–42, 62, 299
Kind 52
Klasse 36–39, 59, 299, 414, 425
Nachfahren 42, 44, 46, 64, 224, 423–428
Pseudoelemente 48–52, 118
Pseudoklasse 48–52, 222
Spezifität 84–90
Tag 57
Typ 36
übersetzen 52
Übung 55–65
universell (*) 47
vererbt 68
Selektoren für benachbarte Geschwisterelemente 54
Suchmaschinen
Selektoren gruppieren 46
selfhtml
HTML für Tabellen 271
Semikola (\;), Deklarationen und 19
separate (Wert der Eigenschaft bordercollapse) 274
separate (Wert der Eigenschaft bordercollapse) 274
sIFR 101
SitePoint.com 467
skEdit XXIII
Sliding Doors-Technik (Registernavigation) 246
Software, CSS-freundlich XXII–XXIII, 472
Some Random Dude 191
Son of Suckerfish (für Aufklappmenüs)
238
Spalten
als Floats 302–307
Breite, berechnen 322
dreispaltiges Layout 367–371
falsche 319–322
Formulare versehen mit 281
ganzer Höhe 319–322
mehrspaltiges Layout (Übung) 330–339
Positionierung und 369
Ressourcen 470
Stildefinitionen für 275
Tags für 276
span-Tag 8
Positionierung von Elementen und 363
speech (Medientyp) 393
Sperling.com 215
Spezifität 84–88
ändern 88
außer Kraft setzen 88
Konflikte lösen 86
Stylesheets und 87
von Pseudoelementen/Klassenselektoren 85
Spezifität außer Kraft setzen 88
Squidfingers 191
Standard-Textgröße 105, 301
Star-HTML-Hack (* html) 158
statische Positionierung 352
Stildefinitionen XV, 17, 25, 27, 34
Deklarationen 17, 19
Eigenschaften 19
eingebettet 27
ermitteln, welche verwendet werden 86
Formatierung 20
geschweifte Klammern({}) und 28
gruppieren 416
Hintergrundbilder und 216
hybrid 91
Inline 25
Kommentare hinzufügen 411
Konflikte 70, 94
Links 48, 221–231
nur für den Ausdruck 395–402
organisieren 412–421, 424
Platzierung 26
Richtlinien für die Benennung 412
Selektoren 17, 19, 35–65, 84, 86, 88
Übung 25, 34
vererbt 68, 80–82, 86, 92
Werte 19
Stildefinitionen gruppieren 416
stuffandnonsense.co.uk 414
style (border-Eigenschaft) 147
Style Master 86
Stylesheets XV, 20, 34
@import-Direktive und 417–419
extern 22, 23, 25, 31, 32, 34, 87, 182–183
extern im Vergleich mit intern 90
externe vs. interne 56
intern 21, 23, 28, 30, 31
in externe umwandeln 218–219
mehrere 417–419
organisieren 412–421, 424
Pfadangaben relativ zum Wurzelverzeichnis und 182–183
Pfade relativ zum Dokument und
182–183
Spezifität und 87
391–395
Vererbung und 68
391–395
hinzufügen 394
Medientypen 393
und Internet Explorer 394
Suchmaschinen 8, 308
Index
487
Tabellen
T
Tabellen 269–277
Ausrichtung 272
Bilder und 272
caption-side-Eigenschaft 461
empty-cells-Eigenschaft 461
gestreift (Spalten) 275
Rahmen 274, 460
Spalten über die gesamte Höhe und
319–322
Stildefinitionen 271–277
Stildefinitionen (Übung) 282–287
table-layout-Eigenschaft 461
Tabellenspalten, Stildefinitionen für 275
table-layout-Eigenschaft 461
Tags
Block 144–146
col und colgroup 276
div 8, 40, 141, 298–299, 424
fieldset 278
für Tabellen 269
HTML XVIII, XIX, 6–13, 161
img 179–180
legend 278
ohne schließendes Tag 381
Selektoren 36, 57
span 8, 40
Vererbung und 67–77, 80–82, 86, 92,
107, 109, 115
verschachtelt 42–44, 67–77, 156
XHTML 6
Tag-Selektoren (siehe Typselektoren)
tanfa.co.uk 238
tantek.com 423
Text 99–134
Absätze 114, 127
Abstände (Buchstaben und Wörter)
113
als Buttons 242
ausdrucken und 397
ausrichten 116
Ausschmückungen 111
background-color-Eigenschaft 138
border-Eigenschaft 138, 148
content-Eigenschaft und 462
Editoren XXII
488
CSS: Missing Manual
einrücken 117
erste Zeile/erster Buchstabe (Absätze)
118
Farbe 102, 439
fettgedruckt 110
font-Eigenschaften 110, 111, 116,
440–441
Formatierung (Übung) 125–134
Formulare und 279
Größe 104–109, 127, 397
hervorheben 167
Kapitälchen 111
komplett groß- oder kleingeschrieben
darstellen 111
Kontrast 109
kursiv darstellen 110
letter-spacing-Eigenschaft 113, 442
line-height-Eigenschaft 114, 442
Listen 119–124, 129, 131
margin-Eigenschaft 117, 123, 128,
138–146
mit HTML strukturieren 6
orphans-Eigenschaft 463
padding-Eigenschaft 123, 137–146
Schriften 99–103, 422
Standardschriftgröße 105, 301
text-align-Eigenschaft 116, 442
text-decoration-Eigenschaft 111, 442
text-indent-Eigenschaft 117, 443
text-transform-Eigenschaft 111, 443
Überschriften 127
Vererbung und 115
vertical-align-Eigenschaft 443
white-space-Eigenschaft 444
widows-Eigenschaft 464
word-spacing-Eigenschaft 113, 444
Text einrücken 117
Text hervorheben 167
text-align-Eigenschaft 116, 209, 442
Tabellen und 272
Textausschmückungen 111
text-decoration-Eigenschaft 111, 442
Links unterstreichen und 225
Texteditoren XXII
Textformatierung (siehe Text)
text-indent-Eigenschaft 117, 133, 443
Webbrowser
text-transform-Eigenschaft 111, 443
TextWrangler XXII
title-Attribut 54
Tooltips 54
top-Eigenschaft 458
tty (Teletype) Medientyp 393
tv (Medientyp) 393
U
Überschriften, Formatierung 127
Überstreichungen 111
Übungen
Außenabstände 164–178
Bilder (Fotogalerie) 192–206
CSS (westciv.com) 466
Float-basierte Layouts 330–339
Formulare (Stildefinitionen) 287–293
Hintergrundbilder 206–219
Hintergründe 164–178
interne Stylesheets, in externe umwandeln 218–219
Links, Stildefinitionen für 248–267
Listen 240
Navigation 467
negative Außenabstände 338–348
Positionierung von Seitenelementen
375–387
Rahmen 164–178
Selektoren 55–65
Stildefinitionen 25, 34
Tabellen (Stildefinitionen) 282–287
Textformatierung 125–134
Vererbung 70–77
Ultimate Menus (udm4.com) 238
umgebende Elemente 141, 160
ungeordnete Listen 53, 119, 231
Uniform Resource Locators (siehe URLs)
universaler Selektor (*) 47
Unterstreichung 111
Links 225, 422
URLs 439
@import-Direktive und 24
absolut 400
ausdrucken 400
background-image-Eigenschaft und
182
V
Validierung 11
CSS 22
HTML 11, 41
Vererbung 67–77, 80–82
direkt zugewiesene Stildefinitionen und
82
Grenzen 70
inherit-Schlüsselwort 438
line-height-Eigenschaft und 115
nächste Vorfahren und 81
Schriftgröße und 107, 109
Spezifität und 86
Stylesheets und 68
Übung 70–77, 92–95
Versalien 49
verschachtelte Listen 109
verschachtelte Tags siehe Tags, verschachtelt
versteckte Elemente anzeigen (visibilityEigenschaft) 361
Vertexwerks.com 215
vertical-align-Eigenschaft 272, 443
vertikale Navigationsleisten 232–235
Übung 255–259
vertikale Platzierung (in Eigenschaften zur
Positionierung) 230
visibility-Eigenschaft 361, 459
visible (Schlüsselwort für die Eigenschaft
overflow) 154
Vorab laden, Rollover-Bilder 244
W
w\idth, Schreibweise für Eigenschaft width
157
W3C 11, 465
CSS 2.1-Spezifikation 435
CSS-Validator 22
Dokumententypen 15
HTML validator 11
Web Developer Toolbar (Firefox) 420
Webbrowser
(siehe auch die spezifischen Browser)
Außen- und Innenabstände 123
Boxmodell und 137
Caches 26
cursor-Eigenschaft und 462
Darstellungsunterschiede ausräumen
420
Index
489
Webbrowser
Fehler siehe die spezifischen Fehler
Fehlerbehebungen (siehe Hacks)
overflow und 154
overflow: hidden-Deklaration und 162
Platzierung Fehlerbehebungen 203
Positionierung von Inline-Elementen
und 382
Quirks-Modus 14
Ressourcen 470
Rundung von Prozentwerten 323
Schriften und 101
Stildefinitionen für Formulare und
277–280
Webseiten betrachten 27
webgraphics.com 399
Webseiten
ausdrucken 391–409
Aussehen mit JavaScript ändern 419
Designs (vorgefertigt) 306
externe Stylesheets einbinden 23–25
Grafiken hinzufügen 179–219
Links auf bestimmte Teile anlegen 42
Neuladen erzwingen 26
Positionierungsstrategien 363–374
Struktur darstellen 43
validieren 11, 22
verlinken/navigieren 221–267
Vorschau 27
Webseiten-Editoren (siehe Texteditoren)
Websites siehe Webseiten
Werte 19, 435–439
für Farben 435
HTML XIX
Längen und Größen 437
URLs 439
WesternCiv (vollständige Einführung in
CSS) 466
white-space-Eigenschaft 444
widows-Eigenschaft 464
490
CSS: Missing Manual
width-Eigenschaft 151, 234, 459
als Float definierte Block-Elemente 160
max-/min-width-Eigenschaften 310
Spalten und 322
Tabellen und 276
tatsächliche Breite berechnen 152
Wiederholung (von Hintergrundbildern)
184
word-spacing-Eigenschaft 113, 444
World Wide Web Consortium (see W3C)
Wortabstände 113
X
x-Achse, Bildwiederholung entlang 185
XHTML XIX–XXI
Doctype-Deklarationen 13–15
Dokumenttypen XXI
externe Stylesheets einbinden 23
für Tabellen 269
Tags (siehe Tags)
Transitional (Übergangsversion) 14
XML XIX
Dokumenttyp-Definition (DTD)Dateien 13
xs4all.com (CSSHOVER-Hack) 51
XyleScope 86
Y
y-Achse, Bildwiederholung entlang der 185
YADM (Yet Another Dynamic Menu) 238
Z
Zeilenabstand 114
z-index-Eigenschaft 360, 459
zoom-Eigenschaft 319, 365
Zugänglichkeit, Textgrößen und 106
Zustände, Link 222–223

CSS Missing Manual

Transcription

Similar documents

Leseprobe 2

Die Verwendung der Duration bei der Bewertung und

Geers Berufliche Informatik Office 2013

Ausgabeformatierung Ausgabeformatierung mit HTML, CSS, XSL:FO

gulli: 24C3: Was tun? v2.0

Geers Berufliche Informatik Informationsverarbeitung

- Otaku