SELFHTML: CSS Stylesheets / CSS-Formate definieren / CSS Stylesheets in HTML einbinden

	CSS Stylesheets in HTML einbinden
	Formate zentral für eine HTML-Datei definieren Formate zentral in separater CSS-Datei definieren Formate innerhalb eines HTML-Elements definieren Verschiedene separate Stylesheets für unterschiedliche Ausgabemedien Format-Definitionen für unterschiedliche Ausgabemedien Kommentare innerhalb von Stylesheet-Bereichen Stylesheet-Sprache ausdrücklich festlegen

Formate zentral für eine HTML-Datei definieren

Sie können innerhalb einer HTML-Datei einen Bereich für CSS-Formate definieren.

Beispiel:

<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
/*  ... Hier werden die Formate definiert ... */
-->
</style>
</head>
<body>
</body>
</html>

Erläuterung:

Mit <style...> ... </style> notieren Sie einen Bereich für Stylesheet-Formatdefinitionen (style = Stil, Format). Im einleitenden <style>-Tag müssen Sie den Mime-Type 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.

Beachten Sie:

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.

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-Type in einer HTML-Datei notieren möchten.

Formate zentral in separater CSS-Datei definieren

In vielen Fällen werden Sie einheitliche Formate für alle HTML-Dateien Ihres Projekts haben wollen. In diesem Fall 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.

Beispiel:

<html>
<head>
<title>Titel der Datei</title>
<link rel="stylesheet" type="text/css" href="formate.css">
<style type="text/css">
<!--
  ... hier sind datei-spezifische Formate erlaubt ...
-->
</style>
</head>
<body>
</body>
</html>

Erläuterung:

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).

Beachten Sie:

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 importieren und einige davon mit dateispezifischen Formaten ergänzen oder überschreiben.

Formate innerhalb eines HTML-Elements definieren

Unabhängig davon, ob Sie Formate zentral definieren oder aus einer separaten CSS-Datei einbinden, können Sie einzelne HTML-Elemente formatieren.

Beispiel:

<html>
<head>
<title>Titel der Datei</title>
<link rel="stylesheet" type="text/css" href="formate.css">
<style type="text/css">
<!--
  ... hier sind datei-spezifische Formate erlaubt ...
-->
</style>
</head>
<body>
<h1 style="[element-spezifische Formate]">...</h1>
</body>
</html>

Erläuterung:

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.

Beachten Sie:

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 Ausgabemedien

Bildschirm 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.

Beispiel:

<html>
<head>
<title>Titel der Datei</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>
</body>
</html>

Erläuterung:

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.

Medientypen:

In CSS 2.0 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.

Beachten Sie:

Der MS Internet Explorer interpretiert diese Angaben ab der Software-Version 4.0 zu einem gewissen Teil. Netscape findet auch in Version 6.0 zwar die richtige Style-Sheet-Datei für die Bildschirmformate, ignoriert jedoch beispielsweise Style-Sheet-Dateien mit Formaten für den Druck.

Die Syntax mit <link...> zum Einbinden separater Style-Sheet-Dateien für unterschiedliche Ausgabemedien ist HTML-Syntax. Daneben gibt es auch noch eine CSS-Syntax, die den gleichen Zweck hat:

Beispiel:

<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
@import url(druck.css) print, embossed;
@import url(pocketcomputer.css) handheld;
@import url(normal.css) screen;
-->
</style>
</head>
<body>
</body>
</html>

Erläuterung:

Eine CSS-spezifische Einbindung wird innerhalb eines style-Bereichs im Dateikopf notiert. Mit @import url starten Sie die Angabe. In Klammern notieren Sie dahinter den Dateinamen bzw. die Adresse der separaten CSS-Datei. Hinter der Dateiangabe notieren Sie, 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.

Format-Definitionen für unterschiedliche Ausgabemedien

Neben 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.

Beispiel:

<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
@media print
{
  /* ... Formatdefinitionen zum Drucken ... */
}
@media screen, handheld
{
  /* ... Formatdefinitionen zur Bildschirmausgabe ... */
}
-->
</style>
</head>
<body>
</body>
</html>

Erläuterung:

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 einen solchen Befehl notieren. Hinter dem Befehl @media folgt, durch Leerraum getrennt, das 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-Bereichen

Um Ihre Formatdefinitionen intern auszukommentieren, steht eine spezielle, an die Programmiersprache C angelehnte Syntax zur Verfügung.

Beispiel:

<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
  p { color:blue; } /* Format für blauen Text, kreiert am 19.7.2001 */
-->
</style>
</head>
<body>
</body>
</html>

Erläuterung:

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. Kommentare dürfen jedoch nicht verschachtelt werden.

Stylesheet-Sprache ausdrücklich festlegen

Sie können dem Browser in einer HTML-Datei mit Hilfe einer Meta-Angabe ausdrücklich mitteilen, dass diese Datei Style-Sheet-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) und aber auch dem Web-Server einen Befehl zur Verfügung zu stellen, der beiden Seiten helfen soll, sich vor dem Interpretieren der Datei über die zu verwendende Stylesheet-Syntax zu einigen.

Beispiel:

<head>
<meta http-equiv="Content-Style-Type" content="text/css">
</head>

Erläuterung:

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-Type der betreffenden Formatdefinitionssprache angeben.


	Zentrale Formate definieren
	CSS Stylesheets und HTML

SELFHTML/Navigationshilfen

CSS Stylesheets

CSS-Formate definieren