Stil mit {stil}

Dez 2008

CSS in die Webseite einbetten

Es gibt mehrere Techniken, um CSS-Stile zu HTML-Elementen zu transportieren.

• »Inline CSS« : style-Attribut im HTML-Tag
• style-Tag im HEAD des HTML-Dokuments
• Externe CSS-Datei: wird durch ein link-Tag im HEAD der HTML-Datei eingebunden
• Import einer CSS-Datei: import-Regel des style-Tags

Alle Methoden dürfen gleichzeitig angewendet werden. Da sich dabei CSS-Eigenschaften gegenseitig überschreiben können, entsteht die »CSS-Kaskade« – daher der Begriff »Cascading Stylesheets«.

Externe CSS-Dateien durch ein link-Tag einbinden

Externe CSS-Dateien sind die erste Wahl, wenn mehr als ein HTML-Dokument mit denselben CSS-Regeln formatiert werden soll. link-Tags werden im HEAD-Element des Dokuments deklariert.

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="theme/style.css" type="text/css" media="print" />
<link rel="alternate stylesheet" href="style-26.css" type="text/css" 
         media="screen, projection" title="26-Zoll-Display" />

Das HTML-Attribut type weist den Browser an, nicht unterstützte Medientypen zu ignorieren. Ein Webbrowser soll auf dem Monitor also media="screen" lesen, aber media="print" für den Druck zu verwenden.

• Der Browser soll immer alle mit rel="stylesheet" bezeichneten CSS-Datei als primäre Stylesheet-Dateien anwenden.
• CSS-Dateien, die mit rel="alternate stylesheet" in das HTML-Dokument gebunden werden, soll der Browser ignorieren, bis der Benutzer oder eine Anwendung das Stylesheet aktiviert.

Die externe Stylesheet-Datei soll keine HTML-Tags enthalten, sondern nur Stylesheet-Anweisungen.

body { padding: 1em; font-size: 0.9em; }
p { max-width: 38em; color: rgb(30,30,30); }

Import einer CSS-Datei über ein style-Tag im HEAD-Element

Innerhalb eines style-Tags werden i.d.R. CSS-Eigenschaften notiert, die individuell für das aktuelle Dokument gelten – also Abweichungen von den generellen Stylesheet-Regeln, die für alle Dokumente einer Webseite durch ein link-Tag eingebunden wurden.

Mittels des style-Tags können z.B. Stylesheet-Eigenschaften, die nur in einigen Dokumenten der Webseite benötigt werden, in die jeweiligen Seiten eingebunden werden. Das entlastet den Großteil der Webseiten von einem unnötigen Datentransfer.

Das style-Tag steht im HEAD-Element eines HTML-Dokuments und kann sowohl Anweisungen zum Laden externer Stylesheet-Dateien als auch direkte Vereinbarungen von CSS-Eigenschaften enthalten. Eine externe Stylesheet-Datei wird im style-Tag durch die Anweisung @import eingebunden (die @import-Anweisung darf nicht nur im style-Tag, sondern auch in einer CSS-Datei stehen). Die @import-Regel muss dabei aber immer an Anfang des Style-Elements gesetzt werden.

<style type="text/css" title="text/css" media="screen">
   @import url(/style.css);
   @import url(/theme/style.css);
   pre { background: silver; border: 1px solid silver; }
   code { color: blue; }
</style>

Einbetten von Stilen mittels style-Tag

Das style-Tag wird in das HEAD-Element des Dokuments gesetzt. Stylesheet-Eigenschaften, die hier notiert werden, sollen i.d.R. Eigenschaften aus globalen CSS-Dateien überschreiben.

<style type="text/css" title="text/css" media="projection">
   body { font-size: 1.1em; }
</style>

Inline-Stile: Einbetten von CSS per style-Attribut

Das HTML-Attribut style bringt CSS-Eigenschaften direkt in ein HTML-Element. Diese Technik ist unflexibel und wird nur in Einzelfällen angewendet.

<p style="color: red">Hier darf nicht geklaut werden!</p>

zurück zum Seitenanfang