22. 05.
Es gibt verschiedene - mehr oder weniger - gebräuchliche bzw. empfohlene Möglichkeiten, CSS in ein (X)HTML Dokument einzubinden. Dabei werden die Styles in der hier angeführten Reihenfolge eingelesen:
- Externe(s) Stylesheet(s) (wenn mehrere, wieder in der Reihenfolge wie im Dokument angeführt)
- Styles im Header des (X)HTML Dokuments
- Styles mittels <span> eingebunden
- Styles direkt an einem HTML Element deklariert
Styles bzw. Stylesheets werden in (X)HTML Dokumente eingefügt durch
- den HTML Tag <link …. />,
- den HTML Tag <style>…</style>,
- den HTML Tag Parameter <tag style=”….;”>…..</tag>
- den HTML Tag <span style=”…..;”>……</span> oder
- die CSS Regel @import
DIE GEBRÄUCHLICHSTEN OPTIONEN
CSS zentral aus einer externen Datei einbinden
Beispiel: Du hast ein Stylesheet namens main.css
Im Head-Bereich Deines (X)HTML Dokuments schreibst Du Folgendes:
<link rel=”stylesheet” type=”text/css” href=”main.css” />
Dabei ist natürlich der korrekte (relative) Pfad Deines (X)HTML Dokuments zum Stylesheet zu beachten. In diesem Beispiel wird vorausgesetzt, daß Dein (X)HTML Dokument und main.css “nebeneinander”, also im gleichen Ordner liegen.
CSS zentral im Dokument deklarieren
Du kannst eine oder mehrere Style-Anweisungen aber auch direkt in den Head-Bereich Deines (X)HTML Dokuments schreiben. Das würde dann so aussehen:
<style type=”text/css”>
<!–
body {background: red; font-family: Verdana, sans-serif;}
–>
</style>
Der Tag für HTML Kommentare <!– –> soll verhindern, daß ältere Browser, die Styles nicht verstehen, den Code interpretieren. Durch das Auskommentieren wird der Style Code von älteren Browsern ignoriert.
Warum eine Style Anweisung ins Dokument schreiben?
Du hast z.B. in Deinem externen Stylesheet für hundert Seiten einen Seitenhintergrund weiß definiert und möchtest für diese eine Seite eine Ausnahme. Betonung auf Ausnahme!
Grundsätzlich gilt, daß Styles möglichst nicht im (X)HTML Dokument notiert werden sollten”!
CSS direkt an einem HTML Element “inline” deklarieren
Du kannst praktisch jedes HTML Element direkt eine Style Anweisung zuordnen, z.B. so:
<h2 style=”color: red;”>Headline</h2>
Auch diese Form der Style Anweisung könnte man z.B. für eine Ausnahme einsetzen.
CSS mittels <span> direkt im HTLM Code deklarieren
Wird eingesetzt, um eine Style Anweisung über einen HTML-Bereich zu “spannen”, meist, um Text-Bereiche mit Style zu versehen.
Dies ist ein Textstück, <span style=”color: red”>wo genau dieser Abschnitt des Textes eine rote Textfarbe erhalten soll.</span> Der Rest des Textes bleibt unberührt.
WEITERE OPTIONEN
CSS mittels @import aus einem externen Stylesheet in ein (X)HTML Dokument einfügen
Eine Alternative zur bisher beschriebenen Einbindung eines Stylesheets in ein (X)HTML Dokument kann so aussehen und würde ebenfalls im Head Bereich stehen:
<style type=”text/css”>
<!–
@import “versteckt.css”;
body {color: #333333;}
–>
</style>
Und wozu diese Alternative?
Die @import Regel - und wie sie genau geschrieben wird - setzt man meist gezielt ein, um Stylesheets oder Style Anweisungen vor bestimmten älteren Browsern zu verbergen.
Hier ein paar Beispiele:
@import url(”alternativ.css”);
Versteckt die Anweisung vor NN 4.x, Win IE 3, Win IE4 (nicht 4.72), Mac IE 4.01, Mac IE 4.5, Kq 2.1.2, Win Amaya 5.1
@import url(alternativ.css);
Versteckt die Anweisung vor NN 4.x, Win IE 3, Win IE4 (wobei dieser CSS nur liest, wenn es im gleichen Verzeichnis wie das HTML Dokument steht), nicht vor Win IE 4.72
@import url(alternativ.css) screen;
Versteckt die Anweisung vor NN 4.x, Win IE <7
@import “alternativ.css”;
Versteckt die Anweisung vor NN 4.x, Win IE <5, Mac IE 4.01, Kq 2.1.2
CSS über @import in ein Stylesheet einfügen
Die @import Regel darf auch in einem externen Stylesheet angeführt werden (aus den gleichen Gründen) und muß dann zwingend am Anfang des Stylesheets stehen.
Zur @import Regel gibt es eine Vielzahl an Kombinationen & Einsatzmöglichkeiten, deren Erläuterung hier zu weit führen würden. Vielleicht schreib ich später mal eine genaue Anleitung.
EMPFEHLUNG
Vermeide allzu kapriziöse Style Anweisungen!
Zum Testen Deiner Seiten unter verschiedensten Browsern & Systemen verwende Browsercam. Lege Dir dort einen Testaccount an und Du kannst 24 Stunden lang testen, wie Deine Seiten unter verschiedensten Bedingungen aussehen.