Inhalt Einleitung... 13 1. Der Einstieg in CSS... 17 1.1 Die Grundlagen von (X)HTML... 18 Anatomie eines (X)HTML-Elements... 19 Der Unterschied zwischen XHTML und HTML... 19 1.2 Was ist CSS, und was kann es?... 21 1.3 Was wird benötigt?... 22 Weaverslave installieren und anpassen... 23 Verschiedene Browser... 26 1.4 Wie man CSS schreibt und es mit (X)HTML zusammenbringt... 30 Welche Selektoren gibt es?... 31 CSS einbinden... 43 1.5 Kaskade... 48 Vererbung... 51 Spezifität... 52 1.6 Maßeinheiten und Wertangaben... 53 Prozentangaben... 53 Relative Längenangaben... 53 Absolute Längenangaben... 53 Schlüsselwörter... 54 Farbwerte... 54 Erben: inherit... 54 Sonstige Werteangaben... 54 2. Grundlagen für das Arbeiten mit CSS... 55 2.1 Das Grundgerüst: die XHTML-Datei richtig aufbauen... 56 Die einzelnen Bereiche des Grundgerüsts... 56 2.2 Inhalt auszeichnen und das Dokument strukturieren... 60 Die Elemente gruppieren: div und span... 61 Den Inhalt auszeichnen... 63 2.3 Unterschiede zwischen Tabellen- und CSS-Layout... 65 2.4 Mögliche Probleme beim Arbeiten mit CSS... 66
2.5 Gestaltung der Schrift und des Textes... 66 Schriftname und Schriftfamilie: font-family... 66 Schriftgröße: font-size... 71 Schriftstil: font-style... 76 Schriftgewicht: font-weight... 77 Kapitälchen: font-variant... 79 Kurzform: font... 80 Horizontale Ausrichtung: text-align... 80 Textdekoration: text-decoration... 82 Texteinrückung: text-indent... 83 Textumwandlung: text-transform... 84 Schriftfarbe (Vordergrundfarbe): color... 85 Schreibrichtung: direction... 88 Zeichenabstand: letter-spacing... 89 Zeilenhöhe: line-height... 90 Vertikale Ausrichtung: vertical-align... 92 Textumbruch: white-space... 93 Wortabstand: word-spacing... 95 2.6 Hintergrundfarbe und Hintergrundgrafik... 96 Hintergrundfarbe: background-color... 96 Hintergrundbild: background-image... 97 Hintergrundbild wiederholen: background-repeat... 99 Hintergrundbild fixieren: background-attachment... 101 Hintergrundbild positionieren: background-position... 102 Kurzform: background... 104 2.7 Elemente ausrichten, positionieren und anzeigen... 104 Angaben zum Rahmen... 104 Innerer Abstand: padding... 110 Äußerer Abstand: margin... 112 Breite eines Elements: width... 114 Höhe eines Elements: height... 114 Boxmodell & Co.... 115 Minimale und maximale Höhe und Breite: min-height, min-width, max-height, max-width... 118 Positionierung: position... 120 Überlappungsreihenfolge: z-index... 132 Floating (Umfließen): float... 135 Umfließen beenden: clear... 138 Ausufernder Inhalt: overflow... 140 Sichtbar oder unsichtbar: visibility... 142 Anzeigeart: display... 143
2.8 Erstellen eines einfachen Layouts mit der Eigenschaft position... 144 Mögliche Variationen... 155 2.9 Erstellen eines einfachen Layouts mit der Eigenschaft float... 159 Mögliche Variationen... 167 3. Spezielle Herangehensweisen zur Seiteneinteilung... 169 3.1 CSS-Frames Elemente mit Scrollbalken... 170 Grundlegende Funktionsweise... 170 Darstellen eines Blockelements mit Scrollbalken... 171 Scrollbare Bildergalerie... 173 Textabsätze waagerecht scrollen... 175 Scrollbare Listen... 179 Mit der Eigenschaft overflow Darstellungsfehlern vorbeugen... 182 3.2 Horizontales Zentrieren von Blockelementen... 186 Elemente ohne definierte Breite mit der Eigenschaft margin horizontal zentrieren... 187 Elemente ohne definierte Breite mit der Eigenschaft padding horizontal zentrieren... 190 Elemente mit definierter Breite horizontal zentrieren... 192 3.3 Vertikales Zentrieren von Blockelementen... 194 Vertikales Zentrieren mit padding und margin... 195 Vertikales Zentrieren mit der Eigenschaft position... 201 3.4 Fensterfüllendes Layout... 207 Fensterfüllendes Layout mit skalierbarer Kopf- und Fußzeile... 207 Fensterfüllendes Layout mit festen Höhen für Kopf- und Fußzeile... 212 3.5 Fixieren von Elementen und Seitenbereichen... 215 Die Funktionsweise von position: fixed... 215 Elemente auch im Internet Explorer fixieren... 218 4. Mit Rahmen, Linien, Farben und Grafiken das Layout aufwerten... 229 4.1 Mehrspaltiges Layout mithilfe von Hintergrundgrafiken... 230 Zweispaltiges Layout mit Spalten, die das Fenster in der Vertikalen ausfüllen... 230 Dreispaltiges Layout mit verschiedenfarbigen Spalten, die das Fenster in der Vertikalen ausfüllen... 235
4.2 Runde Ecken... 242 Runde Ecken für einen Bereich mit fester Breite... 244 Runde Ecken für einen Bereich mit variabler Breite... 247 4.3 Fixierte Hintergrundbilder... 253 4.4 Transparenzeffekte mithilfe fixierter Hintergrundgrafiken... 260 4.5 Mikroskopeffekt mit fixierten Hintergrundgrafiken... 271 4.6 Effekte mit transparenten GIF-Grafiken... 276 Strukturierte Rahmenkante... 276 Ecken mit transparenten Grafiken... 279 Schlagschatten mit transparenten GIF-Grafiken... 285 5. Gestaltung von Navigationselementen... 289 5.1 Grundlegendes zum Aufbau von Navigationen... 290 5.2 Formatierung von Verweisen im Allgemeinen... 291 5.3 Diverse einfache Effekte an Textlinks... 292 5.4 Buttons mithilfe von border und background... 297 5.5 Buttons mit Hintergrundgrafiken... 300 Die Verzögerung bei dem Hover-Effekt vermeiden... 303 6. Variationen von Navigationsmenüs... 305 6.1 <a>-elemente im Dokumentenfluss... 307 Senkrecht angeordnetes Menü... 307 Waagerecht angeordnetes Menü... 310 6.2 Das Menü als Liste... 312 Senkrecht angeordnete Menüliste... 312 Waagerecht angeordnete Menüliste... 317 6.3 Menüelemente in Tabellen... 323 6.4 Menüelemente mit Pop-up-Info... 328 Zusatzinfo innerhalb des Menübuttons... 328 Zusatzinfo außerhalb des Menübuttons... 330 Darstellung des Menüs mit Zusatzinformationen ohne CSS... 336 6.5 Aufklappbare Menüs... 341 Senkrecht angeordnete Menüs mit aufklappbaren Unterpunkten... 341 Waagerecht angeordnete Menüs mit aufklappbaren Unterpunkten... 346 Darstellung im Internet Explorer und in anderen älteren Browsern... 349
6.6 Navigationsmenü im Stil von Registern... 351 Register ohne Grafikelemente... 351 Register mit Grafikelementen... 355 6.7 Gestalten von Breadcrumb-Navigationen (Brotkrümelnavigation)... 361 Aufbau des HTML-Codes... 361 Formatierung der Breadcrumb-Navigation... 363 7. Weitergehende Gestaltung des Inhalts im Grundlayout... 369 7.1 Überschriften... 370 7.2 Grafiken... 375 7.3 Tabellen... 379 7.4 Listen... 385 7.5 Textabsätze und Zitatblöcke... 394 7.6 Spalten innerhalb des Grundlayouts... 396 7.7 Links bzw. Verweise gestalten... 400 7.8 Die Pseudoklasse :hover für Nicht-<a>-Elemente... 402 7.9 Codebeispiele gestalten... 405 8. Gestaltung von Formularen... 407 8.1 Einfache Formatierung von Formularelementen... 409 8.2 Formatieren eines kompletten Formulars... 417 Gestalten eines Kontaktformulars... 417 Gestalten eines Newsletter-Formulars... 429 9. Komplettes Layout in CSS... 437 9.1 Erstellen eines kompletten CSS-Layouts... 438 Beispiel 1: Einfache Konstruktion mit großflächigen Grafikelementen... 438 Beispiel 2: Dreispaltige Webseite mit kleinen Grafikelementen... 453 9.2 Vom Tabellenlayout zum CSS-Layout... 468 Neuaufbau des HTML-Codes... 470 Erste Ausrichtung der Elemente... 472 Abstände, Farben, Grafiken... 475 Drei Spalten innerhalb einer Spalte... 479 Zusammenfassung... 489
10. CSS für verschiedene Ausgabemedien... 491 10.1 CSS für die Druckausgabe... 492 Dokumentweite Angaben... 492 Unnötige Bereiche ausblenden... 493 Linkadressen anzeigen... 493 Weitere Angaben... 494 Beispiel einer kompletten CSS-Datei für die Druckerausgabe... 495 Mit (X)HTML und CSS ein Buchprojekt realisieren... 496 10.2 CSS für Handhelds bzw. mobile Geräte... 496 11. Einsatz von alternativen Stylesheets und Styleswitchern... 499 11.1 Alternative Stylesheets erstellen und einbinden... 500 11.2 Styleswitcher... 506 Formate mithilfe von JavaScript ändern... 507 Formate mithilfe von PHP ändern... 510 12. Abschließende Tipps... 517 12.1 Unnötige Div-/Span-Elemente und Class-/ID-Attribute vermeiden... 518 12.2 Den Code von CSS- und XHTML-Dateien übersichtlich organisieren... 520 12.3 CSS-Regeln zusammenfassen und in Kurzform aufschreiben... 523 Die Schreibregeln für die Kurzformen... 523 Beispiele... 524 12.4 Bestimmte Browser von CSS aussperren bzw. gezielt ansprechen (CSS-Browserweiche)... 527 Verschiedene Arten, um CSS einzubinden... 527 Aussperren der Browser durch CSS-Hacks... 528 Conditional Comments... 529 12.5 Tools und Helferlein... 530 12.6 Ausblick auf den Internet Explorer 7... 532
12.7 Häufig auftretende Bugs und deren Lösungen... 533 Boxmodell-Bug... 534 Doppelter margin-wert... 534 Die Drei-Pixel-Lücke... 536 12.8 Weiterführende Quellen und Links... 539 CSS-Links... 540 Browserspezifische Links... 540 Editoren... 540 13. Gängige Hacks und Filter im Überblick... 541 14. Eigenschaften-Referenz... 545 Stichwortverzeichnis... 565