Inhaltsverzeichnis
Hier finden Sie das Inhaltsverzeichnis der fünften (aktuellen) Auflage von CSS-Praxis.
- ... Geleitwort der Fachgutachterin ... 19
- ... Vorwort ... 21
- 1 ... Was sind Cascading Stylesheets? ... 27
- 1.1 ... Von HTML zu CSS ... 27
- 1.1.1 ... Nachteile des Tabellenlayouts ... 31
- 1.2 ... Was sind Cascading Stylesheets? ... 33
- 1.3 ... Wie sehen Cascading Stylesheets aus? ... 34
- 1.4 ... »Hallo Welt!« auf CSS ... 37
- 2 ... Warum CSS? ... 41
- 2.1 ... Vorteile und Grenzen des CSS-Einsatzes ... 42
- 2.1.1 ... Einschränkungen ... 43
- 3 ... Geschichte und Zukunft von CSS ... 45
- 3.1 ... CSS 1 ... 45
- 3.2 ... CSS 2 ... 45
- 3.3 ... CSS 2.1 ... 46
- 3.4 ... CSS 3 ... 46
- 3.5 ... XHTML, XML und CSS ... 48
- 3.5.1 ... Von HTML zu X(H)TML ... 48
- 3.5.2 ... XML und CSS ... 53
- 4 ... Selektoren ... 59
- 4.1 ... Die verschiedenen Selektoren ... 59
- 4.1.1 ... Einfache Element-Selektoren ... 59
- 4.1.2 ... Class- und ID-Selektoren ... 63
- 4.1.3 ... Kombinierte Selektoren ... 65
- 4.1.4 ... Kind-Selektoren (CSS 2) ... 68
- 4.1.5 ... Folgeelement-Selektoren (CSS 2) ... 71
- 4.1.6 ... Attribut-Selektoren (CSS 2 und CSS 3) ... 71
- 4.1.7 ... Tabellen-Selektoren ... 73
- 4.1.8 ... Pseudo-Klassen und Pseudo-Elemente ... 73
- 4.1.9 ... Universal-Selektor ... 74
- 4.2 ... Vererbung ... 76
- 4.3 ... Rangfolge und Kaskadierung ... 78
- 4.3.1 ... Die Important-Anweisung ... 84
- 5 ... Kastenmodell (Box-Modell), Element-Typen und Layoutmodelle ... 87
- 5.1 ... Das Kastenmodell ... 87
- 5.1.1 ... Kastenmodell – »The Microsoft Way« ... 88
- 5.1.2 ... Zusammenfallende Außenabstände (collapsing margins) ... 88
- 5.2 ... Element-Typen in CSS ... 90
- 5.3 ... Layout- und Positionierungsmodelle in CSS ... 92
- 6 ... Einbinden von Stylesheets in HTML-Dateien ... 93
- 6.1 ... Stilanweisungen im HTML-Tag ... 93
- 6.2 ... Stilanweisungen im Dokumentenkopf ... 94
- 6.3 ... Verlinkte Stylesheets ... 95
- 6.3.1 ... Alternative Stylesheets ... 96
- 6.4 ... Importierte Stylesheets ... 97
- 6.5 ... Medienspezifische Stylesheets (CSS 2) ... 98
- 6.5.1 ... Medienspezifische Stylesheets mit CSS 3 ... 101
- 7 ... Benennungen und Werte für Stylesheets ... 103
- 7.1 ... Namen für Stylesheets, Klassen und IDs ... 103
- 7.2 ... Längen- und Größenangaben ... 103
- 7.2.1 ... Absolute Einheiten ... 104
- 7.2.2 ... Relative Einheiten ... 104
- 7.3 ... Prozentwerte ... 105
- 7.4 ... Farben ... 105
- 7.4.1 ... Hexadezimal (#RRGGBB oder #RGB) ... 105
- 7.4.2 ... Prozentwerte rgb(rrr.rr%, ggg.gg%, bbb.bb%) ... 106
- 7.4.3 ... Dezimalwerte rgb(rrr, ggg, bbb) ... 106
- 7.4.4 ... Dezimalwerte mit Alpha-Kanal (CSS 3) ... 106
- 7.4.5 ... Schlüsselwörter ... 107
- 7.5 ... URLs (url) ... 107
- 7.6 ... Schlüsselwörter ... 107
- 7.7 ... CSS-Kommentare ... 108
- 8 ... CSS und die Browser ... 111
- 8.1 ... Allgemeines zur Browserkompatibilität ... 111
- 8.1.1 ... Der Box Acid-Test ... 111
- 8.1.2 ... Acid2-Test ... 112
- 8.2 ... Ältere Browser ... 113
- 8.2.1 ... Netscape 4 ... 114
- 8.3 ... Mozilla, Firefox und Netscape Navigator ... 114
- 8.3.1 ... Firefox 2 ... 115
- 8.3.2 ... Firefox 3 ... 116
- 8.3.3 ... Firefox Mobile ... 118
- 8.3.4 ... Netscape Navigator und andere Gecko-Browser ... 118
- 8.4 ... Microsoft Internet Explorer ... 119
- 8.4.1 ... Internet Explorer 3 und 4 ... 119
- 8.4.2 ... Internet Explorer 5.x ... 120
- 8.4.3 ... Internet Explorer 6 ... 120
- 8.4.4 ... Internet Explorer 7 ... 121
- 8.4.5 ... Internet Explorer 8 (Beta-Version) ... 122
- 8.4.6 ... Internet Explorer Mobile ... 125
- 8.4.7 ... Verschiedene Versionen des Internet Explorers parallel betreiben ... 125
- 8.4.8 ... Bugs des Internet Explorers ... 127
- 8.4.9 ... Neue Bugs des Internet Explorers 7 ... 131
- 8.5 ... Opera ... 132
- 8.5.1 ... Opera 7 und Opera 8 ... 132
- 8.5.2 ... Opera 9 ... 133
- 8.5.3 ... Opera Mini und Opera Mobile ... 134
- 8.6 ... Safari und Konqueror (Webkit/KHTML) ... 134
- 8.7 ... Weitere Browser ... 135
- 8.7.1 ... Lynx ... 136
- 8.7.2 ... Screenreader ... 137
- 8.7.3 ... Mobile Geräte ... 139
- 8.8 ... Browseranteile ... 139
- 9 ... Das mobile Web: Stylesheets, Mobiltelefone und PDAs ... 143
- 9.1 ... Strategien für das mobile Web: Mobilisieren statt miniaturisieren ... 143
- 9.2 ... Mobile Standards ... 144
- 9.3 ... Betriebssysteme für Mobilgeräte und Organizer ... 145
- 9.4 ... Stylesheets für mobile Browser ausliefern ... 146
- 9.5 ... CSS-Design für den mobilen Einsatz ... 147
- 9.5.1 ... Safari auf dem iPhone ... 149
- 9.5.2 ... Opera Mini und Opera Mobile ... 154
- 9.5.3 ... Palm Blazer ... 156
- 9.5.4 ... Weitere mobile Browser ... 157
- 10 ... E-Mails mit CSS gestalten ... 159
- 10.1 ... Grundsätzliche Probleme ... 159
- 10.2 ... Echte E-Mail-Clients ... 162
- 10.2.1 ... Microsoft Outlook ... 162
- 10.2.2 ... Mozilla Thunderbird ... 162
- 10.2.3 ... Apple Mail ... 163
- 10.3 ... Webmail-Dienste ... 164
- 10.3.1 ... Google Mail ... 164
- 10.3.2 ... Yahoo! Mail und Windows Live Mail ... 166
- 10.3.3 ... GMX ... 166
- 10.3.4 ... Web.de ... 167
- 10.4 ... Strategien für E-Mail-Newsletter ... 168
- 10.4.1 ... Techniken für mittels CSS gestaltete und alle anderen E-Mails ... 168
- 10.4.2 ... CSS-Eigenschaften im Einzelnen ... 172
- 11 ... Browserweichen und »Hacks« ... 175
- 11.1 ... Strategien für die Anwendung von Browserweichen: »To Hack or not to Hack« ... 175
- 11.2 ... Doctypes und Doctype-Switching ... 178
- 11.2.1 ... Doctype-Switching ... 179
- 11.3 ... Browserweichen und Filter ... 183
- 11.3.1 ... @import-Weiche ... 183
- 11.3.2 ... Sternchen-Filter ... 184
- 11.3.3 ... Box-Modell-Hacks ... 185
- 11.3.4 ... Hochpass-Filter ... 188
- 11.3.5 ... Selektoren-Tricks ... 188
- 11.3.6 ... Opera Catcher ... 189
- 11.3.7 ... IE/Mac-Filter ... 189
- 11.3.8 ... Important-Filter ... 190
- 11.3.9 ... Conditional Comments ... 190
- 11.3.10 ... Browser-Sniffer ... 192
- 11.3.11 ... Filter selber entwickeln ... 192
- 11.3.12 ... CSS-Bugs per JavaScript beheben ... 194
- 12 ... Strategien für den CSS-Designer ... 197
- 12.1 ... Webstandards beachten ... 197
- 12.1.1 ... Was ist für eine standardkonforme Webseite erforderlich? ... 198
- 12.1.2 ... Der W3C-Validator ... 201
- 12.2 ... Bessere Entwurfsverfahren mit CSS (Rapid Prototyping) ... 202
- 12.2.1 ... Festlegen der Seitenstruktur in semantischem HTML ... 203
- 12.2.2 ... Bereiche ausrichten in Ihrem bevorzugten Browser ... 204
- 12.2.3 ... Einfügen der Inhalte ... 205
- 12.2.4 ... Dynamische Bereiche umsetzen ... 205
- 12.2.5 ... Benutzertests ... 206
- 12.2.6 ... Finetuning, Browsertests und technische Optimierungen ... 207
- 12.3 ... Stylesheets organisieren ... 208
- 12.3.1 ... Ordnung durch Stylesheet-Module ... 209
- 12.3.2 ... Alles auf null: Reset-Stylesheets ... 211
- 12.3.3 ... Kurzschreibweise ... 214
- 12.3.4 ... Filter-Management ... 216
- 12.3.5 ... Kommentieren von Stylesheets ... 216
- 12.3.6 ... Sprung-Links, Inhaltsverzeichnis und Farbdefinitionen ... 219
- 12.4 ... Fehlersuche in CSS-Dateien ... 221
- 13 ... Layout mit CSS ... 225
- 13.1 ... Die Positionierungsart (»position«) ... 226
- 13.1.1 ... position: static ... 226
- 13.1.2 ... position: relative ... 228
- 13.1.3 ... position: absolute ... 231
- 13.1.4 ... position: fixed ... 233
- 13.2 ... float und clear ... 237
- 13.2.1 ... float mit clear aufheben ... 239
- 13.2.2 ... clear ohne zusätzliches Markup ... 242
- 13.3 ... Grundlegende Layoutvarianten mit CSS ... 245
- 13.3.1 ... fixed, flexibel, elastisch ... 245
- 13.3.2 ... Zweispalter ... 247
- 13.3.3 ... Dreispalter ... 252
- 13.3.4 ... Dreispalter mit flexibler Spaltenaufteilung und freier Wahl der Breiteneinheiten ... 258
- 13.4 ... CSS-Layoutricks ... 270
- 13.4.1 ... Das Problem der (nicht) gleich langen Spalten ... 270
- 13.4.2 ... Minimale und maximale Breiten für flexible Layouts ... 277
- 13.4.3 ... Feststehende Bereiche und CSS-Frames ... 280
- 13.4.4 ... Zentrieren ... 291
- 13.5 ... Vorlagen und Frameworks ... 300
- 13.5.1 ... Arbeit mit Vorlagen ... 300
- 13.6 ... Arbeiten mit CSS-Frameworks ... 303
- 13.6.1 ... Kritik an CSS-Frameworks ... 303
- 13.6.2 ... YAML ... 304
- 13.6.3 ... Yahoo! Grids ... 308
- 13.6.4 ... Weitere CSS-Frameworks ... 315
- 14 ... Styling mit CSS ... 325
- 14.1 ... Arbeiten mit Text ... 325
- 14.1.1 ... Schriftgrößen ... 325
- 14.1.2 ... Typografie mit CSS ... 331
- 14.1.3 ... Initialien und Einrückungen ... 338
- 14.1.4 ... Korrekte Auszeichnung von Zitaten ... 345
- 14.2 ... CSS-Menüs mit Listen ... 350
- 14.2.1 ... Vertikale Menüs ... 351
- 14.2.2 ... CSS-Flyout-Menüs ... 361
- 14.2.3 ... Horizontale Menüs ... 365
- 14.3 ... Schönere Formulare ... 371
- 14.3.1 ... Formulare mit Hintergrund ... 381
- 14.3.2 ... Inline-Fehlermeldungen ... 381
- 14.4 ... Arbeiten mit Transparenz ... 383
- 14.4.1 ... Deckkraft von Ebenen steuern ... 383
- 14.4.2 ... PNG: Grafiken mit weichem Verlauf (Alpha-Kanal) ... 386
- 14.5 ... Tabellen und CSS ... 388
- 14.6 ... Bildergalerie ... 394
- 14.7 ... Druckversion per CSS ... 405
- 14.8 ... Stylesheet-Wechsler ... 408
- 14.8.1 ... Simpler Styleswitcher mit HTML-Mitteln ... 411
- 14.8.2 ... Styleswitcher mit JavaScript ... 412
- 14.8.3 ... Styleswitcher mit PHP ... 414
- 14.8.4 ... Styleswitcher mit AJAX ... 416
- 14.8.5 ... Browserweiche für Stylesheets ... 416
- 15 ... Suchmaschinenoptimierung mit CSS ... 419
- 15.1 ... Schlanke Dokumente durch CSS ... 419
- 15.2 ... Semantik für Suchmaschinen ... 421
- 16 ... Zugängliche und benutzbare Websites mit CSS ... 425
- 16.1 ... Grundsätze für zugängliche Websites ... 426
- 16.1.1 ... Inhalt und Präsentation trennen ... 427
- 16.1.2 ... Logische Strukturen schaffen ... 427
- 16.1.3 ... Kennzeichnung der natürlichen Sprache und von Sprachwechseln ... 427
- 16.1.4 ... Nicht für bestimmte Geräte arbeiten ... 428
- 16.1.5 ... Abwärtskompatible Seiten erstellen ... 428
- 16.1.6 ... Alternativen bereitstellen ... 429
- 16.1.7 ... Standards beachten ... 429
- 16.2 ... Einzelne Tipps für barrierefreie Funktionen ... 429
- 16.2.1 ... Barrierefreie Sprung-Links ... 430
- 16.2.2 ... Link-Auszeichnungen – Nützlich und barrierefrei ... 432
- 16.3 ... Testen ... 433
- 16.3.1 ... Automatische Testprogramme ... 434
- 16.3.2 ... Testen mit einem Screenreader ... 434
- 16.3.3 ... Testen mit Betroffenen ... 434
- 17 ... AJAX, JavaScript und CSS ... 437
- 18 ... CSS deconstructed ... 445
- 18.1 ... Aktion Mensch: »Einfach für Alle« ... 445
- 18.1.1 ... »EfA« 2001 ... 447
- 18.1.2 ... »EfA« 2003 ... 448
- 18.1.3 ... »EfA« 2004 ... 453
- 18.1.4 ... Der Code von »Einfach für Alle« ... 453
- 18.1.5 ... »EfA« 2006 ... 477
- 18.2 ... Lycos Deutschland ... 487
- 18.3 ... »CSS Zen Ocean« – Ein Beispiellayout für den »CSS Zen Garden« ... 512
- 19 ... Werkzeuge für CSS ... 531
- 19.1 ... Editoren ... 531
- 19.1.1 ... Topstyle Pro ... 531
- 19.1.2 ... Style Master ... 536
- 19.1.3 ... Cascade 2.0 ... 537
- 19.1.4 ... Adobe Dreamweaver CS3 ... 538
- 19.1.5 ... Aptana Studio ... 552
- 19.1.6 ... PSPad ... 556
- 19.1.7 ... Serverseitiger CSS-Editor Eledicss ... 557
- 19.2 ... Analysewerkzeuge und andere Hilfsmittel ... 558
- 19.2.1 ... Firebug ... 558
- 19.2.2 ... Web Developer Toolbar(s) ... 562
- 19.2.3 ... Debugbar ... 563
- 19.2.4 ... Xyle Scope ... 564
- 19.2.5 ... Online-Screenshot-Dienste ... 565
- 19.2.6 ... Virtualisierung ... 567
- 19.2.7 ... Adobe Device Central ... 568
- 19.2.8 ... Hilfsmittel für Barrierefreiheit ... 570
- 19.2.9 ... Tidy ... 573
- 19.2.10 ... OpTool ... 578
- 19.2.11 ... Calipers ... 579
- 19.2.12 ... IrfanView ... 580
- 19.2.13 ... Eigene Tools herstellen: Benutzer-Stylesheets ... 581
- 20 ... Die CSS-Elemente ... 589
- 20.1 ... Alphabetische Übersicht ... 589
- 20.2 ... Pseudo-Elemente und Pseudo-Formate ... 591
- 20.3 ... Inhaltserzeugung ... 606
- 20.4 ... Schriftformatierungen ... 614
- 20.5 ... Farben und Hintergründe ... 647
- 20.6 ... Kastenformatierungen ... 655
- 20.7 ... Anzeigemodus ... 696
- 20.8 ... Tabellenformatierungen ... 700
- 20.9 ... Benutzeroberfläche ... 705
- 20.10 ... Seitenlayout mit @page (CSS 2) ... 709
- 20.11 ... Sprachausgabe ... 716
- 20.12 ... Proprietäre CSS-Eigenschaften ... 727
- A ... Die DVD-ROM zum Buch ... 741
- B ... Die Website zum Buch ... 743
- C ... Die Referenzkarte ... 745
- D ... Glossar ... 747