CSS Kochbuch

Inhalt

Vorwort

Zielgruppe

Was Sie schon wissen sollten

Inhalte dieses Buchs

Typografische Konventionen

Codebeispiele zu diesem Buch

Benutzung der Codebeispiele

Danksagungen

1 Allgemeines

1.0 Einführung

1.1 CSS und HTML zusammen verwenden

1.2 Verschiedene Selektoren für die Zuweisung von Stilen

1.3 Class- und id-Attribute richtig einsetzen

1.4 CSS-Eigenschaften

1.5 Das Boxmodell

1.6 Dokumententypen und ihre Auswirkungen auf die Browserdarstellung

1.7 Eine Webseite mit Stildefinitionen versehen

1.8 Stylesheets für verschiedene Ausgabemedien

1.9 Kommentare im CSS-Code

1.10 Den Inhalt eines Stylesheets richtig strukturieren

1.11 Stylesheet-Dateien organisieren

1.12 Kurzschrift-Eigenschaften

1.13 Alternative Stylesheets verwenden

1.14 Bilder von Text umfließen lassen

1.15 Absolute Positionierung

1.16 Relative Positionierung

1.17 CSS in Adobe Dreamweaver verwenden

1.18 CSS mit Microsoft Expression Web Designer erstellen

2 Typografie für das Web

2.0 Einführung

2.1 Schriftarten festlegen

2.2 Schriftgrößen und -maße festlegen

2.3 Schriftgrößen besser kontrollieren

2.4 Schriftgrößen selbst festlegen

2.5 Text zentrieren

2.6 Text im Blocksatz darstellen

2.7 Leerraum zwischen Überschriften und Absätzen entfernen

2.8 Versalien zu Beginn eines Absatzes

2.9 Größere und zentrierte Versalien

2.10 Bilder als Versalien

2.11 Überschriften mit Stil

2.12 Überschriften mit Rahmen

2.13 Überschriftentext mit einem Bild versehen

2.14 Gestaltung einer »Pull-Quote« mit HTML-Text

2.15 »Pull-Quotes« mit Rahmen

2.16 »Pull-Quotes« mit Bildern

2.17 Die erste Zeile eines Absatzes einrücken

2.18 Ganze Absätze einrücken

2.19 Hängende Einzüge

2.20 Die erste Zeile eines Absatzes mit Stildefinitionen versehen

2.21 Die erste Zeile eines Absatzes mit einem Bild versehen

2.22 Textteile hervorheben

2.23 Zeilenabstände ändern

2.24 HTML-Text mit Grafiken überlagern

2.25 Text mit Schatten hinterlegen

2.26 Den Abstand zwischen Buchstaben und Wörtern anpassen

3 Bilder

3.0 Einleitung

3.1 Bilder mit Rahmen versehen

3.2 Standardmäßig für Bilder verwendete Rahmen entfernen

3.3 Nicht gekachelte Hintergrundbilder

3.4 Hintergrundbilder wiederholen

3.5 Hintergrundbilder positionieren

3.6 Mehrere Hintergrundbilder für einen CSS-Selektor definieren

3.7 Das Hintergrundbild verankern

3.8 Durchscheinende Hintergründe für HTML-Text

3.9 HTML-Text durch ein Bild ersetzen

3.10 HTML-Text mit Flash ersetzen

3.11 Mehrere PNGs mit transparentem Alphakanal verwenden

3.12 Panoramabilder

3.13 Verschiedene Bildformate miteinander kombinieren

3.14 Abgerundete Ecken bei Spalten mit fester Breite

3.15 Abgerundete Ecken (Sliding Doors-Technik)

3.16 Abgerundete Ecken (Mountaintop-Technik)

3.17 Abgerundete Ecken mit JavaScript

3.18 Bilder mit einem Schatten versehen

3.19 Bilder mit weichen Schattenwürfen versehen

3.20 Skalierbare Bilder

3.21 Sprechblasen

3.22 Den Diebstahl Ihrer Bilder verhindern

3.23 Bilder automatisch mit Reflexionen versehen

3.24 Sprites zum Speichern von Icons verwenden

4 Seitenelemente

4.0 Einführung

4.1 Seitenränder entfernen

4.2 Farbige Scrollbalken

4.3 Elemente auf einer Webseite zentrieren

4.4 Seitenränder

4.5 Eine horizontale Trennlinie anpassen

4.6 Eine Lightbox verwenden

5 Listen

5.0 Einführung

5.1 Die Formatierung einer Liste ändern

5.2 Browserübergreifende Einrückungen

5.3 Listeneinträge voneinander trennen

5.4 Eigene Aufzählungszeichen für Listeneinträge

5.5 Eigene Grafiken als Marker für Listeneinträge verwenden

5.6 Große Grafiken als Aufzählungszeichen verwenden

5.7 Die Darstellung einer Liste durch Grafiken verstärken

5.8 Listeneinträge als Inline-Elemente darstellen

5.9 Hängende Einzüge für Listen definieren

5.10 Das Aufzählungszeichen innerhalb des Eintrags darstellen

6 Links und Navigation

6.0 Einführung

6.1 Die typischen Link-Unterstreichungen entfernen ( und andere Dekorationen hinzufügen)

6.2 Linkfarben anpassen

6.3 Unterschiedliche Linkfarben für bestimmte Teile einer Seite

6.4 Icons am Ende von Links einfügen

6.5 Alternative Cursorsymbole

6.6 Rollover-Effekte ohne JavaScript

6.7 Textbasierte Navigationsmenüs und Rollover-Effekte kombinieren

6.8 Horizontale Navigationsmenüs

6.9 Navigationsmenüs mit Tastatursteuerung

6.10 Hierarchische Navigation

6.11 Grafische Rollover-Effekte

6.12 Aufklappbare Navigationsmenüs

6.13 Kontextmenüs

6.14 Tool Tips

6.15 Dynamische visuelle Menüs

6.16 Dynamische Stildefinitionen

7 Formulare

7.0 Einführung

7.1 Den Leerraum um ein Formular herum anpassen

7.2 Stildefinitionen für Eingabeelemente

7.3 Verschiedene Stile für unterschiedliche Eingabeelemente des gleichen Formulars

7.4 Stildefinitionen für textarea-Elemente

7.5 Stildefinitionen für Aufklappmenüs und Auswahllisten

7.6 Textfeld für Sucheinträge im Macintosh-Stil

7.7 Stildefinitionen für Buttons

7.8 Grafikbasierte Submit-Buttons

7.9 Buttons, die nur einmal benutzt werden können

7.10 Submit-Buttons, die wie einfacher HTML-Text dargestellt werden

7.11 Einfache HTML-Textlinks als Submit-Buttons verwenden

7.12 Ein Webformular ohne Tabellen

7.13 Zweispaltige Formulare ohne Tabellen

7.14 Eingabefelder hervorheben

7.15 Benötigte Formularfelder hervorheben

7.16 Tastaturkürzel in Webformularen hervorheben

7.17 Zusammengehörende Formularelemente gruppieren

7.18 Formulardaten wie bei einem Tabellenkalkulationsdokument eingeben

7.19 Designbeispiel: ein Login-Formular

7.20 Designbeispiel: ein Registrierungsformular

8 Tabellen

8.0 Einführung

8.1 Den Zellzwischenraum einstellen

8.2 Rahmen und Innenabstände für Zellen einstellen

8.3 Stildefinitionen für Tabellenbeschriftungen

8.4 Stildefinitionen für Tabelleninhalte

8.5 Stildefinitionen für die Tabellenüberschriften

8.6 Leerraum zwischen Bildern und dem unteren Zellenrand entfernen

8.7 Zwischenräume zwischen den Tabellenzellen entfernen

8.8 Abwechselnde Hintergrundfarben für Tabellenspalten

8.9 »Aktive« Tabellenzeilen hervorheben

8.10 Designbeispiel: ein eleganter Kalender

9 Seitenlayouts

9.0 Einführung

9.1 Einspaltige Layouts

9.2 Zweispaltige Layouts

9.3 Zweispaltige Layouts mit festen Breiten

9.4 Flexible mehrspaltige Layouts mit Floats

9.5 Mehrspaltige Layouts mit festen Breiten mit Hilfe von Floats

9.6 Mehrspaltige Layouts mit flexiblen Breiten mit Hilfe von Positionierung

9.7 Mehrspaltige Layouts mit festen Breiten mit Hilfe von Positionierung

9.8 Spalten mit Floats in beliebiger Reihenfolge darstellen

9.9 Asymmetrische Layouts

10 Druck

10.0 Einführung

10.1 Eine druckfreundliche Seite erstellen

10.2 Ein Webformular für den Ausdruck aufbereiten

10.3 Nach einem Link den URI anzeigen

10.4 Sonderzeichen vor Links einfügen

10.5 Designbeispiel: Eine druckfreundliche Seite mit CSS

11 Hacks, Workarounds und Fehlersuche

11.0 Einführung

11.1 Besondere Werte für Internet Explorer 5.x für Windows

11.2 Das Flackern beim Laden von Webseiten in Internet Explorer 5. x für Windows verhindern

11.3 Hintergrundbilder in Internet Explorer 6 für Windows verankern

11.4 Conditional Comments

11.5 CSS-Regeln vor Internet Explorer 5 für Macintosh verbergen

11.6 Ein intelligentes System zur Verwaltung von CSS-Hacks

11.7 Diagnose von CSS-Fehlern und Browserproblemen

11.8 Webdesigns mit nur einem Computer für mehrere Plattformen testen

11.9 Mehrere Versionen von Internet Explorer für Windows auf einem Computer installieren

11.10 Websites mit einem textbasierten Browser testen

12 Design mit CSS

12.0 Einführung

12.1 Extrem stark vergrößerter Text

12.2 Unerwartete Unstimmigkeiten erzeugen

12.3 Scheinbar unpassende Dinge kombinieren, um Kontraste zu erzeugen

12.4 Kontraste verwenden, um den Blick zu führen

12.5 Auf genügend hohen Farbkontrast überprüfen

12.6 Zitate hervorheben

Anhang A Ressourcen

Allgemeine CSS-Anleitungen

Design-Ressourcen

Diskussionsgruppen

Referenzen

Werkzeuge

Anhang B CSS 2.1-Eigenschaften und proprietäre Erweiterungen

Anhang C CSS 2.1-Selektoren, Pseudoklassen und Pseudoelemente

Anhang D Stildefinitionen für Formularelemente

Index