Inhaltsverzeichnis. jetzt lerne ich. 1 Einführung in CSS 17

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 Download-Zeiten = weniger Traffic = geringere Kosten Für Suchmaschinen optimiert Barrierefreiheit (Accessibility) Verschiedene Layouts für unterschiedliche Ausgabemedien 27 7

3 jetzt lerne ich Inhaltsverzeichnis Kein Alles-oder-nichts-Prinzip Formatierungen einfacher realisieren Attraktive Formatierungen über CSS CSS als Teil von dynamischen Anwendungen CSS im Einsatz Was Sie in den nächsten Kapiteln erwartet Wiederholungsfragen und Übungen 31 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 57 8

4 Inhaltsverzeichnis jetzt lerne ich 3 Schrift- und Absatzformatierung Schriftart Längenangaben/Größeneinheiten Schriftgröße bestimmen 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 81 4 Vererbung Vererbung an untergeordnete Elemente Relative Einheiten bei der Vererbung Wiederholungsfragen und Übungen 88 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 117 9

5 jetzt lerne ich Inhaltsverzeichnis Rahmenfarbe Rahmenbreite Kurzschreibweise Innenabstände Unterschiedliche Interpretationen des Boxmodells Wiederholungsfragen und Übungen Hintergründe Hintergrundfarben und -bilder Positionieren von Hintergrundbildern Hintergrundeffekte: Wasserzeichen, Farbverläufe, runde Ecken & Co Wiederholungsfragen und Übungen Links über Pseudoklassen gestalten und weitere nützliche Selektoren 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 Schritt für Schritt zur Navigationsleiste Navigation mit Hintergrundbildern Mehr CSS-Navigationsleisten Wiederholungsfragen und Übungen Formulare und Benutzerschnittstellen Praktische (X)HTML-Elemente für Formulare Formularelemente per CSS gestalten Systemschriftarten und -farben, Mauscursor und farbige Scrollleisten Systemschriftarten Mauszeiger bestimmen Rollbalken einfärben Wiederholungsfragen und Übungen Tabellen gestalten Weniger bekannte (X)HTML-Elemente für Tabellen CSS-Eigenschaften für Tabellen

6 Inhaltsverzeichnis jetzt lerne ich 10.3 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 Umfließen stoppen Bildergalerie mit float Wiederholungsfragen und Übungen Kaskadierung und Priorität Kaskadierung oder wer setzt sich durch? Spezifität Gewichtung (!important) Herkunft Vererbung Reihenfolge Wiederholungsfragen und Übungen Dokumenttypangaben Funktion von Dokumenttypangaben Standard Almost Standard Quirks Einige Auswirkungen der verschiedenen Modi Wiederholungsfragen und Übungen Browser-Weichen & Tricks Browser austricksen: Einführung am Beispiel Die wichtigsten Browser-Hacks und Browser-Weichen Mit ältere Browser ausschließen Boxmodell- oder Tantek-Hack Browser-Weichen über fortschrittliche Selektoren Sternchen-html-Hack * html Conditional Comments verschiedene CSS-Dateien für die unterschiedlichen Internet Explorer-Versionen

7 jetzt lerne ich Inhaltsverzeichnis 14.3 Weitere Hacks und Browser-Weichen Browser-Weiche über Angabe des Medientyps Simplified Box Model Hack (vereinfachter Boxmodell-Hack) Hacks mit dem Unterstrich (_) Kommentarbasierte Tricks 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 Zweispalter über absolute Positionierung Einspalten-Layout: zentrierte Box mit fester Breite Flexible Zweispalten-Layouts Zweispaltiges Layout mit fester linker Spalte Zentrierter Zweispalter mit Kopfzeile Dreispalter mit Kopfzeile Anordnung von Formularelementen per CSS Fixierte Bereiche mit CSS Fest flüssig elastisch Wiederholungsfrage und Ü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 Wiederholungsfrage und Übung Praxisbeispiel Vorbereitungen Navigation mit Tabs Sliding Doors im Einsatz Inhalt und Fußzeile Druckstylesheet Übung

8 Inhaltsverzeichnis jetzt lerne ich 18 Design mit CSS Alles ist relativ Praktisches Beispiel Schritt 1: Die XHTML-Struktur Schritt 2: Hintergrundbilder Schritt 3: Individuelles Hintergrundbild und die Verwendung mehrerer Stylesheets Schritt 4: Der Trick mit dem zusätzlichen»span« Schritt 5: Navigationsleiste 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 Dropdown-Menü Vom Tabellenlayout zum CSS-Layout Vorentscheidungen Grundstruktur erstellen/aufteilung in Bereiche Anordnung der Elemente Ausarbeitung der Details Stylesheet-Definitionen aufteilen CSS und Barrierefreiheit Zukunftsmusik Modular Media Queries Per CSS rechnen Mehr Transparenz CSS 3-Selektoren Fehler finden und Probleme lösen Der (X)HTML-Validator des W3C Validome CSS-Validator Tipps zum Fehlerfinden Probleme mit dem Internet Explorer Mailinglisten/Foren Wiederholungsfragen und Übungen

9 jetzt lerne ich Inhaltsverzeichnis 21 Tools Aus HTML mach XHTML: Tidy Universelles Hilfsmittel: Die Firefox-Erweiterung Firebug Code editieren Webseite inspizieren Firefox-Erweiterung Web Developer Internet Explorer Toolbar für Entwickler Toolbars für andere Browser SelectOracle: Selektoren richtig verstehen CSS-Editoren TopStyle Pro Style Master Style Studio RapidCSS Dreamweaver als CSS-Editor CSS-Frameworks CSS-Framework YUI von Yahoo Erste Schritte mit YUI CSS Mehr Variationen andere Breite, andere Aufteilung Dreispalter erstellen YUI CSS Grid Builder Erste Schritte mit YAML Grundlegender Aufbau Layout anpassen Patchdatei für den Internet Explorer Inhalte formatieren Fortgeschrittene Möglichkeiten Anpassungen einfach zusammenklicken mit dem YAML Builder Framework oder nicht Framework Referenz Erläuterung der Referenz Die wichtigsten Neuerungen im Internet Explorer 7 und 8 auf einen Blick Selektoren CSS-Eigenschaften Sonstiges Referenz

10 Inhaltsverzeichnis jetzt lerne ich Allgemeine CSS-Selektoren Attributselektoren Pseudoklassen Pseudoelemente CSS-Eigenschaften Links zur Browser-Kompatibilität 416 A Anhang 419 A.1 Antworten auf die Wiederholungsfragen und Lösungen zu den Übungen 419 A.2 Inhalte der Buch-DVD 434 A.2.1 Referenz 434 A.2.2 Browser 434 A.2.3 Tools 434 A.2.4 Frameworks 435 A.2.5 Testversionen 435 Stichwortverzeichnis