Einstieg in CSS

Vorwort. 23

Teil I Die Einleitung. 27

1. Das Web ist nicht aus Papier. 29

1.1. Papierdenken, Webseiten und enttäuschte Erwartungen. 29

1.2. Der Autor einer Webseite hat keine vollständige Kontrolle über deren Aussehen. 30

1.3. Webseiten sehen bei jedem Benutzer anders aus. 32

1.4. Jenseits von Papier. 35

1.5. Zurück in die Zukunft -- die Browser bestimmen. 37

2. HTML und CSS im Schnelldurchlauf. 41

2.1. Webseiten bestehen aus rechteckigen Kästchen. 41

2.2. HTML ist der Maurer -- rechteckige Kästchen erstellen. 42

2.3. CSS ist der Stylist -- rechteckige Kästchen gestalten. 45

2.4. Entwickler-Tools -- HTML und CSS analysieren. 48

2.5. Auf einen Blick. 49

Teil II HTML-Crashkurs -- Kästchen erstellen. 51

3. Das HTML-Grundgerüst. 53

3.1. HTML -- Hyperlinks erstellen und 'Etiketten kleben'. 53

3.2. Das HTML-Grundgerüst ist das Skelett einer Webseite. 55

3.3. Die Dokumenttyp-Definition -- . 57

3.4. Das Stammelement . 58

3.5. Informationen über die Webseite -- . 58

3.6. Der Inhalt der Webseite -- . 61

3.7. HTML-Elemente im Quelltext -- Anfangs-Tag, Inhalt und Ende-Tag. 61

3.8. Auf einen Blick. 62

4. HTML-Elemente für Überschriften, Text und Listen. 63

4.1. Das Grundgerüst für die Startseite erstellen. 64

4.2. Die Seite in Layoutbereiche einteilen -- 'div'. 65

4.3. Überschriften -- 'h1' bis 'h6'. 68

4.4. Fließtext -- Absätze und Hervorhebungen. 70

4.5. Über Block- und Inline-Elemente. 72

4.6. Listen -- Aufzählungen und Nummerierungen. 74

4.7. Verschachtelte Listen. 76

4.8. Jeder Browser hat ein eingebautes Stylesheet. 78

4.9. Auf einen Blick. 79

5. HTML-Elemente für Links, Bilder und mehr. 81

5.1. Hyperlinks -- das Besondere am World Wide Web. 81

5.2. Die Wegbeschreibung zur Grafik -- 'img'. 87

5.3. Weitere nützliche HTML-Elemente. 89

5.4. Character Entities -- allgemeine Sonderzeichen. 93

5.5. Know-how -- Wissenswertes über Zeichensätze. 95

5.6. Auf einen Blick. 98

6. Das HTML für die Beispielseiten. 99

6.1. Stimmt die Statik? Der HTML-Validator. 99

6.2. CSS zum Ausprobieren -- die W3C Core Styles. 102

6.3. Die Kontaktseite -- von der Seite zur Site. 103

6.4. Der Quelltext der Webseiten im Überblick. 105

6.5. Auf einen Blick. 108

Teil III CSS Grundlagen -- Kästchen gestalten. 109

7. CSS kennenlernen -- Schriften, Farben und Hyperlinks. 111

7.1. Ein Stylesheet ist eine Sammlung von Formatvorlagen. 111

7.2. Überblick: CSS und das Gestalten der HTML-Kästchen. 112

7.3. Das erste eigene Stylesheet. 112

7.4. Hintergrund- und Schriftfarben definieren. 114

7.5. Schriftart und -größe gestalten. 119

7.6. Die Kontaktadresse im Fußbereich gestalten. 121

7.7. Hyperlinks gestalten. 123

7.8. Styles können an drei verschiedenen Stellen definiert werden. 128

7.9. Das Stylesheet im Überblick. 130

7.10. Auf einen Blick. 131

8. Selektoren, Einheiten und Farben. 133

8.1. Style -- der Aufbau einer CSS-Regel. 133

8.2. Ein Selektor wählt das zu gestaltende Kästchen aus. 134

8.3. Überblick: Die HTML-Elemente im DOM-Baum. 136

8.4. Selektoren kombinieren -- Nachfahren auswählen. 138

8.5. Eigene Namen vergeben -- 'id' und 'class'. 141

8.6. Spezifität -- das Punktesystem für Selektoren. 145

8.7. Werte und Maße in CSS -- die Qual der Wahl. 147

8.8. Farben definieren -- hexadezimal, dezimal und Namen. 150

8.9. Auf einen Blick. 152

9. Das Box-Modell. 153

9.1. Zuerst in modernen Browsern testen. 153

9.2. Das Box-Modell in der Übersicht. 154

9.3. Kalibrierung -- Abstände auf null setzen. 159

9.4. Webseite zentrieren mit 'width' und 'margin'. 162

9.5. Rahmenlinien erstellen -- 'border'. 164

9.6. Ein bisschen Abstand drumherum -- 'padding'. 165

9.7. Das Box-Modell und die farbliche Gestaltung. 168

9.8. Hintergrundgrafiken per CSS. 171

9.9. Vertikale Außenabstände kollabieren -- 'collapsing margins'. 178

9.10. Das Stylesheet im Überblick. 183

9.11. Auf einen Blick. 185

10. Ordnung halten in den Stylesheets. 187

10.1. Der Kommentar am Anfang. 187

10.2. Das Stylesheet in Abschnitte unterteilen. 188

10.3. Verschiedene Schreibweisen für Styles. 190

10.4. Die Reihenfolge der Deklarationen im Style. 192

10.5. Effektiv -- Kurzschreibweisen für 'padding' und 'margin'. 193

10.6. Mehrere Stylesheets erstellen und zentral einbinden. 196

10.7. Die Stylesheets für die Beispielsite im Überblick. 199

10.8. Der CSS-Validator. 204

10.9. Auf einen Blick. 206

11. Eine horizontale Navigation per 'display:inline'. 207

11.1. Einfache horizontale Navigation mit 'display: inline'. 207

11.2. Punktsieg -- Spezifität in der Praxis. 212

11.3. Von Elementen und Boxen. 214

11.4. Tabbed Navigation -- Navigation mit Registern. 215

11.5. Know-how -- das Box-Modell für Inliner. 223

11.6. Exkurs: Whitespace -- der Leerstellenpakt. 226

11.7. Auf einen Blick. 230

12. Ein Kontaktformular erstellen. 231

12.1. Schritt 1: Das HTML für das Kontaktformular. 231

12.2. Schritt 2: Das Formular per CSS gestalten. 237

12.3. Schritt 3: Das Formular aktivieren und testen. 241

12.4. Exkurs: Ein mehrspaltiges Kontaktformular. 243

12.5. Auf einen Blick. 245

13. HTML-Tabellen erstellen und gestalten. 247

13.1. Das HTML für Tabellen. 247

13.2. Tabellen gestalten per CSS -- ein Beispiel. 252

13.3. Übersichtliche Tabellen -- Hover und Zebrastreifen. 256

13.4. Auf einen Blick. 258

14. Fließtext, Webfonts und Druckversion. 259

14.1. Fließtext besser lesbar machen. 259

14.2. Webfonts -- die Schriftart gleich mitliefern. 265

14.3. Eine Druckversion für die Beispielseiten. 269

14.4. Favicon -- das Minilogo für Ihre Seiten. 277

14.5. Auf einen Blick. 278

15. Kaskade, Vererbung oder Standardwert. 279

15.1. Überblick: DOM-Baum und Kaskade. 279

15.2. Der Anfang: Sammle alle relevanten Deklarationen. 283

15.3. Stufe 1: Sortiere nach Wichtigkeit (importance). 286

15.4. Stufe 2: Sortiere nach Spezifität (specificity). 289

15.5. Stufe 3: Sortiere nach Reihenfolge (order). 290

15.6. Die Vererbung (inheritance). 291

15.7. Der Standardwert (initial value). 293

15.8. Auf einen Blick. 294

Teil IV CSS-Positionierung -- Kästchen verschieben. 295

16. Kästchen verschieben mit 'position'. 297

16.1. Überblick: CSS und Positionierung. 297

16.2. 'Flow' -- die Seite ist ein langer, ruhiger Fluss. 298

16.3. Versetzt weiterfließen -- 'position: relative'. 301

16.4. Raus aus dem Fluss -- 'position: absolute'. 302

16.5. Absolute Positionierung auf der Beispielsite. 304

16.6. Wie ein Fels in der Brandung -- 'position: fixed'. 309

16.7. Positionierte Boxen und der 'z-index'. 311

16.8. Auf einen Blick. 314

17. Kästchen verschieben mit 'float' und 'clear'. 315

17.1. Text um Bilder fließen lassen. 315

17.2. Praktisch -- CSS-Klassen zum Floaten. 319

17.3. Floats beenden mit 'clear'. 321

17.4. Floats mit mehreren Boxen. 324

17.5. Zusammenfassung: Besonderheiten beim Floaten. 329

17.6. Auf einen Blick. 330

18. Containing Floats -- gefloatete Elemente umschließen. 331

18.1. Die Beispielseite zum Umschließen von Floats. 331

18.2. Das Problem: Gefloatete Elemente ragen nach unten heraus. 334

18.3. Fünf Methoden zum Umschließen von Floats. 336

18.4. Methode 1: Float einschließen mit 'clear'. 337

18.5. Methode 2: Set a float to fix a float. 338

18.6. Methode 3: Ohne 'float' und 'clear' -- 'overflow: hidden'. 340

18.7. Methode 4: Auch ohne 'float' und 'clear' -- 'display:table'. 341

18.8. Methode 5: Easy Clearing -- die Sache mit dem Punkt. 342

18.9. Die Galerieseite in die Beispielsite einbauen. 346

18.10. Auf einen Blick. 350

19. Eine floatbasierte horizontale Navigation. 351

19.1. Vorbereitungen für die floatbasierte Navigation. 352

19.2. Schritt 1: Den Navigationsbereich gestalten. 353

19.3. Schritt 2: Die Links in der Navigation gestalten. 355

19.4. Schritt 3: Aktive Links hervorheben und Hover-Effekt erstellen. 356

19.5. Schritt 4: CSS-Sprites -- mehrere Grafiken in einer. 357

19.6. Das komplette CSS für die Navigation im Überblick. 360

19.7. Auf einen Blick. 362

Teil V Mehrspaltige Layouts mit CSS. 363

20. Media Queries -- eine mobile Version erstellen. 365

20.1. Bestandsaufname: Die Beispielseiten auf einem Smartphone. 365

20.2. Schritt 1: Die feste Layoutbreite entfernen. 367

20.3. Schritt 2: Die Anweisung 'meta viewport' hinzufügen. 369

20.4. Schritt 3: Optimierung von Kopfbereich und Formular. 370

20.5. Schritt 4: Media Query für große Bildschirme. 373

20.6. Auf einen Blick. 379

21. Zweispaltiges Layout mit 'float' und 'margin'. 381

21.1. Mehrspaltigkeit ist in CSS 2 eigentlich eine Illusion. 382

21.2. Festes Layout mit 'float' und 'margin'. 385

21.3. Flexibles Layout mit fester Navigationsspalte. 395

21.4. Flexibles Layout mit flexibler Navigationsspalte. 399

21.5. Exkurs: Die globale Wirkung von 'clear' und der BFC. 404

21.6. Auf einen Blick. 408

22. Weitere mehrspaltige Layoutmethoden. 409

22.1. Der Infobereich -- ein zusätzlicher Layoutbereich. 409

22.2. Das feste Layout flexibilisieren. 415

22.3. Ein dreispaltiges Layout mit vertikaler Navigation. 417

22.4. 'Bäumchen wechsel dich' für die Layoutbereiche. 424

22.5. Ein dreispaltiges Layout mit negativem Margin. 427

22.6. Auf einen Blick. 434

23. Patchwork -- Flicken im CSS. 437

23.1. Patches und Hacks. 437

23.2. Der Internet Explorer. 438

23.3. Conditional Comments in Aktion. 441

23.4. Die Beispielseiten im IE 7 und IE8. 443

23.5. Auf einen Blick. 445

Teil VI Tipps und Tricks. 447

24. Suchfunktion, Dropdown und HTML5. 449

24.1. Eine Suchfunktion für Ihre Site. 449

24.2. Dropdown -- horizontale Navigation zum Rausklappen. 457

24.3. Die neuen HTML5-Elemente für die Layoutbereiche. 464

24.4. Auf einen Blick. 468

25. Nützliche Programme und Websites. 469

25.1. Die Browser. 469

25.2. Browserzubehör -- praktische Add-ons. 471

25.3. Editoren für HTML und CSS. 475

25.4. FTP -- Veröffentlichen von Webseiten. 477

25.5. Editoren zum Bearbeiten von Grafiken. 477

25.6. Referenzen und Online-Quellen. 478

Index. 481