Verlauf
Alle Kapitel anzeigen
voriges Kapitel
Eine Stildefinition im Header des Dokuments
Zum Definieren von CSS-Styles im header eines HTML-Dokumentes gibt es den Tag <style>. Innerhalb dieses Tags stehen dann die CSS-Anweisungen, dies können beliebig viele sein.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Dokumententitel</titel>
<style type="text/css">
.copytext { font-size: 10px; color: rgb(90,90,90); }
</style>
</head>
<body>
<p class="copytext">
Text im Absatz formatiert mit den Einstellungen des Stils copytext, der im Header angelegt wurde.
</p>
</body>
</html>
Manchmal sieht man auch, dass innerhalb des <style>-Tags noch zusätzlich die CSS-Definitionen mit einem HTML-Kommentar "auskommentiert" sind, dies wurde für diejenigen Webbrowser gemacht, die CSS nicht interpretieren können, sich an dem "unbekannten Code verschluckt" hätten und den Rest der Seite nicht mehr dargestellt hätten:
[...]
<style type="text/css">
<!--
.copytext { font-size: 10px; color: rgb(90,90,90); }
-->
</style>
[...]
Dieses "Verstecken" von CSS vor alten Browsern war in der Mitte der 90er jahre aktuell. Heutzutage gibt es kaum Browser, die CSS nicht verstehen (wenn auch einige kein CSS darstellen können) und daher kann man diese Technik im Grunde vernachlässigen. Auf der sicheren Seite ist man auf jeden Fall mit dem Auslagern von CSS in eigene Dateien, dazu später.
Stildefinitionen im Kopfteil eines HTML-Dokuments können mehrere Objekte "stylen" und sind schon leichter änderbar als inline Styles: Man braucht die betreffende Eigenschaft nur einmal im Kopfteil ändern. Im obigen Beispiel wird eine CSS-Klasse angelegt, die alle Elemente, die diese Klasse referenzieren, entsprechend darstellt. Selbverständlich kann man aber auch normale Typenselektoren wie im folgenden Beispiel in so einer Stildefinition verwenden:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Dokumententitel</titel>
<style type="text/css">
h1 { font-size: 2em; }
</style>
</head>
<body>
<h1>
Diese Ueberschrift ist 2x so gross als normale Ueberschriften: Doppelte Schriftgroesse.
</h1>
</body>
</html>
In diesem Beispiel wird für alle Objekte des Typs "h1", also Ueberschriften ersten Grades festgelegt, dass sie in der doppelten Schriftgroesse dargestellt werden sollen. Dies bezieht sich dann automatisch auf alle vorkommenden <h1> Tags auf dieser html-Seite.
Dieses Vorgehen ermöglicht es, schnell z.B. die Schriftart im Nachhinein für alle h1 zu ändern - man braucht nur den Selektor an zentraler Stelle verändern. Wenn man aber Stildefinitionen nicht nur über ein HTML-Dokument, sondern über ein ganzes Webprojekt mit vielen Seiten verwenden will, ist diese Variante jedoch auch noch nicht zufriedenstellend: Dazu benötigt man externe CSS-Stylesheets.
