Formate zentral für eine HTML-Datei definierenSie können im head-Element einer HTML-Datei einen Bereich für CSS-Formate definieren.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Das style-Element</title> <style type="text/css"> <!-- /* ... Hier werden die Formate definiert ... */ --> </style> </head> <body> <h1>Das style-Element</h1> </body> </html>
Mit <style...> ... </style> notieren Sie einen Bereich für Stylesheet-Formatdefinitionen (style = Stil, Format). Im einleitenden <style>-Tag müssen Sie den 
MIME-Typ der Stylesheet-Sprache angeben. Für CSS ist das die Angabe type="text/css". Zwischen dem einleitenden Tag und dem abschließenden </style> können Sie dann zentrale CSS-Formate definieren. Lesen Sie dazu den Abschnitt zentrale Formate definieren.
Damit ältere Web-Browser, die keine Stylesheets kennen, den Inhalt des style-Elements nicht irrtümlich als anzuzeigenden Text interpretieren, können Sie den Inhalt in einen HTML-Kommentar (<!-- ... -->) einbinden, so wie im obigen Beispiel. Obwohl dieses Auskommentieren von Stylesheet-Bereichen eine gängige Praxis ist, wird in den Codebeispielen in SELFHTML darauf verzichtet, denn die Browser aus den Anfangstagen des WWW, die CSS-Bereiche nicht erkennen können, sind weitestgehend zu vernachlässigen. Beachten Sie in diesem Zusammenhang die Unterschiede zwischen XHTML und HTML.
Formate, die Sie auf diese Weise definieren, sind für diese eine HTML-Datei gültig.
Es ist durchaus erlaubt, mehrere style-Bereiche innerhalb des HTML-Dateikopfs zu notieren. Sinnvoll ist das beispielsweise, wenn Sie mal Style-Definitionen mit unterschiedlichen Style-Sprachen und entsprechend unterschiedlichem MIME-Typ in einer HTML-Datei notieren möchten.
Formate zentral in separater CSS-Datei definierenIn vielen Fällen werden Sie einheitliche Formate für alle HTML-Dateien Ihres Projekts haben wollen. Dann brauchen Sie die Angaben nicht in jeder Datei zu wiederholen. Stattdessen können Sie die Formate in einer separaten Textdatei definieren und diese Datei einfach in jeder gewünschten HTML-Datei einbinden. Wenn Sie die Angaben in der separaten Datei ändern, wirken sich die Änderungen einheitlich auf alle Dateien aus, in denen die separate CSS-Datei eingebunden ist.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Das link-Element für Stylesheets</title> <link rel="stylesheet" type="text/css" href="formate.css"> <style type="text/css"> /* ... hier sind dateispezifische Formate erlaubt ... */ </style> </head> <body> <h1>Das link-Element für Stylesheets</h1> </body> </html>
Im Dateikopf einer HTML-Datei können Sie mit <link...> eine CSS-Datei referenzieren, die CSS-Formatdefinitionen enthält (link = Verweis). 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 URIs notieren. Das funktioniert genauso wie etwa beim Einbinden von Grafiken.
Bei der referenzierten Datei muss es sich um eine reine Textdatei handeln, die die Endung .css haben sollte. Die Datei darf nichts anderes als Definitionen zentraler Formate und Kommentare enthalten. Eine solche CSS-Datei können Sie mit jedem einfachen Texteditor erstellen. In SELFHTML wird beispielsweise eine separate CSS-Datei für alle Dokumentdateien verwendet. Sie können diese 
CSS-Datei als Text betrachten (der Verweis führt zu einer Datei namens selfhtmlcss.txt, damit die Datei in jedem Fall im Browser angezeigt wird - die CSS-Datei heißt eigentlich selfhtml.css).
Wie auch in HTML-Dateien können Sie in externen Stylesheets optional angeben, welche Zeichenkodierung die CSS-Datei verwendet. Diese Angabe ist für den Web-Browser besonders wichtig, denn sie teilt ihm mit, nach welcher Kodierung die Bytes der Datei in Zeichen umgewandelt werden müssen. Informationen über ISO 8859-1 und andere Kodierungen finden Sie im Abschnitt Zeichenkodierungen (ISO-8859-Familie und andere). Die CSS-Syntax lautet:
@charset "ISO-8859-1";
Diese Angabe muss zwingend als absolut erste im externen Stylesheet stehen und darf nur einmal vorkommen. Im Konfliktfall, also wenn der Webserver im HTTP-Header eine hiervon abweichende Angabe sendet, wird üblicherweise die Angabe des HTTP-Headers verwendet. Innerhalb von style-Bereichen, die im Dateikopf einer HTML-Datei notiert werden ist diese Angabe nicht gestattet, da in diesem Fall die Kodierung der HTML-Datei herangezogen wird.
Wenn Sie mit <link...> eine Datei mit CSS-Formatdefinitionen referenzieren, brauchen Sie keinen Bereich <style...>...</style>. Im obigen Beispiel wird dennoch ein solcher Bereich definiert. Das soll zeigen, dass Sie beide Arten, Formate zu definieren, miteinander kombinieren können. Wenn Sie beide Arten benutzen, haben Formate, die direkt innerhalb von <style...>...</style> definiert werden, im Konfliktfall Vorrang vor den referenzierten Formaten. So können Sie etwa immer wieder verwendete Formate als Basis-Stylesheet importieren und einige davon mit dateispezifischen Formaten ergänzen oder überschreiben. Ebenfalls möglich ist die Einbindung mehrerer Stylesheets mit link-Elementen.
Formate innerhalb eines HTML-Elements definierenUnabhängig davon, ob Sie Formate zentral definieren oder aus einer separaten CSS-Datei einbinden, können Sie einzelne HTML-Elemente formatieren.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Das style-Attribut</title> <link rel="stylesheet" type="text/css" href="formate.css"> <style type="text/css"> /* ... hier sind dateispezifische Formate erlaubt ... */ </style> </head> <body> <h1 style="[element-spezifische Formate]">Das style-Attribut</h1> </body> </html>
Mit dem 
Universalattribut style im einleitenden Tag eines Elements können Sie CSS-Formate für dieses eine Element notieren. Weitere Einzelheiten dazu werden im Abschnitt HTML-Elemente direktformatieren beschrieben.
HTML-Elemente müssen HTML-4.0 konform mit Start- und End-Tag notiert sein, damit CSS-Formatierungen darin angezeigt werden. Dies gilt vor allem für Elemente, bei denen früher mal nur die Notation des Start-Tags genügte, etwa bei p, li, option, td und th.
Das obige Beispiel zeigt, dass Sie parallel zu den Formatdefinitionen im HTML-Element auch die Methoden zur zentralen Formatdefinition verwenden können. Im Konfliktfall haben stets die "inneren" Formatdefinitionen Vorrang vor den "äußeren". Wenn Sie also im einleitenden <h1>-Tag eine andere Schriftart angeben, als Sie im zentralen style-Bereich für h1-Elemente festlegen, dann hat die Definition im einleitenden <h1>-Tag Vorrang vor der zentralen Definition, genauso, wie diese wiederum Vorrang vor den Definitionen der eingebundenen externen CSS-Datei hat.
Verschiedene separate Stylesheets für unterschiedliche AusgabemedienBildschirm und Drucker beispielsweise sind sehr unterschiedliche Ausgabemedien für ansprechend gestaltete Daten. Beide Ausgabemedien haben ihre eigenen Gesetze. Während am Bildschirm etwa helle Schriften auf dunklen Hintergründen attraktiv aussehen, ist das für die Ausgabe am Drucker keine gute Lösung. Bei der Druckerausgabe sehen dagegen Absatzeinzüge von mindestens 2cm besser aus, während durch entsprechende Angaben am Bildschirm möglicherweise kostbarer Präsentationsraum verschenkt wird. Deshalb können Sie für verschiedene Ausgabemedien verschiedene externe CSS-Dateien einbinden, die unterschiedliche Formatdefinitionen enthalten können. Die Software muss beim Präsentieren der Seiten entscheiden, welche der eingebundenen CSS-Dateien maßgeblich ist. Wenn der Web-Browser also beispielsweise die Seiten am Bildschirm anzeigt, sollte er die CSS-Datei verwenden, die Sie explizit für das Medium "Bildschirm" bestimmen, und wenn der Anwender eine Seite ausdruckt, sollte der Browser stattdessen die CSS-Datei verwenden, die Sie für das Medium "Drucker" angeben.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Stylesheets für unterschiedliche Ausgabemedien</title> <link rel="stylesheet" media="screen" href="website.css"> <link rel="stylesheet" media="print, embossed" href="druck.css"> <link rel="stylesheet" media="aural" href="speaker.css"> </head> <body> <p>Stylesheets für unterschiedliche Ausgabemedien</p> </body> </html>
Zunächst benötigen Sie für jedes Ausgabemedium eine Textdatei mit der Endung .css, die nichts anderes als die gewünschten CSS-Formatdefinitionen für das gewünschte Ausgabemedium enthält. In einer HTML-Datei können Sie alle CSS-Dateien wie im obigen Beispiel einbinden. Das Einbinden funktioniert genauso wie bei Formate zentral in separater CSS-Datei definieren beschrieben. Neu ist hierbei nur, dass gleich mehrere <link>-Tags zum Einbinden notiert sind, und dass diese zusätzlich das Attribut media enthalten. Mit diesem Attribut bestimmen Sie, für welches Ausgabemedium die Datei verwendet werden soll, die Sie dann bei der Angabe href einbinden. Sie können einen oder mehrere Medientypen bei media angeben. Mehrere Angaben werden durch Kommata getrennt.
In CSS2 werden folgende möglichen Angaben genannt:
| Angabe | Bedeutung |
|---|---|
media="all" |
CSS-Datei gilt für alle Medientypen. |
media="aural" |
CSS-Datei gilt für computergesteuerte synthetische Sprachausgabe. Beachten Sie in diesem Zusammenhang auch die CSS-Eigenschaften für Sprachausgabe. |
media="braille" |
CSS-Datei gilt für Ausgabegeräte mit so genannter "Braille-Zeile". Dabei wird Text eine veränderbare Oberflächenstruktur des Materials der Braille-Zeile umgewandelt und über Abtasten mit dem Finger gelesen. Diese Form des Ausgabemediums ist für blinde Menschen gedacht. |
media="embossed" |
CSS-Datei gilt für Braille-Drucker. Dabei wird Text in Form von abtastbaren Oberflächenstrukturen in Papier oder ein vergleichbares Material gestanzt. Wie braille ist embossed für blinde Menschen gedacht. |
media="handheld" |
CSS-Datei gilt für die Anzeige auf tragbaren Kleinstcomputern. Web-fähige elektronische Organizer sind typische Vertreter dieser Gattung. |
media="print" |
CSS-Datei gilt für den Ausdruck auf Papier. Web-Browser sollten diese Formatdefinitionen verwenden, wenn der Anwender die Web-Seite ausdrucken möchte. Beachten Sie dazu auch die CSS-Eigenschaften für Printmedien. |
media="projection" |
CSS-Datei gilt für die Datenprojektion mit Beamern und ähnlichen Geräten. |
media="screen" |
CSS-Datei gilt für die Bildschirmanzeige. |
media="tty" |
CSS-Datei gilt für nicht-grafische Ausgabemedien mit fixer Zeichenbreite, beispielsweise Fernschreiber. Aber auch für text-orientierte Browser wie Lynx ist dieser Medientyp interessant. |
media="tv" |
CSS-Datei gilt für TV-ähnliche Ausgabegeräte, die sich durch grobe Bildschirmauflösung und mangelnde Unterstützung beim Scrollen in Text, dafür aber durch Sound-Unterstützung auszeichnen. |
Der Internet Explorer interpretiert diese Angaben ab Version 4 zu einem gewissen Teil.
Der Medientyp aural wird in CSS 2.1 "missbilligt", da hierfür der neue Medientyp speech in CSS 3 vorgesehen ist.
@importDie Syntax mit <link...> zum Einbinden weiterer Stylesheet-Dateien ist HTML-Syntax. Daneben gibt es auch noch eine CSS-Syntax, die den gleichen Zweck hat:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Stylesheets mittels @import einbinden</title>
<style type="text/css">
@import "allgemein.css";
@import url("erweitert.css");
@import url("druck.css") print, embossed;
@import url("pocketcomputer.css") handheld;
@import url("normal.css") screen;
</style>
</head>
<body>
<h1>Stylesheets mittels @import einbinden</h1>
</body>
</html>
Eine CSS-spezifische Einbindung wird innerhalb eines style-Bereichs im Dateikopf oder zwingend am Beginn eines externen Stylesheets notiert. Mit @import oder @import url(…) starten Sie die Angabe. In Hochkommata notieren Sie dahinter den Dateinamen bzw. die Adresse der separaten CSS-Datei. Hinter der Dateiangabe notieren Sie optional, durch Leerraum getrennt, das gewünschte Ausgabemedium. Es dürfen auch mehrere sein, getrennt durch Kommata. Dabei sind die gleichen Medientypen erlaubt wie im HTML-Attribut media. Am Ende der @import-Angabe muss ein Strichpunkt stehen.
Der Internet Explorer 5.x unterstützt die Einbindung über @import nur bezüglich der Ausgabemedien screen und all.
Format-Definitionen für unterschiedliche AusgabemedienNeben der Möglichkeit, Verschiedene separate Stylesheets für unterschiedliche Ausgabemedien in HTML einzubinden, steht auch die Möglichkeit zur Verfügung, innerhalb eines style-Bereichs zwischen unterschiedlichen Ausgabemedien zu unterscheiden.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Beschränkung auf Medientypen</title>
<style type="text/css">
@media print {
/* ... Formatdefinitionen zum Drucken ... */
selektor { eigenschaft:wert; }
}
@media screen, handheld {
/* ... Formatdefinitionen zur Bildschirmausgabe ... */
selektor { eigenschaft:wert; }
}
</style>
</head>
<body>
<h1>Beschränkung auf Medientypen</h1>
</body>
</html>
Mit @media definieren Sie innerhalb eines style-Bereichs einen Bereich für Formatdefinitionen für ein bestimmtes Ausgabemedium. Für jede Mediensorte, die Sie unterscheiden wollen, können Sie eine solche Einschränkung notieren. Hinter der Regel @media folgt, durch Leerraum getrennt, das gewünschte Ausgabemedium. Sie können auch mehrere Ausgabemedien durch Kommata getrennt in Folge notieren. Erlaubte Angaben sind die gleichen wie im HTML-Attribut media (siehe Medientypen).
Im Anschluss an die @media-Angabe müssen Sie geschweifte Klammern { und } notieren. Alle Formatdefinitionen, die Sie innerhalb dieser geschweiften Klammern notieren, sind dann nur für das oder die angegebenen Medien gültig.
Kommentare innerhalb von Stylesheet-BereichenUm Ihre Formatdefinitionen intern auszukommentieren, steht eine spezielle, an die Programmiersprache C angelehnte Syntax zur Verfügung.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS-Syntax für Kommentare</title>
<style type="text/css">
/*
Basis-Stylesheet
*/
h1 { color:blue; } /* Format für blaue Überschrift, ergänzt am 19.07.2001 */
</style>
</head>
<body>
<h1>CSS-Syntax für Kommentare</h1>
</body>
</html>
Innerhalb von <style...>...</style> können Sie mit /* - also einem Schrägstrich und einem Sternzeichen in Folge - einen Kommentar einleiten. Mit der umgekehrten Zeichenfolge - also mit */ - beenden Sie den Kommentar. Anfang und Ende des Kommentars müssen nicht in der gleichen Zeile stehen, auch beliebig viele Leerzeilen sind erlaubt. Kommentare dürfen jedoch nicht verschachtelt werden. Einzeilige Kommentare wie in JavaScript // existieren in CSS nicht.
Stylesheet-Sprache ausdrücklich festlegenSie können dem Browser in einer HTML-Datei mit Hilfe einer Meta-Angabe ausdrücklich mitteilen, dass diese Datei Stylesheet-Definitionen in einer bestimmten Definitionssprache enthält. Die Angabe ist in der gegenwärtigen Praxis und für die CSS-Sprache nicht zwingend erforderlich. Die Angabe dient dazu, um dem Client (also etwa dem Web-Browser), aber auch dem Web-Server eine Möglichkeit zur Verfügung zu stellen, der beiden Seiten helfen soll, sich vor dem Interpretieren der Datei über die zu verwendende Stylesheet-Syntax zu einigen.
<head> <meta http-equiv="Content-Style-Type" content="text/css"> </head>
Mit <meta http-equiv="Content-Style-Type" content="text/css"> im Kopf einer HTML-Datei erzwingen Sie die CSS-Syntax als verbindlich für Formatdefinitionen innerhalb dieser Datei. Wenn Sie eine andere Stylesheet-Sprache als CSS verwenden wollen, müssen Sie anstelle von "text/css" den MIME-Typ der betreffenden Formatdefinitionssprache angeben.
|
| |
 |
Zentrale Formate definieren
|
 |
Stylesheets und HTML
|
 SELFHTML/Navigationshilfen Stylesheets CSS-Formate definieren |
|
© 2007 Impressum