|
Titel |
1 |
|
|
Inhalt |
5 |
|
|
Vorwort |
13 |
|
|
Einführung |
15 |
|
|
Kapitel 1 – Allgemeines |
25 |
|
|
1.1 Eine Webseite mit Stildefinitionen versehen |
25 |
|
|
1.2 Den Aufbau einer CSS-Regel verstehen |
30 |
|
|
1.3 Verschiedene Selektoren für die Zuweisung von Stilen verwenden |
33 |
|
|
1.4 Selektoren gruppieren |
36 |
|
|
1.5 Alle Elemente auf einmal auswählen |
37 |
|
|
1.6 Bestimmte Elemente nach ihrem Namen auswählen |
39 |
|
|
1.7 Nachfahrenelemente auswählen |
40 |
|
|
1.8 Kindelemente auswählen |
42 |
|
|
1.9 Benachbarte Geschwisterelemente auswählen |
44 |
|
|
1.10 Regeln für allgemeine Geschwisterelemente definieren |
46 |
|
|
1.11 Elemente nach ihren Attributen auswählen |
47 |
|
|
1.12 Elemente aufgrund von Klassen- und ID-Attributen auswählen |
50 |
|
|
1.13 Mehrere Klassen auf einmal angeben |
54 |
|
|
1.14 Regeln für unbenannte Dokumentteile definieren |
54 |
|
|
1.15 Werte für die neue Pseudoklasse :nth-child() und ihre Verwandten richtig angeben |
59 |
|
|
1.16 Das Boxmodell begreifen |
62 |
|
|
1.17 Darstellungsrollen verstehen |
64 |
|
|
1.18 Die Vererbung nutzen |
68 |
|
|
1.19 Die Reihenfolge von Stylesheets: die Kaskade |
70 |
|
|
1.20 Darstellungskonflikte anhand der Spezifität lösen |
72 |
|
|
1.21 Regeln mit besonderer Priorität versehen |
75 |
|
|
1.22 Dokumenttypen und ihre Auswirkungen auf die Browserdarstellung |
76 |
|
|
1.23 Stylesheets für verschiedene Ausgabemedien definieren |
77 |
|
|
1.24 Den Inhalt eines Stylesheets richtig strukturieren |
79 |
|
|
Kapitel 2 – Grundrezepte |
81 |
|
|
2.1 Längeneinheiten verstehen |
81 |
|
|
2.2 Höhen und Breiten definieren |
84 |
|
|
2.3 Farben definieren |
85 |
|
|
2.4 Externe Ressourcen einbinden |
88 |
|
|
2.5 Außenabstände definieren |
90 |
|
|
2.6 Innenabstände definieren |
93 |
|
|
2.7 Elemente mit einem Rahmen versehen |
94 |
|
|
2.8 Hintergrundbilder verwenden |
97 |
|
|
2.9 Die Wiederholung von Hintergrundbildern steuern |
99 |
|
|
2.10 Hintergrundbilder positionieren |
100 |
|
|
2.11 Das Hintergrundbild verankern |
102 |
|
|
2.12 Mehrere Hintergrundbilder für ein Element definieren |
103 |
|
|
2.13 Hintergrundbilder auf den gesamten Ansichtsbereich ausdehnen |
106 |
|
|
2.14 Definitionen für Hintergründe in einer Deklaration zusammenfassen |
110 |
|
|
2.15 Durchscheinende Hintergründe definieren |
111 |
|
|
2.16 Elemente positionieren |
113 |
|
|
2.17 Elemente absolut positionieren |
114 |
|
|
2.18 Elemente relativ positionieren |
116 |
|
|
2.19 Elemente ineinander positionieren |
117 |
|
|
2.20 Elemente im Ansichtsbereich verankern |
119 |
|
|
2.21 Elemente voreinander anordnen |
120 |
|
|
2.22 Elemente scrollbar machen |
122 |
|
|
2.23 Elemente umfließen lassen |
124 |
|
|
2.24 Elemente horizontal zentrieren |
127 |
|
|
2.25 Elemente vertikal zentrieren |
130 |
|
|
Kapitel 3 – Typografie für das Web |
133 |
|
|
3.1 Schriftarten festlegen |
133 |
|
|
3.2 Schriftgrößen und -maße festlegen |
137 |
|
|
3.3 Die Schriftfarbe ändern |
140 |
|
|
3.4 Das Schriftgewicht ändern |
141 |
|
|
3.5 Den Schriftstil anpassen |
142 |
|
|
3.6 Text in Kapitälchen darstellen |
144 |
|
|
3.7 Text in Groß- und Kleinschreibung darstellen |
145 |
|
|
3.8 Zeilenhöhen ändern |
146 |
|
|
3.9 Den Abstand zwischen Buchstaben und Wörtern anpassen |
147 |
|
|
3.10 Die Kurzschrifteigenschaft font verwenden |
149 |
|
|
3.11 Webfonts verwenden |
152 |
|
|
3.12 Die Textausrichtung festlegen |
157 |
|
|
3.13 Zeilenumbrüche steuern |
158 |
|
|
3.14 Text mit Über-, Unter- oder Durchstreichungen versehen |
162 |
|
|
3.15 Grafische Unterstreichungen verwenden |
164 |
|
|
3.16 Sonderzeichen aus einem anderen Zeichensatz einfügen |
166 |
|
|
3.17 Typografisch korrekte Anführungszeichen verwenden |
167 |
|
|
3.18 Hängende Initialen zu Beginn eines Absatzes einfügen |
170 |
|
|
3.19 Bilder als Initialen einsetzen |
172 |
|
|
3.20 Stile für die erste Absatzzeile definieren |
174 |
|
|
3.21 Überschriften mit Grafiken überlagern |
175 |
|
|
3.22 Die Gestaltung von ausgewähltem Text anpassen |
178 |
|
|
3.23 Text mit einem Schatten versehen |
179 |
|
|
3.24 Hoch- und tiefgestellten Text ohne Grundlinienversatz darstellen |
182 |
|
|
3.25 Die Schreibrichtung festlegen |
184 |
|
|
3.26 Pull Quotes gestalten |
185 |
|
|
Kapitel 4 – Bilder |
189 |
|
|
4.1 Bilder mit Rahmen versehen |
189 |
|
|
4.2 Rahmen um Bilder nicht darstellen |
191 |
|
|
4.3 Die Rahmenfarbe ändern, wenn sich der Mauszeiger über dem Bild befindet |
192 |
|
|
4.4 Skalierbare Bilder |
194 |
|
|
4.5 Bilder mit einer Bildunterschrift versehen |
196 |
|
|
4.6 Text durch Grafiken ersetzen |
202 |
|
|
4.7 Bilder als Panorama präsentieren |
206 |
|
|
4.8 Verschiedene Bildformate miteinander kombinieren |
208 |
|
|
4.9 Sprites zum Speichern von Icons verwenden |
211 |
|
|
Kapitel 5 – Listen |
214 |
|
|
5.1 Browserübergreifende Einrückungen |
215 |
|
|
5.2 Spezielle Aufzählungszeichen verwenden |
216 |
|
|
5.3 Eigene textbasierte Aufzählungszeichen für Listeneinträge verwenden |
218 |
|
|
5.4 Aufzählungszeichen mit einer eigenen Farbe versehen |
221 |
|
|
5.5 Eigene Grafiken als Aufzählungszeichen verwenden |
223 |
|
|
5.6 Das Aufzählungszeichen innerhalb des Listeneintrags darstellen |
225 |
|
|
5.7 Die Kurzschrifteigenschaft list-style verwenden |
226 |
|
|
5.8 Trennlinien für Listeneinträge erstellen |
227 |
|
|
5.9 Listeneinträge nebeneinander darstellen |
229 |
|
|
5.10 Stile für Definitionslisten |
231 |
|
|
5.11 Stile für den ersten oder letzten Eintrag einer Liste definieren |
233 |
|
|
Kapitel 6 – Links und Navigation |
235 |
|
|
6.1 Die Darstellung der verschiedenen Linkzustände anpassen |
236 |
|
|
6.2 Unterschiedliche Linkfarben für bestimmte Teile einer Seite |
239 |
|
|
6.3 Icons am Ende von Links einfügen |
240 |
|
|
6.4 Tooltips mit CSS gestalten |
242 |
|
|
6.5 Dokumentteile nur bei Bedarf anzeigen |
246 |
|
|
6.6 Den anklickbaren Bereich eines Links vergrößern |
248 |
|
|
6.7 Listen als Navigationsmenüs gestalten |
250 |
|
|
6.8 Die aktuelle Seite hervorheben |
254 |
|
|
6.9 Eine Breadcrumb-Navigation gestalten |
256 |
|
|
6.10 Karteireiter-Navigationsmenüs |
259 |
|
|
6.11 Ein vertikales Navigationsmenü mit mehreren Ebenen erstellen |
263 |
|
|
6.12 Ein horizontales Navigationsmenü mit mehreren Ebenen erstellen |
267 |
|
|
Kapitel 7 – Formulare |
275 |
|
|
7.1 Stile für Formulare definieren |
276 |
|
|
7.2 Stile für fieldset-Elemente definieren |
278 |
|
|
7.3 legend-Elemente mit Stildefinitionen versehen |
280 |
|
|
7.4 Die Platzierung von legend-Elementen verändern |
285 |
|
|
7.5 label-Elemente gestalten |
287 |
|
|
7.6 Texteingabefelder mit CSS gestalten |
289 |
|
|
7.7 Stildefinitionen für textarea-Elemente zuweisen |
292 |
|
|
7.8 Stile für Checkboxen und Radiobuttons definieren |
294 |
|
|
7.9 Stildefinitionen für Auswahllisten und Aufklappmenüs |
296 |
|
|
7.10 Stildefinitionen für Buttons |
298 |
|
|
7.11 Grafikbasierte Buttons |
301 |
|
|
7.12 Buttons wie einfachen HTML-Text darstellen |
303 |
|
|
7.13 Eingabefelder hervorheben |
305 |
|
|
7.14 Benötigte Formularfelder hervorheben |
307 |
|
|
7.15 Formularelemente zeilenweise darstellen |
309 |
|
|
7.16 Serviervorschlag: ein mehrspaltiges Formular |
312 |
|
|
Kapitel 8 – Tabellen |
325 |
|
|
8.1 Rahmen und Innenabstände für Zellen einstellen |
325 |
|
|
8.2 Den Zellzwischenraum einstellen |
329 |
|
|
8.3 Leerraum zwischen Bildern und dem unteren Zellenrand entfernen |
330 |
|
|
8.4 Tabellenzellen individuell gestalten |
332 |
|
|
8.5 Leere Tabellenzellen verstecken |
336 |
|
|
8.6 Stildefinitionen für die Tabellenüberschriften |
337 |
|
|
8.7 Stildefinitionen für Tabellenbeschriftungen |
338 |
|
|
8.8 Rollover-Effekte für Tabellenzeilen |
339 |
|
|
8.9 Tabellenzeilen individuell gestalten |
341 |
|
|
8.10 Tabellenspalten gestalten |
344 |
|
|
8.11 Abwechselnde Hintergrundfarben für Tabellenzeilen |
348 |
|
|
8.12 Tabellen mit einer festen Breite versehen |
350 |
|
|
8.13 Serviervorschlag: eine Tabelle mit Stil |
352 |
|
|
Kapitel 9 – Drucken |
357 |
|
|
9.1 Spezielle Stylesheet-Regeln für das Ausdrucken angeben |
358 |
|
|
9.2 Die richtigen Längeneinheiten und Werte für das Ausdrucken verwenden |
360 |
|
|
9.3 Eine Seite für Schwarz-Weiß-Ausdrucke vorbereiten |
361 |
|
|
9.4 Nach einem Link den URI anzeigen |
362 |
|
|
9.5 Sonderzeichen vor Links einfügen |
364 |
|
|
9.6 Seitenumbrüche anlegen |
365 |
|
|
9.7 Überschriften von Tabellenspalten auf jeder Seite mitdrucken |
367 |
|
|
9.8 Ein Webformular für den Ausdruck aufbereiten |
368 |
|
|
9.9 Bestimmte Dokumentteile nicht mit ausdrucken |
374 |
|
|
9.10 Das Ausdrucken von Hintergrundbildern selbst steuern |
376 |
|
|
Kapitel 10 – Mobile Geräte |
379 |
|
|
10.1 Media Queries verwenden, um mobile und Desktop- Browser zu unterscheiden |
379 |
|
|
10.2 Längs- oder Querformat ermitteln |
384 |
|
|
10.3 Die Größe und Skalierung des Ansichtsbereichs steuern |
385 |
|
|
10.4 Stile für Mobilgeräte zuerst laden |
390 |
|
|
10.5 Das Laden von Stylesheets beschleunigen |
391 |
|
|
10.6 Mobile Seiten mit CSS3 schneller machen |
392 |
|
|
10.7 Nicht benötigte Elemente ausblenden |
394 |
|
|
10.8 Seitenlayouts linearisieren |
395 |
|
|
10.9 Tabellen linearisieren |
397 |
|
|
10.10 Links als Buttons darstellen |
403 |
|
|
10.11 Testen |
407 |
|
|
Kapitel 11 – Seitenlayouts |
408 |
|
|
11.1 Flexible zweispaltige Layouts erstellen |
408 |
|
|
11.2 Zweispaltige Layouts mit festen Breiten erstellen |
412 |
|
|
11.3 Flexible mehrspaltige Layouts mit Floats erstellen |
415 |
|
|
11.4 Spalten mit Floats in beliebiger Reihenfolge darstellen |
418 |
|
|
11.5 Faux Columns einsetzen |
423 |
|
|
11.6 Den »heiligen Gral« verstehen |
427 |
|
|
11.7 Den Fußteil an der Unterkante des Browserfensters verankern |
430 |
|
|
11.8 Layouts mit einem »Sticky Footer« versehen |
432 |
|
|
11.9 Grid-System benutzen |
435 |
|
|
11.10 Inhalte mit CSS3 auf mehrere Spalten verteilen |
439 |
|
|
11.11 Ausblick |
442 |
|
|
Kapitel 12 – Design mit CSS |
445 |
|
|
12.1 Rollover-Effekte ohne Bilder erzeugen |
445 |
|
|
12.2 Ein Farbschema für eine Website erstellen |
448 |
|
|
12.3 Für ausreichenden Farbkontrast sorgen |
451 |
|
|
12.4 Farbverläufe mit CSS3 definieren |
453 |
|
|
12.5 Transparenzen erzeugen |
458 |
|
|
12.6 Abgerundete Ecken mit CSS3 definieren |
462 |
|
|
12.7 Schattenwürfe mit CSS3 erzeugen |
466 |
|
|
12.8 Realistische Schattenwürfe im Internet Explorer vor Version 9 erzeugen |
469 |
|
|
12.9 Elemente umformen |
472 |
|
|
12.10 Einfache Animationen erstellen |
478 |
|
|
12.11 Alternative Cursorsymbole definieren |
485 |
|
|
12.12 Modulare Skalen verwenden |
487 |
|
|
12.13 Ein Grundlinienraster verwenden |
489 |
|
|
12.14 Quasi zufällige Hintergrundmuster erzeugen |
494 |
|
|
Kapitel 13 – Tipps und Tricks |
498 |
|
|
13.1 Überprüfen, ob ein Stylesheet gültig ist |
499 |
|
|
13.2 Ein Design auf mehreren Plattformen testen |
501 |
|
|
13.3 Browsererweiterungen zur Fehlersuche benutzen |
503 |
|
|
13.4 Bekannte Browser-Bugs und CSS-Probleme erkennen und beheben |
505 |
|
|
13.5 Websites mit einem Textbrowser testen |
507 |
|
|
13.6 Die richtige Zeichenkodierung angeben |
507 |
|
|
13.7 Inhalte mit CSS erzeugen |
510 |
|
|
13.8 Das Boxmodell anpassen |
513 |
|
|
13.9 Float-Containern per Clearfix ihre Höhe wiedergeben |
515 |
|
|
13.10 HTML-Elemente dynamisch hervorheben |
519 |
|
|
13.11 Elemente nur in Hilfsgeräten darstellen |
521 |
|
|
13.12 Inline-Stile überschreiben |
523 |
|
|
13.13 Stylesheets mit Conditional Comments nur für den Internet Explorer definieren |
525 |
|
|
13.14 Stile für HTML5-Elemente im IE definieren |
528 |
|
|
13.15 hasLayout-Probleme beheben |
530 |
|
|
13.16 Reset-Stylesheets benutzen |
533 |
|
|
13.17 Die Möglichkeiten von CSS mit Präprozessoren erweitern |
535 |
|
|
13.18 Älteren Browsern mit Polyfills auf die Sprünge helfen |
537 |
|
|
13.19 CSS3-Eigenschaften in der Präfixschreibweise angeben |
540 |
|
|
13.20 Daten-URIs verwenden |
541 |
|
|
Anhang A |
545 |
|
|
Index |
553 |
|