CSS-PraxisWas Sie schon immer
über Stylesheets wissen wollten

  • ... Vorwort ... 17
  • 1 ... Was sind Cascading Stylesheets? ... 19
  • 1.1 ... Warum sollten Sie Stylesheets nutzen? ... 20
  • 1.2 ... Das CSS-Prinzip ... 22
  • 1.3 ... Wie sieht ein Stylesheet aus? ... 23
  • 2 ... HTML und CSS ... 27
  • 2.1 ... Die Grundlage – das semantische HTML-Dokument ... 27
  • 2.2 ... Schnelleinstieg HTML ... 29
  • 2.3 ... Code follows Content ... 32
  • 2.4 ... Sektionen einer Webseite ... 36
  • 2.5 ... HTML 4, HTML5 oder XHTML? ... 39
  • 2.6 ... HTML5 und CSS ... 42
  • 2.6.1 ... HTML5 im Vergleich zu HTML 4 und XHTML ... 44
  • 2.6.2 ... Neue Elemente in HTML5 ... 44
  • 2.6.3 ... HTML5 in der Praxis ... 46
  • 3 ... Das erste Stylesheet – »Hallo Welt!« auf CSS ... 49
  • 4 ... Selektoren ... 55
  • 4.1 ... Die verschiedenen Selektoren ... 56
  • 4.1.1 ... Einfache Element-Selektoren ... 56
  • 4.1.2 ... Class- und ID-Selektoren ... 58
  • 4.1.3 ... Kombinierte Selektoren ... 65
  • 4.1.4 ... Universal-Selektor ... 68
  • 4.1.5 ... Kind-Selektoren ... 71
  • 4.1.6 ... Folgeelement-Selektoren ... 74
  • 4.1.7 ... Attribut-Selektoren (CSS2 und CSS3) ... 76
  • 4.1.8 ... Pseudo-Klassen und Pseudo-Elemente ... 80
  • 4.1.9 ... CSS3-Pseudo-Selektoren ... 80
  • 4.1.10 ... Wiederholungs-Selektoren ... 82
  • 4.2 ... Vererbung ... 85
  • 4.3 ... Rangfolge und Kaskade ... 87
  • 4.3.1 ... Die Important-Anweisung ... 94
  • 5 ... Einbinden von Stylesheets in HTML-Dateien ... 97
  • 5.1 ... Stilanweisungen im HTML-Tag ... 97
  • 5.2 ... Stilanweisungen im Dokumentenkopf ... 98
  • 5.3 ... Verlinkte Stylesheets ... 99
  • 5.3.1 ... Individuelles Design durch Alternative Stylesheets ... 100
  • 5.4 ... Importierte Stylesheets ... 101
  • 5.5 ... Medienspezifische Stylesheets ... 102
  • 5.5.1 ... Medienspezifische Stylesheets mit CSS3 ... 104
  • 6 ... Kastenmodell (Box-Modell), Elementtypen und Layoutmodelle ... 105
  • 6.1 ... Das Kastenmodell ... 105
  • 6.1.1 ... Zusammenfallende Außenabstände (Collapsing Margins) ... 108
  • 6.2 ... Elementtypen in CSS ... 113
  • 6.2.1 ... Block-Elemente ... 114
  • 6.2.2 ... Eingebundene Elemente ... 114
  • 6.2.3 ... Definition des Elementtyps ... 115
  • 6.2.4 ... Weitere Elementtypen ... 115
  • 6.3 ... Layout- und Positionierungsmodelle in CSS ... 116
  • 7 ... Positionierung mit CSS ... 119
  • 7.1 ... Die Positionierungsart (»position«) ... 119
  • 7.1.1 ... »position: static« ... 120
  • 7.1.2 ... »position: relative« ... 122
  • 7.1.3 ... »position: absolute« ... 124
  • 7.1.4 ... »position: fixed« ... 125
  • 7.2 ... »float« und »clear« ... 128
  • 7.2.1 ... »float« mit »clear« aufheben ... 133
  • 7.2.2 ... »clear« ohne zusätzliches Markup ... 135
  • 8 ... Layout mit CSS ... 141
  • 8.1 ... Fixiert, flexibel, oder elastisch? ... 142
  • 8.1.1 ... Vor und Nachteile ... 142
  • 8.1.2 ... Elastische Layouts und Browserzooms ... 144
  • 8.1.3 ... Auflösungsabhängige Layouts ... 145
  • 8.2 ... Der Zweispalter ... 146
  • 8.2.1 ... Zweispalter mit float ... 149
  • 8.3 ... Der Dreispalter ... 151
  • 8.3.1 ... Dreispalter flexibel ... 152
  • 8.3.2 ... Dreispalter mit festen Spaltenbreiten rechts und links ... 155
  • 8.3.3 ... Dreispalter mit flexibler Spaltenaufteilung und freier Wahl der Breiteneinheiten ... 159
  • 8.3.4 ... Elastischer Dreispalter mit Anpassung an Schriftgröße ... 165
  • 8.4 ... CSS-Layouttricks ... 170
  • 8.4.1 ... Das Problem der (nicht) gleich langen Spalten ... 170
  • 8.4.2 ... Zentrieren ... 179
  • 8.4.3 ... Minimale und maximale Breiten für flexible Layouts ... 184
  • 8.4.4 ... Feststehende Bereiche und CSS-Frames ... 187
  • 8.4.5 ... Auflösungsflexible Layouts ... 194
  • 9 ... Styling mit CSS ... 201
  • 9.1 ... Arbeiten mit Text ... 201
  • 9.1.1 ... Grundlegende Schriftformatierungen ... 201
  • 9.1.2 ... Typografie mit CSS ... 208
  • 9.1.3 ... Einfache Auszeichnungen ... 209
  • 9.1.4 ... Einbindung von Schriftarten per CSS ... 211
  • 9.1.5 ... Konstruktion einer konsistenten Typografie ... 223
  • 9.1.6 ... Überschriften mit CSS ... 227
  • 9.1.7 ... Initialen und Einrückungen ... 232
  • 9.1.8 ... Styling von Zitaten ... 239
  • 9.2 ... CSS-Menüs mit Listen ... 251
  • 9.2.1 ... Vertikale Menüs ... 252
  • 9.2.2 ... CSS-Flyout-Menüs ... 260
  • 9.2.3 ... Horizontale Menüs ... 264
  • 9.2.4 ... Menüs mit durchgehendem Hintergrund ... 273
  • 9.3 ... Tabellen und CSS ... 276
  • 9.4 ... Schönere Formulare ... 289
  • 9.4.1 ... Ordnung ist alles: die Struktur eines Formulars ... 290
  • 9.4.2 ... Pimp my Form ... 301
  • 9.4.3 ... Anpassen von Formular-Rahmenelementen ... 305
  • 9.4.4 ... Interaktionshilfen ... 306
  • 9.4.5 ... Fehlermeldungen ... 309
  • 9.5 ... Druckversion per CSS ... 312
  • 9.6 ... Arbeiten mit Transparenz ... 316
  • 9.6.1 ... Deckkraft von Ebenen steuern ... 316
  • 9.6.2 ... Ebenentransparenz mit voll deckendem Inhalt ... 318
  • 9.6.3 ... PNG: Grafiken mit weichem Verlauf (Alpha-Kanal) ... 321
  • 9.7 ... Arbeiten mit Grafiken ... 323
  • 9.7.1 ... Grafiken per CSS beschneiden ... 323
  • 9.7.2 ... CSS-Sprites ... 323
  • 9.7.3 ... Mehrfache Hintergründe (CSS3) ... 328
  • 9.7.4 ... Grafiken präsentieren – die CSS-Bildergalerie ... 330
  • 9.8 ... CSS-Effekte ... 341
  • 9.8.1 ... »Runde Ecken« ... 341
  • 9.8.2 ... CSS-Schatten ... 342
  • 9.8.3 ... Verläufe mit CSS ... 352
  • 9.9 ... Elemente per CSS verschieben und drehen ... 362
  • 9.10 ... CSS-Übergänge und Animationen ... 364
  • 9.10.1 ... Animierte Übergänge ... 364
  • 9.10.2 ... Animationen mit Keyframes ... 366
  • 9.11 ... Stylesheet-Wechsler ... 370
  • 9.11.1 ... Simpler Styleswitcher ... 374
  • 9.11.2 ... Styleswitcher mit JavaScript und Ajax ... 374
  • 9.11.3 ... Browserweichen für Stylesheets ... 377
  • 10 ... CSS und die Browser ... 379
  • 10.1 ... Die Browserlandschaft ... 379
  • 10.1.1 ... Browser-Marktanteile ... 381
  • 10.1.2 ... CSS-Unterstützung testen – der Acid-Test ... 383
  • 10.1.3 ... Browser mit WebKit-Engine (Chrome, Safari, Konqueror) ... 385
  • 10.1.4 ... Firefox (Gecko) ... 387
  • 10.1.5 ... Opera (Presto) ... 389
  • 10.1.6 ... Opera Mini und Opera Mobile ... 390
  • 10.1.7 ... Internet Explorer (Trident) ... 391
  • 10.1.8 ... Weitere Browser ... 393
  • 10.1.9 ... Lynx ... 394
  • 10.1.10 ... Screenreader ... 395
  • 10.2 ... Problemfall Internet Explorer ... 396
  • 10.2.1 ... hasLayout ... 397
  • 10.3 ... Browserweichen und -filter ... 398
  • 10.3.1 ... Strategien für die Anwendung von Browserweichen: »To hack or not to hack« ... 399
  • 10.3.2 ... Doctype-Switching und Browseremulationen ... 400
  • 10.3.3 ... Conditional Comments ... 403
  • 10.3.4 ... Browser-Sniffer ... 404
  • 10.3.5 ... CSS-Bugs per JavaScript beheben ... 405
  • 10.4 ... Browsertesting ... 405
  • 10.4.1 ... Virtualisierung ... 406
  • 10.4.2 ... Online-Screenshot-Dienste ... 408
  • 11 ... Effizientes Arbeiten mit CSS ... 411
  • 11.1 ... Arbeiten mit HTML-Vorlagen ... 411
  • 11.2 ... Design Patterns ... 414
  • 11.2.1 ... Design Pattern und Quellcode von Yahoo! ... 415
  • 11.3 ... Objektorientiertes CSS ... 417
  • 11.4 ... Alles auf null: Reset-Stylesheets ... 421
  • 11.5 ... Kurzschreibweise ... 426
  • 11.6 ... CSS-Präprozessoren ... 427
  • 11.6.1 ... Effizient CSS-Anweisungen schreiben mit LESS ... 429
  • 11.7 ... Stylesheets organisieren ... 433
  • 11.7.1 ... Ordnung durch Stylesheet-Module ... 434
  • 11.7.2 ... Filter-Management ... 435
  • 11.7.3 ... Kommentieren von Stylesheets ... 436
  • 11.7.4 ... Ein Standard für CSS-Kommentare: CSSDoc ... 437
  • 11.7.5 ... Sprung-Links, Inhaltsverzeichnis und Farbdefinitionen ... 439
  • 11.8 ... CSS im Entwurfsverfahren (Rapid Prototyping) ... 441
  • 11.8.1 ... Festlegen der Seitenstruktur in semantischem HTML ... 442
  • 11.8.2 ... Bereiche ausrichten in Ihrem bevorzugten Browser ... 443
  • 11.8.3 ... Einfügen der Inhalte ... 444
  • 11.8.4 ... Dynamische Bereiche umsetzen ... 445
  • 11.8.5 ... Benutzertests ... 445
  • 11.8.6 ... Finetuning, Browsertests und technische Optimierungen ... 447
  • 11.9 ... Fehlersuche in CSS-Dateien ... 447
  • 12 ... Arbeiten mit CSS-Frameworks ... 451
  • 12.1 ... YAML ... 453
  • 12.1.1 ... Klassische Spaltenlayouts ... 454
  • 12.1.2 ... Flexible Raster mit YAML ... 457
  • 12.1.3 ... YAMLBuilder ... 461
  • 12.1.4 ... Hilfreiche Klassen ... 462
  • 12.1.5 ... Formulare mit YAML ... 463
  • 12.1.6 ... Fazit ... 463
  • 12.2 ... Yahoo! Grids ... 464
  • 12.2.1 ... Weitere Aufteilung des Hauptbereichs ... 467
  • 12.2.2 ... Der YUI Grids Builder ... 469
  • 12.2.3 ... Yahoo! Grids anpassen ... 470
  • 12.2.4 ... Semantische Rollen für barrierefreie Grids ... 471
  • 12.2.5 ... Gleich lange Spalten mit Grids und JavaScript ... 472
  • 12.2.6 ... Fazit zu Yahoo! Grids ... 472
  • 12.3 ... Blueprint CSS ... 473
  • 12.3.1 ... Arbeiten mit Blueprint ... 474
  • 12.3.2 ... Blueprint-Raster anpassen ... 478
  • 12.4 ... Weitere CSS-Frameworks ... 479
  • 12.4.1 ... Rastersystem »960« ... 479
  • 13 ... Webstandards und Barrierefreiheit ... 483
  • 13.1 ... Webstandards beachten ... 483
  • 13.1.1 ... Was ist für eine standardkonforme Webseite erforderlich? ... 484
  • 13.1.2 ... Der W3C-Validator ... 486
  • 13.2 ... Suchmaschinenoptimierung mit CSS ... 488
  • 13.2.1 ... Schlanke Dokumente durch CSS ... 488
  • 13.2.2 ... Semantik für Suchmaschinen ... 489
  • 13.3 ... Zugängliche und benutzbare Websites mit CSS ... 492
  • 13.3.1 ... Grundsätze für zugängliche Websites ... 493
  • 13.3.2 ... Barrierefreie Sprung-Links ... 496
  • 13.3.3 ... Link-Auszeichnungen – Nützlich und barrierefrei ... 498
  • 13.3.4 ... Testen ... 500
  • 14 ... Ajax, JavaScript und CSS ... 503
  • 14.1 ... Austausch eines Stylesheets per JavaScript ... 503
  • 14.2 ... Klassen zuweisen mit »className« ... 504
  • 14.3 ... Stile mit »style« zuweisen ... 505
  • 14.4 ... Formularvalidierung mit CSS und JavaScript ... 506
  • 14.5 ... Tageszeitenabhängiger Styleswitcher ... 511
  • 14.6 ... Fadenkreuz für Tabellen ... 514
  • 14.7 ... JavaScript zur Umgehung von Browsereinschränkungen verwenden ... 516
  • 14.7.1 ... Browser- bzw. Fähigkeitserkennung ... 517
  • 14.7.2 ... JavaScript zur Erweiterung der Browserfähigkeiten nutzen ... 519
  • 15 ... Das mobile Web: Stylesheets, Mobiltelefone und PDAs ... 529
  • 15.1 ... Strategien für das mobile Web: mobilisieren statt miniaturisieren ... 529
  • 15.2 ... Mobile Standards ... 530
  • 15.3 ... Stylesheets für mobile Browser ausliefern ... 531
  • 15.3.1 ... Stylesheets per Media Query ausliefern ... 531
  • 15.3.2 ... User-Agent-Sniffing ... 533
  • 15.4 ... CSS-Design für den mobilen Einsatz ... 533
  • 15.5 ... Einzelne Geräte ... 536
  • 15.5.1 ... Betriebssysteme für Mobilgeräte und Organizer ... 536
  • 15.5.2 ... Safari auf dem iPhone und iPad ... 537
  • 15.5.3 ... Chrome auf Android-Geräten ... 545
  • 15.5.4 ... Opera Mini und Opera Mobile ... 547
  • 15.5.5 ... Weitere mobile Browser ... 550
  • 15.6 ... Frameworks für die mobile Entwicklung ... 550
  • 15.6.1 ... Mobile Boilerplate ... 550
  • 15.6.2 ... jQuery Mobile Framework ... 552
  • 15.6.3 ... jQTouch ... 558
  • 16 ... E-Mails mit CSS gestalten ... 561
  • 16.1 ... Grundsätzliche Probleme ... 561
  • 16.2 ... Lokale E-Mail-Clients ... 565
  • 16.2.1 ... Microsoft Outlook ... 565
  • 16.2.2 ... Mozilla Thunderbird ... 567
  • 16.2.3 ... Apple Mail ... 568
  • 16.3 ... Webmail-Dienste ... 568
  • 16.3.1 ... Google Mail ... 568
  • 16.3.2 ... Yahoo! Mail und Windows Live Mail ... 569
  • 16.3.3 ... GMX ... 570
  • 16.3.4 ... Web.de ... 571
  • 16.4 ... Strategien für E-Mail-Newsletter ... 572
  • 16.4.1 ... Techniken für mit CSS gestaltete und alle anderen E-Mails ... 572
  • 16.4.2 ... CSS-Eigenschaften im Einzelnen ... 576
  • 17 ... CSS3 ... 579
  • 17.1 ... CSS-Spezifikationen ... 579
  • 17.1.1 ... CSS3 und die Browser ... 582
  • 17.1.2 ... Von Standards und Hersteller-Präfixen ... 583
  • 17.2 ... CSS3 – was können Sie heute verwenden? ... 583
  • 17.2.1 ... Selektoren ... 583
  • 17.2.2 ... Neue Eigenschaften für das Seitenlayout ... 584
  • 17.2.3 ... Neue Möglichkeiten für das Styling ... 586
  • 17.2.4 ... Übergänge, Transformationen und Animationen ... 588
  • 17.3 ... CSS3 Zen Ocean ... 588
  • 18 ... Werkzeuge für CSS-Entwickler ... 605
  • 18.1 ... CSS-Editoren ... 605
  • 18.1.1 ... TopStyle ... 605
  • 18.2 ... Website-Editoren ... 610
  • 18.2.1 ... Adobe Dreamweaver CS5.5 ... 610
  • 18.2.2 ... Aptana Studio 2.0 ... 622
  • 18.3 ... Analysewerkzeuge ... 625
  • 18.3.1 ... Firebug ... 625
  • 18.3.2 ... Web Developer Toolbar(s) ... 629
  • 18.3.3 ... Accessibility-Toolbar ... 630
  • 18.3.4 ... Calipers ... 631
  • 18.4 ... Optimierungswerkzeuge ... 632
  • 18.4.1 ... CSS-Minifier ... 632
  • 18.5 ... Eigene Tools herstellen: Benutzer-Stylesheets ... 634
  • ... Anhang ... 641
  • A ... CSS-Referenz ... 641
  • A.1 ... Alphabetische Übersicht ... 641
  • A.2 ... Pseudo-Elemente und Pseudo-Formate ... 644
  • A.4 ... Schriftformatierungen ... 669
  • A.5 ... Farben und Hintergründe ... 698
  • A.6 ... Kastenformatierungen ... 713
  • A.7 ... Listenformatierungen ... 746
  • A.8 ... Anzeigemodus ... 750
  • A.9 ... Tabellenformatierungen ... 752
  • A.10 ... Benutzeroberfläche ... 757
  • A.11 ... Seitenlayout mit @page ... 760
  • A.12 ... Sprachausgabe ... 766
  • A.13 ... Proprietäre CSS-Eigenschaften ... 776
  • B ... Benennungen und Werte für Stylesheets ... 783
  • B.1 ... Namen für Stylesheets, Klassen und IDs ... 783
  • B.2 ... Längen- und Größenangaben ... 783
  • B.3 ... Prozentwerte ... 785
  • B.4 ... Farben ... 785
  • B.5 ... URLs (url) ... 786
  • B.6 ... Schlüsselwörter ... 787
  • B.7 ... CSS-Kommentare ... 787
  • C ... HTML5-Elemente ... 789
  • D ... DVD zum Buch ... 793
  • ... Index ... 795