Die drei Varianten der CSS-Formatierung |
|
| 01. Dezember 2006/ von Stefan Plagge | |
Stylesheet-Angaben können auf drei verschiedene Arten angewendet werden: Direktformatierung des HTML-Elements, per internem sowie per externem Stylesheet.
1. Direktformatierung von HTML-Elementen
Wenn Sie Ihre Website(s) mit StyleSheets formatiert haben, und (z.B.) einen bestimmten Textabschnitt andersfarbig darstellen möchten als im Sylesheet-Bereich angegeben, so können Sie einzelne HTML-Elemente direkt formatieren.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Direktformatierung von HTML-Elementen</title>
<link rel="stylesheet" type="text/css"
href="format.css">
</head>
<body>
<font style="color: #f33; font-weight: bold">
Direktformatierter Text.</font>
</body>
</html>
2. Das interne Stylesheet
Das interne Stylesheet befindet sich im “Body”-Bereich der HTML- Datei. In wieweit dies -im Vergleich zu einer zentralen Stylesheet-Datei- Sinn ergibt, kann davon abhängen, wie stark die Formatierungen auf einer bestimmten Seite von der (ansonsten) konsistenten Formatierung der Website abweicht.
So macht es bei sehr umfangreichen Formatierungen durchaus Sinn, eine vorhandene (externe) Stylesheet-Datei schlank zu halten. Die Website wird beim Aufruf schneller geladen, und der zusätzliche Code wird nur dann abgerufen, falls man die entsprechende Seite aufruft.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Das interne Stylesheet</title>
<style type="text/css">
<!--
body { background-color: white; color: black }
td { background-color: #CCC; color: #E0E0E0 }
-->
</style>
</head>
<body>
<table style="width: 100%" height="90px"
cellpadding="0" cellspacing="0">
<tr>
<td style="width: 18%; height: 45px">HTML 4.01
</td>
<td style="width: 82%">Die "Sprache" des
Internet
</td>
</tr>
<tr>
<td style="height: 45px">XHTML 1.0</td>
<td>XHTML (=Extensible HyperText Markup
Language)</td>
</tr>
</table>
</body>
</html>
3. Das externe Stylesheet
Damit die Seiten einer Website auf eine externe Stylesheet-Datei zugreifen können, muß in jeder Seite auf diese Datei referenziert werden.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Das externe Stylesheet</title>
<link rel="stylesheet" type="text/css"
href="format.css">
</head>
<body>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Das externe Stylesheet</title>
</head>
<body>
<h1><font color="#096">Hallo! Ich bin das alte HTML-Dokument.</h3>
<br><br>
<font color="white" size="12px">Es verwendet noch nicht die coolen Style-Sheets. Hier findet man weitere Informationen über CSS:</font>
<br><br>
<a href="http://www.style-sheets.de/">
www.style-sheets.de</a>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Das externe Stylesheet</title>
<link rel="stylesheet" type="text/css"
href="format.css">
</head>
<body>
<h1>Hallo! Ich bin das neue HTML-Dokument.</h3>
<br><br>
Es verwendet die coolen Style-Sheets. Hier findet man weitere Informationen über CSS:</font>
<br><br>
<a href="http://www.style-sheets.de/">
www.style-sheets.de</a>
</body>
</html>
<h1> bedeutet also nicht zwangsläufig das, was HTML ohne CSS-Formatierung daraus machen würde (eine Überschrift “höchster Ordnung”).
Nun erstellen wir eine Stylesheet-Datei. Verwenden Sie den folgenden Beispielcode, und fügen ihn in einem Texteditor ein. Der Name der Datei lautet “format.css”, und muß sich im selben Verzeichnis wie die HTML-Datei befinden.
body { background: #ddd url(img/hg.gif) repeat-y; margin: 0; padding: 0; font: normal 12px/17px Verdana, Arial, Helvetica, sans-serif; color: black }
h1 { font: bold 16px/1.5 "Trebuchet MS", Verdana, Arial; color: #096 }
td { font: normal 12px/1.5 Verdana, Arial, Helvetica, sans-serif ;border-color: #888; color: black }
a:link.link { color: blue; text-decoration: underline }
a:visited.link { color: blue; text-decoration: underline }
a:hover.link { color: black; text-decoration: underline }
a:active.link { color: blue; text-decoration: none }
In diesem Beispiel werden Body (body), Tabelle(n) (td), Überschrift(en) (h1) und Links (a) formatiert.
Nun haben Sie bereits ein funktionierendes Stylesheet:
Der Text wird nun mit 12 Pixel dargestellt, die Hintergrundfarbe ist Grau (#DDD). Die Hintergrundfarbe von Tabellen ist hellgrau.
Überschriften werden nun in der Schriftgröße 16 Pixel und in Fettschrift dargestellt.
Links werden -wie üblich- blau dargestellt. Der “hover”-Effekt (Mauszeiger berührt Link) besteht darin, das der Link ohne Unterstrich und in der Farbe Schwarz dargestellt wird. Auf diese Weise haben wir quasi ein “doppeltes” Feedback, dass das von uns ausgewählte Wort wirklich ein Link ist.
Der Vorteil liegt nun darin, dass Sie (z.B.) alle HTML-Seiten ihrer Website mittels einer (!) Stylesheet-Datei formatieren können (in der Praxis bietet es sich bei größeren Projekten in manchen Fällen an, mehrere Stylesheets anzulegen).
Fazit:
 |
Das externe Stylesheet ist am praktikabelsten: Sie kontrollieren die Formatierung der (gesamten) Website über eine einzige Datei. Ein weiterer Vorteil: Die Website wird schneller angezeigt. |
|
Sie können auch mit mehreren externen Stylesheet-Dateien arbeiten, indem Sie abweichende Referenzierungen in den Seiten angeben. |
Stellen Sie sich nur einmal vor, Sie würden an einem Großprojekt mit über 70 (Unter-) Seiten arbeiten - und dies, ohne auf die Unterstützung durch Stylesheets zurückzugreifen!
Desweiteren ersparen Sie sich natürlich schon bei Erstellung zukünftiger HTML-Dateien sehr viel Formatierungsarbeit.
