Tutorial zu CSS-Style-Sheets Seite 3

Inhaltsverzeichniss CSS Tutorial

 Beispiel 6. StyleSheets in eine CSS-Datei auslagern.

<html>
<head>
<link href="../stylesheets/global.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div class="format1">
Dieser Text wird mit CSS formatiert angezeigt,
die dazugeh&ouml;rigen Formatierungen werden
aus der Datei 'global.css' geladen.
Der Text erscheint damit einerseits
kursiv und fett, andererseits wegen der
Anweisung
<span class="quelltext">justify</span>
zur Formatierung
als Blocksatz beidseitig b&uuml;ndig.
</div>
</body>
</html>

Die Datei 'global.css' in dem Verzeichnis stylesheets:

/* Hier können Sie einen Kommentar einsetzen */
body {background:yellow}
.format1 {font-family:arial,helvetica,courier;
font-style:italic; font-weight:bold;
text-align:justify}
.quelltext {font-family:courier}
/* Ende der Formatierungsangaben */

Und so sieht das Ganze im Browser aus...

Erklärung des Codes:

Das Auslagern der CSS-Style-Sheets ist einfach. Die obige Zeile im Head der HTML Datei weist dem Browser den Weg zu den im HTML-Code aufgerufenen CSS-Style-Sheet Formatierungen. Im obigen Bespiel wurde auf die externe CSS-Datei gelinkt, was aber nicht bedeutet, dass Sie nicht auch noch eine extra CSS-Style-Sheet Angabe nur für diese Datei vornehmen könnten. Diese könnten Sie wie gewohnt mit <style type=" text/css"> einleiten und deklarieren. Der Vorteil ist, dass Sie globale Formatierungsänderungen nur noch einmalig in der CSS-Datei vorzunehmen brauchen. Gerade bei größeren Projekten empfiehlt es sich diese Datei mit ausreichend vielen Kommentaren zu den einzelnen Formatierungsangaben zu versehen. Das mindert die Gefahr, die Übersicht zu verlieren.

"link rel=stylesheet" - Definiert den Namen der externen einzubindenden CSS-Datei.

" type=" text/css" " - Definition des auzurufenden Datei-Typs.

"href="pfad-zur-CSS-Datei/Datei.css" " - Definition des Zielpfades zu der externen CSS-Datei.

".format1" - Anwendung der Formatierungen auf gewünschte Absätze; die Formatierungsanweisungen werden aus der oben angegebenen CSS-Datei bezogen.

Grundsätzlich gelten folgende Empfehlungen für den Ort der CSS-Angaben:

Ort der CSS-Angaben empfohlene Verwendung bei ...
in ausgelagerter Datei einheitlicher Nutzung in mehreren HTML-Dokumenten
im head-Tag einheitlicher Nutzung in einem HTML-Dokument
im Element individueller Ad-hoc-Nutzung in einem Element

zurück zu CSS Tutorial Seite 2

©2001 de Vries