Tutorial zu CSS2 © 04/2002 webnetline.de & topwebhamster.de
Cascading Style Sheets, level 2
2. CSS in HTML integrieren
Style Sheets lassen sich auf verschiedene Weisen in HTML einbinden. Zunächst einmal gibt es die Möglichkeit der Schnellformatierung im Text.
Dazu fügen Sie dem einleitenden
HTML-Tag im Textkörper sozusagen "on the fly"
die Angabe style= bei, gefolgt von den
Style-Sheet-Werten, die für diesen HTML-Befehl gelten sollen.
Beispiel:
<h1 style="color:red;
font-size:36pt;">Überschrift 1. Ordnung</h1>
Hiermit wird eine Überschrift 1. Ordnung mit der Schriftfarbe rot
und der Schriftgröße 36 Points formatiert.
Sollen größere Bereiche mit der gleichen Style-Sheet-Formatierung
versehen werden, empfiehlt sich die Verwendung von <div>.
Listing 1:
<html>
<head>
<title>Titel der Datei</title>
</head>
<body>
...
<div style="font-style:italic;">
<h1>Überschrift 1. Ordnung</h1>
<p>Normaler Textabsatz</p>
</div>
...
</body>
</html>
Auf die Textabschnitte zwischen <div
style=...> und V</div> werden
einheitlich die durch style=
definierten Formateigenschaften angewendet. In Listing 1 werden
Überschrift und Absatz kursiv angezeigt.
Style-Sheet Vorlagen dagegen gelten nicht nur für einzelne
HTML-Befehle oder Bereiche, sondern für alle gleichen HTML-Befehle
dieser Datei, also beispielsweise für alle Überschriften 1. Ordnung.
Diese Vorlagen werden im Kopf der HTML-Datei definiert.
Listing 2:
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
/* ... Style-Sheet-Angaben ... */
</style>
</head>
<body>
...
</body>
</html>
Mit dem Befehl <style> ... </style> im
Kopf der HTML-Datei definieren Sie einen Bereich für
Style-Sheet-Angaben. Im einleitenden <style>-Tag
müssen Sie den Typ der Formatdefinition angeben. Für alle hier
beschriebenen Formatierungsmöglichkeiten ist dies
type="text/css". Zwischen dem
einleitenden Tag und dem abschließenden
</style> werden dann die eigentlichen Style-Sheet-Angaben
definiert.
Haben Sie sich für Ihr Projekt eine einheitliche Formatvorlage
definiert, die sie bei allen WWW-Seiten des Projektes verwenden
wollen, so empfiehlt sich die Speicherung der Style-Sheet-Angaben in
einer externen Datei. Diese Datei referenzieren Sie im Kopf jeder
Ihrer Web-Seiten.
Listing 3:
<html>
<head>
<title>Titel der Datei</title>
<link rel="stylesheet" type="text/css" href="formate.css">
</head>
<body>
...
</body>
</html>
Der Befehl <link href=...> referenziert
eine externe Datei. Die Angaben rel="stylesheet"
und type="text/css" informieren den Browser darüber, dass es
sich bei der Datei um eine Textdatei mit Style-Sheet-Angaben
handelt.
Die Verwendung externer CSS-Dateien bietet eine elegante
Möglichkeit, alle Seiten eines Web-Projektes einheitlich zu
formatieren. Insbesondere der Wartungsaufwand bei Änderungen ist
gering. Soll beispielsweise für alle Überschriften eine andere
Schriftart eingesetzt werden, muss dazu lediglich die CSS-Datei
geändert werden. Diese Style-Sheet-Datei ist eine reine Textdatei
mit der Endung .css. Sie sollte nichts
anderes als Formatdefinitionen und Kommentare eingeschlossen in
"/*" und "*/"
enthalten, also auch keine HTML-Befehle.
Der Befehl <link> ist die HTML-Syntax
zum Einbinden externer Style-Sheet-Dateien. Daneben gibt es auch
noch eine CSS-Syntax für den gleichen Zweck.
Listing 4:
<style type="text/css">
@import url(formate.css);
</style>
In der aktuellen CSS Version 2.0 ist außerdem die Definition von
Formatvorlagen für unterschiedliche Ausgabemedien vorgesehen.
Bildschirm und Drucker beispielsweise haben ihre eigenen Gesetze.
Während am Bildschirm etwa helle Schriften auf dunklem Hintergrund
attraktiv aussehen, ist das für die Ausgabe am Drucker keine gute
Lösung. Deshalb können Sie für verschiedene Ausgabemedien
verschiedene Style-Sheet-Dateien einbinden.
Listing 5:
<html>
<head>
<title>Titel der Datei</title>
<link rel="stylesheet" media="screen" href="website.css">
<link rel="stylesheet" media="print" href="printer.css">
</head>
<body>
...
</body>
</html>
Leider wird diese hervorragende Funktionalität von den aktuellen
Browsern bisher nur mangelhaft unterstützt.
|
bezahlte Bannerwerbung:
|
|
Jörg Jünemann, Berlin / Ralf Roletschek, Eberswalde
