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

2.5.1 HTML5 im Vergleich zu HTML 4 und XHTML

37

2.5.2 Neue Elemente in HTML5

38

2.5.3 HTML5 in der Praxis

40

4 Selektoren

47

4.1 Die verschiedenen Selektoren

48

4.1.1 Einfache Element-Selektoren

48

4.1.2 Class- und ID-Selektoren

49

4.1.3 Kombinierte Selektoren

56

4.1.4 Universal-Selektor

59

4.1.5 Kind-Selektoren

62

4.1.6 Folgeelement-Selektoren

64

4.1.7 Attribut-Selektoren (CSS2 und CSS3)

67

4.1.8 Pseudo-Klassen und Pseudo-Elemente

70

4.1.9 Wiederholungs-Selektoren

73

4.2 Vererbung

76

4.3 Rangfolge und Kaskade

77

4.3.1 Die »!important«-Anweisung

86

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.3.1 Individuelles Design durch alternative Stylesheets

90

5.4 Importierte Stylesheets

90

5.5 Medienspezifische Stylesheets

91

5.6 Media Queries für responsives Design

94

5.6.1 Einbindung von Media Queries

97

6 Kastenmodell (Boxmodell), Elementtypen und Layoutmodelle

101

6.1 Das Kastenmodell

101

6.1.1 Ein neues Boxmodell

105

6.1.2 Zusammenfallende Außenabstände (Collapsing Margins)

105

6.2 Elementtypen in CSS

111

6.2.1 Blockelemente

111

6.2.2 Eingebundene Elemente

111

6.2.3 Definition des Elementtyps

112

6.2.4 Weitere Elementtypen

113

7 Layout mit CSS

115

7.1 Wichtige Eigenschaften zum Layouten

115

7.2 Die Positionierungsart (»position«)

116

7.2.1 »position: static«

117

7.2.2 »position: relative«

119

7.2.3 »position: absolute«

121

7.2.4 »position: fixed«

123

7.3 »float« und »clear«

126

7.3.1 »float« mit »clear« aufheben

129

7.3.2 »clear« ohne zusätzliches Markup

132

7.4 »display: table« und »display: inline-block«

135

7.4.1 Tabellenlayout 2.0

136

7.4.2 Das Beste aus der Block- und Inlinewelt

138

7.5 Die Zukunft: native Layoutsysteme in CSS

139

7.5.1 Das flexible Kastenmodell

140

7.5.2 Grid Layouts

140

7.6 Das Layout: fixiert, flexibel oder elastisch?

141

7.6.1 Vor- und Nachteile

142

7.6.2 Elastische Layouts und Browserzooms

143

7.6.3 Auflösungsabhängige Layouts

144

7.7 Der Zweispalter

145

7.7.1 Zweispalter mit »float«

146

7.7.2 Zweispalter im Tabellenlayout

152

7.7.3 Minimale und maximale Breiten für flexible Layouts

159

7.8 Der Dreispalter

163

7.8.1 Dreispalter flexibel mit »float«

164

7.8.2 Dreispalter mit flexibler Spaltenaufteilung und freier Wahl der Breiteneinheiten

167

7.9 Flexbox: das flexible Kastenlayout

173

7.9.1 Dreispalter mit flexibler Spaltenaufteilung und Breite – Flexbox-Style

175

7.9.2 Flexbox – im Internet Explorer

188

7.10 CSS-Layouttricks

190

7.10.1 Zentrieren

190

7.11 Feststehende Bereiche und CSS-Frames

195

7.11.1 CSS-Frames

197

8 Das responsive Web für alle

201

8.1 Neues Denken

202

8.1.1 Anforderungen mobiler Designs

204

8.1.2 Design in Komponenten: Atomic Design

209

8.2 Der erste Schritt: flexible Layouts

210

8.3 Der zweite Schritt: anpassungsfähige Inhalte

213

8.3.1 Bilder

213

8.3.2 YouTube & Co: eingebundene Inhalte

217

8.4 Der dritte Schritt: Media Queries

219

8.4.1 Responsive statt Mobile

219

8.4.2 Das Media Query im Detail

220

8.4.3 Was sich testen lässt: Media Features

222

8.4.4 Viewports und Pixel

223

8.4.5 Gerätepixel und CSS-Pixel: der »virtuelle« visuelle Viewport

226

8.4.6 Weitere Media Features

229

8.4.7 Media Queries im Einsatz

231

8.5 Frameworks für die Entwicklung mobiler Apps

236

8.5.1 jQuery Mobile Framework

237

9 Styling mit CSS

245

9.1 Arbeiten mit Text

245

9.1.1 Schriftgrößen mit CSS steuern

246

9.1.2 Typografie mit CSS

252

9.1.3 Einfache Auszeichnungen

253

9.1.4 Schattige Texte mit CSS3

254

9.1.5 Einbindung von Schriftarten per CSS

256

9.1.6 Icon-Fonts

265

9.1.7 Konstruktion einer konsistenten Typografie

272

9.1.8 Überschriften mit CSS

276

9.1.9 Initialen und Einrückungen

281

9.1.10 Styling von Zitaten

288

9.2 CSS-Menüs mit Listen

299

9.2.1 Vertikale Menüs

300

9.2.2 CSS-Flyout-Menüs

309

9.2.3 Horizontale Menüs

312

9.2.4 Menüs mit durchgehendem Hintergrund

327

9.3 Tabellen und CSS

330

9.3.1 Tabellenstyling mit CSS3

333

9.3.2 Mehr Orientierung in Tabellen

337

9.3.3 Tabellenrahmen gestalten

338

9.4 Schönere Formulare

342

9.4.1 Ordnung ist (fast) alles – die Struktur eines Formulars

343

9.4.2 Pimp my Form

354

9.4.3 Anpassen von Formular-Rahmenelementen

358

9.4.4 Interaktionshilfen

360

9.4.5 Fehlermeldungen

362

9.5 Druckversion per CSS

365

9.5.1 Einstellungen für den Druck

366

9.5.2 Navigation ausblenden

367

9.5.3 Links mit URL anzeigen

367

9.6 Arbeiten mit Transparenz

369

9.6.1 Deckkraft von Ebenen steuern

369

9.6.2 Ebenentransparenz mit voll deckendem Inhalt

370

9.6.3 PNG – Grafiken mit weichem Verlauf (Alpha-Kanal)

370

9.7 Arbeiten mit Grafiken

370

9.7.1 Grafiken per CSS beschneiden

371

9.7.2 CSS-Sprites

372

9.7.3 Mehrfache Hintergründe (CSS3)

376

9.7.4 Grafiken präsentieren – die CSS-Bildergalerie

379

9.8 »Runde Ecken«

390

9.9 CSS-Schatten

392

9.9.1 Schatten für Texte

396

9.10 Verläufe mit CSS

397

9.10.1 Lineare Verläufe

400

9.10.2 Radiale Verläufe

402

9.10.3 Wiederholende Verläufe

403

9.11 Stylesheet-Wechsler

406

9.11.1 Simpler Styleswitcher

409

9.11.2 Styleswitcher mit JavaScript und Ajax

409

9.11.3 Browserweichen für Stylesheets

411

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.1.1 2D-Transformationen

429

10.1.2 3D-Transformationen

433

10.1.3 Die Transformationsmatrizen

441

10.2 Animierte Übergänge mit CSS

442

10.2.1 Transformationsmodus im Detail mit Cubic-Bezier-Kurven

444

10.2.2 Verzögerte Übergänge

446

10.3 Animationen mit Keyframes

446

10.3.1 Tools zum Erstellen von Animationen

450

11 CSS und die Browser

451

11.1 Die Browserlandschaft

451

11.1.1 Browsermarktanteile

452

11.1.2 CSS-Unterstützung testen

454

11.1.3 Blink

456

11.1.4 WebKit/Mobile WebKit

457

11.1.5 Gecko (Firefox)

457

11.1.6 Trident (Internet Explorer) und EdgeHTML (Edge)

460

11.1.7 Online-Browser-Featuredatenbank

462

11.1.8 Lynx

463

11.1.9 Screenreader

463

11.2 Browserweichen und -filter

464

11.2.1 Strategien für die Anwendung von Browserweichen: »To hack or not to hack«

465

11.2.2 Conditional Comments

466

11.2.3 Browser-Sniffer

467

11.2.4 CSS-Bugs per JavaScript beheben

468

11.3 Browsertesting

468

11.3.1 Virtualisierung

469

11.3.2 Browser online testen

471

12 Effizientes Arbeiten mit CSS

473

12.1 Arbeiten mit HTML-Vorlagen

473

12.1.1 HTML5 Boilerplate

475

12.2 Design Patterns

476

12.2.1 Design Pattern und Quellcode von Yahoo!

477

12.2.2 Websitekomponenten mit Pattern Lab verwalten

478

12.3 Stylesheets organisieren

482

12.3.1 Ordnung durch Stylesheet-Module

483

12.3.2 Alles auf null – Reset- und Normalize-Stylesheets

484

12.3.3 Kommentieren von Stylesheets

486

12.3.4 Ein Standard für CSS-Kommentare – CSSDoc

487

12.3.5 Sprunglinks, Inhaltsverzeichnis und Farbdefinitionen

489

12.4 CSS-Benennungsschemata: BEM, OOCSS, SMACSS & Co

491

12.4.1 Objektorientiertes CSS

491

12.4.2 SMACSS

493

12.4.3 Block-Element-Modifier-Methode (BEM)

495

12.5 Kurzschreibweisen

497

12.6 CSS-Präprozessoren

498

12.6.1 Effizient CSS-Anweisungen schreiben mit LESS

499

12.6.2 Arbeiten mit Sass und Compass

504

12.6.3 PostCSS

516

12.7 CSS im Entwurfsverfahren (Rapid Prototyping)

520

12.7.1 Festlegen der Seitenstruktur in semantischem HTML

521

12.7.2 Bereiche ausrichten in Ihrem bevorzugten Browser

522

12.7.3 Einfügen der Inhalte

523

12.7.4 Dynamische Bereiche umsetzen

524

12.7.5 Benutzertests

524

12.7.6 Feintuning, Browsertests und technische Optimierungen

525

12.8 Fehlersuche in CSS-Dateien

526

12.9 Werkzeuge für CSS-Entwickler

528

12.9.1 Editoren

528

12.9.2 Analysewerkzeuge

547

12.9.3 CSS-Minifier

555

12.9.4 Eigene Tools herstellen: Benutzer-Stylesheets

558

13 Arbeiten mit CSS-Frameworks

561

13.1 Framework-Übersicht und Auswahlhinweise

562

13.1.1 Layoutframeworks

564

13.1.2 Applikationsframeworks

573

13.1.3 Das eigene Raster

576

13.2 Aufbau eines Rasters mit YAML

577

13.2.1 Zusatzklassen fürs Layout

581

13.3 Aufbau eines Rasters mit Foundation

583

13.3.1 Semantisches Raster mit Foundation

586

14 Webstandards und Barrierefreiheit

591

14.1 Webstandards beachten

591

14.1.1 Gründe für standardkonforme Webseiten

591

14.1.2 Was ist für eine standardkonforme Webseite erforderlich?

592

14.1.3 Der W3C-Validator

594

14.2 Suchmaschinenoptimierung mit CSS

595

14.2.1 Schlanke und besser lesbare Dokumente durch CSS

596

14.2.2 Semantik für Suchmaschinen

597

14.3 Zugängliche und benutzbare Websites mit CSS

601

14.3.1 Grundsätze für zugängliche Websites

602

14.3.2 Barrierefreie Sprunglinks

607

14.3.3 Link-Auszeichnungen – nützlich und barrierefrei

609

14.3.4 Testen

611

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

15.7.1 Fähigkeitserkennung statt Browsererkennung

626

15.7.2 Polyfills: JavaScript zur Erweiterung der Browserfähigkeiten nutzen

628

16 E-Mails mit CSS gestalten

631

16.1 Grundsätzliche Probleme

631

16.2 Lokale E-Mail-Clients

633

16.2.1 Microsoft Outlook

634

16.2.2 Mozilla Thunderbird

635

16.2.3 Apple Mail

636

16.3 Webmail-Dienste

637

16.3.1 Google Mail / Mobile Gmail

637

16.3.2 Yahoo! Mail und Outlook.com

637

16.3.3 GMX

638

16.3.4 Web.de

639

16.4 CSS-Eigenschaften im Einzelnen

640

16.5 Strategien für E-Mail-Newsletter

642

16.5.1 Techniken für mit CSS gestaltete und alle anderen E-Mails

642

Anhang

647

A CSS-Referenz

649

A.1 Alphabetische Übersicht

650

A.2 Pseudo-Elemente und Pseudo-Formate

655

A.3 Inhaltserzeugung

674

A.4 Schriftformatierungen

681

A.5 Farben und Hintergründe

708

A.6 Kastenformatierungen

722

A.7 Listenformatierungen

767

A.8 Anzeigemodus

771

A.9 Tabellenformatierungen

774

A.10 Benutzeroberfläche

780

A.11 Seitenlayout mit »@page«

783

A.12 Sprachausgabe

789

A.13 Proprietäre CSS-Eigenschaften

799

B Benennungen und Werte für Stylesheets

805

B.1 Namen für Stylesheets, Klassen und IDs

805

B.2 Längen- und Größenangaben

805

B.3 Prozentwerte

807

B.4 Farben

808

B.5 URLs (url)

809

B.6 Schlüsselwörter

809

B.7 CSS-Kommentare

809

C HTML5-Elemente

811