CSS Kochbuch
von: Christopher Schmitt
O'Reilly Verlag, 2007
ISBN: 9783897217669
Sprache: Deutsch
543 Seiten, Download: 29638 KB
Format: PDF, auch als Online-Lesen
geeignet für:
Typ: B (paralleler Zugriff)
| Inhalt | 6 | ||
| Vorwort | 12 | ||
| Zielgruppe | 13 | ||
| Was Sie schon wissen sollten | 14 | ||
| Inhalte dieses Buchs | 15 | ||
| Typografische Konventionen | 17 | ||
| Codebeispiele zu diesem Buch | 17 | ||
| Benutzung der Codebeispiele | 17 | ||
| Danksagungen | 18 | ||
| 1 Allgemeines | 20 | ||
| 1.0 Einführung | 20 | ||
| 1.1 CSS und HTML zusammen verwenden | 21 | ||
| 1.2 Verschiedene Selektoren für die Zuweisung von Stilen | 24 | ||
| 1.3 Class- und id-Attribute richtig einsetzen | 38 | ||
| 1.4 CSS-Eigenschaften | 41 | ||
| 1.5 Das Boxmodell | 42 | ||
| 1.6 Dokumententypen und ihre Auswirkungen auf die Browserdarstellung | 50 | ||
| 1.7 Eine Webseite mit Stildefinitionen versehen | 53 | ||
| 1.8 Stylesheets für verschiedene Ausgabemedien | 57 | ||
| 1.9 Kommentare im CSS-Code | 62 | ||
| 1.10 Den Inhalt eines Stylesheets richtig strukturieren | 63 | ||
| 1.11 Stylesheet-Dateien organisieren | 64 | ||
| 1.12 Kurzschrift-Eigenschaften | 66 | ||
| 1.13 Alternative Stylesheets verwenden | 68 | ||
| 1.14 Bilder von Text umfließen lassen | 69 | ||
| 1.15 Absolute Positionierung | 71 | ||
| 1.16 Relative Positionierung | 74 | ||
| 1.17 CSS in Adobe Dreamweaver verwenden | 76 | ||
| 1.18 CSS mit Microsoft Expression Web Designer erstellen | 79 | ||
| 2 Typografie für das Web | 83 | ||
| 2.0 Einführung | 83 | ||
| 2.1 Schriftarten festlegen | 84 | ||
| 2.2 Schriftgrößen und -maße festlegen | 87 | ||
| 2.3 Schriftgrößen besser kontrollieren | 89 | ||
| 2.4 Schriftgrößen selbst festlegen | 94 | ||
| 2.5 Text zentrieren | 94 | ||
| 2.6 Text im Blocksatz darstellen | 95 | ||
| 2.7 Leerraum zwischen Überschriften und Absätzen entfernen | 96 | ||
| 2.8 Versalien zu Beginn eines Absatzes | 97 | ||
| 2.9 Größere und zentrierte Versalien | 98 | ||
| 2.10 Bilder als Versalien | 100 | ||
| 2.11 Überschriften mit Stil | 103 | ||
| 2.12 Überschriften mit Rahmen | 104 | ||
| 2.13 Überschriftentext mit einem Bild versehen | 106 | ||
| 2.14 Gestaltung einer »Pull-Quote« mit HTML-Text | 108 | ||
| 2.15 »Pull-Quotes« mit Rahmen | 110 | ||
| 2.16 »Pull-Quotes« mit Bildern | 112 | ||
| 2.17 Die erste Zeile eines Absatzes einrücken | 114 | ||
| 2.18 Ganze Absätze einrücken | 116 | ||
| 2.19 Hängende Einzüge | 119 | ||
| 2.20 Die erste Zeile eines Absatzes mit Stildefinitionen versehen | 122 | ||
| 2.21 Die erste Zeile eines Absatzes mit einem Bild versehen | 124 | ||
| 2.22 Textteile hervorheben | 125 | ||
| 2.23 Zeilenabstände ändern | 127 | ||
| 2.24 HTML-Text mit Grafiken überlagern | 129 | ||
| 2.25 Text mit Schatten hinterlegen | 130 | ||
| 2.26 Den Abstand zwischen Buchstaben und Wörtern anpassen | 131 | ||
| 3 Bilder | 135 | ||
| 3.0 Einleitung | 135 | ||
| 3.1 Bilder mit Rahmen versehen | 135 | ||
| 3.2 Standardmäßig für Bilder verwendete Rahmen entfernen | 137 | ||
| 3.3 Nicht gekachelte Hintergrundbilder | 139 | ||
| 3.4 Hintergrundbilder wiederholen | 140 | ||
| 3.5 Hintergrundbilder positionieren | 141 | ||
| 3.6 Mehrere Hintergrundbilder für einen CSS-Selektor definieren | 144 | ||
| 3.7 Das Hintergrundbild verankern | 146 | ||
| 3.8 Durchscheinende Hintergründe für HTML-Text | 149 | ||
| 3.9 HTML-Text durch ein Bild ersetzen | 151 | ||
| 3.10 HTML-Text mit Flash ersetzen | 155 | ||
| 3.11 Mehrere PNGs mit transparentem Alphakanal verwenden | 158 | ||
| 3.12 Panoramabilder | 160 | ||
| 3.13 Verschiedene Bildformate miteinander kombinieren | 162 | ||
| 3.14 Abgerundete Ecken bei Spalten mit fester Breite | 168 | ||
| 3.15 Abgerundete Ecken (Sliding Doors-Technik) | 171 | ||
| 3.16 Abgerundete Ecken (Mountaintop-Technik) | 176 | ||
| 3.17 Abgerundete Ecken mit JavaScript | 180 | ||
| 3.18 Bilder mit einem Schatten versehen | 184 | ||
| 3.19 Bilder mit weichen Schattenwürfen versehen | 187 | ||
| 3.20 Skalierbare Bilder | 191 | ||
| 3.21 Sprechblasen | 194 | ||
| 3.22 Den Diebstahl Ihrer Bilder verhindern | 198 | ||
| 3.23 Bilder automatisch mit Reflexionen versehen | 199 | ||
| 3.24 Sprites zum Speichern von Icons verwenden | 203 | ||
| 4 Seitenelemente | 207 | ||
| 4.0 Einführung | 207 | ||
| 4.1 Seitenränder entfernen | 207 | ||
| 4.2 Farbige Scrollbalken | 210 | ||
| 4.3 Elemente auf einer Webseite zentrieren | 212 | ||
| 4.4 Seitenränder | 218 | ||
| 4.5 Eine horizontale Trennlinie anpassen | 220 | ||
| 4.6 Eine Lightbox verwenden | 224 | ||
| 5 Listen | 229 | ||
| 5.0 Einführung | 229 | ||
| 5.1 Die Formatierung einer Liste ändern | 230 | ||
| 5.2 Browserübergreifende Einrückungen | 232 | ||
| 5.3 Listeneinträge voneinander trennen | 233 | ||
| 5.4 Eigene Aufzählungszeichen für Listeneinträge | 234 | ||
| 5.5 Eigene Grafiken als Marker für Listeneinträge verwenden | 237 | ||
| 5.6 Große Grafiken als Aufzählungszeichen verwenden | 238 | ||
| 5.7 Die Darstellung einer Liste durch Grafiken verstärken | 241 | ||
| 5.8 Listeneinträge als Inline-Elemente darstellen | 245 | ||
| 5.9 Hängende Einzüge für Listen definieren | 247 | ||
| 5.10 Das Aufzählungszeichen innerhalb des Eintrags darstellen | 248 | ||
| 6 Links und Navigation | 250 | ||
| 6.0 Einführung | 250 | ||
| 6.1 Die typischen Link-Unterstreichungen entfernen ( und andere Dekorationen hinzufügen) | 250 | ||
| 6.2 Linkfarben anpassen | 253 | ||
| 6.3 Unterschiedliche Linkfarben für bestimmte Teile einer Seite | 254 | ||
| 6.4 Icons am Ende von Links einfügen | 255 | ||
| 6.5 Alternative Cursorsymbole | 256 | ||
| 6.6 Rollover-Effekte ohne JavaScript | 258 | ||
| 6.7 Textbasierte Navigationsmenüs und Rollover-Effekte kombinieren | 260 | ||
| 6.8 Horizontale Navigationsmenüs | 264 | ||
| 6.9 Navigationsmenüs mit Tastatursteuerung | 269 | ||
| 6.10 Hierarchische Navigation | 271 | ||
| 6.11 Grafische Rollover-Effekte | 273 | ||
| 6.12 Aufklappbare Navigationsmenüs | 278 | ||
| 6.13 Kontextmenüs | 281 | ||
| 6.14 Tool Tips | 283 | ||
| 6.15 Dynamische visuelle Menüs | 284 | ||
| 6.16 Dynamische Stildefinitionen | 288 | ||
| 7 Formulare | 293 | ||
| 7.0 Einführung | 293 | ||
| 7.1 Den Leerraum um ein Formular herum anpassen | 294 | ||
| 7.2 Stildefinitionen für Eingabeelemente | 295 | ||
| 7.3 Verschiedene Stile für unterschiedliche Eingabeelemente des gleichen Formulars | 298 | ||
| 7.4 Stildefinitionen für textarea-Elemente | 299 | ||
| 7.5 Stildefinitionen für Aufklappmenüs und Auswahllisten | 300 | ||
| 7.6 Textfeld für Sucheinträge im Macintosh-Stil | 302 | ||
| 7.7 Stildefinitionen für Buttons | 305 | ||
| 7.8 Grafikbasierte Submit-Buttons | 308 | ||
| 7.9 Buttons, die nur einmal benutzt werden können | 309 | ||
| 7.10 Submit-Buttons, die wie einfacher HTML-Text dargestellt werden | 310 | ||
| 7.11 Einfache HTML-Textlinks als Submit-Buttons verwenden | 312 | ||
| 7.12 Ein Webformular ohne Tabellen | 312 | ||
| 7.13 Zweispaltige Formulare ohne Tabellen | 314 | ||
| 7.14 Eingabefelder hervorheben | 318 | ||
| 7.15 Benötigte Formularfelder hervorheben | 319 | ||
| 7.16 Tastaturkürzel in Webformularen hervorheben | 321 | ||
| 7.17 Zusammengehörende Formularelemente gruppieren | 322 | ||
| 7.18 Formulardaten wie bei einem Tabellenkalkulationsdokument eingeben | 325 | ||
| 7.19 Designbeispiel: ein Login-Formular | 329 | ||
| 7.20 Designbeispiel: ein Registrierungsformular | 333 | ||
| 8 Tabellen | 344 | ||
| 8.0 Einführung | 344 | ||
| 8.1 Den Zellzwischenraum einstellen | 344 | ||
| 8.2 Rahmen und Innenabstände für Zellen einstellen | 345 | ||
| 8.3 Stildefinitionen für Tabellenbeschriftungen | 348 | ||
| 8.4 Stildefinitionen für Tabelleninhalte | 349 | ||
| 8.5 Stildefinitionen für die Tabellenüberschriften | 351 | ||
| 8.6 Leerraum zwischen Bildern und dem unteren Zellenrand entfernen | 353 | ||
| 8.7 Zwischenräume zwischen den Tabellenzellen entfernen | 355 | ||
| 8.8 Abwechselnde Hintergrundfarben für Tabellenspalten | 356 | ||
| 8.9 »Aktive« Tabellenzeilen hervorheben | 359 | ||
| 8.10 Designbeispiel: ein eleganter Kalender | 360 | ||
| 9 Seitenlayouts | 370 | ||
| 9.0 Einführung | 370 | ||
| 9.1 Einspaltige Layouts | 370 | ||
| 9.2 Zweispaltige Layouts | 372 | ||
| 9.3 Zweispaltige Layouts mit festen Breiten | 378 | ||
| 9.4 Flexible mehrspaltige Layouts mit Floats | 383 | ||
| 9.5 Mehrspaltige Layouts mit festen Breiten mit Hilfe von Floats | 386 | ||
| 9.6 Mehrspaltige Layouts mit flexiblen Breiten mit Hilfe von Positionierung | 389 | ||
| 9.7 Mehrspaltige Layouts mit festen Breiten mit Hilfe von Positionierung | 393 | ||
| 9.8 Spalten mit Floats in beliebiger Reihenfolge darstellen | 395 | ||
| 9.9 Asymmetrische Layouts | 415 | ||
| 10 Druck | 420 | ||
| 10.0 Einführung | 420 | ||
| 10.1 Eine druckfreundliche Seite erstellen | 421 | ||
| 10.2 Ein Webformular für den Ausdruck aufbereiten | 423 | ||
| 10.3 Nach einem Link den URI anzeigen | 427 | ||
| 10.4 Sonderzeichen vor Links einfügen | 429 | ||
| 10.5 Designbeispiel: Eine druckfreundliche Seite mit CSS | 430 | ||
| 11 Hacks, Workarounds und Fehlersuche | 439 | ||
| 11.0 Einführung | 439 | ||
| 11.1 Besondere Werte für Internet Explorer 5.x für Windows | 440 | ||
| 11.2 Das Flackern beim Laden von Webseiten in Internet Explorer 5. x für Windows verhindern | 444 | ||
| 11.3 Hintergrundbilder in Internet Explorer 6 für Windows verankern | 445 | ||
| 11.4 Conditional Comments | 446 | ||
| 11.5 CSS-Regeln vor Internet Explorer 5 für Macintosh verbergen | 448 | ||
| 11.6 Ein intelligentes System zur Verwaltung von CSS-Hacks | 449 | ||
| 11.7 Diagnose von CSS-Fehlern und Browserproblemen | 451 | ||
| 11.8 Webdesigns mit nur einem Computer für mehrere Plattformen testen | 452 | ||
| 11.9 Mehrere Versionen von Internet Explorer für Windows auf einem Computer installieren | 454 | ||
| 11.10 Websites mit einem textbasierten Browser testen | 455 | ||
| 12 Design mit CSS | 457 | ||
| 12.0 Einführung | 457 | ||
| 12.1 Extrem stark vergrößerter Text | 458 | ||
| 12.2 Unerwartete Unstimmigkeiten erzeugen | 459 | ||
| 12.3 Scheinbar unpassende Dinge kombinieren, um Kontraste zu erzeugen | 462 | ||
| 12.4 Kontraste verwenden, um den Blick zu führen | 464 | ||
| 12.5 Auf genügend hohen Farbkontrast überprüfen | 467 | ||
| 12.6 Zitate hervorheben | 469 | ||
| Anhang A Ressourcen | 472 | ||
| Allgemeine CSS-Anleitungen | 472 | ||
| Design-Ressourcen | 473 | ||
| Diskussionsgruppen | 475 | ||
| Referenzen | 476 | ||
| Werkzeuge | 478 | ||
| Anhang B CSS 2.1-Eigenschaften und proprietäre Erweiterungen | 480 | ||
| Anhang C CSS 2.1-Selektoren, Pseudoklassen und Pseudoelemente | 494 | ||
| Anhang D Stildefinitionen für Formularelemente | 497 | ||
| Index | 524 | ||
| Mehr eBooks bei www.ciando.com | 0 |
