Cascading Style Sheets (CSS) sind eine Ergänzung zu Hypertext Markup Language
(HTML).
Es bestehen Bestrebungen, Inhalt und Form zu trennen: In HTML werden die Inhalte
strukturiert, mit CSS wird das Layout beschrieben.
CSS wird erst von Browsern ab der sogenannt "4. Generation"
einigermassen unterstützt (Nescape Navigator 4.0-4.7 und MS Internet
Explorer 4.0/4.5); erst die Browser ab der sogenannt "5. Generation"
(Netscape 6.0, MS Internet Explorer 5.0/5.5, Opera 5.0) unterstützen
CSS in brauchbarem Masse.
Die Stil-Definitionen selbst können an mehreren Orten stehen:
Externe Stylesheet-Definitionen sind eine sehr praktische Sache. Damit erreicht man ein einheitliches Layout für alle Seiten, und Änderungen im Layout müssen nur noch an einer einzigen Stelle gemacht werden.
Eine beliebige Anzahl HTML-Dateien mit verschiedenem Inhalt kann ihre Layout-Informationen aus der gleichen CSS-Datei beziehen.
| HTML-Dateien | eingebundene CSS-Datei |
Resultat |
|---|---|---|
| seite_1.html seite_2.html seite_3.html ... seite_n.html |
layout.css (definiert z.B. Textfarbe=rot) |
alle Dateien haben das gleiche Layout (z.B. roten Text) |
Jeder HTML-Datei können mehrere externe CSS-Dateien zugeordnet werden,
die Layout-Informationen für verschiedene Ausgabemedien und Zwecke haben.
So kann man z.B. verschiedene Schriften und Farben für Bildschirmanzeige,
Projektion (Beamer) und Ausdruck festlegen.
| HTML-Datei(en) | eingebundene CSS-Dateien |
im CSS enthaltene Layout-Information |
Verwendungs- Zweck |
Resultat |
|---|---|---|---|---|
| seite_1.html | bildschirm.css | Textfarbe=rot Schriftart=Arial |
Bildschirm-Ausgabe | Text auf Bildschirm ist rot und gut lesbar (Arial) |
| druck.css | Textfarbe=schwarz Schriftart=Times |
Ausdruck | Text auf Papier ist schwarz und gut lesbar (Times) |
|
| projektion.css |
Textfarbe=gelb, |
Projektion | Text ist bei Projektion mit Beamer gelb auf schwarz |
Im Dateikopf (HEAD) einer HTML-Datei kann man mit dem LINK-Tag ein oder mehrere
externe StyleSheets (CSS) einbinden.
<html>
<head>
<title>Seitentitel</title>
<LINK href="layout.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>Dies ist ein Beispieltext<p>
</body>
</html>
Daneben gibt es noch die Möglichkeit, ein externes Stylesheet mit @import url(dateiname.css); einzubinden. Diese Schreibweise wird jedoch von Netscape 4.x und MS Internet Explorer 4.x schlecht oder gar nicht unterstützt. Deshalb gehe ich hier nicht darauf ein.
Das LINK-Tag kann man mit dem Attribut media="xxx" erweitern:
Beispiele:
<LINK href="bildschirm.css" rel="stylesheet" type="text/css"
media="screen">
oder
<LINK href="anzeige.css" rel="stylesheet" type="text/css"
media="screen, projection">
oder
<LINK href="druck.css" rel="stylesheet" type="text/css"
media="print">
Dann wird das verlinkte CSS nur für das oder die angegebenen Ausgabemedien
verwendet.
Erlaubte Angaben in HTML 4.01:
| media="..." | Zweck/Ausgabemedium | Bemerkungen |
|---|---|---|
| screen | normale Computerbildschirme | Standard, wird von den meisten Browsern angewendet |
| projection | Projektion (z.B. mit einem Beamer) | wird von Opera 5.0 im Vollbildmodus angewendet |
| Ausdruck auf Papier | wird von neueren Browsern beim Drucken angewendet | |
| all | für alle Medien geeignet | Achtung: wird von Netscape 4.x ignoriert |
| handheld | Geräte mit kleinen Displays | |
| tv | Fernseher und ähnliche Bildschirme | |
| tty | "Primitive" Bildschirme mit gleicher Schriftbreite für alle Buchstaben | |
| braille | Braille-Anzeige-Geräte für Blinde | |
| aural | Sprachausgabe-Geräte für Blinde |
mediaMir bekannte wesentliche Browser-Bugs im Zusammenhang mit dem MEDIA-Attribut:
Netscape 4.x ignoriert verlinkte CSS, für die mehr als ein MEDIA-Typ
oder media="all" angegeben ist:
Keine media-Angabe => das verlinkte CSS wird berücksichtigt
media="screen" => das verlinkte CSS wird berücksichtigt
media="screen,projection" => das verlinkte CSS wird
ignoriert
media="all" => das verlinkte CSS wird ignoriert
In Opera 5.0x wird im Vollbildmodus (F11) nur ein Stylesheet angewendet,
das mit media="all" oder media="projection"
gekennzeichnet ist.
Wenn man nur ein einziges Style-Sheet verlinkt und dieses mit media="screen"
kennzeichnet, so verwendet Opera
im Vollbildmodus *kein* Style-Sheet (auch nicht das User-Style-Sheet).
Wenn man das gleiche Style-Sheet einmal mit media="screen"
und einmal mit media="projection" verlinkt, so verwendet
Opera im Vollbildmodus *kein* Style-Sheet.
Will man wirklich das gleiche Style-Sheet für Screen und Projection verwenden,
müsste man es (für Opera) mit media="screen,projection"
verlinken. Wegen dem Netscape-4.x--Bug (s.oben) ist es aber besser, das gleiche
Stylesheet unter zwei verschiedenen Namen zu speichern und dann wie folgt zu
verlinken:
<LINK href="bildschirm.css" rel="stylesheet" media="screen"
type="text/css">
<LINK href="projektion.css" rel="stylesheet" media="projection"
type="text/css">
Dreamweaver 4.0 interpretiert auch Druck- oder Projektions-CSS
Der HTML-Editor Dreamweaver 4.0 interpretiert im WYSIWYG-Modus (Ansicht->Entwurf)
immer alle verlinkten Stylesheets, auch wenn diese mit media="print"
oder media="projection" ausgezeichnet sind. Am stärksten
gewichtet Dreamweaver jeweils das letzte angegebene Stylesheet. Das kann störend
sein.
Deshalb sollte man die Stylesheets für Projektion und Druck immer vor
den (normalen) Bildschirm-Stylesheets verlinken.
Man kann ein Standard-CSS und ein oder mehrere Alternativ-CSS angeben.
Der LINK fürs Standard-CSS enthält das Attribut rel="stylesheet"
Der LINK für alternative CSS enthält das Attribut rel="alternate
stylesheet"
Falls der User einen modernen Browser hat (z.B. Netscape 6.0), kann er ein alternatives
Layout für die Seite auswählen.
<LINK href="blau.css" title="Standard: Blautoene"
rel="stylesheet" type="text/css" media="screen">
<LINK href="rot.css" title="Rottoene" rel="alternate
stylesheet" type="text/css" media="screen">
<LINK href="schwarz.css" title="Schwarz/Weiss, gross"
rel="alternate stylesheet" type="text/css" media="screen">
Dabei sollte jedes LINK-Tag auch ein TITLE-Attribut enthalten, damit dem User
im Auswahl-Menü auch etwas angezeigt wird.
TITLE-AttributEin LINK zu einem externen Stylesheet kann auch TITLE-Attribut enthalten:
<LINK href="blau.css" title="Blautoene"
rel="stylesheet" type="text/css" media="screen">
Dies ist eigentlich nur sinnvoll, falls der Benutzer diesen Titel auch zu sehen
bekommt. Dies ist der Fall, wenn man ein Standard-CSS und ein oder mehrere alternative
CSS anbietet.
TITLE sind nur sinnvoll für LINKs mit media="screen"
und media="all".
LINKs mit media="print" und media="projection"
sollten kein TITLE-Attribut haben.
(Netscape 6.0 listet sie zwar im Menü auf, sofern sie ein TITLE-Attribut
haben, aber er wendet sie dann nicht an.)
(Das TITLE-Attribut ist eine der Hauptursachen, warum Netscape 6.0 nicht konsequent
immer das letzte verlinkte Stylesheet benutzt, falls man mehrere sich "konkurrierende"
CSS mit rel="stylesheet" einbindet.)
Gerade wenn man nur ein einziges Stylesheet mit media="screen"
oder media="screen,projection" einbindet, sollte man es unbedingt
mit einem TITLE-Attribut versehen. Nur so haben die Benutzer in den
Browsern Netscape 6/7 und Mozilla 1.0 die Möglichkeit, das Stylesheet über die
entsprechende Menü-Option kurzfristig auszuschalten.
Mehrere externe Stylesheets, die sich ergänzen, kann man nacheinander
mit dem LINK-Tag einbinden. Wenn man Ihnen allen das gleiche TITLE-Attribut
gibt, weiss der Browser, dass sie zusammengehören, und interpretiert sie
alle:
<LINK href="blau_1.css" title="Standard (Blau)" rel="stylesheet"
type="text/css" media="screen">
<LINK href="blau_2.css" title="Standard (Blau)"
rel="stylesheet" type="text/css" media="screen">
<LINK href="schwarz_1.css" title="Schwarz/weiss,
gross" rel="alternate stylesheet" type="text/css"
media="screen">
<LINK href="schwarz_2.css" title="Schwarz/weiss,
gross" rel="alternate stylesheet" type="text/css"
media="screen">
In diesem Beispiel wird der Browser grundsätzlich die Angaben aus den externen
Stylesheets blau_1.css und blau_2.css anwenden. Dank
dem Tag TITLE="Standard (Blau)", das beiden LINK-Tags
gemeinsam ist, weiss er, dass die beiden zusammengehören.
Falls der User (z.B. mit Netscape 6.0) die alternative Anzeigevariante mit dem
Namen "Schwarz/weiss, gross" auswählt, so wendet der Browser
die beiden externen Stylesheets schwarz_1.css und schwarz_2.css
an.
Wenn man im HEAD einer HTML-Datei mehrere LINKs zu externen CSS-Dateien hat und will, dass eine bestimmte CSS-Datei auf jeden Fall berücksichtigt wird, muss der entsprechende LINK am Ende der Liste stehen und darf kein TITLE-Attribut haben.
Wenn man mehrere CSS-Dateien hat, die widersprüchliche Layout-Angaben enthalten, will man manchmal, dass ein bestimmtes Stylesheet auf jeden Fall berücksichtigt wird. Dies kann man erreichen mit der richtigen Reihenfolge der LINK-Tags sowie mit weiteren Merkmalen.
Folgende Faktoren spielen eine Rolle bei der Entscheidung des Browsers, ein bestimmtes Stylesheet zu berücksichtigen oder nicht:
In der Theorie ( http://www.w3.org/TR/REC-html40/present/styles.html#h-14.3 ) sieht es so aus:
Es gibt drei Stufen, wie wichtig ein verlinktes Stylsheet sein kann:
<LINK href="haupt.css" rel="stylesheet" type="text/css">
<LINK href="standard.css" title="Standard-Layout"
rel="stylesheet" type="text/css"><LINK href="alternative.css" title="Alternativ-Layout"
rel="alternate stylesheet" type="text/css">Wenn zwei oder mehr LINKs ein "preferred"-Stylesheet festlegen, so sollte der Browser das erste berücksichtigen.
Man könnte (ebenfalls im HEAD der HTML-Datei) mit dem Tag
<META http-equiv="Default-Style" content="Title des preferred-Stylesheets">
das "preferred"-Stylesheet festlegen.
Andere "preferred" LINKs mit einem TITLE-Attribut würden dann
wahrscheinlich als "alternate" betrachtet oder ignoriert.
(Nur Netscape 6.0 scheint das META-Tag zu berücksichtigen (Beispiel
10); die andern getesteten Browser ignorieren es völlig.)
In der Praxis sieht es so aus:
Die Windows-Browser Netscape Navigator 4.x, MS Internet Explorer 5.0/5.5 und Opera 5.0 berücksichtigen immer das letzte verlinkte Stylesheet, egal, ob es ein TITLE-Attribut hat oder nicht.
Bei Netscape 6.0 hingegen ist keine klare Logik zu erkennen, welches
verlinkte Stylesheet berücksichtigt wird.
Sofern kein einziges LINK-Tag das TITLE-Attribut hat, wird auch bei Netscape
6.0 immer das letzte verlinkte Stylesheet berücksichtigt.
Auch wenn das letzte verlinkte Stylesheet kein TITLE-Attribut hat, wird konsequent
dieses verwendet.
Wenn man will, dass ein eingebundenes Stylesheet unbedingt angewendet wird, muss der entsprechende LINK der letzte in der Liste sein und darf kein TITLE-Attribut haben.
Das macht es auch möglich, im statischen HTML grundsätzlich mal mit
einem ersten LINK ein externes Stylesheet einzubinden, und dann dynamisch (z.B.
mit JavaScript, PHP, Perl, SSI, ...) einen zweiten LINK zu schreiben, der dann
vom Browser sicher interpretiert wird. Wichtig: der zweite LINK darf kein TITLE-Attribut
haben.
Beispiel:
<HEAD>
<TITLE>Testseite fuer JS-verlinkte CSS</TITLE>
<LINK REL=stylesheet HREF="windows.css" TYPE="text/css">
<SCRIPT LANGUAGE="JavaScript" TYPE="TEXT/JAVASCRIPT">
<!--
if (navigator.appVersion.indexOf('Win') < 0) {
document.write("<LINK REL=stylesheet HREF=\"notwin.css\" TYPE=\"text/css\">");
}
//-->
</SCRIPT>
</HEAD>
Erklärung:
Im statischen HTML-Quelltext steht zunächst mal der erste LINK:
<LINK REL=stylesheet HREF="windows.css" TYPE="text/css">
windows.css mit dem Layout
für Windows-Rechner eingebunden.
Das darauf folgende JavaScript kontrolliert, ob im Browser-Versions-Namen die
Buchstabenfolge "Win" vorkommt. Wenn nicht, schreibt es folgende Zeile
mit dem zweiten LINK:
<LINK REL=stylesheet HREF="notwin.css" TYPE="text/css">
Sofern es sich um einen Rechner mit einem anderen Betriebssystem als Windows
handelt und sofern der Browser JavaScript interpretiert, wird also das externe
Stylesheet notwin.css mit dem Layout für Nicht-Windows-Rechner
eingebunden.
Da der LINK an letzter Stelle steht und kein TITLE-Attribut hat, wird dieses
Stylesheet von den meisten Browsern (inklusive Netscape 6.0) als das wichtigste
angesehen.
(Zum Sinn dieses Skripts:
Windows-Browser gehen von einer anderen Bildschirmauflösung aus als gewisse
ältere Mac-, Unix- oder Linux-Browser. Falls man in einem Stylesheet die
Schriftgrösse absolut festlegt, z.B. mit p { font-size:14pt } ,
wird der Text deshalb auf einem Windows-Rechner grösser angezeigt als auf
einem Mac mit einem älteren Browser. Um diese Differenz zu korrigieren,
kann man zwei verschiedene Stylesheets machen: eines für Windows-Rechner
und eines für alle andern.)
Dies ist ein Vorschlag für den Aufbau einer HTML-Datei mit mehreren verknüpften Stylesheets.
<html>
<head>
<title>Seitentitel</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<LINK href="druck.css" rel="stylesheet" media="print"
type="text/css">
<LINK href="projektion.css" rel="stylesheet" media="projection"
type="text/css">
<LINK href="alternative.css" title="Alternatives Layout"
rel="alternate stylesheet" media="screen" type="text/css">
<LINK href="projektion.css" title="Projektions-Layout"
rel="alternate stylesheet" media="screen" type="text/css">
<LINK href="standard.css" title="Standard-Layout" rel="stylesheet"
media="screen" type="text/css">
</head>
<body>
<p>Dies ist ein Mustertext.<p>
</body>
</html>
Erklärungen:
standard.css ist das Standard-Stylesheet für die Bildschirmanzeige.
alternative.css ist ein alternatives Stylesheet für die Bildschirmanzeige
(kann z.B. in Netscape 6.0 angezeigt werden)
projektion.css ist einerseits das Stylesheet für die Projektion
(und somit für den Vollbildmodus in Opera 5.x)
und andererseits, wegen der zweiten Verlinkung, ein alternatives Stylesheet
für die Bildschirmanzeige (z.B. Netscape 6.0)
druck.css ist das Standard-Stylesheet für den Ausdruck.
Zum Seitenanfang
<= Zurück zur Übersicht CSS
Autor: Thomas Lüthi, luthi@my-mail.ch - Letzte Änderung: 23.05.2001