In vielen Fällen sind einheitliche Formate für alle HTML-Dokumente eines Projekts erstrebenswert. Dann nur so sind einheitliche Layouts und so etwas wie Corporate Design möglich. CSS-Formate, die global für ein Projekt gelten, werden deshalb häufig in separaten CSS-Dateien notiert. Das sind einfache Textdateien, die dann einfach in jedem gewünschten HTML-Dokument eingebunden werden. Wenn Sie die Angaben in der separaten Datei ändern, wirken sich die Änderungen einheitlich auf alle HTML-Dokumente aus, in denen die separate CSS-Datei eingebunden ist.
In HTML stehen zwei Möglichkeiten zur Verfügung, CSS-Dateien in HTML zu referenzieren. Die eine ist HTML-Syntax, die andere CSS-Syntax. Eine dritte Möglichkeit ist XHTML-spezifisch, weil sie auf XML basiert.
<head> <!-- andere Definitionen im HTML-Kopfbereich --> <link rel="stylesheet" type="text/css" href="formate.css"> <link rel="stylesheet" type="text/css" href="spezial/ie-korrekturen.css"> </head>
<head> <!-- andere Definitionen im HTML-Kopfbereich --> <style type="text/css"> @import "formate.css"; @import url("spezial/ie-korrekturen.css"); </style> </head>
<?xml-stylesheet type="text/css" href="formate.css" ?> <?xml-stylesheet type="text/css" href="spezial/ie-korrekturen.css" ?>
Bei der HTML-Syntax können Sie mit Hilfe des <link>-Tags eine CSS-Datei referenzieren, die CSS-Formatdefinitionen enthält. Innerhalb des <link>-Tags müssen die Angaben rel="stylesheet" type="text/css" stehen (rel = relation = Bezug, type = MIME-Typ). Beim Attribut href geben Sie die gewünschte Datei an (href = hyper reference = Hypertext-Referenz). Wenn sich die CSS-Datei in einem anderen Verzeichnis oder auf einem anderen Server befindet, müssen Sie an dieser Stelle Pfadangaben oder absolute URLs notieren. Es gelten alle Regeln und Möglichkeiten der Referenzierung.
Bei der CSS-Syntax notieren Sie im Dokumentkopfbereich, also zwischen <head> und </head>, einen style-Bereich, markiert durch <style>…</style>. Innerhalb davon können Sie mit @import "cssdatei" oder @import url("cssdatei") eine separate CSS-Datei einbinden. Bei der Angabe der CSS-Datei gelten ebenfalls alle Möglichkeiten und Regeln der HTML-Referenzierung.
Die XML-spezifische Syntax ist eine sogenannte XML-Verarbeitungsanweisung. Mit der Verarbeitungsanweisung <?xml-stylesheet …?> und den Attributen type für die Angabe des MimeTypes und href für die URL-Adresse der Style-Datei können Sie externe Stylesheets in XHTML einbinden. Das funktioniert jedoch nur, wenn das XHTML-Dokument im Browser von einem XML-Parser verarbeitet wird. HTML-Parser können mit der XML-Verarbeitungsanweisung nichts anfangen.
Wenn Sie mit <link…> eine CSS-Datei referenzieren, brauchen Sie keinen Bereich <style…>…</style>. Es ist jedoch möglich und durchaus üblich, zusätzlich einen oder sogar mehrere style-Bereiche zu notieren.. So können Sie beide Arten, Formate zu definieren, miteinander kombinieren. Wenn Sie beide Arten benutzen, haben Formate, die direkt innerhalb von <style…>…</style> direkt definiert werden, im Konfliktfall Vorrang vor den referenzierten Formaten.
Sie können problemlos mehrere CSS-Dateien einbinden. Es ist auch kein Problem, CSS-Dateien von verschiedenen Quellen, etwa von verschiedenen Servern, parallel einzubinden. In der Praxis werden CSS-Formate häufig nach bestimmten Aufgaben auf mehrere CSS-Dateien aufgeteilt. Beispielsweise Formate fürs Webseitenlayout, Formate für sogenannte CSS-Resets, Formate für bestimmte Klassen von Textformaten, und Formate mit Korrekturangaben für bestimmte Browser.
CSS selbst besteht ausschließlich aus englischsprachigen Bezeichnern und gängigen Interpunktionszeichen, die alle im ASCII-Zeichensatz vorkommen. Doch CSS-Wertzuweisungen können teilweise auch Zeichenketten enthalten, in denen sprachabhängige oder beliebige andere Zeichen möglich sind. Wenn Sie mit solchen CSS-Wertzuweisungen arbeiten, besteht die Möglichkeit, die Zeichenkodierung einer CSS-Datei anzugeben. Die Angabe wird nicht im referenzierenden HTML-Dokument, sondern in der separaten CSS-Datei notiert.
@charset "utf-8"; /* hier beginnen Style-Definitionen, zum Beispiel: */ h2.austria:before { content:"Österreich: "; }
Notieren Sie die CSS-Regel @charset in einer eigenen Zeile und dahinter in Anführungszeichen eine gültige Angabe zur Zeichenkodierung. Empfehlenswert ist die Angabe "utf-8". Andere denkbare Angaben sind beispielsweise Zeichensätze der ISO-8859-Familie, etwa "iso-8859-1" für den Zeichensatz Latin-1, der auch die deutschen Umlaute und das scharfe S abdeckt.
Wichtig ist, dass die CSS-Datei tatsächlich mit der angegebenen Zeichenkodierung abgespeichert wird. Andernfalls kann es zu Darstellungsproblemen kommen.
Im Gegensatz zu separaten CSS-Dateien gilt bei CSS-Definition innnerhalb von HTML-Dokumenten die Regel, dass diese die Zeichenkodierung des HTML-Dokuments übernehmen.
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.