Workshop Internet-Präsenz
5. Cascading Style Sheets
Anmerkung: Im Falle der Übungsdateien wird ein neues Frames-Fenster geöffnet, im linken Teilfenster erscheint die Datei in einer Ansicht-Version, das rechte Frame-Fenster zeigt den Quelltext. Der Link [Quelltext] bewirkt nur die Ausgabe der Quelltextdatei (ohne Frames).
- Beschreibung Cascading Style Sheets
- Referenz
- Übungsdateien
- Vereinbarung von Stilanweisungen
- Selektoren
- Texteigenschaften
- Ausrichtung und Absatzkontrolle
- Textausrichtung [Quelltext]
- Zeilenhöhe [Quelltext]
- Verhinderung des Zeilenumbruchs [Quelltext]
- Absatzeinzug [Quelltext]
- Vertikale Ausrichtung in Tabellenzellen [Quelltext]
- Links-Rechts-Ausrichtung
- Boxeigenschaften
- Außenrand, Rahmen, Innenabstand [Quelltext]
- Hintergrundfarben und -bilder [Quelltext]
- Zentriertes block-Element [Quelltext]
- Horizontallinien [Quelltext]
- Abgerundete Ecken [Quelltext] (gegenwärtig nur mit Mozilla bzw. Firefox darstellbar)
- Pseudoklassen und -elemente
- Markierung von Tabellenreihen beim Überstreichen mit der Maus [Quelltext]
- Gestaltung von Links [Quelltext]
- Veränderter erster Buchstabe und Zeile [Quelltext]
- Veränderter erster Buchstabe: Initial [Quelltext]
- Zitat mit :before und :after [Quelltext]
- Listengestaltung mit Pseudoklassen :first-child und :last-child [Quelltext]
- Automatische Absatznummerierung [Quelltext] (wird gegenwärtig nur von Opera (ab Version 5) und Mozilla (ab Version 1.8) richtig angezeigt)
- Listennummerierung mit Countern [Quelltext] (wird gegenwärtig nur von Opera (ab Version 5) und Mozilla (ab Version 1.8) richtig angezeigt)
- Visuelle Formatierung
- Relative Positionierung [Quelltext]
- Absolute Positionierung, Z-Index [Quelltext]
- Fixierte Positionierung [Quelltext]
- display versus visibility [Quelltext]
- Beschneiden eines Objektes (overflow versus clip) [Quelltext]
- Cursor [Quelltext]
- Textumfluss am Beispiel von Versalbuchstaben (Initiale) und Überschriften [Quelltext]
- Löschen des Textumflusses mittels <br>-Tag [Quelltext]
- Löschen des Textumflusses mittels :after-Pseudo-Element [Quelltext]
- Löschen des Textumflusses mit unsichtbaren Blockelementen [Quelltext]
- Tabellen und Listen
- Beispiele für Kombinatoren
- Unterschiedliche Medientypen
- Ausgewählte Anwendungsfälle
- Positionierte Abbildungen mit Bildunterschrift [Quelltext]
- Seitenlayout: Navigation, Kopf, Information, Fußteil (Tabellenlayout) [Quelltext]
- Seitenlayout: Navigation, Kopf, Information, Fußteil (Variante 1, tabellenlos) [Quelltext]
- Seitenlayout: Navigation, Kopf, Information, Fußteil (Variante 2, tabellenlos) [Quelltext]
- Aufteilung in verschiedene Style Sheets
- Menüzeile mit Listen [Quelltext] (nicht für Internet Explorer geeignet)
- Textspalten [Quelltext] (CSS3, wird gegenwärtig von keinem Browser angezeigt)
- Fehlende bzw. fehlerhafte CSS-Implementation bei verschiedenen Browsern
- Unterscheidungen
- Problemlösungen für den Internet Explorer
- Star-HTML-Hack [Quelltext]
- Fehlerhafte Implementation der Breiten- und Höhenangaben (IE 5) [Quelltext]
- Emulation der fixierte Positionierung beim Internet Explorer [Quelltext]
- Maximale Breite [Quelltext]
- Nachbildung der Pseudoklassen :first-child und :last-child [Quelltext]
- Dokumenttypdeklaration unterdrückt Clip-Eigenschaft [Quelltext]
- Problemfall Windows und Macintosh
- Problemfälle XHTML und CSS