|
|
|
|
| Das Stylesheet-Template (inkl. Reset) | 1. |
| Textumfluss um Motiv des Hintergrundbildes | 2. |
| Layout ohne Tabellen | 3. |
| Prioritäten bei mehreren Stylesheets | 4. |
| Die drei Varianten der CSS-Formatierung | 5. |
|
|||||
|
|
|
|
|
|
|
||||||||||||||||
|
|
|||||||||||||||
|
|
 |
Stylesheet-Angaben können auf drei verschiedene Arten angewendet werden: Direktformatierung des HTML-Ele- ments, 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. Beispielcode:
<!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: #FF3333; font-weight: bold">
Direktformatierter Text.</font>
</body>
</html>
Das Dokument wird zwar über die externe Datei “haupt.css” formatiert - allerdings wird
durch die Direkt- formatierung der erste Satz in der Farbe Rot (#F33) und in Fettschrift angezeigt.
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 Format- ierungen auf einer bestimmten Seite von der (ansonsten) konsis- tenten 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 ent- sprechende Seite aufruft. Beispielcode:
<!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: #FFF; color: #000 }
td { background-color: #CCC; color: #E0E0E0 }
-->
</style>
</head>
<body>
<table style="width: 100%" height="90px" border="0"
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. Beispielcode:
<!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>
Wenn Sie bereits existierende HTML-Dateien
verwenden, so müssen Sie die Formatierungen entfernen. Siehe hierzu folgendes Beispiel:
Beispielcode (vorher):
<!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="#009966">Hallo! Ich bin das alte
HTML-Dokument.</h3>
<br><br>
<font color="#FFFFFF" 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>
Beispielcode (nachher):
<!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 class="link" href="http://www.style-sheets.de/">
www.style-sheets.de</a>
</body>
</html>
Wie die Überschrift später aussehen wird, definiert man in der Stylesheet-Datei.
<h1> bedeutet also nicht zwangsläufig das, was HTML ohne CSS-Formatierung daraus machen würde (eine Über- schrift “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. Beispielcode :
body {
background-color: #DDD;
background-image: url(img/hg.gif);
background-repeat: repeat-y;
padding: 0px;
font-family: Verdana, Arial, Helvetica,
sans-serif;
font-size: 12px;
line-height: 17px;
color: #000
}
h1 {
text-align: left;
font-family: "Trebuchet MS", Verdana, Arial;
font-size: 16px;
font-weight: bold;
color: #096
}
td {
font-family: Verdana, Arial, Helvetica,
sans-serif;
font-size: 12px;
color: #000;
border-color: #888
}
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), Über- schrift(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 Fett- schrift dargestellt. Links werden -wie üblich- blau dargestellt. Der “hover”-Effekt (Mauszeiger berührt Link) besteht darin, das der Link ohne Unter- strich und in der Farbe Schwarz dargestellt wird. Auf diese Weise haben wir quasi ein “doppeltes” Feedback, dass das von uns aus- gewählte Wort wirklich ein Link ist.
Fazit:
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).
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 Style- sheets zurückzugreifen! Desweiteren ersparen Sie sich natürlich schon bei Erstellung zu- künftiger HTML-Dateien sehr viel Formatierungsarbeit. |
 |
|
|
||||||||||
|
||||||||||||||||
