CSS Kochbuch by O'Reilly -- Read -- Imperial Library of Trantor

Index

CSS Kochbuch

Vorwort

Zielgruppe Was Sie schon wissen sollten Inhalte dieses Buchs Typografische Konventionen Codebeispiele zu diesem Buch Benutzung der Codebeispiele Danksagungen

1. Allgemeines

1.1 Einführung 1.2 CSS und HTML zusammen verwenden

Problem Lösung Diskussion Siehe auch

1.3 Verschiedene Selektoren für die Zuweisung von Stilen

Problem Lösung Diskussion

Typen-Selektoren Klassen-Selektoren ID-Selektoren Nachkommen-Selektoren (Kontext-Selektoren) Kind-Selektoren Universeller Selektor Selektor für benachbarte Geschwisterelemente Attribut-Selektoren Pseudoklassen Pseudoelemente

Siehe auch

1.4 Class- und id-Attribute richtig einsetzen

Problem Lösung Diskussion Siehe auch

1.5 CSS-Eigenschaften

Problem Lösung Diskussion Siehe auch

1.6 Das Boxmodell

Problem Lösung Diskussion Siehe auch

1.7 Dokumententypen und ihre Auswirkungen auf die Browserdarstellung

Problem Lösung Diskussion Siehe auch

1.8 Eine Webseite mit Stildefinitionen versehen

Problem Lösung Diskussion

Sinnvolle Verwendung von Inline-Stilen Sinnvoller Einsatz von internen Stylesheets

Siehe auch

1.9 Stylesheets für verschiedene Ausgabemedien

Problem Lösung Diskussion Siehe auch

1.10 Kommentare im CSS-Code

Problem Lösung Diskussion Siehe auch

1.11 Den Inhalt eines Stylesheets richtig strukturieren

Problem Lösung Diskussion Siehe auch

1.12 Stylesheet-Dateien organisieren

Problem Lösung Diskussion Siehe auch

1.13 Kurzschrift-Eigenschaften

Problem Lösung Diskussion Siehe auch

1.14 Alternative Stylesheets verwenden

Problem Lösung Diskussion Siehe auch

1.15 Bilder von Text umfließen lassen

Problem Lösung Diskussion Siehe auch

1.16 Absolute Positionierung

Problem Lösung Diskussion Siehe auch

1.17 Relative Positionierung

Problem Lösung Diskussion Siehe auch

1.18 CSS in Adobe Dreamweaver verwenden

Problem Lösung Diskussion Siehe auch

1.19 CSS mit Microsoft Expression Web Designer erstellen

Problem Lösung Diskussion Siehe auch

2. Typografie für das Web

2.1 Einführung 2.2 Schriftarten festlegen

Problem Lösung Diskussion Siehe auch

2.3 Schriftgrößen und -maße festlegen

Problem Lösung Diskussion

Längeneinheiten Relative Längeneinheiten Schriftgrößen mit dem Wert null oder mit negativen Werten

Siehe auch

2.4 Schriftgrößen besser kontrollieren

Problem Lösung Diskussion

Pixel verwenden Barrierefreiheit und Webtypografie Schlüsselwörter für Schriftgrößen verwenden Schriftgrößen mit em-Einheiten kontrollieren

Siehe auch

2.5 Schriftgrößen selbst festlegen

Problem Lösung Diskussion Siehe auch

2.6 Text zentrieren

Problem Lösung Diskussion Siehe auch

2.7 Text im Blocksatz darstellen

Problem Lösung Diskussion Siehe auch

2.8 Leerraum zwischen Überschriften und Absätzen entfernen

Problem Lösung Diskussion Siehe auch

2.9 Versalien zu Beginn eines Absatzes

Problem Lösung Diskussion Siehe auch

2.10 Größere und zentrierte Versalien

Problem Lösung Diskussion Siehe auch

2.11 Bilder als Versalien

Problem Lösung Diskussion Siehe auch

2.12 Überschriften mit Stil

Problem Lösung Diskussion Siehe auch

2.13 Überschriften mit Rahmen

Problem Lösung Diskussion Siehe auch

2.14 Überschriftentext mit einem Bild versehen

Problem Lösung Diskussion Siehe auch

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

Problem Lösung Diskussion Siehe auch

2.16 »Pull-Quotes« mit Rahmen

Problem Lösung Diskussion Siehe auch

2.17 »Pull-Quotes« mit Bildern

Problem Lösung Diskussion Siehe auch

2.18 Die erste Zeile eines Absatzes einrücken

Problem Lösung Diskussion Siehe auch

2.19 Ganze Absätze einrücken

Problem Lösung Diskussion Siehe auch

2.20 Hängende Einzüge

Problem Lösung Diskussion

Hängende Einzüge sicher vornehmen Doppelte hängende Einzüge

Siehe auch

2.21 Die erste Zeile eines Absatzes mit Stildefinitionen versehen

Problem Lösung Diskussion Siehe auch

2.22 Die erste Zeile eines Absatzes mit einem Bild versehen

Problem Lösung Diskussion Siehe auch

2.23 Textteile hervorheben

Problem Lösung Diskussion Siehe auch

2.24 Zeilenabstände ändern

Problem Lösung Diskussion Siehe auch

2.25 HTML-Text mit Grafiken überlagern

Problem Lösung Diskussion Siehe auch

2.26 Text mit Schatten hinterlegen

Problem Lösung Diskussion Siehe auch

2.27 Den Abstand zwischen Buchstaben und Wörtern anpassen

Problem Lösung Diskussion Siehe auch

3. Bilder

3.1 Einleitung 3.2 Bilder mit Rahmen versehen

Problem Lösung Diskussion Siehe auch

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

Problem Lösung Diskussion Siehe auch

3.4 Nicht gekachelte Hintergrundbilder

Problem Lösung Diskussion Siehe auch

3.5 Hintergrundbilder wiederholen

Problem Lösung Siehe auch

3.6 Hintergrundbilder positionieren

Problem Lösung Diskussion Siehe auch

3.7 Mehrere Hintergrundbilder für einen CSS-Selektor definieren

Problem Lösung Diskussion Siehe auch

3.8 Das Hintergrundbild verankern

Problem Lösung Diskussion Siehe auch

3.9 Durchscheinende Hintergründe für HTML-Text

Problem Lösung Diskussion Siehe auch

3.10 HTML-Text durch ein Bild ersetzen

Problem Lösung Diskussion

Ursprung der Bildersetzungsmethode Nachteil der FIR-Methode Die Phark-Bildersetzungsmethode Bildersetzung mit CSS 3

Siehe auch

3.11 HTML-Text mit Flash ersetzen

Problem Lösung Diskussion Siehe auch

3.12 Mehrere PNGs mit transparentem Alphakanal verwenden

Problem Lösung Diskussion Siehe auch

3.13 Panoramabilder

Problem Lösung Diskussion Siehe auch

3.14 Verschiedene Bildformate miteinander kombinieren

Problem Lösung Diskussion Siehe auch

3.15 Abgerundete Ecken bei Spalten mit fester Breite

Problem Lösung Diskussion Siehe auch

3.16 Abgerundete Ecken (Sliding Doors-Technik)

Problem Lösung Diskussion Siehe auch

3.17 Abgerundete Ecken (Mountaintop-Technik)

Problem Lösung Diskussion Siehe auch

3.18 Abgerundete Ecken mit JavaScript

Problem Lösung Diskussion

Verschiedene Farben Verschiedene Größen Unterschiedliche Elemente Bestimmte Ecken

Siehe auch

3.19 Bilder mit einem Schatten versehen

Problem Lösung Diskussion Siehe auch

3.20 Bilder mit weichen Schattenwürfen versehen

Problem Lösung Diskussion Siehe auch

3.21 Skalierbare Bilder

Problem Lösung Diskussion Siehe auch

3.22 Sprechblasen

Problem Lösung Diskussion Siehe auch

3.23 Den Diebstahl Ihrer Bilder verhindern

Problem Lösung Diskussion

Die Image Toolbar von Microsoft Kein Bild ist wirklich sicher

Siehe auch

3.24 Bilder automatisch mit Reflexionen versehen

Problem Lösung Diskussion

Anpassungsmöglichkeiten Bekannte Browserprobleme

Siehe auch

3.25 Sprites zum Speichern von Icons verwenden

Problem Lösung Diskussion Siehe auch

4. Seitenelemente

4.1 Einführung 4.2 Seitenränder entfernen

Problem Lösung Diskussion Siehe auch

4.3 Farbige Scrollbalken

Problem Lösung Diskussion Siehe auch

4.4 Elemente auf einer Webseite zentrieren

Problem Lösung Diskussion

Tabellen Bilder Vertikale Zentrierung

Siehe auch

4.5 Seitenränder

Problem Lösung Diskussion Siehe auch

4.6 Eine horizontale Trennlinie anpassen

Problem Lösung Diskussion Siehe auch

4.7 Eine Lightbox verwenden

Problem Lösung Diskussion

Die Dateien einrichten Diaschauen Bekannte Browserprobleme

Siehe auch

5. Listen

5.1 Einführung 5.2 Die Formatierung einer Liste ändern

Problem Lösung Diskussion Siehe auch

5.3 Browserübergreifende Einrückungen

Problem Lösung Diskussion Siehe auch

5.4 Listeneinträge voneinander trennen

Problem Lösung Diskussion Siehe auch

5.5 Eigene Aufzählungszeichen für Listeneinträge

Problem Lösung Diskussion Siehe auch

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

Problem Lösung Diskussion Siehe auch

5.7 Große Grafiken als Aufzählungszeichen verwenden

Problem Lösung Diskussion Siehe auch

5.8 Die Darstellung einer Liste durch Grafiken verstärken

Problem Lösung Diskussion Siehe auch

5.9 Listeneinträge als Inline-Elemente darstellen

Problem Lösung Diskussion Siehe auch

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

Problem Lösung Diskussion Siehe auch

5.11 Das Aufzählungszeichen innerhalb des Eintrags darstellen

Problem Lösung Diskussion Siehe auch

6. Links und Navigation

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

Problem Lösung Diskussion Siehe auch

6.3 Linkfarben anpassen

Problem Lösung Diskussion Siehe auch

6.4 Unterschiedliche Linkfarben für bestimmte Teile einer Seite

Problem Lösung Diskussion Siehe auch

6.5 Icons am Ende von Links einfügen

Problem Lösung Diskussion Siehe auch

6.6 Alternative Cursorsymbole

Problem Lösung Diskussion Siehe auch

6.7 Rollover-Effekte ohne JavaScript

Problem Lösung Diskussion Siehe auch

6.8 Textbasierte Navigationsmenüs und Rollover-Effekte kombinieren

Problem Lösung Diskussion Siehe auch

6.9 Horizontale Navigationsmenüs

Problem Lösung Diskussion Siehe auch

6.10 Navigationsmenüs mit Tastatursteuerung

Problem Lösung Diskussion Siehe auch

6.11 Hierarchische Navigation

Problem Lösung Diskussion Siehe auch

6.12 Grafische Rollover-Effekte

Problem Lösung Diskussion Siehe auch

6.13 Aufklappbare Navigationsmenüs

Problem Lösung Diskussion Siehe auch

6.14 Kontextmenüs

Problem Lösung Diskussion Siehe auch

6.15 Tool Tips

Problem Lösung Diskussion Siehe auch

6.16 Dynamische visuelle Menüs

Problem Lösung Diskussion Siehe auch

6.17 Dynamische Stildefinitionen

Problem Lösung Diskussion

CSS-basierte aufklappbare Navigationsmenüs ohne JavaScript

Siehe auch

7. Formulare

7.1 Einführung 7.2 Den Leerraum um ein Formular herum anpassen

Problem Lösung Diskussion Siehe auch

7.3 Stildefinitionen für Eingabeelemente

Problem Lösung Diskussion Siehe auch

7.4 Verschiedene Stile für unterschiedliche Eingabeelemente des gleichen Formulars

Problem Lösung Diskussion Siehe auch

7.5 Stildefinitionen für textarea-Elemente

Problem Lösung Diskussion Siehe auch

7.6 Stildefinitionen für Aufklappmenüs und Auswahllisten

Problem Lösung Diskussion Siehe auch

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

Problem Lösung Diskussion

Attribute für das Suchfeld Best Practices

Siehe auch

7.8 Stildefinitionen für Buttons

Problem Lösung Diskussion Siehe auch

7.9 Grafikbasierte Submit-Buttons

Problem Lösung Diskussion Siehe auch

7.10 Buttons, die nur einmal benutzt werden können

Problem Lösung Diskussion Siehe auch

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

Problem Lösung Diskussion Siehe auch

7.12 Einfache HTML-Textlinks als Submit-Buttons verwenden

Problem Lösung Diskussion Siehe auch

7.13 Ein Webformular ohne Tabellen

Problem Lösung Diskussion Siehe auch

7.14 Zweispaltige Formulare ohne Tabellen

Problem Lösung Diskussion Siehe auch

7.15 Eingabefelder hervorheben

Problem Lösung Diskussion Siehe auch

7.16 Benötigte Formularfelder hervorheben

Problem Lösung Diskussion Siehe auch

7.17 Tastaturkürzel in Webformularen hervorheben

Problem Lösung Diskussion Siehe auch

7.18 Zusammengehörende Formularelemente gruppieren

Problem Lösung Diskussion Siehe auch

7.19 Formulardaten wie bei einem Tabellenkalkulationsdokument eingeben

Problem Lösung Diskussion Siehe auch

7.20 Designbeispiel: ein Login-Formular 7.21 Designbeispiel: ein Registrierungsformular

8. Tabellen

8.1 Einführung 8.2 Den Zellzwischenraum einstellen

Problem Lösung Diskussion Siehe auch

8.3 Rahmen und Innenabstände für Zellen einstellen

Problem Lösung Diskussion Siehe auch

8.4 Stildefinitionen für Tabellenbeschriftungen

Problem Lösung Diskussion Siehe auch

8.5 Stildefinitionen für Tabelleninhalte

Problem Lösung Diskussion Siehe auch

8.6 Stildefinitionen für die Tabellenüberschriften

Problem Lösung Diskussion Siehe auch

8.7 Leerraum zwischen Bildern und dem unteren Zellenrand entfernen

Problem Lösung Diskussion

Dokumententyp-Definitionen

Siehe auch

8.8 Zwischenräume zwischen den Tabellenzellen entfernen

Problem Lösung Diskussion Siehe auch

8.9 Abwechselnde Hintergrundfarben für Tabellenspalten

Problem Lösung Diskussion

JavaScript Serverseitige Lösungen

Siehe auch

8.10 «Aktive» Tabellenzeilen hervorheben

Problem Lösung Diskussion Siehe auch

8.11 Designbeispiel: ein eleganter Kalender

9. Seitenlayouts

9.1 Einführung 9.2 Einspaltige Layouts

Problem Lösung Diskussion Siehe auch

9.3 Zweispaltige Layouts

Problem Lösung Diskussion Siehe auch

9.4 Zweispaltige Layouts mit festen Breiten

Problem Lösung Diskussion Siehe auch

9.5 Flexible mehrspaltige Layouts mit Floats

Problem Lösung Diskussion Siehe auch

9.6 Mehrspaltige Layouts mit festen Breiten mit Hilfe von Floats

Problem Lösung Diskussion Siehe auch

9.7 Mehrspaltige Layouts mit flexiblen Breiten mit Hilfe von Positionierung

Problem Lösung Diskussion Siehe auch

9.8 Mehrspaltige Layouts mit festen Breiten mit Hilfe von Positionierung

Problem Lösung Diskussion Siehe auch

9.9 Spalten mit Floats in beliebiger Reihenfolge darstellen

Problem Lösung Diskussion

Der Markup-Code Die Spalten festlegen Leerraum schaffen Die Reihenfolge der Spalten ändern Algorithmus für das Seitenlayout «Gefälschte» Spalten Eine alternative Lösung

Siehe auch

9.10 Asymmetrische Layouts

Problem Lösung Diskussion Siehe auch

10. Druck

10.1 Einführung 10.2 Eine druckfreundliche Seite erstellen

Problem Lösung Diskussion

Zuweisung von Medientypen mit @import Zuweisung von Medientypen mit @media

Siehe auch

10.3 Ein Webformular für den Ausdruck aufbereiten

Problem Lösung Diskussion

Formularelemente mit Attribut-Selektoren unterscheiden Mehr Benutzerfreundlichkeit

Siehe auch

10.4 Nach einem Link den URI anzeigen

Problem Lösung Diskussion

Vor Root-Links den Domainnamen anzeigen

Siehe auch

10.5 Sonderzeichen vor Links einfügen

Problem Lösung Diskussion Siehe auch

10.6 Designbeispiel: Eine druckfreundliche Seite mit CSS

Die Seite für Schwarz-Weiß-Ausdrucke vorbereiten Die Hauptüberschrift gestalten Stildefinitionen für die Artikelüberschrift und die Verfasserzeile Teaser einsetzen URIs nach einem Link darstellen Zum Schluss die Fußzeile

11. Hacks, Workarounds und Fehlersuche

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

Problem Lösung Diskussion

Der Star-HTML-Hack Ein weiterer Ansatz: Tanteks Boxmodell-Hack

Siehe auch

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

Problem Lösung Diskussion Siehe auch

11.4 Hintergrundbilder in Internet Explorer 6 für Windows verankern

Problem Lösung Diskussion Siehe auch

11.5 Conditional Comments

Problem Lösung Diskussion Siehe auch

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

Problem Lösung Diskussion Siehe auch

11.7 Ein intelligentes System zur Verwaltung von CSS-Hacks

Problem Lösung Diskussion Siehe auch

11.8 Diagnose von CSS-Fehlern und Browserproblemen

Problem Lösung Diskussion Siehe auch

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

Problem Lösung

Wenn Sie einen PC besitzen Wenn Sie einen Macintosh besitzen Wenn Sie eine Linux-Workstation besitzen

Diskussion Siehe auch

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

Problem Lösung Diskussion Siehe auch

11.11 Websites mit einem textbasierten Browser testen

Problem Lösung Diskussion Siehe auch

12. Design mit CSS

12.1 Einführung 12.2 Extrem stark vergrößerter Text

Problem Lösung Diskussion Siehe auch

12.3 Unerwartete Unstimmigkeiten erzeugen

Problem Lösung Diskussion Siehe auch

12.4 Scheinbar unpassende Dinge kombinieren, um Kontraste zu erzeugen

Problem Lösung Diskussion Siehe auch

12.5 Kontraste verwenden, um den Blick zu führen

Problem Lösung Diskussion Siehe auch

12.6 Auf genügend hohen Farbkontrast überprüfen

Problem Lösung Diskussion Siehe auch

12.7 Zitate hervorheben

Problem Lösung Diskussion Siehe auch

A. Ressourcen

Allgemeine CSS-Anleitungen

Dave Sheas »Roadmap to Standards« (Wegweiser zur Umsetzung von Webstandards) CSS-Anleitung von Web »Page Design for Designers« Grundlagen der Positionierung von Elementen mit CSS (»Basics of CSS Positioning«) auf der Community MX-Website Anleitung für die Verwendung von CSS-Floats Anleitung für CSS-Selektoren SELFHTML

Design-Ressourcen

A List Apart BlueRobot.com Layout Reservoir CSS-Edge CSS Zen Garden CSS-Layouttechniken von Glish.com Microformats Real World Style SimpleQuizes Typetester

Diskussionsgruppen

Babble List css-discuss css-design CSS 4 You; XHTMLFORUM - Das Forum für XHTML und CSS Englischsprachige Newsgroup zu CSS www-style (Die Stylesheets-Mailingliste des W3C)

Referenzen

CSS Support Charts Tabelle zur Browser-Kompatibilität auf CSS 4 You Die DTD-Empfehlungen des W3C Die CSS-Seiten des W3C Die CSS 2.1-Spezifikation Die HTML 4.01-Spezifikation Die XHTML 1.0-Spezifikation

Werkzeuge

BrowserCam iCapture SelectORacle Der CSS-Validator des W3C Der HTML-Validator des W3C Browsererweiterung für Webentwickler Xyle Scope

B. CSS 2.1-Eigenschaften und proprietäre Erweiterungen C. CSS 2.1-Selektoren, Pseudoklassen und Pseudoelemente D. Stildefinitionen für Formularelemente

Checkboxen

Felder für das Hochladen von Dateien Radio-Buttons Texteingabefelder Auswahllisten mit Mehrfachauswahl Auswahllisten mit Einfachauswahl Submit-Buttons Mehrzeilige Eingabebereiche

Kolophon

← Prev
Back
Next →

← Prev
Back
Next →