Einbindung von CSS-Angaben
CSS-Angaben können in einem XHTML-Dokument direkt abgelegt werden oder auch in eine externe Datei ausgelagert werden. Die einzelnen Möglichkeiten werden hier vorgestellt:
1) Im Dokumentenkopf
Im <head>-Bereich eines XHTML-Dokuments kann ein –
theoretisch – umfangreiches Stylesheet abgelegt werden.
Der Befehl <style></style> umschließt
die CSS-Angabe, dass es sich um eine CSS-Angabe handelt erkennt der Browser
durch das Attribut type mit dem Wert text/css.
Die Kommentar-Tags verstecken die CSS-Angaben vor alten Browsern:
|
CSS-Angaben, die im Dokumentenkopf festgelegt wurden, gelten für das gesamte XHTML-Dokument.
2) Elemente formatieren
Bei Bedarf kann zusätzlich zu den bestehenden CSS-Angaben Elementen
(also Tags) im XHTML-Code direkt eigene Stile zugewiesen werden. Hierzu
wird ein/der XHTML-Tag erweitert um das Attribut style,
welches als Wert die entsprechenden Eigenschaften+Werte erhält.
An Stelle von
<p> <font size="+1" color="blue">
Text </font></p>
jetzt:
<p style="font-size:14pt; color: blue">
Text </p>
|
Die so eingesetzten CSS-Auszeichnungen gelten ausschließlich für
das so ausgezeichnete, einmalige Element. Sie gelten für keine anderen
Elemente (es sei denn, sie befinden sich innerhalb des so erweiterten
Tags als Verschachtelung, dann werden die Stilangaben ggf. vererbt).
3) Abschnitte formatieren
Durch die Verwendung von Class- oder ID-Selektoren können
beliebige, frei definierbare Abschnitte selektiv ausgezeichnet werden.
Hierzu dient das Attribut class (oder id), dem als Wert ein vorher definierter
Class-Selektor (oder ID-Selektor) zugewiesen wird.
Das Attribut "class" oder "id" kann in Standard-XHTML-Tags
eingefügt werden:
<p class="zitat"> "Sein oder nicht sein, das ist
hier die Frage" </p>
Will man den "Auswirkungen" bestehender Tags möglichst aus dem Weg gehen, kann der Befehl <span></span> in Kombination mit "class" (oder "id") verwendet werden. So können beliebige Abschnitte frei von strukturellen Vorgaben definiert werden. Der Befehl <span> ohne eine class-Zuweisung hat keine formatierenden Auswirkungen im Browser. Der Befehl <div> zeichnet den Inhalt als Absatz aus (was einen einfachen Zeilenumbruch zur Folge hat).
Die Auszeichnung durch eine Klasse oder ID bezieht sich immer nur auf
den Inhalt, der von dem so erweiterten Tag umschlossen wird. Bei der Verwendung
von Klassen kann eine Klasse auch mehrfach im XHTML-Dokument verwendet
werden, bei Bedarf sogar auf verschiedene Tags.
4) Externe Stylesheets
Bisher haben wir verschiedene Verfahren kennen gelernt, wie wir
CSS-Angaben in ein Dokument einfügen. Diese Techniken ermöglichen
es uns jedoch nur, innerhalb eines XHTML-Dokuments Auszeichnungen vorzunehmen.
Möchten wir eine weitere XHTML-Datei mit den identischen CSS-Stilen
erweitern, müssten wir sie ebenfalls in den Dokumentenkopf einfügen.
Was bei ein/zwei Dokumenten noch praktikabel sein kann, wird zum Problem,
wenn eine Website aus 20, 30 und mehr XHTML-Dokumenten besteht. Müsste
nach Erstellung ein Wert innerhalb der CSS-Definition geändert werden,
so müsste man jedes Dokument öffnen und jeweils die Änderung
vornehmen. Dies kann jedoch vermieden werden, und hier zeigt sich auch
das echte Potential von CSS und seine Vorteile:
die Auslagerung von CSS-Angaben in ein eigenständiges CSS-Dokument.
In diese externe CSS-Datei (mit der Endung .css) werden alle Selektoren und Eigenschaften eingetragen und können hier zentral verwaltet werden. Nun muss jedes XHTML-Dokument mit dem CSS-Dokument verknüpft werden. Empfängt der Browser nun ein XHTML-Dokument mit einer solchen CSS-Verknüpfung, empfängt er die externe CSS-Datei automatisch mit und wertet sie vor Anzeige des XHTML-Dokuments aus. Dieses CSS-Dokument wird daraufhin vom Browser im lokalen Cache auf dem Clientrechner abgelegt (d.h. es wird nicht bei jedem Seitenaufruf erneut geladen) und so bei jeder neu abgerufenen, damit verknüpften XHTML-Seite angewendet. Diese Verknüpfung wird immer im Dokumentenkopf angelegt. Es gibt zwei technische Wege, eine Verknüpfung zu externen CSS-Dateien herzustellen:
1) Verknüpfung mit XHTML
Die Verknüpfung mit XHTML erfolgt im Dokumentenkopf. Es handelt
sich um einen allein stehenden Befehl, der dem Browser den Typ und Pfad
zur externen Datei mitteilt.
<link rel="stylesheet" type="text/css" href="stilangaben.css" />
link leitet eine Verknüpfung ein, das Attribut rel stellt den Bezug her und das Attribut type definiert den MIME-Typ. Im Attribut href wird der Pfad zum externen Stylesheet eingetragen.
|
2) Verknüpfung mit CSS
Auch die Verknüpfung mit CSS wird in den
Dokumentenkopf des XHTML-Dokuments eingetragen:
<style type="text/css">
<!--
@import url(stilangaben.css);
-->
</style>
Die @import-Anweisung weist den Browser auf ein verknüpftes Stylesheet hin, als Wert von url wird (in Klammer) der Pfad zur externen CSS-Datei angegeben.
|
Interessant: @import kann auch in externe CSS-Dateien eingetragen werden, d.h. beim Laden einer CSS-Datei, die einen @import-Befehl zu einer weiteren externen CSS-Datei enthält, ruft der Browser auch diese zweite Datei ab.
Es können beliebig viele externe CSS-Dateien mit einem XHTML-Dokument verknüpft sein (was vor allem dann Sinn macht, wenn verschiedene Stilvorgaben für unterschiedliche Ausgabemedien (Screen, Print, Handheld etc.) angelegt werden.
Grundsätzlich können in XHTML-Dokumente verlinkte/importierte CSS-Dateien kombiniert werden mit speziellen CSS-Angaben im Kopf einer XHTML-Datei (bei @import ist zu beachten, dass diese zusätzlichen Angaben auf jedem Fall NACH dem Import-Befehl aufgelistet werden). Hierbei gelten die Regeln der Rangfolge.
|