Fortgeschrittenes Publizieren im World Wide Web
Layout mit CSS (Cascading Style Sheets)


Probleme von HTML

HTML ist eine Beschreibungssprache für die Struktur von Webdokumenten. Pures HTML enthält keinerlei Elemente für das Layout von Webseiten, was für ein ansprechendes Aussehen von Webseiten sehr unbefriedigend ist. Daher wurden von einigen Firmen, insbesondere von Netscape und Microsoft, in der Vergangenheit neue Tags eingeführt, die das Layout beeinflussen, so z.B. der FONT-Tag, mit dem u.a. Schriftart, -farbe und -größe eingestellt werden können. Oder es wurden Standardelemente für Layoutzwecke "mißbraucht, z.B. Tabellen. Das führt unglücklicherweise zu einer Vermischung von Struktur, Inhalt und Layout von Webseiten.

Unter dem Namen Cascading Style Sheets (CSS) sind die von der Textverarbeitung her bekannten Formatvorlagen auch in HTML eingeführt worden. CSS Version 1.0 wurde 1996, eine erheblich erweiterte Version CSS 2.0 wurde 1998 definiert. Leider unterstützen die gegenwärtigen Browser weder CSS 1.0 noch gar CSS 2.0 vollständig. Aufgrund der vielen Vorteile und Features von CSS geht der Trend aber eindeutig in Richtung immer besserer CSS-Unterstützung durch die Browser.

Einige wenige Vorteile der Cascading Style Sheets sind:


Aufbau von Style-Sheet-Anweisungen

Formatvorlagen bestehen aus einer Menge von Regeln, die HTML-Elemente mit Layout-Eigenschaften verknüpfen. Eine Regel besteht aus dem Selektor (selector, meist ein HTML-Tag) und der Deklaration (declaration). Eine Deklaration besteht aus einer Reihe von Eigenschaften (properties) und ihren Werten (values):


  HTML-Tag { Eigenschaft1:Wert1; Eigenschaft2:Wert2; }

z.B.


  H1 { font-family:Helvetica,Arial;color:blue; }
  H2 { font-family:Helvetica,Arial;color:red; }


Einbinden von Cascading Style Sheets

CSS-Angaben können auf dreierlei Art angegeben werden:

1. Inline, d.h. als spezielles STYLE-Attribut eines HTML-Tags, z,B.:


  <H1 STYLE="font-family:Arial;color:blue;">

2. Im Header des HTML-Dokuments mit dem STYLE-Tag geklammert:


  <STYLE TYPE="text/css">
    <!--
    H1 { font-family:Helvetica,Arial;color:blue; }
    H2 { font-family:Helvetica,Arial;color:red; }
    // -->
  </STYLE>

3. In externen Dateien (Endung css), die im Header mit dem LINK-Tag verknüpft werden:


  <LINK REL="stylesheet" TYPE="text/css" HREF="layout.css">


Übungen

Eine kompakte Übersicht über die Eigenschaften und Werte von Cascading Style Sheets gibt die Kurzreferenz: CSS von Stefan Münz.

Einfache Formatangaben

  1. Webseite ohne Layoutangaben (HTML-Quelle) und Webseite mit HTML-Layoutanweisungen (HTML-Quelle)
  2. Layoutangaben im STYLE-Attribut von HTML-Tags (HTML-Quelle).
  3. Layoutangaben mit dem STYLE-Tag im Header (HTML-Quelle).
  4. Layoutangaben in externer CSS-Datei (HTML-Quelle, CSS-Quelle).

Weitere Formatangaben

  1. Layout mit Boxen und Klassenbildung (HTML-Quelle, CSS-Quelle).
  2. Hintergrundfarben und -grafiken (HTML-Quelle, CSS-Quelle).
  3. Mehrspaltiger Text (HTML-Quelle, CSS-Quelle).
  4. Absolute Positionierung (HTML-Quelle, CSS-Quelle).
  5. Layout für verschiedene Medien (HTML-Quelle).


Einige Links zu Cascading Style Sheets


Peter Klingebiel, 27. Mai 2004