Cascading Stylesheets

Transkript

1 Dan Shafer Kevin Yank Cascading Stylesheets Anspruchsvolle Websites mit CSS gestalten - Grundlagen, Designtechniken und Referenz Übersetzt aus dem Amerikanischen von Thorsten Mücke und Wolfgang Tress dpunkt.verlag

2 I Einführung in CSS 1 Ein erster Überblick CSS im Zusammenhang Der eigentliche Zweck von CSS Warum die meisten Tabellen schlecht sind Tabellen verursachen lange Ladezeiten Transparente Bilder bremsen aus Tabellen pflegen ist ein Alptraum Wann Tabellen in Ordnung sind Was ist CSS nun wirklich? Teile einer CSS-Regel Typen von CSS-Regeln Welche Eigenschaften kann man mit CSS-Regeln beeinflussen? Welche Elemente kann man mit CSS beeinflussen? Wo können CSS-Stile definiert werden? Warum die ganze Aufregung? Zusammenfassung 20 2 CSS ins rechte Licht gerückt Wofür eigentlich CSS? Farben und CSS Schriften und CSS Animation von Pseudo-Klassen und CSS 26

3 2.1.4 Bilder und CSS Alternative Stylesheets, Benutzer und CSS Wofür CSS allein nicht ausreicht CSS für behindertenfreundliche Websites CSS und die sich ständig verändernde Welt der Browser Alten Browsern entgegenkommen Der Umgang mit kaputten Browsern Zusammenfassung 41 3 Blick hinter die Kulissen CSS in Verbindung mit HTML-Dokumenten Zusammenfassende Eigenschaften einsetzen Wie Vererbung in CSS funktioniert Selektoren und Struktur von CSS-Regeln Universeller Selektor Elementtyp-Selektor Klassen-Selektor ID-Selektor Pseudo-Element-Selektor Pseudo-Klassen-Selektor Selektor für Nachfahren Selektor für direkt über- und untergeordnete Elemente Selektoren für benachbarte Elemente Artribut-Selektoren Selektor-Gruppierung Maßangaben Absolute Werte Relative Werte CSS-Kommentare Zusammenfassung 63

4 ix II Seitenlayout mit CSS 4 Webdesign mit CSS Die Vorteile von CSS-Design Mehr Gestaltungsmöglichkeiten Zentrale Designinformationen e semantisch auszeichnen Verbesserter Zugang Standards einhalten Erfolgsgeschichten mit CSS Unsere Beispielseite: Footbag Freaks Zusammenfassung 77 5 Das Gerüst aufbauen Seitentypen und Seitenbereiche auflisten Wie viele Seitentypen? Wieviele Seitenbereiche? Layout mit Abständen und Rahmen Das CSS-Box-Modell Die display-eigenschaft CSS-Positionierung und mehrspaltiges Layout Absolute und relative Positionierung Ein normales Drei-Spalten-Layout Den Kopfbereich hinzufügen Zusammenfassung Alles an seinem Platz Seitenbereiche positionieren - zweiter Teil Maßeinheiten beeinflussen das Design Die float-eigenschaft Die clear-eigenschaft Die Eigenschaft z-index und gestapelte e CSS-Layout in der Praxis: Footbag Freaks Zusammenfassung 136

5 III Design mit CSS 7 Etwas Farbe ins Spiel bringen Wer hat hier eigentlich das Sagen? Farben in CSS Wie man Farben bestimmt Farben auswählen und kombinieren Die body-farbe festlegen Transparenz, Farbe und Benutzereinstellungen Kreativer Einsatz von Farben Auffällige farbige Textkästen Tabellen mit farbigen Feldern Zusammenfassung Schriften einsetzen mit CSS Wie CSS mit Schriften umgeht Die font-fami Ty-Eigenschaft Die font-size-eigenschaft HTML-Maße und CSS-Maße Unterschiede zwischen Browsern und Plattformen Relativ zu was? Weitere Schrifteigenschaften Die font-style-eigenschaft Die font-variant-eigenschaft Die font-weight-eigenschaft Die zusammenfassende font-eigenschaft Standardisierte und nicht standardisierte Schrifttypen Schriftenlisten definieren Nicht standardisierte und herunterladbare Schriften einsetzen Zusammenfassung 168

6 xi 9 Texteffekte und Kaskadierung Das span-element Textausrichtung als Designtechnik Textausrichtung in CSS und HTML Ausrichtung schafft Platz und Luft Zeileneinrücken Horizontale und vertikale Abstände Die 1 ine-height-eigenschaft Die Eigenschaften letter-spacing und word-spacing Dekorativer Text Schattierter Text ohne Grafik Hyperlinks gestalten Listen gestalten mit CSS Die 1 i st-styl e-type-eigenschaft Die 1 i st-styl e-position-eigenschaft Die list-style-image-eigenschaft Kaskadierung in CSS Das Prinzip der Kaskadierung Abfolge von Ereignissen Besonderheit (Spezifität) Herkunft Gewichtung (ümportant) Zusammenfassung CSS und Grafiken Bilder und Text ausrichten Text auf Bildern positionieren HTML-e ausschneiden Zusammenfassung 219

7 [xh IV Fortgeschrittene CSS-Techniken 11 Verbessertes Spaltenlayout mit CSS Grenzen des CSS-Layouts Mit JavaScript zum perfekten Spaltenlayout Zusammenfassung Mehr Benutzerfreundlichkeit mit CSS Ein einfaches Navigationsmenü mit Listen Das Look & Feel verbessern Ein Untermenü im Hauptmenü hinzufügen Den Mauszeiger verändern Hintergrundbilder fixieren Zusammenfassung CSS-Validierung und Unterstützung älterer Browser CSS-Seiten validieren Eine CSS-Seite abwärtskompatibel machen Welche Browser sind nicht CSS-konform? Umgang mit Browsern, die CSS nicht unterstützen Netscape 4.x berücksichtigen Einsatz von DOCTYPE Switching Zusammenfassung 262 V Anhänge A Verschiedenes über CSS 265 At-Regeln 265 Auditive Stylesheets 269 CSS und JavaScript 270 B CSS-Farbreferenz 273

8 Referenz der CSS-Eigenschaften 279 azimuth 279 background 280 background-attachment 281 background-color 282 background-image 283 background-position 284 background-position-x, background-position-y background-repeat 287 behavior 288 border 289 border-bottom-color, border-top-color, border-left-color, border-right-color 290 border-bottom-style, border-top-style, border-left-style, border-right-style 291 border-bottom-wi dth, border-top-wi dth, border-left-width, border-right-width 292 border-col1apse 292 border-coior 293 border-spaci ng 295 border-style 295 border-wi dth 297 bottom 298 caption-side 299 cl ear 300 clip 301 col or 302 content 303 counter-increment 306 counter-reset 307 cue 308 cue-after, cue-before 309 Cursor 309 direction 311 di splay 313 elevation 317 empty-cel1s 317 fi 1 ter 318 f 1 oat 320 font 321 font-fami1y 323 font-size 324 font-size-adjust 327 font-stretch 328

9 Ixiv font-style 329 font-variant 330 font-weight 331 height 332 1ayer-background-color 334 i me-mode 334 1ayer-background-image 336 1ayout-f1ow 337 1ayout-gri d 337 1ayout-grid-1ine 339 layout-grid-char 339 1ayout-gri d-mode 340 1ayout-grid-type eft 342 1ine-break 344 1etter-spacing 344 line-height 345 1i st-style 347 list-style-image 349 list-style-position 350 list-style-type 351 margi n 352 margin-bottom, margin-top, margin-left, margin-right 354 marker-offset 355 marks 356 max-height, min-height 356 max-width, min-width 357 -moz-border-radi us 358 -moz-border-radius-bottomleft, -moz-border-radius-bottomright, -moz-border-radius-topieft, -moz-border-radius-topright 360 -moz-opacity 361 orphans 362 outli ne 363 outl i ne-color 364 outli ne-style 365 outli ne-wi dth 366 overf1ow 367 overflow-x, overflow-y 368 paddi ng 369 padding-bottom, padding-top; padding-left, padding-right 371 page 372

10 page-break-after 373 page-break-before 374 page-break-inside 375 pause 376 pause-after, pause-before 377 pitch 378 pi tch-range 379 play-duri ng 379 posi ti on 380 quotes 382 ri chness 383 ri ght 384 ruby-ali gn 385 ruby-overhang 386 ruby-posi ti on 387 scrol1bar-base-col or 389 scrol1bar-element-coi or 390 size 391 speak-header 392 speak 392 speak-numeral 393 speak-punctuation 394 speech-rate 395 stress 396 table-1ayout 396 text-align 397 text-ali gn-1ast 398 text-autospace 399 text-decoration 400 text-i ndent 401 text-justi fy 402 text-kashida-space 403 text-overf1ow 404 text-shadow 405 text-transform 406 text-underline-position 407 top 408 unicode-bidi 409 vertical-align 411 visibility 414 volume 415 voice-family 415 whi te-space 416 width 418

11 xvi wi dows 418 word-break 420 word-spacing 421 word-wrap 422 wri ti ng-mode 422 z-i ndex 423 zoom 424 Empfohlene Bücher und Websites 427 Bücher 427 Nützliche Webseiten 428 Index 435