CSS Kochbuch

Christopher Schmitt ist der Präsident/Vorstandsvorsitzende (CEO) von Heatvision.com, Inc., einem Unternehmen für neue Medien und Design mit Sitz in Tallahassee, Florida. Christopher ist Webdesigner, der seit 1993 mit dem Web arbeitet und Mitte der 90er Jahre sowohl für David Siegel als auch für Lynda Weinman als Praktikant tätig war, während er als Student an der Florida State University an seinem Abschluss im Bereich der Kunstwissenschaften mit dem Schwerpunkt grafische Gestaltung feilte.

Inhaltsverzeichnis



VorwortXI

Allgemeines1

1.1CSS und HTML zusammen verwenden2
1.2Verschiedene Selektoren für die Zuweisung von Stilen 5
1.3Class- und id-Attribute richtig einsetzen 19
1.4CSS-Eigenschaften 22
1.5Das Boxmodell23
1.6Dokumententypen und ihre Auswirkungen auf die Browserdarstellung31
1.7Eine Webseite mit Stildefinitionen versehen 34
1.8Stylesheets für verschiedene Ausgabemedien38
1.9Kommentare im CSS-Code43
1.10Den Inhalt eines Stylesheets richtig strukturieren44
1.11Stylesheet-Dateien organisieren45
1.12Kurzschrift-Eigenschaften47
1.13Alternative Stylesheets verwenden49
1.14Bilder von Text umfließen lassen50
1.15Absolute Positionierung52
1.16Relative Positionierung55
1.17CSS in Adobe Dreamweaver verwenden57
1.18CSS mit Microsoft Expression Web Designer erstellen60

Typografie für das Web64

2.1Schriftarten festlegen65
2.2Schriftgrößen und -maße festlegen68
2.3Schriftgrößen besser kontrollieren70
2.4Schriftgrößen selbst festlegen75
2.5Text zentrieren75
2.6Text im Blocksatz darstellen76
2.7Leerraum zwischen Überschriften und Absätzen entfernen77
2.8Versalien zu Beginn eines Absatzes78
2.9Größere und zentrierte Versalien79
2.10Bilder als Versalien81
2.11Überschriften mit Stil84
2.12Überschriften mit Rahmen85
2.13Überschriftentext mit einem Bild versehen87
2.14Gestaltung einer »Pull-Quote« mit HTML-Text 89
2.15»Pull-Quotes« mit Rahmen91
2.16»Pull-Quotes« mit Bildern93
2.17Die erste Zeile eines Absatzes einrücken95
2.18Ganze Absätze einrücken97
2.19Hängende Einzüge 100
2.20Die erste Zeile eines Absatzes mit Stildefinitionen versehen103
2.21Die erste Zeile eines Absatzes mit einem Bild versehen 105
2.22Textteile hervorheben106
2.23Zeilenabstände ändern108
2.24HTML-Text mit Grafiken überlagern110
2.25Text mit Schatten hinterlegen111
2.26Den Abstand zwischen Buchstaben und Wörtern anpassen112

Bilder116

3.1Bilder mit Rahmen versehen116
3.2Standardmäßig für Bilder verwendete Rahmen entfernen118
3.3Nicht gekachelte Hintergrundbilder120
3.4Hintergrundbilder wiederholen121
3.5Hintergrundbilder positionieren122
3.6Mehrere Hintergrundbilder für einen CSS-Selektor definieren125
3.7Das Hintergrundbild verankern127
3.8Durchscheinende Hintergründe für HTML-Text130
3.9HTML-Text durch ein Bild ersetzen132
3.10HTML-Text mit Flash ersetzen136
3.11Mehrere PNGs mit transparentem Alphakanal verwenden139
3.12Panoramabilder141
3.13Verschiedene Bildformate miteinander kombinieren143
3.14Abgerundete Ecken bei Spalten mit fester Breite149
3.15Abgerundete Ecken (Sliding Doors-Technik)152
3.16Abgerundete Ecken (Mountaintop-Technik)157
3.17Abgerundete Ecken mit JavaScript161
3.18Bilder mit einem Schatten versehen165
3.19Bilder mit weichen Schattenwürfen versehen168
3.20Skalierbare Bilder172
3.21Sprechblasen175
3.22Den Diebstahl Ihrer Bilder verhindern179
3.23Bilder automatisch mit Reflexionen versehen180
3.24Sprites zum Speichern von Icons verwenden184

Seitenelemente188

4.1Seitenränder entfernen188
4.2Farbige Scrollbalken191
4.3Elemente auf einer Webseite zentrieren193
4.4Seitenränder199
4.5Eine horizontale Trennlinie anpassen201
4.6Eine Lightbox verwenden205

Listen210

5.1Die Formatierung einer Liste ändern211
5.2Browserübergreifende Einrückungen213
5.3Listeneinträge voneinander trennen214
5.4Eigene Aufzählungszeichen für Listeneinträge215
5.5Eigene Grafiken als Marker für Listeneinträge verwenden218
5.6Große Grafiken als Aufzählungszeichen verwenden219
5.7Die Darstellung einer Liste durch Grafiken verstärken222
5.8Listeneinträge als Inline-Elemente darstellen226
5.9Hängende Einzüge für Listen definieren228
5.10Das Aufzählungszeichen innerhalb des Eintrags darstellen229

Links und Navigation231

6.1Die typischen Link-Unterstreichungen entfernen (und andere Dekorationen hinzufügen)231
6.2Linkfarben anpassen234
6.3Unterschiedliche Linkfarben für bestimmte Teile einer Seite235
6.4Icons am Ende von Links einfügen236
6.5Alternative Cursorsymbole237
6.6Rollover-Effekte ohne JavaScript239
6.7Textbasierte Navigationsmenüs und Rollover-Effekte kombinieren241
6.8Horizontale Navigationsmenüs245
6.9Navigationsmenüs mit Tastatursteuerung250
6.10Hierarchische Navigation252
6.11Grafische Rollover-Effekte 254
6.12Aufklappbare Navigationsmenüs259
6.13Kontextmenüs262
6.14Tool Tips264
6.15Dynamische visuelle Menüs265
6.16Dynamische Stildefinitionen269

Formulare 274

7.1Den Leerraum um ein Formular herum anpassen275
7.2Stildefinitionen für Eingabeelemente276
7.3Verschiedene Stile für unterschiedliche Eingabeelemente des gleichen Formulars279
7.4Stildefinitionen für textarea-Elemente 280
7.5Stildefinitionen für Aufklappmenüs und Auswahllisten281
7.6Textfeld für Sucheinträge im Macintosh-Stil 283
7.7Stildefinitionen für Buttons286
7.8Grafikbasierte Submit-Buttons289
7.9Buttons, die nur einmal benutzt werden können290
7.10Submit-Buttons, die wie einfacher HTML-Text dargestellt werden291
7.11Einfache HTML-Textlinks als Submit-Buttons verwenden293
7.12Ein Webformular ohne Tabellen293
7.13Zweispaltige Formulare ohne Tabellen295
7.14Eingabefelder hervorheben299
7.15Benötigte Formularfelder hervorheben300
7.16Tastaturkürzel in Webformularen hervorheben302
7.17Zusammengehörende Formularelemente gruppieren303
7.18Formulardaten wie bei einem Tabellenkalkulationsdokument eingeben 306
7.19Designbeispiel: ein Login-Formular310
7.20Designbeispiel: ein Registrierungsformular314

Tabellen325

8.1Den Zellzwischenraum einstellen325
8.2Rahmen und Innenabstände für Zellen einstellen326
8.3Stildefinitionen für Tabellenbeschriftungen329
8.4Stildefinitionen für Tabelleninhalte 330

8.5Stildefinitionen für die Tabellenüberschriften332
8.6Leerraum zwischen Bildern und dem unteren Zellenrand entfernen334
8.7Zwischenräume zwischen den Tabellenzellen entfernen336
8.8Abwechselnde Hintergrundfarben für Tabellenspalten337
8.9»Aktive« Tabellenzeilen hervorheben340
8.10Designbeispiel: ein eleganter Kalender341

Seitenlayouts351

9.1Einspaltige Layouts351
9.2Zweispaltige Layouts353
9.3Zweispaltige Layouts mit festen Breiten359
9.4Flexible mehrspaltige Layouts mit Floats364
9.5Mehrspaltige Layouts mit festen Breiten mit Hilfe von Floats367
9.6Mehrspaltige Layouts mit flexiblen Breiten mit Hilfe von Positionierung370
9.7Mehrspaltige Layouts mit festen Breiten mit Hilfe von Positionierung374
9.8Spalten mit Floats in beliebiger Reihenfolge darstellen 376
9.9Asymmetrische Layouts396

Druck401

10.1Eine druckfreundliche Seite erstellen402
10.2Ein Webformular für den Ausdruck aufbereiten404
10.3Nach einem Link den URI anzeigen408
10.4Sonderzeichen vor Links einfügen 410
10.5Designbeispiel: Eine druckfreundliche Seite mit CSS411

Hacks, Workarounds und Fehlersuche 420

11.1Besondere Werte für Internet Explorer 5.x für Windows421
11.2Das Flackern beim Laden von Webseiten in Internet Explorer 5.x für Windows verhindern 425
11.3Hintergrundbilder in Internet Explorer 6 für Windows verankern 426
11.4Conditional Comments427
11.5CSS-Regeln vor Internet Explorer 5 für Macintosh verbergen429
11.6Ein intelligentes System zur Verwaltung von CSS-Hacks430
11.7Diagnose von CSS-Fehlern und Browserproblemen432
11.8Webdesigns mit nur einem Computer für mehrere Plattformen testen433
11.9Mehrere Versionen von Internet Explorer für Windows auf einem Computer installieren435
11.10Websites mit einem textbasierten Browser testen 436



Design mit CSS438

12.1Extrem stark vergrößerter Text439
12.2Unerwartete Unstimmigkeiten erzeugen440
12.3Scheinbar unpassende Dinge kombinieren, um Kontraste zu erzeugen443
12.4Kontraste verwenden, um den Blick zu führen445
12.5Auf genügend hohen Farbkontrast überprüfen448
12.6Zitate hervorheben450

Ressourcen453

CSS 2.1-Eigenschaften und proprietäre Erweiterungen461

CSS 2.1-Selektoren, Pseudoklassen und Pseudoelemente475

Stildefinitionen für Formularelemente478

Index505