CSS

Vorwort ... 15

1. Was sind Cascading Stylesheets? ... 17
1.1 ... Warum sollten Sie Stylesheets nutzen? ... 17
1.2 ... Das CSS-Prinzip ... 20
1.3 ... Wie sieht ein Stylesheet aus? ... 21

2. HTML und CSS ... 25
2.1 ... Die Grundlage -- das semantische HTML-Dokument ... 25
2.2 ... Schnelleinstieg HTML ... 26
2.3 ... Code follows Content ... 29
2.4 ... Sektionen einer Webseite ... 33
2.5 ... HTML5 und CSS ... 36

3. Das erste Stylesheet -- »Hallo Welt!« auf CSS ... 41

4. Selektoren ... 47
4.1 ... Die verschiedenen Selektoren ... 48
4.2 ... Vererbung ... 76
4.3 ... Rangfolge und Kaskade ... 77

5. Einbinden von Stylesheets in HTML-Dateien ... 87
5.1 ... Stilanweisungen im HTML-Tag ... 87
5.2 ... Stilanweisungen im Dokumentenkopf ... 88
5.3 ... Verlinkte Stylesheets ... 89
5.4 ... Importierte Stylesheets ... 90
5.5 ... Medienspezifische Stylesheets ... 91
5.6 ... Media Queries für responsives Design ... 94

6. Kastenmodell (Boxmodell), Elementtypen und Layoutmodelle ... 101
6.1 ... Das Kastenmodell ... 101
6.2 ... Elementtypen in CSS ... 111

7. Layout mit CSS ... 115
7.1 ... Wichtige Eigenschaften zum Layouten ... 115
7.2 ... Die Positionierungsart (»position«) ... 116
7.3 ... »float« und »clear« ... 126
7.4 ... »display: table« und »display: inline-block« ... 135
7.5 ... Die Zukunft: native Layoutsysteme in CSS ... 139
7.6 ... Das Layout: fixiert, flexibel oder elastisch? ... 141
7.7 ... Der Zweispalter ... 145
7.8 ... Der Dreispalter ... 163
7.9 ... Flexbox: das flexible Kastenlayout ... 173
7.10 ... CSS-Layouttricks ... 190
7.11 ... Feststehende Bereiche und CSS-Frames ... 195

8. Das responsive Web für alle ... 201
8.1 ... Neues Denken ... 202
8.2 ... Der erste Schritt: flexible Layouts ... 210
8.3 ... Der zweite Schritt: anpassungsfähige Inhalte ... 213
8.4 ... Der dritte Schritt: Media Queries ... 219
8.5 ... Frameworks für die Entwicklung mobiler Apps ... 236

9. Styling mit CSS ... 245
9.1 ... Arbeiten mit Text ... 245
9.2 ... CSS-Menüs mit Listen ... 299
9.3 ... Tabellen und CSS ... 330
9.4 ... Schönere Formulare ... 342
9.5 ... Druckversion per CSS ... 365
9.6 ... Arbeiten mit Transparenz ... 369
9.7 ... Arbeiten mit Grafiken ... 370
9.8 ... »Runde Ecken« ... 390
9.9 ... CSS-Schatten ... 392
9.10 ... Verläufe mit CSS ... 397
9.11 ... Stylesheet-Wechsler ... 406
9.12 ... Styling mit CSS3 -- der CSS3 Zen Ocean ... 413

10. Transformationen, Transitionen und Animationen mit CSS ... 429
10.1 ... Elemente per CSS verschieben und drehen ... 429
10.2 ... Animierte Übergänge mit CSS ... 442
10.3 ... Animationen mit Keyframes ... 446

11. CSS und die Browser ... 451
11.1 ... Die Browserlandschaft ... 451
11.2 ... Browserweichen und -filter ... 464
11.3 ... Browsertesting ... 468

12. Effizientes Arbeiten mit CSS ... 473
12.1 ... Arbeiten mit HTML-Vorlagen ... 473
12.2 ... Design Patterns ... 476
12.3 ... Stylesheets organisieren ... 482
12.4 ... CSS-Benennungsschemata: BEM, OOCSS, SMACSS & Co ... 491
12.5 ... Kurzschreibweisen ... 497
12.6 ... CSS-Präprozessoren ... 498
12.7 ... CSS im Entwurfsverfahren (Rapid Prototyping) ... 520
12.8 ... Fehlersuche in CSS-Dateien ... 526
12.9 ... Werkzeuge für CSS-Entwickler ... 528

13. Arbeiten mit CSS-Frameworks ... 561
13.1 ... Framework-Übersicht und Auswahlhinweise ... 562
13.2 ... Aufbau eines Rasters mit YAML ... 577
13.3 ... Aufbau eines Rasters mit Foundation ... 583

14. Webstandards und Barrierefreiheit ... 591
14.1 ... Webstandards beachten ... 591
14.2 ... Suchmaschinenoptimierung mit CSS ... 595
14.3 ... Zugängliche und benutzbare Websites mit CSS ... 601

15. Ajax, JavaScript und CSS ... 613
15.1 ... Austausch eines Stylesheets per JavaScript ... 613
15.2 ... Klassen zuweisen mit »className« ... 614
15.3 ... Stile mit »style« zuweisen ... 615
15.4 ... Formularvalidierung mit CSS und JavaScript ... 616
15.5 ... Tageszeitenabhängiger Styleswitcher ... 621
15.6 ... Fadenkreuz für Tabellen ... 624
15.7 ... JavaScript zur Umgehung von Browsereinschränkungen verwenden ... 626

16. E-Mails mit CSS gestalten ... 631
16.1 ... Grundsätzliche Probleme ... 631
16.2 ... Lokale E-Mail-Clients ... 633
16.3 ... Webmail-Dienste ... 637
16.4 ... CSS-Eigenschaften im Einzelnen ... 640
16.5 ... Strategien für E-Mail-Newsletter ... 642

Anhang ... 647
A ... CSS-Referenz ... 649
B ... Benennungen und Werte für Stylesheets ... 805
C ... HTML5-Elemente ... 811

Index ... 817