| |
| Externe Style Sheets mit einem HTML-Dokument verbinden |
Die Verwaltung der Formatierungen innerhalb einer separaten Datei ist die eleganteste und auch effektivste Lösung. Wenn Sie eine einheitliche Formatierung wünschen, können Sie in diesem Fall alle Änderungen der Formatierung in einer einzigen Datei vornehmen und brauchen nicht alle Angaben in jeder HTML-Seite zu wiederholen. Sie müssen lediglich die Style Sheet-Angaben in einer separaten .css Datei notieren und diese Datei einfach in jeder gewünschten HTML-Datei einbinden. Einziges Problem der Implementierung ist die unterschiedliche Code-Akzeptanz der Browser, jedoch gibt es eine Methode, die in allen Browsern korrekt funktioniert:
Die Einbettung der Datei über das Link-Element.
<html>
<head>
<title>css_143a</title>
<link rel=stylesheet type="text/css" href="css_143b.css">
</head>
<body>
</body>
</html>
So sieht's aus
Im head einer HTML-Datei können Sie mit dem HTML Tag <link...> die externe Datei angeben, welche Styl Sheet-Angaben enthält (link = Verweis). Der Tag sollte immer folgende Elemente beinhalten: rel=stylesheet, type="text/css" (rel = relation = Bezug, type = Typ) und href="css_143b.css" (href = hyper reference = Hypertext-Referenz für die Angabe des Dateipfads). Die Angabe des Dateipfads funktioniert genauso wie z.B. beim Einbinden von Grafiken.
Der Inhalt der css_143b.css Datei sieht wie folgt aus:
p {font-family:Arial,Helvetica,sans-serif; font-size:14pt; margin-left:100pt;
margin-right:100pt; text-align:justify;}
h1 {text-align:left; padding-top:5pt; padding-bottom:20pt;}
Die Definitionen können direkt in der .css -Datei eingetragen werden. Sehen Sie sich hierzu auch das Beispiel an. Die Überschrift h1 wird wie der Standard definiert ist in einer Serifen-Schrift in einer bestimmten Größe dargestellt. Allerdings ist der Text linksbündig zum Browser Rand und die Abstände zu den nächsten Elementen sind punktgenau vorgegeben. Das <p> Element wiederum wird in einer serifenlosen Schrift in einer Größe von 14 Punkt mit einem Einzug von 100 Punkt auf beiden Seiten in Blocksatz dargestellt. |
|
 |
|
|
