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).

  1. Beschreibung Cascading Style Sheets
    1. Warum Cascading Style Sheets?
    2. Historische Entwicklung der Cascading-Style-Sheets-Spezifikationen
    3. [PDF] Cascading Style Sheets
    4. Kaskade und Vererbung
  2. Referenz
    1. Referenz Cascading Style Sheet
    2. Selektoren und Kombinatoren
    3. Pseudo-Klassen und -Elemente
  3. Übungsdateien
    1. Vereinbarung von Stilanweisungen
      1. Inline Style [Quelltext]
      2. Global Style [Quelltext]
      3. External Style [Quelltext]
      4. Kommentare [Quelltext]
    2. Selektoren
      1. Elementselektoren [Quelltext]
      2. Klassen- und Id-Selektoren [Quelltext]
      3. Kombination von Klassen-Selektoren [Quelltext]
      4. Prioritäten und !important-Regel [Quelltext]
    3. Texteigenschaften
      1. Schrifteigenschaften [Quelltext]
      2. Buchstabenabstand, gesperrter Text [Quelltext]
      3. Textdekoration [Quelltext]
      4. Textvarianten und -transformationen [Quelltext]
    4. Ausrichtung und Absatzkontrolle
      1. Textausrichtung [Quelltext]
      2. Zeilenhöhe [Quelltext]
      3. Verhinderung des Zeilenumbruchs [Quelltext]
      4. Absatzeinzug [Quelltext]
      5. Vertikale Ausrichtung in Tabellenzellen [Quelltext]
      6. Links-Rechts-Ausrichtung
    5. Boxeigenschaften
      1. Außenrand, Rahmen, Innenabstand [Quelltext]
      2. Hintergrundfarben und -bilder [Quelltext]
      3. Zentriertes block-Element [Quelltext]
      4. Horizontallinien [Quelltext]
      5. Abgerundete Ecken [Quelltext] (gegenwärtig nur mit Mozilla bzw. Firefox darstellbar)
    6. Pseudoklassen und -elemente
      1. Markierung von Tabellenreihen beim Überstreichen mit der Maus [Quelltext]
      2. Gestaltung von Links [Quelltext]
      3. Veränderter erster Buchstabe und Zeile [Quelltext]
      4. Veränderter erster Buchstabe: Initial [Quelltext]
      5. Zitat mit :before und :after [Quelltext]
      6. Listengestaltung mit Pseudoklassen :first-child und :last-child [Quelltext]
      7. Automatische Absatznummerierung [Quelltext] (wird gegenwärtig nur von Opera (ab Version 5) und Mozilla (ab Version 1.8) richtig angezeigt)
      8. Listennummerierung mit Countern [Quelltext] (wird gegenwärtig nur von Opera (ab Version 5) und Mozilla (ab Version 1.8) richtig angezeigt)
    7. Visuelle Formatierung
      1. Relative Positionierung [Quelltext]
      2. Absolute Positionierung, Z-Index [Quelltext]
      3. Fixierte Positionierung [Quelltext]
      4. display versus visibility [Quelltext]
      5. Beschneiden eines Objektes (overflow versus clip) [Quelltext]
      6. Cursor [Quelltext]
      7. Textumfluss am Beispiel von Versalbuchstaben (Initiale) und Überschriften [Quelltext]
      8. Löschen des Textumflusses mittels <br>-Tag [Quelltext]
      9. Löschen des Textumflusses mittels :after-Pseudo-Element [Quelltext]
      10. Löschen des Textumflusses mit unsichtbaren Blockelementen [Quelltext]
    8. Tabellen und Listen
      1. Tabellen- und Zellenränder, Zellenabstand [Quelltext]
      2. Zusammenfallende Zellenränder [Quelltext]
      3. Listensymbole [Quelltext]
      4. Positionierung Listensymbol [Quelltext]
      5. Listensymbole als Hintergrundbilder [Quelltext]
      6. Auflistung von Listeneinträgen in einer Zeile [Quelltext]
    9. Beispiele für Kombinatoren
      1. Descendant Combinators (für umschlossene Tags) [Quelltext]
      2. Wiederholte Anwendung von Hervorhebungen [Quelltext]
      3. Komplexe Tabellengestaltung [Quelltext]
      4. Adjacent Combinators (für aufeinander folgende Tags) [Quelltext]
    10. Unterschiedliche Medientypen
      1. @media-Angabe: Unterschiedliche Formatvorlagen für Druck und Bildschirmausgabe [Quelltext]
      2. Getrennte External Styles: Unterschiedliche Formatvorlagen für Druck und Bildschirmausgabe [Quelltext]
    11. Ausgewählte Anwendungsfälle
      1. Positionierte Abbildungen mit Bildunterschrift [Quelltext]
      2. Seitenlayout: Navigation, Kopf, Information, Fußteil (Tabellenlayout) [Quelltext]
      3. Seitenlayout: Navigation, Kopf, Information, Fußteil (Variante 1, tabellenlos) [Quelltext]
      4. Seitenlayout: Navigation, Kopf, Information, Fußteil (Variante 2, tabellenlos) [Quelltext]
      5. Aufteilung in verschiedene Style Sheets
      6. Menüzeile mit Listen [Quelltext] (nicht für Internet Explorer geeignet)
      7. Textspalten [Quelltext] (CSS3, wird gegenwärtig von keinem Browser angezeigt)
  4. Fehlende bzw. fehlerhafte CSS-Implementation bei verschiedenen Browsern
    1. Fehlende bzw. fehlerhafte CSS-Implementation beim Internet Explorer 5.x und 6
    2. Fehlende bzw. fehlerhafte CSS-Implementation beim Internet Explorer 7
    3. Fehlende bzw. fehlerhafte CSS-Implementation bei Mozilla bzw. Firefox
    4. Fehlende bzw. fehlerhafte CSS-Implementation bei Opera
  5. Unterscheidungen
    1. Zwischen verschiedenen CSS-Levels [Quelltext]
  6. Problemlösungen für den Internet Explorer
    1. Star-HTML-Hack [Quelltext]
    2. Fehlerhafte Implementation der Breiten- und Höhenangaben (IE 5) [Quelltext]
    3. Emulation der fixierte Positionierung beim Internet Explorer [Quelltext]
    4. Maximale Breite [Quelltext]
    5. Nachbildung der Pseudoklassen :first-child und :last-child [Quelltext]
    6. Dokumenttypdeklaration unterdrückt Clip-Eigenschaft [Quelltext]
  7. Problemfall Windows und Macintosh
    1. Unterschiedliche Schriftgröße auf Windows- und Macintosh-Bildschirmen [Quelltext]
      (Formatvorlage Macintosh, Formatvorlage Windows)
  8. Problemfälle XHTML und CSS
    1. Höhe von Tabellenzellen [Quelltext]
    2. Absatzränder in Tabellenzellen [Quelltext]