Inhalt. Einleitung... 13

Transkript

1 Inhalt Einleitung Der Einstieg in CSS Die Grundlagen von (X)HTML Anatomie eines (X)HTML-Elements Der Unterschied zwischen XHTML und HTML Was ist CSS, und was kann es? Was wird benötigt? Weaverslave installieren und anpassen Verschiedene Browser Wie man CSS schreibt und es mit (X)HTML zusammenbringt Welche Selektoren gibt es? CSS einbinden Kaskade Vererbung Spezifität Maßeinheiten und Wertangaben Prozentangaben Relative Längenangaben Absolute Längenangaben Schlüsselwörter Farbwerte Erben: inherit Sonstige Werteangaben Grundlagen für das Arbeiten mit CSS Das Grundgerüst: die XHTML-Datei richtig aufbauen Die einzelnen Bereiche des Grundgerüsts Inhalt auszeichnen und das Dokument strukturieren Die Elemente gruppieren: div und span Den Inhalt auszeichnen Unterschiede zwischen Tabellen- und CSS-Layout Mögliche Probleme beim Arbeiten mit CSS... 66

2 2.5 Gestaltung der Schrift und des Textes Schriftname und Schriftfamilie: font-family Schriftgröße: font-size Schriftstil: font-style Schriftgewicht: font-weight Kapitälchen: font-variant Kurzform: font Horizontale Ausrichtung: text-align Textdekoration: text-decoration Texteinrückung: text-indent Textumwandlung: text-transform Schriftfarbe (Vordergrundfarbe): color Schreibrichtung: direction Zeichenabstand: letter-spacing Zeilenhöhe: line-height Vertikale Ausrichtung: vertical-align Textumbruch: white-space Wortabstand: word-spacing Hintergrundfarbe und Hintergrundgrafik Hintergrundfarbe: background-color Hintergrundbild: background-image Hintergrundbild wiederholen: background-repeat Hintergrundbild fixieren: background-attachment Hintergrundbild positionieren: background-position Kurzform: background Elemente ausrichten, positionieren und anzeigen Angaben zum Rahmen Innerer Abstand: padding Äußerer Abstand: margin Breite eines Elements: width Höhe eines Elements: height Boxmodell & Co Minimale und maximale Höhe und Breite: min-height, min-width, max-height, max-width Positionierung: position Überlappungsreihenfolge: z-index Floating (Umfließen): float Umfließen beenden: clear Ausufernder Inhalt: overflow Sichtbar oder unsichtbar: visibility Anzeigeart: display

3 2.8 Erstellen eines einfachen Layouts mit der Eigenschaft position Mögliche Variationen Erstellen eines einfachen Layouts mit der Eigenschaft float Mögliche Variationen Spezielle Herangehensweisen zur Seiteneinteilung CSS-Frames Elemente mit Scrollbalken Grundlegende Funktionsweise Darstellen eines Blockelements mit Scrollbalken Scrollbare Bildergalerie Textabsätze waagerecht scrollen Scrollbare Listen Mit der Eigenschaft overflow Darstellungsfehlern vorbeugen Horizontales Zentrieren von Blockelementen Elemente ohne definierte Breite mit der Eigenschaft margin horizontal zentrieren Elemente ohne definierte Breite mit der Eigenschaft padding horizontal zentrieren Elemente mit definierter Breite horizontal zentrieren Vertikales Zentrieren von Blockelementen Vertikales Zentrieren mit padding und margin Vertikales Zentrieren mit der Eigenschaft position Fensterfüllendes Layout Fensterfüllendes Layout mit skalierbarer Kopf- und Fußzeile Fensterfüllendes Layout mit festen Höhen für Kopf- und Fußzeile Fixieren von Elementen und Seitenbereichen Die Funktionsweise von position: fixed Elemente auch im Internet Explorer fixieren Mit Rahmen, Linien, Farben und Grafiken das Layout aufwerten Mehrspaltiges Layout mithilfe von Hintergrundgrafiken Zweispaltiges Layout mit Spalten, die das Fenster in der Vertikalen ausfüllen Dreispaltiges Layout mit verschiedenfarbigen Spalten, die das Fenster in der Vertikalen ausfüllen

4 4.2 Runde Ecken Runde Ecken für einen Bereich mit fester Breite Runde Ecken für einen Bereich mit variabler Breite Fixierte Hintergrundbilder Transparenzeffekte mithilfe fixierter Hintergrundgrafiken Mikroskopeffekt mit fixierten Hintergrundgrafiken Effekte mit transparenten GIF-Grafiken Strukturierte Rahmenkante Ecken mit transparenten Grafiken Schlagschatten mit transparenten GIF-Grafiken Gestaltung von Navigationselementen Grundlegendes zum Aufbau von Navigationen Formatierung von Verweisen im Allgemeinen Diverse einfache Effekte an Textlinks Buttons mithilfe von border und background Buttons mit Hintergrundgrafiken Die Verzögerung bei dem Hover-Effekt vermeiden Variationen von Navigationsmenüs <a>-elemente im Dokumentenfluss Senkrecht angeordnetes Menü Waagerecht angeordnetes Menü Das Menü als Liste Senkrecht angeordnete Menüliste Waagerecht angeordnete Menüliste Menüelemente in Tabellen Menüelemente mit Pop-up-Info Zusatzinfo innerhalb des Menübuttons Zusatzinfo außerhalb des Menübuttons Darstellung des Menüs mit Zusatzinformationen ohne CSS Aufklappbare Menüs Senkrecht angeordnete Menüs mit aufklappbaren Unterpunkten Waagerecht angeordnete Menüs mit aufklappbaren Unterpunkten Darstellung im Internet Explorer und in anderen älteren Browsern

5 6.6 Navigationsmenü im Stil von Registern Register ohne Grafikelemente Register mit Grafikelementen Gestalten von Breadcrumb-Navigationen (Brotkrümelnavigation) Aufbau des HTML-Codes Formatierung der Breadcrumb-Navigation Weitergehende Gestaltung des Inhalts im Grundlayout Überschriften Grafiken Tabellen Listen Textabsätze und Zitatblöcke Spalten innerhalb des Grundlayouts Links bzw. Verweise gestalten Die Pseudoklasse :hover für Nicht-<a>-Elemente Codebeispiele gestalten Gestaltung von Formularen Einfache Formatierung von Formularelementen Formatieren eines kompletten Formulars Gestalten eines Kontaktformulars Gestalten eines Newsletter-Formulars Komplettes Layout in CSS Erstellen eines kompletten CSS-Layouts Beispiel 1: Einfache Konstruktion mit großflächigen Grafikelementen Beispiel 2: Dreispaltige Webseite mit kleinen Grafikelementen Vom Tabellenlayout zum CSS-Layout Neuaufbau des HTML-Codes Erste Ausrichtung der Elemente Abstände, Farben, Grafiken Drei Spalten innerhalb einer Spalte Zusammenfassung

6 10. CSS für verschiedene Ausgabemedien CSS für die Druckausgabe Dokumentweite Angaben Unnötige Bereiche ausblenden Linkadressen anzeigen Weitere Angaben Beispiel einer kompletten CSS-Datei für die Druckerausgabe Mit (X)HTML und CSS ein Buchprojekt realisieren CSS für Handhelds bzw. mobile Geräte Einsatz von alternativen Stylesheets und Styleswitchern Alternative Stylesheets erstellen und einbinden Styleswitcher Formate mithilfe von JavaScript ändern Formate mithilfe von PHP ändern Abschließende Tipps Unnötige Div-/Span-Elemente und Class-/ID-Attribute vermeiden Den Code von CSS- und XHTML-Dateien übersichtlich organisieren CSS-Regeln zusammenfassen und in Kurzform aufschreiben Die Schreibregeln für die Kurzformen Beispiele Bestimmte Browser von CSS aussperren bzw. gezielt ansprechen (CSS-Browserweiche) Verschiedene Arten, um CSS einzubinden Aussperren der Browser durch CSS-Hacks Conditional Comments Tools und Helferlein Ausblick auf den Internet Explorer

7 12.7 Häufig auftretende Bugs und deren Lösungen Boxmodell-Bug Doppelter margin-wert Die Drei-Pixel-Lücke Weiterführende Quellen und Links CSS-Links Browserspezifische Links Editoren Gängige Hacks und Filter im Überblick Eigenschaften-Referenz Stichwortverzeichnis