CSS Kochbuch

CSS Kochbuch

by Christopher Schmitt
Released April 2007
Publisher(s): O'Reilly Verlag
ISBN: 9783897214927

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Cascading Style Sheets (CSS) gelten als Mittel der Wahl, wenn es darum geht, die Darstellung einer Webseite unabhängig von ihrer Struktur zu entwickeln. Stylesheets haben sich zwar inzwischen als Standard für Web-Entwickler und -Designer durchgesetzt, aber ihre Handhabung ist nicht immer intuitiv. Viele Tücken wie die Inkompabilität der verschiedenen Browser können ohne die entsprechende Anleitung zu einer unliebsamen Herausforderung werden.

Aktualisiert und deutlich erweitert, wartet die zweite Auflage des CSS Kochbuchs mit dem bewährten Mix aus schnellen, praxisorientierten Lösungen und begleitenden Diskussionen auf. In über 150 Rezepten behandelt Christopher Schmitt gängige bis vertrackte CSS-Aufgaben, denen sich Webdesigner immer wieder gegenüber sehen. Den passenden Code dazu gibt es auf unserer Verlagswebsite zum Herunterladen, damit Sie ihn einfach an Ihre eigenen Bedürfnisse anpassen können.

CSS-Grundlagen

Eine Reihe von Rezepten beschäftigt sich mit grundlegenden CSS-Techniken und bietet Lösungen für verbreitete Probleme. Hier erfahren Sie Wissenswertes über den Einsatz von Klassen- und ID-Selektoren, Positionierung und Tipps rund um die Typografie fürs Web.

Fortgeschrittenere Techniken

Erfahren Sie, wie Sie Listen, Formulare und Webgrafiken mit Hilfe von CSS mit Stilen versehen. Lernen Sie, wie Sie Links und Navigationen optimal gestalten und Effekte wie Rollover, aufklappbare Menüs oder Tooltips mit CSS erzeugen.

Design und Seitenlayout

Cascading Style Sheets bieten umfangreiche Möglichkeiten, das Layout einer Seite zu steuern. Ein-, zwei und mehrspaltige Layouts mit festen oder flexiblen Breiten bieten ein umfassendes Repertoire, aus dem Sie schöpfen können. Damit Ihr Design auch im Ausdruck gut aussieht, beschäftigt sich ein Kapitel mit druckfreundlichen Seiten, die mit CSS realisiert werden.

Referenzen

Im Anhang des Buchs finden Sie nützliche Referenzen der CSS2.1-Eigenschaften, Selektoren, Pseudoklassen und Pseudoelementen.

Table of contents

  1. CSS Kochbuch
    1. Vorwort
      1. Zielgruppe
      2. Was Sie schon wissen sollten
      3. Inhalte dieses Buchs
      4. Typografische Konventionen
      5. Codebeispiele zu diesem Buch
      6. Benutzung der Codebeispiele
      7. Danksagungen
    2. 1. Allgemeines
      1. 1.1 Einführung
      2. 1.2 CSS und HTML zusammen verwenden
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      3. 1.3 Verschiedene Selektoren für die Zuweisung von Stilen
        1. Problem
        2. Lösung
        3. Diskussion
          1. Typen-Selektoren
          2. Klassen-Selektoren
          3. ID-Selektoren
          4. Nachkommen-Selektoren (Kontext-Selektoren)
          5. Kind-Selektoren
          6. Universeller Selektor
          7. Selektor für benachbarte Geschwisterelemente
          8. Attribut-Selektoren
          9. Pseudoklassen
          10. Pseudoelemente
        4. Siehe auch
      4. 1.4 Class- und id-Attribute richtig einsetzen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      5. 1.5 CSS-Eigenschaften
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      6. 1.6 Das Boxmodell
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      7. 1.7 Dokumententypen und ihre Auswirkungen auf die Browserdarstellung
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      8. 1.8 Eine Webseite mit Stildefinitionen versehen
        1. Problem
        2. Lösung
        3. Diskussion
          1. Sinnvolle Verwendung von Inline-Stilen
          2. Sinnvoller Einsatz von internen Stylesheets
        4. Siehe auch
      9. 1.9 Stylesheets für verschiedene Ausgabemedien
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      10. 1.10 Kommentare im CSS-Code
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      11. 1.11 Den Inhalt eines Stylesheets richtig strukturieren
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      12. 1.12 Stylesheet-Dateien organisieren
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      13. 1.13 Kurzschrift-Eigenschaften
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      14. 1.14 Alternative Stylesheets verwenden
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      15. 1.15 Bilder von Text umfließen lassen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      16. 1.16 Absolute Positionierung
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      17. 1.17 Relative Positionierung
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      18. 1.18 CSS in Adobe Dreamweaver verwenden
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      19. 1.19 CSS mit Microsoft Expression Web Designer erstellen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
    3. 2. Typografie für das Web
      1. 2.1 Einführung
      2. 2.2 Schriftarten festlegen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      3. 2.3 Schriftgrößen und -maße festlegen
        1. Problem
        2. Lösung
        3. Diskussion
          1. Längeneinheiten
          2. Relative Längeneinheiten
          3. Schriftgrößen mit dem Wert null oder mit negativen Werten
        4. Siehe auch
      4. 2.4 Schriftgrößen besser kontrollieren
        1. Problem
        2. Lösung
        3. Diskussion
          1. Pixel verwenden
          2. Barrierefreiheit und Webtypografie
          3. Schlüsselwörter für Schriftgrößen verwenden
          4. Schriftgrößen mit em-Einheiten kontrollieren
        4. Siehe auch
      5. 2.5 Schriftgrößen selbst festlegen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      6. 2.6 Text zentrieren
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      7. 2.7 Text im Blocksatz darstellen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      8. 2.8 Leerraum zwischen Überschriften und Absätzen entfernen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      9. 2.9 Versalien zu Beginn eines Absatzes
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      10. 2.10 Größere und zentrierte Versalien
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      11. 2.11 Bilder als Versalien
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      12. 2.12 Überschriften mit Stil
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      13. 2.13 Überschriften mit Rahmen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      14. 2.14 Überschriftentext mit einem Bild versehen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      15. 2.15 Gestaltung einer »Pull-Quote« mit HTML-Text
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      16. 2.16 »Pull-Quotes« mit Rahmen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      17. 2.17 »Pull-Quotes« mit Bildern
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      18. 2.18 Die erste Zeile eines Absatzes einrücken
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      19. 2.19 Ganze Absätze einrücken
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      20. 2.20 Hängende Einzüge
        1. Problem
        2. Lösung
        3. Diskussion
          1. Hängende Einzüge sicher vornehmen
          2. Doppelte hängende Einzüge
        4. Siehe auch
      21. 2.21 Die erste Zeile eines Absatzes mit Stildefinitionen versehen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      22. 2.22 Die erste Zeile eines Absatzes mit einem Bild versehen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      23. 2.23 Textteile hervorheben
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      24. 2.24 Zeilenabstände ändern
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      25. 2.25 HTML-Text mit Grafiken überlagern
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      26. 2.26 Text mit Schatten hinterlegen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      27. 2.27 Den Abstand zwischen Buchstaben und Wörtern anpassen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
    4. 3. Bilder
      1. 3.1 Einleitung
      2. 3.2 Bilder mit Rahmen versehen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      3. 3.3 Standardmäßig für Bilder verwendete Rahmen entfernen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      4. 3.4 Nicht gekachelte Hintergrundbilder
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      5. 3.5 Hintergrundbilder wiederholen
        1. Problem
        2. Lösung
        3. Siehe auch
      6. 3.6 Hintergrundbilder positionieren
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      7. 3.7 Mehrere Hintergrundbilder für einen CSS-Selektor definieren
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      8. 3.8 Das Hintergrundbild verankern
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      9. 3.9 Durchscheinende Hintergründe für HTML-Text
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      10. 3.10 HTML-Text durch ein Bild ersetzen
        1. Problem
        2. Lösung
        3. Diskussion
          1. Ursprung der Bildersetzungsmethode
          2. Nachteil der FIR-Methode
          3. Die Phark-Bildersetzungsmethode
          4. Bildersetzung mit CSS 3
        4. Siehe auch
      11. 3.11 HTML-Text mit Flash ersetzen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      12. 3.12 Mehrere PNGs mit transparentem Alphakanal verwenden
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      13. 3.13 Panoramabilder
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      14. 3.14 Verschiedene Bildformate miteinander kombinieren
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      15. 3.15 Abgerundete Ecken bei Spalten mit fester Breite
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      16. 3.16 Abgerundete Ecken (Sliding Doors-Technik)
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      17. 3.17 Abgerundete Ecken (Mountaintop-Technik)
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      18. 3.18 Abgerundete Ecken mit JavaScript
        1. Problem
        2. Lösung
        3. Diskussion
          1. Verschiedene Farben
          2. Verschiedene Größen
          3. Unterschiedliche Elemente
          4. Bestimmte Ecken
        4. Siehe auch
      19. 3.19 Bilder mit einem Schatten versehen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      20. 3.20 Bilder mit weichen Schattenwürfen versehen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      21. 3.21 Skalierbare Bilder
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      22. 3.22 Sprechblasen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      23. 3.23 Den Diebstahl Ihrer Bilder verhindern
        1. Problem
        2. Lösung
        3. Diskussion
          1. Die Image Toolbar von Microsoft
          2. Kein Bild ist wirklich sicher
        4. Siehe auch
      24. 3.24 Bilder automatisch mit Reflexionen versehen
        1. Problem
        2. Lösung
        3. Diskussion
          1. Anpassungsmöglichkeiten
          2. Bekannte Browserprobleme
        4. Siehe auch
      25. 3.25 Sprites zum Speichern von Icons verwenden
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
    5. 4. Seitenelemente
      1. 4.1 Einführung
      2. 4.2 Seitenränder entfernen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      3. 4.3 Farbige Scrollbalken
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      4. 4.4 Elemente auf einer Webseite zentrieren
        1. Problem
        2. Lösung
        3. Diskussion
          1. Tabellen
          2. Bilder
          3. Vertikale Zentrierung
        4. Siehe auch
      5. 4.5 Seitenränder
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      6. 4.6 Eine horizontale Trennlinie anpassen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      7. 4.7 Eine Lightbox verwenden
        1. Problem
        2. Lösung
        3. Diskussion
          1. Die Dateien einrichten
          2. Diaschauen
          3. Bekannte Browserprobleme
        4. Siehe auch
    6. 5. Listen
      1. 5.1 Einführung
      2. 5.2 Die Formatierung einer Liste ändern
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      3. 5.3 Browserübergreifende Einrückungen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      4. 5.4 Listeneinträge voneinander trennen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      5. 5.5 Eigene Aufzählungszeichen für Listeneinträge
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      6. 5.6 Eigene Grafiken als Marker für Listeneinträge verwenden
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      7. 5.7 Große Grafiken als Aufzählungszeichen verwenden
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      8. 5.8 Die Darstellung einer Liste durch Grafiken verstärken
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      9. 5.9 Listeneinträge als Inline-Elemente darstellen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      10. 5.10 Hängende Einzüge für Listen definieren
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      11. 5.11 Das Aufzählungszeichen innerhalb des Eintrags darstellen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
    7. 6. Links und Navigation
      1. 6.1 Einführung
      2. 6.2 Die typischen Link-Unterstreichungen entfernen (und andere Dekorationen hinzufügen)
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      3. 6.3 Linkfarben anpassen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      4. 6.4 Unterschiedliche Linkfarben für bestimmte Teile einer Seite
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      5. 6.5 Icons am Ende von Links einfügen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      6. 6.6 Alternative Cursorsymbole
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      7. 6.7 Rollover-Effekte ohne JavaScript
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      8. 6.8 Textbasierte Navigationsmenüs und Rollover-Effekte kombinieren
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      9. 6.9 Horizontale Navigationsmenüs
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      10. 6.10 Navigationsmenüs mit Tastatursteuerung
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      11. 6.11 Hierarchische Navigation
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      12. 6.12 Grafische Rollover-Effekte
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      13. 6.13 Aufklappbare Navigationsmenüs
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      14. 6.14 Kontextmenüs
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      15. 6.15 Tool Tips
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      16. 6.16 Dynamische visuelle Menüs
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      17. 6.17 Dynamische Stildefinitionen
        1. Problem
        2. Lösung
        3. Diskussion
          1. CSS-basierte aufklappbare Navigationsmenüs ohne JavaScript
        4. Siehe auch
    8. 7. Formulare
      1. 7.1 Einführung
      2. 7.2 Den Leerraum um ein Formular herum anpassen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      3. 7.3 Stildefinitionen für Eingabeelemente
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      4. 7.4 Verschiedene Stile für unterschiedliche Eingabeelemente des gleichen Formulars
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      5. 7.5 Stildefinitionen für textarea-Elemente
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      6. 7.6 Stildefinitionen für Aufklappmenüs und Auswahllisten
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      7. 7.7 Textfeld für Sucheinträge im Macintosh-Stil
        1. Problem
        2. Lösung
        3. Diskussion
          1. Attribute für das Suchfeld
          2. Best Practices
        4. Siehe auch
      8. 7.8 Stildefinitionen für Buttons
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      9. 7.9 Grafikbasierte Submit-Buttons
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      10. 7.10 Buttons, die nur einmal benutzt werden können
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      11. 7.11 Submit-Buttons, die wie einfacher HTML-Text dargestellt werden
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      12. 7.12 Einfache HTML-Textlinks als Submit-Buttons verwenden
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      13. 7.13 Ein Webformular ohne Tabellen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      14. 7.14 Zweispaltige Formulare ohne Tabellen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      15. 7.15 Eingabefelder hervorheben
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      16. 7.16 Benötigte Formularfelder hervorheben
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      17. 7.17 Tastaturkürzel in Webformularen hervorheben
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      18. 7.18 Zusammengehörende Formularelemente gruppieren
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      19. 7.19 Formulardaten wie bei einem Tabellenkalkulationsdokument eingeben
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      20. 7.20 Designbeispiel: ein Login-Formular
      21. 7.21 Designbeispiel: ein Registrierungsformular
    9. 8. Tabellen
      1. 8.1 Einführung
      2. 8.2 Den Zellzwischenraum einstellen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      3. 8.3 Rahmen und Innenabstände für Zellen einstellen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      4. 8.4 Stildefinitionen für Tabellenbeschriftungen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      5. 8.5 Stildefinitionen für Tabelleninhalte
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      6. 8.6 Stildefinitionen für die Tabellenüberschriften
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      7. 8.7 Leerraum zwischen Bildern und dem unteren Zellenrand entfernen
        1. Problem
        2. Lösung
        3. Diskussion
          1. Dokumententyp-Definitionen
        4. Siehe auch
      8. 8.8 Zwischenräume zwischen den Tabellenzellen entfernen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      9. 8.9 Abwechselnde Hintergrundfarben für Tabellenspalten
        1. Problem
        2. Lösung
        3. Diskussion
          1. JavaScript
          2. Serverseitige Lösungen
        4. Siehe auch
      10. 8.10 «Aktive» Tabellenzeilen hervorheben
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      11. 8.11 Designbeispiel: ein eleganter Kalender
    10. 9. Seitenlayouts
      1. 9.1 Einführung
      2. 9.2 Einspaltige Layouts
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      3. 9.3 Zweispaltige Layouts
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      4. 9.4 Zweispaltige Layouts mit festen Breiten
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      5. 9.5 Flexible mehrspaltige Layouts mit Floats
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      6. 9.6 Mehrspaltige Layouts mit festen Breiten mit Hilfe von Floats
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      7. 9.7 Mehrspaltige Layouts mit flexiblen Breiten mit Hilfe von Positionierung
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      8. 9.8 Mehrspaltige Layouts mit festen Breiten mit Hilfe von Positionierung
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      9. 9.9 Spalten mit Floats in beliebiger Reihenfolge darstellen
        1. Problem
        2. Lösung
        3. Diskussion
          1. Der Markup-Code
          2. Die Spalten festlegen
          3. Leerraum schaffen
          4. Die Reihenfolge der Spalten ändern
          5. Algorithmus für das Seitenlayout
          6. «Gefälschte» Spalten
          7. Eine alternative Lösung
        4. Siehe auch
      10. 9.10 Asymmetrische Layouts
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
    11. 10. Druck
      1. 10.1 Einführung
      2. 10.2 Eine druckfreundliche Seite erstellen
        1. Problem
        2. Lösung
        3. Diskussion
          1. Zuweisung von Medientypen mit @import
          2. Zuweisung von Medientypen mit @media
        4. Siehe auch
      3. 10.3 Ein Webformular für den Ausdruck aufbereiten
        1. Problem
        2. Lösung
        3. Diskussion
          1. Formularelemente mit Attribut-Selektoren unterscheiden
          2. Mehr Benutzerfreundlichkeit
        4. Siehe auch
      4. 10.4 Nach einem Link den URI anzeigen
        1. Problem
        2. Lösung
        3. Diskussion
          1. Vor Root-Links den Domainnamen anzeigen
        4. Siehe auch
      5. 10.5 Sonderzeichen vor Links einfügen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      6. 10.6 Designbeispiel: Eine druckfreundliche Seite mit CSS
        1. Die Seite für Schwarz-Weiß-Ausdrucke vorbereiten
        2. Die Hauptüberschrift gestalten
        3. Stildefinitionen für die Artikelüberschrift und die Verfasserzeile
        4. Teaser einsetzen
        5. URIs nach einem Link darstellen
        6. Zum Schluss die Fußzeile
    12. 11. Hacks, Workarounds und Fehlersuche
      1. 11.1 Einführung
      2. 11.2 Besondere Werte für Internet Explorer 5.x für Windows
        1. Problem
        2. Lösung
        3. Diskussion
          1. Der Star-HTML-Hack
          2. Ein weiterer Ansatz: Tanteks Boxmodell-Hack
        4. Siehe auch
      3. 11.3 Das Flackern beim Laden von Webseiten in Internet Explorer 5.x für Windows verhindern
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      4. 11.4 Hintergrundbilder in Internet Explorer 6 für Windows verankern
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      5. 11.5 Conditional Comments
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      6. 11.6 CSS-Regeln vor Internet Explorer 5 für Macintosh verbergen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      7. 11.7 Ein intelligentes System zur Verwaltung von CSS-Hacks
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      8. 11.8 Diagnose von CSS-Fehlern und Browserproblemen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      9. 11.9 Webdesigns mit nur einem Computer für mehrere Plattformen testen
        1. Problem
        2. Lösung
          1. Wenn Sie einen PC besitzen
          2. Wenn Sie einen Macintosh besitzen
          3. Wenn Sie eine Linux-Workstation besitzen
        3. Diskussion
        4. Siehe auch
      10. 11.10 Mehrere Versionen von Internet Explorer für Windows auf einem Computer installieren
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      11. 11.11 Websites mit einem textbasierten Browser testen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
    13. 12. Design mit CSS
      1. 12.1 Einführung
      2. 12.2 Extrem stark vergrößerter Text
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      3. 12.3 Unerwartete Unstimmigkeiten erzeugen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      4. 12.4 Scheinbar unpassende Dinge kombinieren, um Kontraste zu erzeugen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      5. 12.5 Kontraste verwenden, um den Blick zu führen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      6. 12.6 Auf genügend hohen Farbkontrast überprüfen
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
      7. 12.7 Zitate hervorheben
        1. Problem
        2. Lösung
        3. Diskussion
        4. Siehe auch
    14. A. Ressourcen
      1. Allgemeine CSS-Anleitungen
        1. Dave Sheas »Roadmap to Standards« (Wegweiser zur Umsetzung von Webstandards)
        2. CSS-Anleitung von Web »Page Design for Designers«
        3. Grundlagen der Positionierung von Elementen mit CSS (»Basics of CSS Positioning«) auf der Community MX-Website
        4. Anleitung für die Verwendung von CSS-Floats
        5. Anleitung für CSS-Selektoren
        6. SELFHTML
      2. Design-Ressourcen
        1. A List Apart
        2. BlueRobot.com Layout Reservoir
        3. CSS-Edge
        4. CSS Zen Garden
        5. CSS-Layouttechniken von Glish.com
        6. Microformats
        7. Real World Style
        8. SimpleQuizes
        9. Typetester
      3. Diskussionsgruppen
        1. Babble List
        2. css-discuss
        3. css-design
        4. CSS 4 You; XHTMLFORUM - Das Forum für XHTML und CSS
        5. Englischsprachige Newsgroup zu CSS
        6. www-style (Die Stylesheets-Mailingliste des W3C)
      4. Referenzen
        1. CSS Support Charts
        2. Tabelle zur Browser-Kompatibilität auf CSS 4 You
        3. Die DTD-Empfehlungen des W3C
        4. Die CSS-Seiten des W3C
        5. Die CSS 2.1-Spezifikation
        6. Die HTML 4.01-Spezifikation
        7. Die XHTML 1.0-Spezifikation
      5. Werkzeuge
        1. BrowserCam
        2. iCapture
        3. SelectORacle
        4. Der CSS-Validator des W3C
        5. Der HTML-Validator des W3C
        6. Browsererweiterung für Webentwickler
        7. Xyle Scope
    15. B. CSS 2.1-Eigenschaften und proprietäre Erweiterungen
    16. C. CSS 2.1-Selektoren, Pseudoklassen und Pseudoelemente
    17. D. Stildefinitionen für Formularelemente
      1. Checkboxen
        1. Felder für das Hochladen von Dateien
        2. Radio-Buttons
        3. Texteingabefelder
        4. Auswahllisten mit Mehrfachauswahl
        5. Auswahllisten mit Einfachauswahl
        6. Submit-Buttons
        7. Mehrzeilige Eingabebereiche
    18. Kolophon

Product information

  • Title: CSS Kochbuch
  • Author(s): Christopher Schmitt
  • Release date: April 2007
  • Publisher(s): O'Reilly Verlag
  • ISBN: 9783897214927