CSS Kochbuch, 3rd Edition

CSS Kochbuch, 3rd Edition

by Joergen Lang, Christopher Schmitt
Released April 2012
Publisher(s): O'Reilly Verlag
ISBN: 97833897213241

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. Nachdem lange Jahre CSS 2.1 der maßgebliche Standard war, wird derzeit der Übergang zu CSS3 eingeläutet. Zeit also, sich mit den neuen Entwicklungen zu beschäftigen.

In über 150 Rezepten behandeln die Autoren Christopher Schmitt und Jørgen W. Lang gängige bis vertrackte CSS-Aufgaben, denen sich Webdesigner immer wieder gegenüber sehen. Dort, wo es bereits eine breite Browserunterstützung gibt, werden CSS3-basierte Lösungen vorgestellt und die neuen Eigenschaften im praktischen Einsatz gezeigt. Alle anderen Rezepte werden auf Basis von CSS 2.1 umgesetzt.

Table of contents

  1. CSS Kochbuch
  2. Vorwort
  3. Einführung
    1. An wen sich dieses Buch richtet
    2. Was Sie schon wissen sollten
      1. CSS3 und HTML5
      2. Aktuelle Browser
      3. Benennung von Klassen und IDs
      4. Dokumentkodierung
    3. Inhalte dieses Buchs
    4. Typografische Konventionen
    5. Codebeispiele zu diesem Buch
    6. Benutzung der Codebeispiele
    7. Danksagungen von Christopher Schmitt
    8. Danksagungen von Jørgen W. Lang
  4. 1. Allgemeines
    1. Einführung
    2. 1.1 Eine Webseite mit Stildefinitionen versehen
      1. Problem
      2. Lösung 1
      3. Lösung 2
      4. Lösung 3
      5. Diskussion
      6. Siehe auch
    3. 1.2 Den Aufbau einer CSS-Regel verstehen
      1. Problem
      2. Lösung
      3. Diskussion
        1. Selektoren
        2. Deklarationen
        3. Eigenschaften
        4. Kurzschrifteigenschaften
        5. Werte
      4. Siehe auch
    4. 1.3 Verschiedene Selektoren für die Zuweisung von Stilen verwenden
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    5. 1.4 Selektoren gruppieren
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    6. 1.5 Alle Elemente auf einmal auswählen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    7. 1.6 Bestimmte Elemente nach ihrem Namen auswählen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    8. 1.7 Nachfahrenelemente auswählen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    9. 1.8 Kindelemente auswählen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    10. 1.9 Benachbarte Geschwisterelemente auswählen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    11. 1.10 Regeln für allgemeine Geschwisterelemente definieren
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    12. 1.11 Elemente nach ihren Attributen auswählen
      1. Problem
      2. Lösung
      3. Diskussion
        1. Neue Attributselektoren in CSS3
        2. Attributselektoren gruppieren
      4. Siehe auch
    13. 1.12 Elemente aufgrund von Klassen- und ID-Attributen auswählen
      1. Problem
      2. Lösung
      3. Diskussion
        1. Klassenselektoren
        2. ID-Selektoren
        3. Klassen- oder ID-Attribute?
      4. Siehe auch
    14. 1.13 Mehrere Klassen auf einmal angeben
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    15. 1.14 Regeln für unbenannte Dokumentteile definieren
      1. Problem
      2. Lösung
      3. Diskussion
        1. CSS 2.1-Pseudoklassen
        2. CSS 2.1-Pseudoelemente
        3. Neue Pseudoklassen in CSS3
          1. Das letzte Element einer Liste
          2. Jedes zweite Element
        4. Internet Explorer und CSS3-Selektoren
      4. Siehe auch
    16. 1.15 Werte für die neue Pseudoklasse :nth-child() und ihre Verwandten richtig angeben
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    17. 1.16 Das Boxmodell begreifen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    18. 1.17 Darstellungsrollen verstehen
      1. Problem
      2. Lösung
      3. Diskussion
        1. Blockelemente
        2. Inline-Elemente
        3. Anonyme Inline-Elemente
        4. Inline-Block-Elemente
        5. Ersetzte Elemente
        6. Die Eigenschaft display
        7. display: none
      4. Siehe auch
    19. 1.18 Die Vererbung nutzen
      1. Problem
      2. Lösung
      3. Diskussion
        1. Der Wert inherit
      4. Siehe auch
    20. 1.19 Die Reihenfolge von Stylesheets: die Kaskade
      1. Problem
      2. Lösung
      3. Diskussion
        1. Spezifität
        2. !important
      4. Siehe auch
    21. 1.20 Darstellungskonflikte anhand der Spezifität lösen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    22. 1.21 Regeln mit besonderer Priorität versehen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    23. 1.22 Dokumenttypen und ihre Auswirkungen auf die Browserdarstellung
      1. Problem
      2. Lösung
      3. Diskussion
        1. HTML5
      4. Siehe auch
    24. 1.23 Stylesheets für verschiedene Ausgabemedien definieren
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    25. 1.24 Den Inhalt eines Stylesheets richtig strukturieren
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
  5. 2. Grundrezepte
    1. Einführung
    2. 2.1 Längeneinheiten verstehen
      1. Problem
      2. Lösung
      3. Diskussion
        1. Absolute Längeneinheiten
        2. Relative Längeneinheiten
        3. rem-Einheiten in CSS3
        4. Andere relative Längeneinheiten
        5. Prozentwerte
      4. Siehe auch
    3. 2.2 Höhen und Breiten definieren
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    4. 2.3 Farben definieren
      1. Problem
      2. Lösung
      3. Diskussion
        1. Benannte Farben
        2. Hexadezimale Werte
        3. rgb- und rgba-Werte
        4. hsla()-Werte
      4. Siehe auch
    5. 2.4 Externe Ressourcen einbinden
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    6. 2.5 Außenabstände definieren
      1. Problem
      2. Lösung
      3. Diskussion
        1. Automatische Außenabstände
        2. Negative Außenabstände
        3. Zusammengefasste vertikale Außenabstände
      4. Siehe auch
    7. 2.6 Innenabstände definieren
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    8. 2.7 Elemente mit einem Rahmen versehen
      1. Problem
      2. Lösung
      3. Diskussion
        1. Einzeleigenschaften für Breite, Stil und Farbe
        2. Kurzschrifteigenschaften für einzelne Rahmenseiten
        3. Schlüsselwörter
      4. Siehe auch
    9. 2.8 Hintergrundbilder verwenden
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    10. 2.9 Die Wiederholung von Hintergrundbildern steuern
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    11. 2.10 Hintergrundbilder positionieren
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    12. 2.11 Das Hintergrundbild verankern
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    13. 2.12 Mehrere Hintergrundbilder für ein Element definieren
      1. Problem
      2. Lösung 1
      3. Lösung 2
      4. Diskussion
      5. Siehe auch
    14. 2.13 Hintergrundbilder auf den gesamten Ansichtsbereich ausdehnen
      1. Problem
      2. Lösung 1
      3. Lösung 2
      4. Diskussion
      5. Siehe auch
    15. 2.14 Definitionen für Hintergründe in einer Deklaration zusammenfassen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    16. 2.15 Durchscheinende Hintergründe definieren
      1. Problem
      2. Lösung 1
      3. Lösung 2
      4. Diskussion
      5. Siehe auch
    17. 2.16 Elemente positionieren
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    18. 2.17 Elemente absolut positionieren
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    19. 2.18 Elemente relativ positionieren
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    20. 2.19 Elemente ineinander positionieren
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    21. 2.20 Elemente im Ansichtsbereich verankern
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    22. 2.21 Elemente voreinander anordnen
      1. Problem
      2. Lösung
      3. Diskussion
        1. Stapelungskontext
      4. Siehe auch
    23. 2.22 Elemente scrollbar machen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    24. 2.23 Elemente umfließen lassen
      1. Problem
      2. Lösung
      3. Diskussion
        1. Das Umfließen von Elementen verhindern
      4. Siehe auch
    25. 2.24 Elemente horizontal zentrieren
      1. Problem
      2. Lösung 1: automatische seitliche Außenabstände
      3. Lösung 2: Prozentwerte
      4. Lösung 3: absolute Werte
      5. Lösung 4: Inline-Elemente und Fließtext zentrieren
      6. Diskussion
      7. Siehe auch
    26. 2.25 Elemente vertikal zentrieren
      1. Problem
      2. Allgemeines
      3. Lösung 1: table-cell
      4. Lösung 2: Prozentwerte
      5. Lösung 3: absolute Werte
      6. Diskussion
      7. Siehe auch
  6. 3. Typografie für das Web
    1. Einführung
    2. 3.1 Schriftarten festlegen
      1. Problem
      2. Lösung
        1. Serifenlose Schriften
        2. Serifenschriften:
        3. Festbreitenschriften:
        4. Kursive Schriften:
      3. Diskussion
        1. Die Liste der websicheren Schriften erweitern
      4. Siehe auch
    3. 3.2 Schriftgrößen und -maße festlegen
      1. Problem
      2. Lösung
      3. Diskussion
        1. Absolute Werte
        2. Relative Werte
        3. Vererbung
        4. Schlüsselwörter
        5. rem-Einheiten
      4. Siehe auch
    4. 3.3 Die Schriftfarbe ändern
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    5. 3.4 Das Schriftgewicht ändern
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    6. 3.5 Den Schriftstil anpassen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    7. 3.6 Text in Kapitälchen darstellen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    8. 3.7 Text in Groß- und Kleinschreibung darstellen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    9. 3.8 Zeilenhöhen ändern
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    10. 3.9 Den Abstand zwischen Buchstaben und Wörtern anpassen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    11. 3.10 Die Kurzschrifteigenschaft font verwenden
      1. Problem
      2. Lösung
      3. Diskussion
        1. Die Beliebigkeitsregel
        2. Mindestanforderungen
        3. Überschreiben zuvor definierter Werte
        4. Systemzeichensätze
      4. Siehe auch
    12. 3.11 Webfonts verwenden
      1. Problem
      2. Lösung 1
      3. Lösung 2
      4. Diskussion
        1. Font Squirrel
        2. Google Web Fonts-API
        3. Alternativen
      5. Siehe auch
    13. 3.12 Die Textausrichtung festlegen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    14. 3.13 Zeilenumbrüche steuern
      1. Problem
      2. Lösung 1
      3. Lösung 2
      4. Lösung 3
      5. Diskussion
        1. word-wrap
        2. overflow-x: auto
        3. Weiche Trennzeichen (Soft Hyphens)
      6. Siehe auch
    15. 3.14 Text mit Über-, Unter- oder Durchstreichungen versehen
      1. Problem
      2. Lösung 1
      3. Diskussion
        1. Unter- und Überstreichungen per border-bottom und border-top
      4. Siehe auch
    16. 3.15 Grafische Unterstreichungen verwenden
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    17. 3.16 Sonderzeichen aus einem anderen Zeichensatz einfügen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    18. 3.17 Typografisch korrekte Anführungszeichen verwenden
      1. Problem
      2. Lösung
      3. Diskussion
        1. Und was ist mit »quotes«?
      4. Siehe auch
    19. 3.18 Hängende Initialen zu Beginn eines Absatzes einfügen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    20. 3.19 Bilder als Initialen einsetzen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    21. 3.20 Stile für die erste Absatzzeile definieren
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    22. 3.21 Überschriften mit Grafiken überlagern
      1. Problem
      2. Lösung
      3. Diskussion
        1. Internet Explorer
      4. Siehe auch
    23. 3.22 Die Gestaltung von ausgewähltem Text anpassen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    24. 3.23 Text mit einem Schatten versehen
      1. Problem
      2. Lösung
      3. Diskussion
        1. Die Transparenz des Schattens steuern
        2. Geprägte Schrift
        3. Textschatten für den Internet Explorer
        4. Noch eine Möglichkeit
      4. Siehe auch
    25. 3.24 Hoch- und tiefgestellten Text ohne Grundlinienversatz darstellen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    26. 3.25 Die Schreibrichtung festlegen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    27. 3.26 Pull Quotes gestalten
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
  7. 4. Bilder
    1. Einführung
    2. 4.1 Bilder mit Rahmen versehen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    3. 4.2 Rahmen um Bilder nicht darstellen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    4. 4.3 Die Rahmenfarbe ändern, wenn sich der Mauszeiger über dem Bild befindet
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    5. 4.4 Skalierbare Bilder
      1. Problem
      2. Lösung
      3. Diskussion
        1. Die Skalierung beschränken
      4. Siehe auch
    6. 4.5 Bilder mit einer Bildunterschrift versehen
      1. Problem
      2. Lösung
      3. Diskussion
        1. Das HTML5-Element figure
        2. Die Beschriftung vor dem Bild anzeigen
        3. Internet Explorer 7 und inline-block
      4. Siehe auch
    7. 4.6 Text durch Grafiken ersetzen
      1. Problem
      2. Lösung 1: Phark (Off-Left-Technik)
      3. Lösung 2: Gilder/Levin
      4. Lösung 3: FIR
      5. Lösung 4: CSS3-Eigenschaft content
      6. Diskussion
        1. Phark (Off-Left-Technik)
        2. Gilder/Levin
        3. FIR (Fahrner Image Replacement)
        4. CSS3-Eigenschaft content
      7. Siehe auch
    8. 4.7 Bilder als Panorama präsentieren
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    9. 4.8 Verschiedene Bildformate miteinander kombinieren
      1. Problem
      2. Lösung
      3. Diskussion
        1. Bildformate
      4. Siehe auch
    10. 4.9 Sprites zum Speichern von Icons verwenden
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
  8. 5. Listen
    1. Einführung
    2. 5.1 Browserübergreifende Einrückungen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    3. 5.2 Spezielle Aufzählungszeichen verwenden
      1. Problem
      2. Lösung
      3. Diskussion
        1. Aufzählungszeichen verbergen
      4. Siehe auch
    4. 5.3 Eigene textbasierte Aufzählungszeichen für Listeneinträge verwenden
      1. Problem
      2. Lösung
      3. Diskussion
        1. Die Angaben für content
        2. Fallback-Lösungen
      4. Siehe auch
    5. 5.4 Aufzählungszeichen mit einer eigenen Farbe versehen
      1. Problem
      2. Lösung 1
      3. Lösung 2
      4. Diskussion
      5. Siehe auch
    6. 5.5 Eigene Grafiken als Aufzählungszeichen verwenden
      1. Problem
      2. Lösung 1
      3. Lösung 2
      4. Diskussion
      5. Siehe auch
    7. 5.6 Das Aufzählungszeichen innerhalb des Listeneintrags darstellen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    8. 5.7 Die Kurzschrifteigenschaft list-style verwenden
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    9. 5.8 Trennlinien für Listeneinträge erstellen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    10. 5.9 Listeneinträge nebeneinander darstellen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    11. 5.10 Stile für Definitionslisten
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    12. 5.11 Stile für den ersten oder letzten Eintrag einer Liste definieren
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
  9. 6. Links und Navigation
    1. Einführung
    2. 6.1 Die Darstellung der verschiedenen Linkzustände anpassen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    3. 6.2 Unterschiedliche Linkfarben für bestimmte Teile einer Seite
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    4. 6.3 Icons am Ende von Links einfügen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    5. 6.4 Tooltips mit CSS gestalten
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    6. 6.5 Dokumentteile nur bei Bedarf anzeigen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    7. 6.6 Den anklickbaren Bereich eines Links vergrößern
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    8. 6.7 Listen als Navigationsmenüs gestalten
      1. Problem
      2. Lösung
      3. Diskussion
        1. Navigationslisten mit CSS3-Eigenschaften aufwerten
      4. Siehe auch
    9. 6.8 Die aktuelle Seite hervorheben
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    10. 6.9 Eine Breadcrumb-Navigation gestalten
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    11. 6.10 Karteireiter-Navigationsmenüs
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    12. 6.11 Ein vertikales Navigationsmenü mit mehreren Ebenen erstellen
      1. Problem
      2. Lösung
      3. Diskussion
        1. Geisterstunde
      4. Siehe auch
    13. 6.12 Ein horizontales Navigationsmenü mit mehreren Ebenen erstellen
      1. Problem
      2. Lösung
      3. Diskussion
        1. Eye Candy
      4. Siehe auch
  10. 7. Formulare
    1. Einführung
    2. 7.1 Stile für Formulare definieren
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    3. 7.2 Stile für fieldset-Elemente definieren
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    4. 7.3 legend-Elemente mit Stildefinitionen versehen
      1. Problem
      2. Lösung
      3. Diskussion
        1. Firefox und lange Beschriftungen
        2. Internet Explorer und legend
        3. Internet Explorer 7
      4. Siehe auch
    5. 7.4 Die Platzierung von legend-Elementen verändern
      1. Problem
      2. Lösung
      3. Diskussion
        1. Internet Explorer vor der Version 9
      4. Siehe auch
    6. 7.5 label-Elemente gestalten
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    7. 7.6 Texteingabefelder mit CSS gestalten
      1. Problem
      2. Lösung
      3. Diskussion
        1. Neue HTML5-Elemente
        2. Safari 5.1+
      4. Siehe auch
    8. 7.7 Stildefinitionen für textarea-Elemente zuweisen
      1. Problem
      2. Lösung
      3. Diskussion
        1. Internet Explorer und Scrollbalken
        2. Gecko und Webkit
      4. Siehe auch
    9. 7.8 Stile für Checkboxen und Radiobuttons definieren
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    10. 7.9 Stildefinitionen für Auswahllisten und Aufklappmenüs
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    11. 7.10 Stildefinitionen für Buttons
      1. Problem
      2. Lösung
      3. Diskussion
        1. Eigene Stile für verschiedene Buttons
      4. Siehe auch
    12. 7.11 Grafikbasierte Buttons
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    13. 7.12 Buttons wie einfachen HTML-Text darstellen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    14. 7.13 Eingabefelder hervorheben
      1. Problem
      2. Lösung
      3. Diskussion
        1. autofocus
        2. Pseudoklassen kombinieren
        3. Internet Explorer
      4. Siehe auch
    15. 7.14 Benötigte Formularfelder hervorheben
      1. Problem
      2. Lösung 1
      3. Lösung 2
      4. Diskussion
        1. Andere Attribute und Attributwerte
      5. Siehe auch
    16. 7.15 Formularelemente zeilenweise darstellen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    17. 7.16 Serviervorschlag: ein mehrspaltiges Formular
      1. Problem
      2. Lösung
      3. Diskussion
        1. »Touche du Chef«
      4. Siehe auch
  11. 8. Tabellen
    1. Einführung
    2. 8.1 Rahmen und Innenabstände für Zellen einstellen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    3. 8.2 Den Zellzwischenraum einstellen
      1. Problem
      2. Lösung
      3. Diskussion
        1. Internet Explorer 7
        2. Zellzwischenräume entfernen: eine Alternative
      4. Siehe auch
    4. 8.3 Leerraum zwischen Bildern und dem unteren Zellenrand entfernen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    5. 8.4 Tabellenzellen individuell gestalten
      1. Problem
      2. Lösung 1
      3. Lösung 2
      4. Diskussion
        1. CSS3
      5. Siehe auch
    6. 8.5 Leere Tabellenzellen verstecken
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    7. 8.6 Stildefinitionen für die Tabellenüberschriften
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    8. 8.7 Stildefinitionen für Tabellenbeschriftungen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    9. 8.8 Rollover-Effekte für Tabellenzeilen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    10. 8.9 Tabellenzeilen individuell gestalten
      1. Problem
      2. Lösung 1
      3. Lösung 2
      4. Lösung 3
      5. Diskussion
      6. Siehe auch
    11. 8.10 Tabellenspalten gestalten
      1. Problem
      2. Lösung 1
      3. Lösung 2
      4. Lösung 3
      5. Diskussion
        1. Und was ist mit col und colgroup?
        2. Rollover-Effekte
      6. Siehe auch
    12. 8.11 Abwechselnde Hintergrundfarben für Tabellenzeilen
      1. Problem
      2. Lösung 1
      3. Lösung 2
      4. Lösung 3
      5. Diskussion
        1. JavaScript
        2. Serverseitige Lösungen
      6. Siehe auch
    13. 8.12 Tabellen mit einer festen Breite versehen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    14. 8.13 Serviervorschlag: eine Tabelle mit Stil
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
  12. 9. Drucken
    1. Einführung
    2. 9.1 Spezielle Stylesheet-Regeln für das Ausdrucken angeben
      1. Problem
      2. Lösung 1
      3. Lösung 2
      4. Lösung 3
      5. Diskussion
      6. Siehe auch
    3. 9.2 Die richtigen Längeneinheiten und Werte für das Ausdrucken verwenden
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    4. 9.3 Eine Seite für Schwarz-Weiß-Ausdrucke vorbereiten
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    5. 9.4 Nach einem Link den URI anzeigen
      1. Problem
      2. Lösung
      3. Diskussion
        1. Vor Root-Links den Domainnamen anzeigen
      4. Siehe auch
    6. 9.5 Sonderzeichen vor Links einfügen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    7. 9.6 Seitenumbrüche anlegen
      1. Problem
      2. Lösung
      3. Diskussion
        1. Von Witwen und Waisen
      4. Siehe auch
    8. 9.7 Überschriften von Tabellenspalten auf jeder Seite mitdrucken
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    9. 9.8 Ein Webformular für den Ausdruck aufbereiten
      1. Problem
      2. Lösung
      3. Diskussion
        1. Mehr Benutzerfreundlichkeit
        2. Internet Explorer
      4. Siehe auch
    10. 9.9 Bestimmte Dokumentteile nicht mit ausdrucken
      1. Problem
      2. Lösung
      3. Diskussion
        1. Der Versuch, den Ausdruck einer Seite komplett zu unterbinden
      4. Siehe auch
    11. 9.10 Das Ausdrucken von Hintergrundbildern selbst steuern
      1. Problem
      2. Lösung 1
      3. Lösung 2
      4. Diskussion
      5. Siehe auch
  13. 10. Mobile Geräte
    1. Einführung
    2. 10.1 Media Queries verwenden, um mobile und Desktop-Browser zu unterscheiden
      1. Problem
      2. Lösung
      3. Diskussion
        1. Und was ist mit dem iPad?
        2. Stylesheets für Geräte mit höherer Auflösung
        3. Media Queries und Responsive Webdesign
        4. Media Queries auch in älteren Versionen von Internet Explorer nutzen
      4. Siehe auch
    3. 10.2 Längs- oder Querformat ermitteln
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    4. 10.3 Die Größe und Skalierung des Ansichtsbereichs steuern
      1. Problem
      2. Lösung
      3. Diskussion
        1. Skalierung
        2. Mehrere Werte auf einmal angeben
      4. Siehe auch
    5. 10.4 Stile für Mobilgeräte zuerst laden
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    6. 10.5 Das Laden von Stylesheets beschleunigen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    7. 10.6 Mobile Seiten mit CSS3 schneller machen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    8. 10.7 Nicht benötigte Elemente ausblenden
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    9. 10.8 Seitenlayouts linearisieren
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    10. 10.9 Tabellen linearisieren
      1. Problem
      2. Lösung
      3. Diskussion
        1. Progressive Enhancement
      4. Siehe auch
    11. 10.10 Links als Buttons darstellen
      1. Problem
      2. Lösung
      3. Diskussion
        1. Eye Candy
      4. Siehe auch
    12. 10.11 Testen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
  14. 11. Seitenlayouts
    1. Einführung
    2. 11.1 Flexible zweispaltige Layouts erstellen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    3. 11.2 Zweispaltige Layouts mit festen Breiten erstellen
      1. Problem
      2. Lösung
      3. Diskussion
        1. HTML5
      4. Siehe auch
    4. 11.3 Flexible mehrspaltige Layouts mit Floats erstellen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    5. 11.4 Spalten mit Floats in beliebiger Reihenfolge darstellen
      1. Problem
      2. Lösung
        1. Die Reihenfolge der Spalten ändern
      3. Diskussion
        1. Leerraum schaffen
      4. Siehe auch
    6. 11.5 Faux Columns einsetzen
      1. Problem
      2. Lösung 1
      3. Lösung 2
      4. Diskussion
      5. Siehe auch
    7. 11.6 Den »heiligen Gral« verstehen
      1. Problem
      2. Lösung
      3. Diskussion
        1. Innenabstände für die Hauptspalte
      4. Siehe auch
    8. 11.7 Den Fußteil an der Unterkante des Browserfensters verankern
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    9. 11.8 Layouts mit einem »Sticky Footer« versehen
      1. Problem
      2. Lösung
      3. Diskussion
        1. Die Eigenheiten von IE8 ausbügeln
      4. Siehe auch
    10. 11.9 Grid-System benutzen
      1. Problem
      2. Lösung
      3. Diskussion
        1. Weitere Frameworks
      4. Siehe auch
    11. 11.10 Inhalte mit CSS3 auf mehrere Spalten verteilen
      1. Problem
      2. Lösung
      3. Diskussion
        1. Die übrigen Eigenschaften
        2. Floats in den Spalten platzieren
        3. Internet Explorer
      4. Siehe auch
    12. 11.11 Ausblick
      1. Problem
      2. Lösung
        1. Flexible Box Layout
        2. CSS Template Layout
        3. Grid Positioning
        4. Grid Layout
      3. Diskussion
      4. Siehe auch
  15. 12. Design mit CSS
    1. Einführung
    2. 12.1 Rollover-Effekte ohne Bilder erzeugen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    3. 12.2 Ein Farbschema für eine Website erstellen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    4. 12.3 Für ausreichenden Farbkontrast sorgen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    5. 12.4 Farbverläufe mit CSS3 definieren
      1. Problem
      2. Lösung
      3. Diskussion
        1. Lineare Farbverläufe
        2. Radiale Farbverläufe
        3. Sich wiederholende Farbverläufe
        4. Browserunterstützung
      4. Siehe auch
    6. 12.5 Transparenzen erzeugen
      1. Problem
      2. Lösung 1
      3. Lösung 2
      4. Lösung 3
      5. Lösung 4
      6. Diskussion
        1. opacity
        2. Das Schlüsselwort transparent
        3. Internet Explorer 7 und 8
      7. Siehe auch
    7. 12.6 Abgerundete Ecken mit CSS3 definieren
      1. Problem
      2. Lösung
      3. Diskussion
        1. Abgerundete Ecken für Bilder
      4. Siehe auch
    8. 12.7 Schattenwürfe mit CSS3 erzeugen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    9. 12.8 Realistische Schattenwürfe im Internet Explorer vor Version 9 erzeugen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    10. 12.9 Elemente umformen
      1. Problem
      2. Lösung
      3. Diskussion
        1. transform-origin
        2. Internet Explorer 7 und 8
        3. Transformationen und feste Positionierung
      4. Siehe auch
    11. 12.10 Einfache Animationen erstellen
      1. Problem
      2. Lösung
      3. Diskussion
        1. Die Kurzschrifteigenschaft transition
        2. Browserunterstützung
      4. Siehe auch
    12. 12.11 Alternative Cursorsymbole definieren
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    13. 12.12 Modulare Skalen verwenden
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    14. 12.13 Ein Grundlinienraster verwenden
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    15. 12.14 Quasi zufällige Hintergrundmuster erzeugen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
  16. 13. Tipps und Tricks
    1. Einführung
    2. 13.1 Überprüfen, ob ein Stylesheet gültig ist
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    3. 13.2 Ein Design auf mehreren Plattformen testen
      1. Problem
      2. Lösung 1
      3. Lösung 2
      4. Diskussion
      5. Siehe auch
    4. 13.3 Browsererweiterungen zur Fehlersuche benutzen
      1. Problem
      2. Lösung
        1. Firefox
        2. Google Chrome
        3. Internet Explorer
        4. Opera
        5. Safari
        6. Mobile Browser
      3. Diskussion
      4. Siehe auch
    5. 13.4 Bekannte Browser-Bugs und CSS-Probleme erkennen und beheben
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    6. 13.5 Websites mit einem Textbrowser testen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    7. 13.6 Die richtige Zeichenkodierung angeben
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    8. 13.7 Inhalte mit CSS erzeugen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    9. 13.8 Das Boxmodell anpassen
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    10. 13.9 Float-Containern per Clearfix ihre Höhe wiedergeben
      1. Problem
      2. Lösung
      3. Diskussion
        1. Clearfix – Old School-Methode
      4. Siehe auch
    11. 13.10 HTML-Elemente dynamisch hervorheben
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    12. 13.11 Elemente nur in Hilfsgeräten darstellen
      1. Problem
      2. Lösung 1
      3. Lösung 2
      4. Diskussion
        1. Elemente vor allen Browsern verstecken
      5. Siehe auch
    13. 13.12 Inline-Stile überschreiben
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    14. 13.13 Stylesheets mit Conditional Comments nur für den Internet Explorer definieren
      1. Problem
      2. Lösung
        1. Conditional Classes
      3. Siehe auch
    15. 13.14 Stile für HTML5-Elemente im IE definieren
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    16. 13.15 hasLayout-Probleme beheben
      1. Problem
      2. Lösung
      3. Diskussion
        1. Die Darstellungsrollen inline und inline-block im Internet Explorer 7
      4. Siehe auch
    17. 13.16 Reset-Stylesheets benutzen
      1. Problem
      2. Lösung 1
      3. Lösung 2
      4. Lösung 3
      5. Lösung 4
      6. Diskussion
      7. Siehe auch
    18. 13.17 Die Möglichkeiten von CSS mit Präprozessoren erweitern
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    19. 13.18 Älteren Browsern mit Polyfills auf die Sprünge helfen
      1. Problem
      2. Lösung
        1. CSS3 PIE
        2. selectivizr
      3. Diskussion
      4. Siehe auch
    20. 13.19 CSS3-Eigenschaften in der Präfixschreibweise angeben
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
    21. 13.20 Daten-URIs verwenden
      1. Problem
      2. Lösung
      3. Diskussion
      4. Siehe auch
  17. A. Ressourcen
    1. Eigenschaften und Selektoren
      1. Liste aller CSS-Eigenschaften
      2. CSS-Selektoren
    2. CSS-Anleitungen
      1. CSS-Anleitung von »Web Page Design for Designers«
      2. Grundlagen der Positionierung von Elementen mit CSS
      3. Anleitung für die Verwendung von CSS-Floats
      4. Anleitung für CSS-Selektoren
    3. Designressourcen
      1. A List Apart
      2. CSS Zen Garden
      3. CSS-Layouttechniken von Glish.com
      4. Real World Style
      5. Typetester
    4. Diskussionsgruppen, Mailinglisten und Foren
      1. css-discuss
      2. Forum für XHTML und CSS
      3. www-style (die Stylesheets-Mailingliste des W3C)
    5. Referenzen zum Nachschlagen
      1. browsersupport.net
      2. Quirksmode
      3. When can I use?
      4. HTML5 und CSS3 Readiness
      5. CSS3 Click Chart
      6. HTML5 Please
      7. Die CSS-Seiten des W3C
      8. Die CSS3-Spezifikation
      9. Die CSS 2.1-Spezifikation
      10. Die HTML5-Spezifikation
      11. Accessible Rich Internet Applications
      12. Barrierefreie Informationstechnik Verordnung (BITV)
      13. Mikroformate
    6. Werkzeuge
      1. Der CSS-Validator des W3C
      2. Der HTML-Validator des W3C
      3. Webpagetest
      4. CSS3 Generator
      5. Byte Size Matters
      6. Statcounter Global Stats
      7. SelectORacle
    7. Weiterführende Ressourcen
      1. Förderung von Webstandards im deutschsprachigen Raum
      2. Jens O. Meiert
      3. 456 Berea Street
      4. CSS Tricks
      5. Standardista
      6. Lea Verou
      7. Smashing Magazine
    8. Weiterführende Bücher
  18. B. Über die Autoren
  19. Stichwortverzeichnis
  20. About the Authors
  21. Kolophon
  22. Copyright

Product information

  • Title: CSS Kochbuch, 3rd Edition
  • Author(s): Joergen Lang, Christopher Schmitt
  • Release date: April 2012
  • Publisher(s): O'Reilly Verlag
  • ISBN: 97833897213241