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
- CSS Kochbuch
- Vorwort
- Einführung
-
1. Allgemeines
- Einführung
- 1.1 Eine Webseite mit Stildefinitionen versehen
- 1.2 Den Aufbau einer CSS-Regel verstehen
- 1.3 Verschiedene Selektoren für die Zuweisung von Stilen verwenden
- 1.4 Selektoren gruppieren
- 1.5 Alle Elemente auf einmal auswählen
- 1.6 Bestimmte Elemente nach ihrem Namen auswählen
- 1.7 Nachfahrenelemente auswählen
- 1.8 Kindelemente auswählen
- 1.9 Benachbarte Geschwisterelemente auswählen
- 1.10 Regeln für allgemeine Geschwisterelemente definieren
- 1.11 Elemente nach ihren Attributen auswählen
- 1.12 Elemente aufgrund von Klassen- und ID-Attributen auswählen
- 1.13 Mehrere Klassen auf einmal angeben
- 1.14 Regeln für unbenannte Dokumentteile definieren
- 1.15 Werte für die neue Pseudoklasse :nth-child() und ihre Verwandten richtig angeben
- 1.16 Das Boxmodell begreifen
- 1.17 Darstellungsrollen verstehen
- 1.18 Die Vererbung nutzen
- 1.19 Die Reihenfolge von Stylesheets: die Kaskade
- 1.20 Darstellungskonflikte anhand der Spezifität lösen
- 1.21 Regeln mit besonderer Priorität versehen
- 1.22 Dokumenttypen und ihre Auswirkungen auf die Browserdarstellung
- 1.23 Stylesheets für verschiedene Ausgabemedien definieren
- 1.24 Den Inhalt eines Stylesheets richtig strukturieren
-
2. Grundrezepte
- Einführung
- 2.1 Längeneinheiten verstehen
- 2.2 Höhen und Breiten definieren
- 2.3 Farben definieren
- 2.4 Externe Ressourcen einbinden
- 2.5 Außenabstände definieren
- 2.6 Innenabstände definieren
- 2.7 Elemente mit einem Rahmen versehen
- 2.8 Hintergrundbilder verwenden
- 2.9 Die Wiederholung von Hintergrundbildern steuern
- 2.10 Hintergrundbilder positionieren
- 2.11 Das Hintergrundbild verankern
- 2.12 Mehrere Hintergrundbilder für ein Element definieren
- 2.13 Hintergrundbilder auf den gesamten Ansichtsbereich ausdehnen
- 2.14 Definitionen für Hintergründe in einer Deklaration zusammenfassen
- 2.15 Durchscheinende Hintergründe definieren
- 2.16 Elemente positionieren
- 2.17 Elemente absolut positionieren
- 2.18 Elemente relativ positionieren
- 2.19 Elemente ineinander positionieren
- 2.20 Elemente im Ansichtsbereich verankern
- 2.21 Elemente voreinander anordnen
- 2.22 Elemente scrollbar machen
- 2.23 Elemente umfließen lassen
- 2.24 Elemente horizontal zentrieren
- 2.25 Elemente vertikal zentrieren
-
3. Typografie für das Web
- Einführung
- 3.1 Schriftarten festlegen
- 3.2 Schriftgrößen und -maße festlegen
- 3.3 Die Schriftfarbe ändern
- 3.4 Das Schriftgewicht ändern
- 3.5 Den Schriftstil anpassen
- 3.6 Text in Kapitälchen darstellen
- 3.7 Text in Groß- und Kleinschreibung darstellen
- 3.8 Zeilenhöhen ändern
- 3.9 Den Abstand zwischen Buchstaben und Wörtern anpassen
- 3.10 Die Kurzschrifteigenschaft font verwenden
- 3.11 Webfonts verwenden
- 3.12 Die Textausrichtung festlegen
- 3.13 Zeilenumbrüche steuern
- 3.14 Text mit Über-, Unter- oder Durchstreichungen versehen
- 3.15 Grafische Unterstreichungen verwenden
- 3.16 Sonderzeichen aus einem anderen Zeichensatz einfügen
- 3.17 Typografisch korrekte Anführungszeichen verwenden
- 3.18 Hängende Initialen zu Beginn eines Absatzes einfügen
- 3.19 Bilder als Initialen einsetzen
- 3.20 Stile für die erste Absatzzeile definieren
- 3.21 Überschriften mit Grafiken überlagern
- 3.22 Die Gestaltung von ausgewähltem Text anpassen
- 3.23 Text mit einem Schatten versehen
- 3.24 Hoch- und tiefgestellten Text ohne Grundlinienversatz darstellen
- 3.25 Die Schreibrichtung festlegen
- 3.26 Pull Quotes gestalten
-
4. Bilder
- Einführung
- 4.1 Bilder mit Rahmen versehen
- 4.2 Rahmen um Bilder nicht darstellen
- 4.3 Die Rahmenfarbe ändern, wenn sich der Mauszeiger über dem Bild befindet
- 4.4 Skalierbare Bilder
- 4.5 Bilder mit einer Bildunterschrift versehen
- 4.6 Text durch Grafiken ersetzen
- 4.7 Bilder als Panorama präsentieren
- 4.8 Verschiedene Bildformate miteinander kombinieren
- 4.9 Sprites zum Speichern von Icons verwenden
-
5. Listen
- Einführung
- 5.1 Browserübergreifende Einrückungen
- 5.2 Spezielle Aufzählungszeichen verwenden
- 5.3 Eigene textbasierte Aufzählungszeichen für Listeneinträge verwenden
- 5.4 Aufzählungszeichen mit einer eigenen Farbe versehen
- 5.5 Eigene Grafiken als Aufzählungszeichen verwenden
- 5.6 Das Aufzählungszeichen innerhalb des Listeneintrags darstellen
- 5.7 Die Kurzschrifteigenschaft list-style verwenden
- 5.8 Trennlinien für Listeneinträge erstellen
- 5.9 Listeneinträge nebeneinander darstellen
- 5.10 Stile für Definitionslisten
- 5.11 Stile für den ersten oder letzten Eintrag einer Liste definieren
-
6. Links und Navigation
- Einführung
- 6.1 Die Darstellung der verschiedenen Linkzustände anpassen
- 6.2 Unterschiedliche Linkfarben für bestimmte Teile einer Seite
- 6.3 Icons am Ende von Links einfügen
- 6.4 Tooltips mit CSS gestalten
- 6.5 Dokumentteile nur bei Bedarf anzeigen
- 6.6 Den anklickbaren Bereich eines Links vergrößern
- 6.7 Listen als Navigationsmenüs gestalten
- 6.8 Die aktuelle Seite hervorheben
- 6.9 Eine Breadcrumb-Navigation gestalten
- 6.10 Karteireiter-Navigationsmenüs
- 6.11 Ein vertikales Navigationsmenü mit mehreren Ebenen erstellen
- 6.12 Ein horizontales Navigationsmenü mit mehreren Ebenen erstellen
-
7. Formulare
- Einführung
- 7.1 Stile für Formulare definieren
- 7.2 Stile für fieldset-Elemente definieren
- 7.3 legend-Elemente mit Stildefinitionen versehen
- 7.4 Die Platzierung von legend-Elementen verändern
- 7.5 label-Elemente gestalten
- 7.6 Texteingabefelder mit CSS gestalten
- 7.7 Stildefinitionen für textarea-Elemente zuweisen
- 7.8 Stile für Checkboxen und Radiobuttons definieren
- 7.9 Stildefinitionen für Auswahllisten und Aufklappmenüs
- 7.10 Stildefinitionen für Buttons
- 7.11 Grafikbasierte Buttons
- 7.12 Buttons wie einfachen HTML-Text darstellen
- 7.13 Eingabefelder hervorheben
- 7.14 Benötigte Formularfelder hervorheben
- 7.15 Formularelemente zeilenweise darstellen
- 7.16 Serviervorschlag: ein mehrspaltiges Formular
-
8. Tabellen
- Einführung
- 8.1 Rahmen und Innenabstände für Zellen einstellen
- 8.2 Den Zellzwischenraum einstellen
- 8.3 Leerraum zwischen Bildern und dem unteren Zellenrand entfernen
- 8.4 Tabellenzellen individuell gestalten
- 8.5 Leere Tabellenzellen verstecken
- 8.6 Stildefinitionen für die Tabellenüberschriften
- 8.7 Stildefinitionen für Tabellenbeschriftungen
- 8.8 Rollover-Effekte für Tabellenzeilen
- 8.9 Tabellenzeilen individuell gestalten
- 8.10 Tabellenspalten gestalten
- 8.11 Abwechselnde Hintergrundfarben für Tabellenzeilen
- 8.12 Tabellen mit einer festen Breite versehen
- 8.13 Serviervorschlag: eine Tabelle mit Stil
-
9. Drucken
- Einführung
- 9.1 Spezielle Stylesheet-Regeln für das Ausdrucken angeben
- 9.2 Die richtigen Längeneinheiten und Werte für das Ausdrucken verwenden
- 9.3 Eine Seite für Schwarz-Weiß-Ausdrucke vorbereiten
- 9.4 Nach einem Link den URI anzeigen
- 9.5 Sonderzeichen vor Links einfügen
- 9.6 Seitenumbrüche anlegen
- 9.7 Überschriften von Tabellenspalten auf jeder Seite mitdrucken
- 9.8 Ein Webformular für den Ausdruck aufbereiten
- 9.9 Bestimmte Dokumentteile nicht mit ausdrucken
- 9.10 Das Ausdrucken von Hintergrundbildern selbst steuern
-
10. Mobile Geräte
- Einführung
- 10.1 Media Queries verwenden, um mobile und Desktop-Browser zu unterscheiden
- 10.2 Längs- oder Querformat ermitteln
- 10.3 Die Größe und Skalierung des Ansichtsbereichs steuern
- 10.4 Stile für Mobilgeräte zuerst laden
- 10.5 Das Laden von Stylesheets beschleunigen
- 10.6 Mobile Seiten mit CSS3 schneller machen
- 10.7 Nicht benötigte Elemente ausblenden
- 10.8 Seitenlayouts linearisieren
- 10.9 Tabellen linearisieren
- 10.10 Links als Buttons darstellen
- 10.11 Testen
-
11. Seitenlayouts
- Einführung
- 11.1 Flexible zweispaltige Layouts erstellen
- 11.2 Zweispaltige Layouts mit festen Breiten erstellen
- 11.3 Flexible mehrspaltige Layouts mit Floats erstellen
- 11.4 Spalten mit Floats in beliebiger Reihenfolge darstellen
- 11.5 Faux Columns einsetzen
- 11.6 Den »heiligen Gral« verstehen
- 11.7 Den Fußteil an der Unterkante des Browserfensters verankern
- 11.8 Layouts mit einem »Sticky Footer« versehen
- 11.9 Grid-System benutzen
- 11.10 Inhalte mit CSS3 auf mehrere Spalten verteilen
- 11.11 Ausblick
-
12. Design mit CSS
- Einführung
- 12.1 Rollover-Effekte ohne Bilder erzeugen
- 12.2 Ein Farbschema für eine Website erstellen
- 12.3 Für ausreichenden Farbkontrast sorgen
- 12.4 Farbverläufe mit CSS3 definieren
- 12.5 Transparenzen erzeugen
- 12.6 Abgerundete Ecken mit CSS3 definieren
- 12.7 Schattenwürfe mit CSS3 erzeugen
- 12.8 Realistische Schattenwürfe im Internet Explorer vor Version 9 erzeugen
- 12.9 Elemente umformen
- 12.10 Einfache Animationen erstellen
- 12.11 Alternative Cursorsymbole definieren
- 12.12 Modulare Skalen verwenden
- 12.13 Ein Grundlinienraster verwenden
- 12.14 Quasi zufällige Hintergrundmuster erzeugen
-
13. Tipps und Tricks
- Einführung
- 13.1 Überprüfen, ob ein Stylesheet gültig ist
- 13.2 Ein Design auf mehreren Plattformen testen
- 13.3 Browsererweiterungen zur Fehlersuche benutzen
- 13.4 Bekannte Browser-Bugs und CSS-Probleme erkennen und beheben
- 13.5 Websites mit einem Textbrowser testen
- 13.6 Die richtige Zeichenkodierung angeben
- 13.7 Inhalte mit CSS erzeugen
- 13.8 Das Boxmodell anpassen
- 13.9 Float-Containern per Clearfix ihre Höhe wiedergeben
- 13.10 HTML-Elemente dynamisch hervorheben
- 13.11 Elemente nur in Hilfsgeräten darstellen
- 13.12 Inline-Stile überschreiben
- 13.13 Stylesheets mit Conditional Comments nur für den Internet Explorer definieren
- 13.14 Stile für HTML5-Elemente im IE definieren
- 13.15 hasLayout-Probleme beheben
- 13.16 Reset-Stylesheets benutzen
- 13.17 Die Möglichkeiten von CSS mit Präprozessoren erweitern
- 13.18 Älteren Browsern mit Polyfills auf die Sprünge helfen
- 13.19 CSS3-Eigenschaften in der Präfixschreibweise angeben
- 13.20 Daten-URIs verwenden
- A. Ressourcen
- B. Über die Autoren
- Stichwortverzeichnis
- About the Authors
- Kolophon
- Copyright
Product information
- Title: CSS Kochbuch, 3rd Edition
- Author(s):
- Release date: April 2012
- Publisher(s): O'Reilly Verlag
- ISBN: 97833897213241
You might also like
book
CSS Kochbuch
Cascading Style Sheets (CSS) gelten als Mittel der Wahl, wenn es darum geht, die Darstellung einer …
book
CSS – kurz & gut, 5th Edition
Wenn Sie bei der Arbeit mit CSS schnelle Antworten benötigen, haben Sie mit dieser kompakten und …
book
PHP 5 Kochbuch, Third Edition
Das beliebte PHP 5 Kochbuch in vollständig aktualisierter und erweiterter Neuauflage zu PHP 5.3: Gesammeltes Wissen …
book
HTML5 kurz & gut, 5th Edition
Diese Kurzreferenz ist der optimale Begleiter für alle Web- und App-Entwickler, die Wert legen auf zeitgemäßes, …