Inhaltsverzeichnis. Teil 1: CSS-Grundlagen. Die fehlenden Danksagungen... Einleitung...

Transkript

1 Inhaltsverzeichnis Die fehlenden Danksagungen Einleitung XI XV Teil 1: CSS-Grundlagen Kapitel 1: HTML-Code für CSS optimieren HTML: Vergangenheit und Zukunft HTML in der Vergangenheit: Hauptsache, es sieht gut aus HTML heute: Das Grundgerüst für CSS HTML-Code für die Verwendung mit CSS schreiben HTML = Struktur Zwei neue HTML-Tags HTML-Code, den Sie am besten vergessen Ein paar Tipps für unterwegs Die Bedeutung der Dokumenttyp-Definition Kapitel 2: Stildefinitionen und Stylesheets Anatomie einer Stildefinition Stylesheets verstehen Intern oder extern die richtige Wahl Interne Stylesheets Externe Stylesheets Stylesheets mit HTML einbinden Stylesheets mit CSS einbinden Übung: Ihre ersten eigenen Stildefinitionen Inline-Stile definieren Interne Stylesheets erstellen Externe Stylesheets erstellen Kapitel 3: Selektoren-Grundlagen: Welcher Stil für wen? Typ-Selektoren: Stile für die ganze Seite Klassen-Selektoren: zielgenaue Kontrolle ID-Selektoren: Regeln für ein bestimmtes Seitenelement Stildefinitionen für verschachtelte Tags Der HTML-Stammbaum Selektoren für Nachfahren-Elemente verwenden Stile für mehrere Tags auf einmal definieren Selektoren gruppieren Der universelle Selektor (Asterisk, *) V

2 Pseudoklassen und Pseudoelemente Stildefinitionen für Links Noch mehr Pseudoelemente und -klassen Selektoren für Fortgeschrittene Kind-Selektoren Benachbarte Geschwister-Elemente Attribut-Selektoren Übung: Beispiele für Selektoren Selektoren gruppieren Klassen-Selektoren anlegen und verwenden ID-Selektoren erstellen und anwenden Nachfahren-Selektoren erstellen und verwenden Kapitel 4: Zeit sparen durch Vererbung Was ist Vererbung? Wie die Vererbung Stylesheets vereinfachen kann Einschränkungen der Vererbung Übung: Vererbung Ein einfaches Beispiel: Eine Vererbungsebene Vererbung verwenden, um eine ganze Seite umzugestalten Ausnahmen von der Vererbung Kapitel 5: Mit mehreren Stilen umgehen: die Kaskade Wie Stile kaskadiert werden Vererbte Stile werden zusammengefasst Der nächste Vorfahr gewinnt Direkt zugewiesene Stildefinitionen gewinnen Ein Tag, viele Stile Spezifität: Welcher Stil gewinnt? Das Zünglein an der Waage: Der zuletzt definierte Stil gewinnt Die Kaskade unter Kontrolle behalten Die Spezifität ändern Selektives Überschreiben Übung: Die Kaskade in Aktion Eine hybride Stildefinition erstellen Kaskadierung und Vererbung kombinieren Konflikte ausräumen Teil 2: Angewandtes CSS Kapitel 6: Textformatierung Text formatieren Die richtige Schrift auswählen Farbiger Text Die Schriftgröße ändern Pixel Schlüsselwörter, Prozentwerte und em-einheiten Wörter und Buchstaben formatieren Kursiv- und Fettschrift VI CSS: Missing Manual

3 Großbuchstaben Ausschmückungen Buchstaben- und Wortabstände Ganze Absätze formatieren Zeilenabstand anpassen Textausrichtung Zeilen einrücken und unerwünschte Ränder entfernen Den ersten Buchstaben oder die erste Zeile eines Absatzes formatieren Stildefinitionen für Listen Verschiedene Aufzählungszeichen oder: die Quadratur des Kreises Aufzählungszeichen positionieren Grafische Aufzählungszeichen Übung: Textformatierung in der Praxis Die Seite einrichten Überschriften und Absätze formatieren Listen formatieren Der letzte Schliff Kapitel 7: Rahmen, Innen- und Außenabstände Das Boxmodell verstehen Den Leerraum mit Innen- und Außenabständen kontrollieren Kurzschrift-Eigenschaften für Innen- und Außenabstände Wenn Außenabstände kollabieren Negative Außenabstände zum Entfernen von Leerraum Inline- und Block-Elemente darstellen Rahmen Die Kurzschrift-Eigenschaft für Rahmen Rahmenseiten einzeln formatieren Hintergrundfarben Höhe und Breite festlegen Die tatsächliche Höhe und Breite einer Box berechnen Textüberlauf im Griff mit der Eigenschaft overflow Das defekte Boxmodell des Internet Explorer 5 reparieren Elemente umfließen lassen Hintergründe, Rahmen und Floats Umfließen verhindern Übung: Außenabstände, Hintergründe und Rahmen Seitenränder anpassen Den Leerraum zwischen den Elementen anpassen Text mit Hintergründen und Rahmen hervorheben Eine Seitenleiste erstellen Die Programmierfehler ausbügeln Weitere Schritte Kapitel 8: Webseiten mit Grafiken versehen CSS und das <img>-tag Hintergrundbilder Bildwiederholungen steuern Hintergrundbilder positionieren Schlüsselwörter Inhaltsverzeichnis VII

4 Präzise Werte Prozentwerte Hintergrundbilder fixieren Die Kurzschrift-Eigenschaft für Hintergründe Übung: Eine Fotogalerie erstellen Bilder rahmen Bildunterschriften hinzufügen Eine Fotogalerie erstellen Schattenwürfe Übung: Hintergrundbilder verwenden Ein Bild als Hintergrund für Seitenelemente verwenden Rahmenlinien durch Grafiken ersetzen Eigene Grafiken als Aufzählungszeichen für Listen Abgerundete Ecken für die Seitenleiste Ein externes Stylesheet anlegen Kapitel 9: Zeitgemäße Navigation für Ihre Website Entscheiden, welche Links formatiert werden sollen Den Link-Zustand verstehen Nur bestimmte Links formatieren Links gestalten Links unterstreichen Buttons erstellen Grafiken verwenden Navigationsleisten erstellen Ungeordnete Listen verwenden Vertikale Navigationsleisten Horizontale Navigationsleisten Fortgeschrittene Techniken für Links Große, anklickbare Buttons CSS-basierte Rollover-Effekte Sliding Doors Übung: Links formatieren Grundsätzliche Formatierungen für Links Links mit Hintergrundbildern versehen Externe Links speziell kennzeichnen Besuchte Seiten markieren Ein vertikales Navigationsmenü erstellen Rollover-Effekte und»sie sind hier«-links Programmierfehler im Internet Explorer ausbügeln Von vertikal nach horizontal Kapitel 10: Tabellen und Formulare Tabellen richtig verwenden Tabellen mit Stil Innenabstände Vertikale und horizontale Ausrichtung anpassen Rahmen anlegen Zeilen und Spalten gestalten VIII CSS: Missing Manual

5 Formulare mit Stil HTML-Formularelemente Formulardesign mit CSS Übung: Stile für Tabellen Übung: Stile für Formulare Teil 3: Seitenlayout mit CSS Kapitel 11: Float-basierte Layouts Wie das Layout mit CSS funktioniert Das mächtige <div>-tag Verschiedene Arten von Webseitenlayouts Grundlagen des Float-basierten Layouts Floats für Ihre Layouts einsetzen Alle Spalten als Float definieren Floats in Floats Elemente mit negativen Außenabständen positionieren Probleme mit Floats lösen Das Umfließen von Floats steuern Spalten über die gesamte Höhe der Seite Das Verrutschen von Floats verhindern Programmierfehler im Internet Explorer umgehen Der»Double-Margin«-Bug Pixel-Lücken Weitere Probleme mit dem Internet Explorer Übung: Mehrspaltige Layouts Strukturieren Sie den HTML-Code Die Layoutregeln erstellen Weitere Spalten hinzufügen Spalten über die ganze Höhe der Seite (»Faux Columns«) Die Breite korrigieren Übung: Layout mit negativen Außenabständen Das Layout zentrieren Die Spalten als Floats definieren Letzte Anpassungen Kapitel 12: HTML-Elemente positionieren Wie CSS-Eigenschaften für die Positionierung funktionieren Die Positionierung steuern Einstein und die absolute Positionierung Wann (und wo) relative Positionierung sinnvoll ist Elemente stapeln Teile einer Seite verstecken Sinnvolle Strategien für die Positionierung Positionierung innerhalb eines Elements Ein Element außerhalb seiner Box darstellen CSS-Positionierung für das Seitenlayout verwenden Frames mit CSS und fester Positionierung Inhaltsverzeichnis IX

6 Übung: Seitenelemente positionieren Den Kopfteil einer Seite verbessern Fotos mit Beschriftungen versehen Seitenlayout Teil 4: Fortgeschrittenes CSS Kapitel 13: CSS für gedruckte Seiten Wie medienspezifische Stylesheets funktionieren Medienspezifische Stylesheets einbinden Medientypen für ein externes Stylesheet angeben Medientypen innerhalb eines Stylesheets angeben Stylesheets für den Ausdruck erstellen Regeln zur Bildschirmdarstellung mithilfe von!important überschreiben Textstile überarbeiten Hintergründe für den Ausdruck formatieren Unerwünschte Bereiche einer Seite ausblenden Seitenumbrüche für das Ausdrucken hinzufügen Übung: Ein Stylesheet für die Druckversion einer Webseite erstellen Unerwünschte Seitenelemente entfernen Hintergründe entfernen und das Layout anpassen Den Text neu formatieren Das Logo darstellen URLs mit ausdrucken Kapitel 14: Besseren CSS-Code schreiben Kommentare Stildefinitionen und Stylesheets sinnvoll ordnen Aussagekräftige Namen verwenden Mehrere Klassen gleichzeitig verwenden Stile durch thematische Zusammenfassung ordnen Mehrere Stylesheets verwenden Unterschiede in der Browserdarstellung beheben Nachfahren-Selektoren verwenden Unterteilen Sie Ihre Seiten Mein Körper gehört mir Mit Hacks für den Internet Explorer umgehen Entwickeln Sie zuerst für aktuelle Browser Isolieren Sie CSS-Code für den IE mit Conditional Comments Teil 5: Anhänge Anhang A: Referenz der CSS-Eigenschaften Anhang B: CSS-Ressourcen Index X CSS: Missing Manual