Galileo Computing : Buch : CSS-Praxis : Inhaltsverzeichnis

CSS-Praxis
Das umfassende Handbuch
978-3-8362-1134-5

Inhaltsverzeichnis

... 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

Das Online-Buch ist die per Internet zugängliche elektronische Fassung des gedruckten Buches. Mit dem Kauf eines Online-Buches erwerben Sie das Recht, jederzeit und von jedem Rechner aus online auf den ganzen Inhalt des Buches zuzugreifen.

Unsere Online-Bücher sind keine PDFs.

In Ihrem Online-Buch können Sie komfortabel navigieren, suchen, es seitenweise ausdrucken und mit anderen Online-Büchern zu einer integrierten persönlichen Bibliothek zusammenfügen.

Ihr Klick auf den Plus-Button verändert diese Position im Warenkorb zum Paket aus gedrucktem Buch plus Online-Buch. Damit genießen Sie den vergünstigten Paketpreis

Bonus-Angebote für Leser dieses Buches

Mit dem Zugangscode im Buch erhalten Leser weitere Inhalte auf der Bonus-Seite zum Buch:

Testzugang zum Online-Buch [» Info]
Ergänzungen zu Ihrem Galileo-Buch
Passende Produktempfehlungen unseres Fachlektorats