Inhaltsverzeichnis. jetzt lerne ich

Transkript

1

2 Inhaltsverzeichnis jetzt lerne ich 1 Einführung in CSS Warum Stylesheets notwendig wurden Das W3-Konsortium (W3C) CSS-Versionen Browser-Unterstützung Internet Explorer Netscape/Mozilla/Firefox Opera Konqueror/Safari Browser-Marktanteile Ein Beispiel Vorteile von CSS Trennung von Inhalt und Layout Einfacher in der Wartung, leichter zu aktualisieren Einheitliches Layout Schluss mit Layouttabellen und anderen (faulen) HTML-Tricks Kleinere Dateigröße = schnellere Downloadzeiten = weniger Traffic = geringere Kosten Für Suchmaschinen optimiert Barrierefreiheit (Accessibility) Verschiedene Layouts für unterschiedliche Ausgabemedien Kein Alles-oder-nichts-Prinzip Formatierungen einfacher realisieren 25 7

3 jetzt lerne ich Inhaltsverzeichnis Attraktive Formatierungen über CSS CSS als Teil von dynamischen Anwendungen CSS im Einsatz Was Sie in den nächsten Kapiteln erwartet Wiederholungsfragen und Übungen 29 2 CSS formal Aufbau einer CSS-Deklaration Einbinden von CSS-Angaben Innerhalb des (X)HTML-Elements: Inline-Stile Am Dokumentanfang eingebettetes Stylesheet Einbindung externer Stylesheet-Dateien über link Einbindung externer Stylesheet-Dateien Kommentare Verschiedene Selektoren Elementselektoren Klassenselektoren ID-Selektoren Selektoren gruppieren Universalselektor Exkurs: Unterschiede zwischen HTML und XHTML XML-Deklaration Dokumenttypangabe Namensraumangabe Kleinschreibung für Elemente und Attribute Kein Tag ohne End-Tag Leere Elemente Korrekte Schachtelung Jedes Attribut muss aus Attributname und Attributwert bestehen Attributwerte in Anführungszeichen name- und id-attribute Script- und Style-Bereiche MIME-Typ Unterstützung bei der Konvertierung Überprüfen von XHTML-Dokumenten Wiederholungsfragen und Übungen 55 3 Schrift- und Absatzformatierung Schriftart Längenangaben/Größeneinheiten Schriftgröße bestimmen 61 8

4 Inhaltsverzeichnis jetzt lerne ich 3.4 Zeilenhöhe Farbangaben Weitere Zeichenformatierungen Weitere Text- und Absatzformatierungen Absätze einrücken Absatz- und Textausrichtungen »Text-Ausschmückungen« Abstände und andere nützliche Formatierungen Wiederholungsfragen und Übungen 78 4 Vererbung Vererbung an untergeordnete Elemente Relative Einheiten bei der Vererbung Wiederholungsfragen und Übungen 84 5 Listen und Aufzählungen Listen Dokumentstruktur Formatierung von verschachtelten Listen über Nachfahrenselektoren Weitere Selektoren, die auf der Dokumentstruktur basieren Nützliche Formatierungen für Listen Wiederholungsfragen und Übungen Boxen und Boxmodell Grundprinzip des Boxmodells Inhaltsbereich Breite Höhe Außenabstände margin Zusammentreffen von Außenabständen Negative Außenabstände Standardwerte bei margin Rahmen Rahmenstil Rahmenfarbe Rahmenbreite Kurzschreibweise Innenabstände Unterschiedliche Interpretationen des Boxmodells Wiederholungsfragen und Übungen 122 9

5 jetzt lerne ich Inhaltsverzeichnis 7 Hintergründe Hintergrundfarben und -bilder Positionieren von Hintergrundbildern Hintergrundeffekte: Wasserzeichen, Farbverläufe, runde Ecken & Co Wiederholungsfragen und Übungen Links gestalten Links gestalten über Pseudoklassen Pseudoelemente und weitere Pseudoklassen Sprachspezifische Formatierungen über :lang() Erstes Kindelement :first-child Verschiedene Links in Projekten unterschiedlich gestalten Fortgeschrittene Methoden nicht nur zur Auswahl bestimmter Links: Attributselektoren Weitere Linkformatierungen über zusätzliche Zeichen Schritt für Schritt zur Navigationsleiste Grafische Rollover ohne JavaScript Wiederholungsfragen und Übungen Formulare und Benutzerschnittstellen Praktische (X)HTML-Elemente für Formulare Formularelemente per CSS gestalten Systemschriftarten und -farben, Mauscursor und farbige Scrollleisten Wiederholungsfragen und Übungen Tabellen gestalten Weniger bekannte (X)HTML-Elemente für Tabellen CSS-Eigenschaften für Tabellen Spezielle CSS-Formatierungen für Tabellen Tabellarische Daten übersichtlich präsentieren Bilder in Tabellen Wiederholungsfragen und Übungen Elemente über CSS anordnen Unterschiedliche Positionierungsarten Positionierungstyp "static" Positionierungstyp "absolute" Positionierungstyp "relative" Positionierungstyp "fixed" Überlappungen Floats Wiederholungsfragen und Übungen

6 Inhaltsverzeichnis jetzt lerne ich 12 Kaskadierung und Priorität Kaskadierung oder wer setzt sich durch? Spezifität Gewichtung (!important) Herkunft Vererbung Reihenfolge Wiederholungsfragen und Übungen Dokumenttypangaben Aufbau von Dokumenttypangaben Standard Almost Standard Quirks Einige Auswirkungen der verschiedenen Modi Wiederholungsfragen und Übungen Browser-Weichen & Tricks Browser austricksen: Einführung am Beispiel Browser-Hacks und Browser-Weichen Mit ältere Browser ausschließen Browser-Weiche über Angabe des Medientyps Boxmodell- oder Tantek-Hack Simplified Box Model Hack (vereinfachter Boxmodell-Hack) High Pass Filter Browser-Weichen über fortschrittliche Selektoren Sternchen-html-Hack * html Hacks mit dem Unterstrich (_) Conditional Comments verschiedene CSS-Dateien für die unterschiedlichen Internet Explorer-Versionen Kommentarbasierte Tricks Browser-Hacks und der Internet Explorer Zusammenfassung und Übersicht zu den Hacks/Filtern für die verschiedenen Internet Explorer-Versionen Browser-Hacks und allgemeine Strategien In Browsern testen Mehrere Internet Explorer-Versionen parallel installieren Screenshot-Dienste Wiederholungsfragen und Übungen Layouten per CSS Zentrieren von Elementen Einspalten-Layout: zentrierte Box mit fester Breite Flexible Zweispalten-Layouts Zweispaltiges Layout mit fester linker Spalte

7 jetzt lerne ich Inhaltsverzeichnis 15.5 Zentrierter Zweispalter mit Kopfzeile Dreispalter mit Kopfzeile Anordnung von Formularelementen per CSS Fixierte Bereiche mit CSS Übung Medienspezifische CSS-Dateien Angaben für unterschiedliche Ausgabemedien Spezielle CSS-Layouts für den Druck Andere Darstellung für den Druck Links für den Druck mit angezeigter URL Layout für die Vorführung: Opera statt Powerpoint Wiederholungsfragen und Übungen Design mit CSS Alles ist relativ Praktisches Beispiel Schritt 1: Die XHTML-Struktur Schritt 2: Allgemeine Hintergrundbilder Schritt 3: Zusätzliches Hintergrundbild und die Verwendung mehrerer Stylesheets Schritt 4: Der Trick mit dem zusätzlichen»span« Schritt 5: Navigationsliste Und jetzt das Ganze noch mal relativ Noch ein paar grundsätzliche Tipps Sollte man völlig auf Tabellen verzichten? Wie groß sollte man ein Layout anlegen? Ordnung ist die halbe Arbeit oder die»div-suppe« Über das Gestalten von Webseiten CSS Tipps und Tricks Styleswitcher mit PHP JavaScript als Ausgleich für fehlerhafte CSS-Unterstützung Mit CSS XML-Dateien formatieren Vom Tabellenlayout zum CSS-Layout Vorentscheidungen Grundstruktur erstellen/aufteilung in Bereiche Anordnung der Elemente Ausarbeitung der Details Stylesheet-Definitionen aufteilen CSS und Barrierefreiheit Zukunftsmusik

8 Inhaltsverzeichnis jetzt lerne ich 19 Fehlersuche und Validierung Der (X)HTML-Validator des W3C Validome CSS-Validator Tipps zum Fehlerfinden Mailinglisten/Foren Wiederholungsfragen und Übungen Tools Aus HTML mach XHTML: Tidy DOM-Inspector von Mozilla/Firefox EditCSS Toolbars für Webentwickler SelectOracle: Selektoren richtig verstehen CSS-Editoren TopStyle Pro Style Master Style Studio RapidCSS Dreamweaver als CSS-Editor Referenz Erläuterung der Referenz Die wichtigsten Neuerungen im Internet Explorer 7 auf einen Blick Selektoren CSS-Eigenschaften Sonstiges Referenz Allgemeine CSS-Selektoren Attributselektoren Pseudoklassen Pseudoelemente CSS-Eigenschaften Links zur Browser-Kompatibilität 388 Anhang A: Antworten auf die Wiederholungsfragen und Lösungen zu den Übungen 391 Anhang B: Inhalte der CD 407 Stichwortverzeichnis