Inhaltsverzeichnis
Vorwort XI
Allgemeines 1
1.1 CSS und HTML zusammen verwenden 2
1.2 Verschiedene Selektoren für die Zuweisung von Stilen 5
1.3 Class- und id-Attribute richtig einsetzen 19
1.4 CSS-Eigenschaften 22
1.5 Das Boxmodell 23
1.6 Dokumententypen und ihre Auswirkungen auf die Browserdarstellung 31
1.7 Eine Webseite mit Stildefinitionen versehen 34
1.8 Stylesheets für verschiedene Ausgabemedien 38
1.9 Kommentare im CSS-Code 43
1.10 Den Inhalt eines Stylesheets richtig strukturieren 44
1.11 Stylesheet-Dateien organisieren 45
1.12 Kurzschrift-Eigenschaften 47
1.13 Alternative Stylesheets verwenden 49
1.14 Bilder von Text umfließen lassen 50
1.15 Absolute Positionierung 52
1.16 Relative Positionierung 55
1.17 CSS in Adobe Dreamweaver verwenden 57
1.18 CSS mit Microsoft Expression Web Designer erstellen 60
Typografie für das Web 64
2.1 Schriftarten festlegen 65
2.2 Schriftgrößen und -maße festlegen 68
2.3 Schriftgrößen besser kontrollieren 70
2.4 Schriftgrößen selbst festlegen 75
2.5 Text zentrieren 75
2.6 Text im Blocksatz darstellen 76
2.7 Leerraum zwischen Überschriften und Absätzen entfernen 77
2.8 Versalien zu Beginn eines Absatzes 78
2.9 Größere und zentrierte Versalien 79
2.10 Bilder als Versalien 81
2.11 Überschriften mit Stil 84
2.12 Überschriften mit Rahmen 85
2.13 Überschriftentext mit einem Bild versehen 87
2.14 Gestaltung einer 'Pull-Quote' mit HTML-Text 89
2.15 'Pull-Quotes' mit Rahmen 91
2.16 'Pull-Quotes' mit Bildern 93
2.17 Die erste Zeile eines Absatzes einrücken 95
2.18 Ganze Absätze einrücken 97
2.19 Hängende Einzüge 100
2.20 Die erste Zeile eines Absatzes mit Stildefinitionen versehen 103
2.21 Die erste Zeile eines Absatzes mit einem Bild versehen 105
2.22 Textteile hervorheben 106
2.23 Zeilenabstände ändern 108
2.24 HTML-Text mit Grafiken überlagern 110
2.25 Text mit Schatten hinterlegen 111
2.26 Den Abstand zwischen Buchstaben und Wörtern anpassen 112
Bilder 116
3.1 Bilder mit Rahmen versehen 116
3.2 Standardmäßig für Bilder verwendete Rahmen entfernen 118
3.3 Nicht gekachelte Hintergrundbilder 120
3.4 Hintergrundbilder wiederholen 121
3.5 Hintergrundbilder positionieren 122
3.6 Mehrere Hintergrundbilder für einen CSS-Selektor definieren 125
3.7 Das Hintergrundbild verankern 127
3.8 Durchscheinende Hintergründe für HTML-Text 130
3.9 HTML-Text durch ein Bild ersetzen 132
3.10 HTML-Text mit Flash ersetzen 136
3.11 Mehrere PNGs mit transparentem Alphakanal verwenden 139
3.12 Panoramabilder 141
3.13 Verschiedene Bildformate miteinander kombinieren 143
3.14 Abgerundete Ecken bei Spalten mit fester Breite 149
3.15 Abgerundete Ecken (Sliding Doors-Technik) 152
3.16 Abgerundete Ecken (Mountaintop-Technik) 157
3.17 Abgerundete Ecken mit JavaScript 161
3.18 Bilder mit einem Schatten versehen 165
3.19 Bilder mit weichen Schattenwürfen versehen 168
3.20 Skalierbare Bilder 172
3.21 Sprechblasen 175
3.22 Den Diebstahl Ihrer Bilder verhindern 179
3.23 Bilder automatisch mit Reflexionen versehen 180
3.24 Sprites zum Speichern von Icons verwenden 184
Seitenelemente 188
4.1 Seitenränder entfernen 188
4.2 Farbige Scrollbalken 191
4.3 Elemente auf einer Webseite zentrieren 193
4.4 Seitenränder 199
4.5 Eine horizontale Trennlinie anpassen 201
4.6 Eine Lightbox verwenden 205
Listen 210
5.1 Die Formatierung einer Liste ändern 211
5.2 Browserübergreifende Einrückungen 213
5.3 Listeneinträge voneinander trennen 214
5.4 Eigene Aufzählungszeichen für Listeneinträge 215
5.5 Eigene Grafiken als Marker für Listeneinträge verwenden 218
5.6 Große Grafiken als Aufzählungszeichen verwenden 219
5.7 Die Darstellung einer Liste durch Grafiken verstärken 222
5.8 Listeneinträge als Inline-Elemente darstellen 226
5.9 Hängende Einzüge für Listen definieren 228
5.10 Das Aufzählungszeichen innerhalb des Eintrags darstellen 229
Links und Navigation 231
6.1 Die typischen Link-Unterstreichungen entfernen (und andere Dekorationen hinzufügen) 231
6.2 Linkfarben anpassen 234
6.3 Unterschiedliche Linkfarben für bestimmte Teile einer Seite 235
6.4 Icons am Ende von Links einfügen 236
6.5 Alternative Cursorsymbole 237
6.6 Rollover-Effekte ohne JavaScript 239
6.7 Textbasierte Navigationsmenüs und Rollover-Effekte kombinieren 241
6.8 Horizontale Navigationsmenüs 245
6.9 Navigationsmenüs mit Tastatursteuerung 250
6.10 Hierarchische Navigation 252
6.11 Grafische Rollover-Effekte 254
6.12 Aufklappbare Navigationsmenüs 259
6.13 Kontextmenüs 262
6.14 Tool Tips 264
6.15 Dynamische visuelle Menüs 265
6.16 Dynamische Stildefinitionen 269
Formulare 274
7.1 Den Leerraum um ein Formular herum anpassen 275
7.2 Stildefinitionen für Eingabeelemente 276
7.3 Verschiedene Stile für unterschiedliche Eingabeelemente des gleichen Formulars 279
7.4 Stildefinitionen für textarea-Elemente 280
7.5 Stildefinitionen für Aufklappmenüs und Auswahllisten 281
7.6 Textfeld für Sucheinträge im Macintosh-Stil 283
7.7 Stildefinitionen für Buttons 286
7.8 Grafikbasierte Submit-Buttons 289
7.9 Buttons, die nur einmal benutzt werden können 290
7.10 Submit-Buttons, die wie einfacher HTML-Text dargestellt werden 291
7.11 Einfache HTML-Textlinks als Submit-Buttons verwenden 293
7.12 Ein Webformular ohne Tabellen 293
7.13 Zweispaltige Formulare ohne Tabellen 295
7.14 Eingabefelder hervorheben 299
7.15 Benötigte Formularfelder hervorheben 300
7.16 Tastaturkürzel in Webformularen hervorheben 302
7.17 Zusammengehörende Formularelemente gruppieren 303
7.18 Formulardaten wie bei einem Tabellenkalkulationsdokument eingeben 306
7.19 Designbeispiel: ein Login-Formular 310
7.20 Designbeispiel: ein Registrierungsformular 314
Tabellen 325
8.1 Den Zellzwischenraum einstellen 325
8.2 Rahmen und Innenabstände für Zellen einstellen 326
8.3 Stildefinitionen für Tabellenbeschriftungen 329
8.4 Stildefinitionen für Tabelleninhalte 330
8.5 Stildefinitionen für die Tabellenüberschriften 332
8.6 Leerraum zwischen Bildern und dem unteren Zellenrand entfernen 334
8.7 Zwischenräume zwischen den Tabellenzellen entfernen 336
8.8 Abwechselnde Hintergrundfarben für Tabellenspalten 337
8.9 'Aktive' Tabellenzeilen hervorheben 340
8.10 Designbeispiel: ein eleganter Kalender 341
Seitenlayouts 351
9.1 Einspaltige Layouts 351
9.2 Zweispaltige Layouts 353
9.3 Zweispaltige Layouts mit festen Breiten 359
9.4 Flexible mehrspaltige Layouts mit Floats 364
9.5 Mehrspaltige Layouts mit festen Breiten mit Hilfe von Floats 367
9.6 Mehrspaltige Layouts mit flexiblen Breiten mit Hilfe von Positionierung 370
9.7 Mehrspaltige Layouts mit festen Breiten mit Hilfe von Positionierung 374
9.8 Spalten mit Floats in beliebiger Reihenfolge darstellen 376
9.9 Asymmetrische Layouts 396
Druck 401
10.1 Eine druckfreundliche Seite erstellen 402
10.2 Ein Webformular für den Ausdruck aufbereiten 404
10.3 Nach einem Link den URI anzeigen 408
10.4 Sonderzeichen vor Links einfügen 410
10.5 Designbeispiel: Eine druckfreundliche Seite mit CSS 411
Hacks, Workarounds und Fehlersuche 420
11.1 Besondere Werte für Internet Explorer 5.x für Windows 421
11.2 Das Flackern beim Laden von Webseiten in Internet Explorer 5.x für Windows verhindern 425
11.3 Hintergrundbilder in Internet Explorer 6 für Windows verankern 426
11.4 Conditional Comments 427
11.5 CSS-Regeln vor Internet Explorer 5 für Macintosh verbergen 429
11.6 Ein intelligentes System zur Verwaltung von CSS-Hacks 430
11.7 Diagnose von CSS-Fehlern und Browserproblemen 432
11.8 Webdesigns mit nur einem Computer für mehrere Plattformen testen 433
11.9 Mehrere Versionen von Internet Explorer für Windows auf einem Computer installieren 435
11.10 Websites mit einem textbasierten Browser testen 436
Design mit CSS 438
12.1 Extrem stark vergrößerter Text 439
12.2 Unerwartete Unstimmigkeiten erzeugen 440
12.3 Scheinbar unpassende Dinge kombinieren, um Kontraste zu erzeugen 443
12.4 Kontraste verwenden, um den Blick zu führen 445
12.5 Auf genügend hohen Farbkontrast überprüfen 448
12.6 Zitate hervorheben 450
Ressourcen 453
CSS 2.1-Eigenschaften und proprietäre Erweiterungen 461
CSS 2.1-Selektoren, Pseudoklassen und Pseudoelemente 475
Stildefinitionen für Formularelemente 478
Index 505
Wenn du eine Bewertung für dieses Produkt schreibst, hilfst du allen Kund:innen, die noch überlegen, ob sie das Produkt kaufen wollen. Vielen Dank, dass du mitmachst!