SELFHTML/Quickbar  CSS Style-Sheets  Style-Sheets definieren

Style-Sheets in HTML einbinden
Diese Seite ist ein Dokument mit Informationstext

 Style-Sheets in einer HTML-Datei definieren
 Style-Sheets in separater Datei definieren
 Style-Sheet-Dateien für unterschiedliche Ausgabemedien
 Style-Sheet-Definitionen für unterschiedliche Ausgabemedien
 Kommentare innerhalb von Style-Sheet-Bereichen
 Style-Sheet-Sprache ausdrücklich festlegen

 

CSS1.0MS IE3.0Netscape 4.0 Style-Sheets in einer HTML-Datei definieren

Sie können innerhalb einer HTML-Datei einen Bereich für Style-Sheet-Angaben definieren.

Beispiel:

<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
/*  ... Style-Sheet-Angaben ... */
//-->
</style>
</head>
<body>
</body>
</html>

Erläuterung:

Mit dem Befehl <style...> ... </style> im Kopf der HTML-Datei definieren Sie einen Bereich für Style-Sheet-Angaben (style = Stil, Format). Im einleitenden <style>-Tag müssen Sie den Typ der Formatdefinition angeben. Das geschieht bei allen hier beschriebenen Formatiermöglichkeiten durch die Angabe type="text/css". Zwischen dem einleitenden Tag und dem abschließenden </style> können Sie dann die eigentlichen Style-Sheet-Angaben definieren. Lesen Sie dazu den Abschnitt  Formate definieren.

Beachten Sie:

Damit WWW-Browser, die keine Style-Sheets kennen, die Style-Sheet-Angaben nicht irrtümlich als anzuzeigenden Text interpretieren, können Sie den Bereich der eigentlichen Style-Sheet-Angaben in einen mehrzeiligen  HTML-Kommentar <!-- ... //--> einbinden, so wie im obigen Beispiel.

Die Style-Sheet-Angaben, die Sie auf diese Weise im Kopf einer HTML-Datei definieren, sind für diese eine HTML-Datei gültig.

 

CSS1.0MS IE4.0Netscape 4.0 Style-Sheets in separater 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 Style-Sheet-Angaben in einer separaten Textdatei notieren 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 diese separate Datei eingebunden ist.

Beispiel:

<html>
<head>
<title>Titel der Datei</title>
<link rel=stylesheet type="text/css" href="formate.css">
<style type="text/css">
<!--
  ... Extra-Style-Sheet-Angaben ...
//-->
</style>
</head>
<body>
</body>
</html>

Erläuterung:

Im Dateikopf einer HTML-Datei können Sie mit einem HTML-Befehl des Typs <link...> eine Datei referenzieren, die Style-Sheet-Angaben enthält (link = Verweis). Innerhalb dieses Befehls sollten immer die Angaben rel=stylesheet type="text/css" stehen (rel = relation = Bezug, type = Typ). Bei der Angabe href= können Sie die gewünschte Datei angeben (href = hyper reference = Hypertext-Referenz). Die Angabe muß in Anführungszeichen stehen. Wenn sich die CSS-Datei in einem anderen Verzeichnis oder auf einem anderen Server befindet, müssen Sie mit relativen Pfadangaben oder absoluten URL-Adressen arbeiten. Das funktioniert genauso wie etwa beim  Einbinden von Grafiken.

Bei der referenzierten Datei muß es sich um eine reine Textdatei handeln, die die Endung .css haben sollte. Die Datei sollte nichts anderes als  Formatdefinitionen enthalten, also auch keine HTML-Befehle. Eine solche Datei können Sie mit jedem einfachen Texteditor erstellen. In SELFHTML wird so eine separate Style-Sheet-Datei für alle Dokumentdateien verwendet. Sie können diese  Datei als Beispieldatei aufrufen (der Verweis führt zu einer Datei namens wselfhtm.txt, damit die Datei in jedem Fall im Browser angezeigt wird - die Style-Sheet-Datei heißt eigentlich wselfhtml.css).

Beachten Sie:

Wenn Sie mit <link...> eine Datei mit Style-Sheet-Angaben referenzieren, brauchen Sie keinen Bereich <style...>...</style>. Im obigen Beispiel wird dennoch ein solcher Bereich definiert. Das soll zeigen, daß Sie beide Arten, Style-Sheet-Angaben zu definieren, durchaus 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 überschreiben.

Die Syntax mit <link...> zum Einbinden einer separaten Style-Sheet-Datei ist die HTML-Syntax zum Einbinden von Style-Sheets. 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(formate.css);
//-->
</style>
</head>
<body>
</body>
</html>

Erläuterung:

Eine CSS-spezifische Einbindung einer separaten CSS-Datei müssen Sie innerhalb eines <style>-Bereichs im Dateikopf notieren. Mit einem Klammeraffenzeichen @import url starten Sie den Befehl zum Einbinden einer CSS-Datei. In Klammern notieren Sie den Dateinamen der separaten CSS-Datei. Auch dabei sind die gleichen Angaben möglich wie etwa beim  Einbinden von Grafiken. Am Ende des Befehls sollte ein Strichpunkt stehen.

Beachten Sie:

Die HTML-Syntax mit <link...> ist bei den Browsern derzeit sicherer als die CSS-Syntax.

 

CSS2.0MS IE4.0 Style-Sheet-Dateien 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 Style-Sheet-Dateien einbinden. Beachten Sie zu diesem Thema auch die  Style-Sheet-Angaben zu Seitenlayout und Seitenumbruch für druckorientierte Dokumente.

Beispiel 1 (in separaten Dateien nach HTML-Syntax):

<html>
<head>
<title>Titel der Datei</title>
<link rel=stylesheet media="screen" href="website.css">
<link rel=stylesheet media="print" href="printer.css">
<link rel=stylesheet media="aural" href="speaker.css">
</head>
<body>
</body>
</html>

Erläuterung:

Um Style-Sheets für verschiedene Ausgabemedien bereitzustellen, können Sie diese in unterschiedlichen  Style-Sheet-Angaben in separaten Dateien notieren. Legen Sie für jedes Ausgabemedium eine Textdatei mit der Endung .css an, die nichts anderes als die gewünschten Style-Sheet-Definitionen enthält. In einer HTML-Datei können Sie alle erstellten Style-Sheet-Dateien wie im obigen Beispiel einbinden. Wichtig ist dabei die Angabe media=. Durch diese Angabe bestimmen Sie, für welches Ausgabemedium die Datei verwendet werden soll, die Sie bei der Angabe href= einbinden. Derzeit sind bei media= folgende Angaben bekannt:
media="screen" für Style-Sheets, die bei der Bildschirmpräsentation wirksam sein sollen.
media="print" für Style-Sheets, die bei der Ausgabe über Drucker wirksam sein sollen.
media="aural" für Style-Sheets, die wirksam sein sollen, wenn der Inhalt der HTML-Datei per Sprachausgabe über Lautsprecher erfolgt.
media="projection" für Style-Sheets, die wirksam sein sollen, wenn der Inhalt der HTML-Datei per Diaprojektor oder Overhead-Projektor erfolgt.
media="braille" für Style-Sheets, die wirksam sein sollen, wenn der Inhalt der HTML-Datei über taktile Braille-Medien erfolgt.
media="tv" für Style-Sheets, die wirksam sein sollen, wenn der Inhalt der HTML-Datei über Fernsehtechnik erfolgt.
media="handheld" für Style-Sheets, die wirksam sein sollen, wenn der Inhalt der HTML-Datei über Handys, Palmtops oder ähnliche Geräte mit kleinem Display erfolgt.
media="all" für Style-Sheets, die in allen Medientypen wirksam sein sollen.

Beachten Sie:

Bislang interpretiert der MS Internet Explorer diese Angaben ab der Software-Version 4.0 zu einem gewissen Teil. Netscape 4.0 findet 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 2 (in separaten Dateien nach CSS-Syntax):

<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
@import url(druck.css) print;
@import url(multimedia.css) projection, tv;
//-->
</style>
</head>
<body>
</body>
</html>

Erläuterung:

Eine CSS-spezifische Einbindung müssen Sie innerhalb eines <style>-Bereichs im Dateikopf notieren. Mit einem Klammeraffenzeichen @import url starten Sie den Befehl. In Klammern notieren Sie den Dateinamen der separaten CSS-Datei. Hinter der Dateiangabe notieren Sie, durch ein Leerzeichen getrennt, das gewünschte Ausgabemedium. Dabei sind die gleichen Medientypen erlaubt wie bei der HTML-Syntax. Am Ende des Befehls sollte ein Strichpunkt stehen.

 

CSS2.0 Style-Sheet-Definitionen für unterschiedliche Ausgabemedien

Neben der Möglichkeit,   Style-Sheet-Dateien für unterschiedliche Ausgabemedien in HTML einzubinden, steht auch noch die Möglichkeit zur Verfügung, direkt innerhalb eines Style-Sheet-Bereichs zwischen unterschiedlichen Ausgabemedien zu unterscheiden.

Beispiel:

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

Erläuterung:

Mit @media definieren Sie innerhalb eines Style-Sheet-Bereichs einen Bereich 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 ein Leerzeichen getrennt, das   gewünschte Ausgabemedium. Sie können auch mehrere Ausgabemedien durch Kommata getrennt in Folge notieren, so wie im obigen Beispiel bei @media screen, projection. Die Style-Sheet-Angaben gelten dann für alle aufgezählten Medien.

Im Anschluß an den @media-Befehl müssen Sie geschweifte Klammern { und } notieren. Alle Style-Sheet-Angaben, die Sie innerhalb dieser geschweiften Klammern definieren, sind dann nur für das oder die angegebenen Medien gültig.

Beachten Sie:

Diese Befehle werden vom MS Internet Explorer und von Netscape in den 4er-Versionen noch nicht interpretiert.

 

CSS1.0MS IE4.0Netscape 4.0 Kommentare innerhalb von Style-Sheet-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 4.1.1998 */
//-->
</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 in der gleichen Zeile stehen.

 

HTML4.0 Style-Sheet-Sprache ausdrücklich festlegen

Sie können dem Browser in einer HTML-Datei mit Hilfe einer  Meta-Angabe ausdrücklich mitteilen, daß 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 dem WWW-Browser) und dem WWW-Server einen Befehl zur Verfügung zu stellen, der beiden Seiten helfen soll, sich vor dem Interpretieren der Datei über die zu verwendende Style-Sheet-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 Style-Sheet-Definitionen innerhalb dieser Datei. Wenn Sie eine andere Style-Sheet-Sprache als CSS verwenden wollen, müssen Sie anstelle von "text/css" den Mime-Type der betreffenden Formatdefinitionssprache angeben.


 
weiter: Zentrale Formate definieren
zurück: Style-Sheets und HTML
 

SELFHTML/Quickbar  CSS Style-Sheets  Style-Sheets definieren

© 1998  Stefan Münz, muenz@csi.com