O'REILLT Beijing Cambridge Farnham Köln Paris Sebastopol Taipei Tokyo. CSS Kochbuch. Christopher Schmitt. 2. Auflage

Transkript

1 2. Auflage CSS Kochbuch Christopher Schmitt Deutsche Übersetzung von Jörgen W. Lang O'REILLT Beijing Cambridge Farnham Köln Paris Sebastopol Taipei Tokyo

2 Inhalt Vorwort XI 1 Allgemeines CSS und HTML zusammen verwenden Verschiedene Selektoren für die Zuweisung von Stilen Class- und id-attribute richtig einsetzen CSS-Eigenschaften Das Boxmodell Dokumententypen und ihre Auswirkungen auf die Browserdarstellung Eine Webseite mit Stildefinitionen versehen Stylesheets für verschiedene Ausgabemedien Kommentare im CSS-Code Den Inhalt eines Stylesheets richtig strukturieren Stylesheet-Dateien organisieren Kurzschrift-Eigenschaften Alternative Stylesheets verwenden Bilder von Text umfließen lassen Absolute Positionierung Relative Positionierung CSS in Adobe Dreamweaver verwenden CSS mit Microsoft Expression Web Designer erstellen 60 2 TypografiefürdasWeb Schriftarten festlegen Schriftgrößen und -maße festlegen Schriftgrößen besser kontrollieren Schriftgrößen selbst festlegen 75 I V

3 2.5 Text zentrieren Text im Blocksatz darstellen Leerraum zwischen Überschriften und Absätzen entfernen Versalien zu Beginn eines Absatzes Größere und zentrierte Versalien Bilder als Versalien Überschriften mit Stil Überschriften mit Rahmen Überschriftentext mit einem Bild versehen Gestaltung einer»pull-quote«mit HTML-Text »Pull-Quotes«mit Rahmen »Pull-Quotes«mit Bildern Die erste Zeile eines Absatzes einrücken Ganze Absätze einrücken Hängende Einzüge Die erste Zeile eines Absatzes mit Stildefinitionen versehen Die erste Zeile eines Absatzes mit einem Bild versehen Textteile hervorheben Zeilenabstände ändern HTML-Text mit Grafiken überlagern Text mit Schatten hinterlegen Den Abstand zwischen Buchstaben und Wörtern anpassen Bilder Bilder mit Rahmen versehen Standardmäßig für Bilder verwendete Rahmen entfernen Nicht gekachelte Hintergrundbilder Hintergrundbilder wiederholen Hintergrundbilder positionieren Mehrere Hintergrundbilder für einen CSS-Selektor definieren Das Hintergrundbild verankern Durchscheinende Hintergründe für HTML-Text HTML-Text durch ein Bild ersetzen HTML-Text mit Flash ersetzen Mehrere PNGs mit transparentem Alphakanal verwenden Panoramabilder Verschiedene Bildformate miteinander kombinieren Abgerundete Ecken bei Spalten mit fester Breite Abgerundete Ecken (Sliding Doors-Technik) 152 VI Inhalt

4 3.16 Abgerundete Ecken (Mountaintop-Technik) Abgerundete Ecken mit JavaScript Bilder mit einem Schatten versehen Bilder mit weichen Schattenwürfen versehen Skalierbare Bilder Sprechblasen Den Diebstahl Ihrer Bilder verhindern Bilder automatisch mit Reflexionen versehen Sprites zum Speichern von kons verwenden Seitenelemente Seitenränder entfernen Farbige Scrollbalken Elemente auf einer Webseite zentrieren Seitenränder Eine horizontale Trennlinie anpassen Eine Lightbox verwenden Listen Die Formatierung einer Liste ändern Browserübergreifende Einrückungen Listeneinträge voneinander trennen Eigene Aufzählungszeichen für Listeneinträge Eigene Grafiken als Marker für Listeneinträge verwenden Große Grafiken als Aufzählungszeichen verwenden Die Darstellung einer Liste durch Grafiken verstärken Listeneinträge als Inline-Elemente darstellen Hängende Einzüge für Listen definieren Das Aufzählungszeichen innerhalb des Eintrags darstellen Links und Navigation Die typischen Link-Unterstreichungen entfernen (und andere Dekorationen hinzufügen) Linkfarben anpassen Unterschiedliche Linkfarben für bestimmte Teile einer Seite kons am Ende von Links einfügen Alternative Cursorsymbole Rollover-Effekte ohne JavaScript Textbasierte Navigationsmenüs und Rollover-Effekte kombinieren Inhalt VII

5 6.8 Horizontale Navigationsmenüs Navigationsmenüs mit Tastatursteuerung Hierarchische Navigation Grafische Rollover-Effekte Aufklappbare Navigationsmenüs Kontextmenüs Tool Tips Dynamische visuelle Menüs Dynamische Stildefinitionen Formulare Den Leerraum um ein Formular herum anpassen Stildefinitionen für Eingabeelemente Verschiedene Stile für unterschiedliche Eingabeelemente des gleichen Formulars Stildefinitionen für textarea-elemente Stildefinitionen für Aufklappmenüs und Auswahllisten Textfeld für Sucheinträge im Macintosh-Stil Stildefinitionen für Buttons Grafikbasierte Submit-Buttons Buttons, die nur einmal benutzt werden können Submit-Buttons, die wie einfacher HTML-Text dargestellt werden Einfache HTML-Textlinks als Submit-Buttons verwenden Ein Webformular ohne Tabellen Zweispaltige Formulare ohne Tabellen Eingabefelder hervorheben Benötigte Formularfelder hervorheben Tastaturkürzel in Webformularen hervorheben Zusammengehörende Formularelemente gruppieren Formulardaten wie bei einem Tabellenkalkulationsdokument eingeben Designbeispiel: ein Login-Formular Designbeispiel: ein Registrierungsformular Tabellen Den Zellzwischenraum einstellen Rahmen und Innenabstände für Zellen einstellen Stildefinitionen für Tabellenbeschriftungen Stildefinitionen für Tabelleninhalte 330 VIII Inhalt

6 8.5 Stildefinitionen für die Tabellenüberschriften Leerraum zwischen Bildern und dem unteren Zellenrand entfernen Zwischenräume zwischen den Tabellenzellen entfernen Abwechselnde Hintergrundfarben für Tabellenspalten »Aktive«Tabellenzeilen hervorheben Designbeispiel: ein eleganter Kalender Seitenlayouts Einspaltige Layouts Zweispaltige Layouts Zweispaltige Layouts mit festen Breiten Flexible mehrspaltige Layouts mit Floats Mehrspaltige Layouts mit festen Breiten mit Hilfe von Floats Mehrspaltige Layouts mit flexiblen Breiten mit Hilfe von Positionierung Mehrspaltige Layouts mit festen Breiten mit Hilfe von Positionierung Spalten mit Floats in beliebiger Reihenfolge darstellen Asymmetrische Layouts Druck Eine druckfreundliche Seite erstellen Ein Webformular für den Ausdruck aufbereiten Nach einem Link den URI anzeigen Sonderzeichen vor Links einfügen Designbeispiel: Eine druckfreundliche Seite mit CSS Hacks, Workarounds und Fehlersuche Besondere Werte für Internet Explorer 5.x für Windows Das Flackern beim Laden von Webseiten in Internet Explorer 5.x für Windows verhindern Hintergrundbilder in Internet Explorer 6 für Windows verankern Conditional Comments CSS-Regeln vor Internet Explorer 5 für Macintosh verbergen Ein intelligentes System zur Verwaltung von CSS-Hacks Diagnose von CSS-Fehlern und Browserproblemen Webdesigns mit nur einem Computer für mehrere Plattformen testen Mehrere Versionen von Internet Explorer für Windows auf einem Computer installieren Websites mit einem textbasierten Browser testen 436 Inhalt IX

7 12 DesignmitCSS Extrem stark vergrößerter Text Unerwartete Unstimmigkeiten erzeugen Scheinbar unpassende Dinge kombinieren, um Kontraste zu erzeugen Kontraste verwenden, um den Blick zu führen Auf genügend hohen Farbkontrast überprüfen Zitate hervorheben 450 A Ressourcen 453 B CSS 2.1-Eigenschaften und proprietäre Erweiterungen 461 C CSS 2.1-Selektoren, Pseudoklassen und Pseudoelemente 475 D Stildefinitionen für Formularelemente 478 Index 505 X Inhalt