 4) externe Datei
Die CSS-Anweisungen in eine externe Datei auszulagern, bringt ihnen erhebliche Vorteile. Neben den weiter unten aufgeführten Gründen ist nicht unerheblich, dass die HTML-Seiten kleiner werden, und die externe CSS-Datei nur einmal vom Server geladen werden muss.
|
|
CSS-Anweisungen in eine externe Datei auslagern
Beispiele externer CSS-Dateien: Unterschiedliche Vorlagen für externe CSS-Dateien habe ich auf der Downloadseite zusammengefasst. Dort kann ich die Auswahl dann leichter erweitern.
 zur Downloadseite
Stylesheetanweisungen auslagern
Ein Style-Sheet wird normalerweise im HEAD-Bereich definiert. Einmal festgelegt, gelten die Anweisungen für das gesamte HTML-Dokument.
Um nun jedoch diese Definitionen nicht in jede HTML-Datei einkopieren zu müssen, ist es vorteilhaft die CSS-Anweisungen in eine externe Datei auszulagern. Die externe CSS-Datei kann dann in alle / mehrere HTML-Dokumente ihres Web-Projekts eingebunden werden.
Vorteil:
Styles müssen nur einmal (für alle HTML-Dokumente) festgelegt werden.
Nachträgliche Änderungen kann man ganz zentral vornehmen.
Absolut gleiches Erscheinungsbild aller Seiten
Ein Link im Head des HTML-Dokuments verweist auf die externe CSS-Datei.
Ich empfehle zuerst innerhalb einer Musterseite passende CSS-Deklarationen festzulegen, und erst danach die CSS-Anweisungen in eine zentrale, externe CSS-Datei auszulagern.
CSS-Code in eine Textdatei schreiben
In die extene CSS-Datei werden die Anweisungsblöcke ohne einleitende und beendende Tags für Style-Sheets (unten rot dargestellt) einkopiert. Die Datei wird als Textdatei ohne Formatierungen, mit der Dateiklasse 'css' gespeichert.
|
|
Beispiel: Aus den üblichen CSS-Angaben im Head den hier roten Teil heraus- und in eine leere Textdatei hineinkopieren. Die Datei soll beim Speichern die Dateiendung "css" erhalten (z.B. meinestyles.css).
 Den roten Code nicht in die extere Datei schreiben !
<style type="text/css">
<!--
body {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: normal;
text-decoration: none;
background-color :#FFFFFF;
color: #222222;
line-height: 100.01%;
margin: 0px;
padding: 0px;
}
td {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: normal;
color: #000000;
}
a {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: normal;
text-decoration: none;
color: #0000FF;
}
-->
</style>
externe CSS-Datei einbinden
Der Bezug zu dieser externen CSS-Datei wird im HEAD-Bereich durch einen Link hergestellt:
<link rel="stylesheet" type="text/css" href="meinestyles.css">
oder mit Pfadangaben
<link rel="stylesheet" type="text/css" href="verzeichnis/meinestyles.css">
- Im rel-Attribut teilt man dem Browser mit,
dass eine CSS-Datei eingebunden wird.
- Im href-Attribut steht der Speicherort.
- Das type-Attribut zeigt den Mime-Typ / die
verwendete Stylesheet-Sprache an.
Beispiele externer CSS-Dateien
Unterschiedliche Beispiele für externe CSS-Dateien habe ich auf der Downloadseite zusammengefasst. Dort kann ich die Auswahl dann leichter erweitern.
zur Downloadseite
Die Beispiele beinhalten: Basisanweisungen, Hintergrundgrafik, Scrollbar, erweiterte Anweisungen, Margins, Zeilenhöhe, Zeichenabstand, Tabellenränder, Listen, Einrückung, Blocksatz, Unterklassen für Texte und Links.
|
Home • CSS • CSS extern
BEISPIEL
drucken 
simple HP-Vorlage (7 Varianten) mit externer CSS-Datei zum Download