Homepagebau
Dateiversion:
diesen Beitrag diskutieren,
ergänzen, eine Frage stellen

Importieren von Stylesheets

Schwierigkeitsgrad:

 

Beschreibung:

Wenn sie das gleiche Stylesheet für mehrere Seiten ihrer Homepage verwenden wollen, macht es natürlich wenig Sinn, es einfach zu kopieren und neu einzufügen. Wie zeigen ihnen, wie es einfacher geht.

Syntax:

Der Import eines Stylesheets gehört zum kleinen 1x1 der Weberstellung.
Zunächst kopieren sie das zu importierende CSS in eine neue Datei, die sie im Verzeichnis ihres Webprojekts speichern. Normalerweise erhalten Cascaded Stylesheets die Dateiendung ".css", das ist aber selbstverständlich keine Pflicht. Kopieren müssen sie dabei lediglich das CSS, also nicht die umschließenden "STYLE"-Tags.

Um das Stylesheet in ein HTML-Dokument zu importieren, fügen sie folgendes in den Kopf (zwischen die "HEAD"-Tags am Anfang des Dokuments) ein.

<head>
...
<link rel="stylesheet" type="text/css" href="[Pfad]">
...
</head>

Ersetzen sie dabei [Pfad] durch den relativen Dateipfad der gerade erstellten CSS-Datei. Ihre HTML-Seite wird nun so dargestellt werden, als ob das Stylesheet direkt in der Datei stehen würde.

"REL" bezeichnet die Art des importierten Datei und "TYPE" gibt den "MIME-Typ" an. Dabei wird zunächst die grobe Gruppierung genannt (application, image, video, audio oder text) und dann die genaue Klassifikation. Wenn sie mehr über "MIME" erfahren wollen, möchte ich sie hier an die Literatur verweisen, da dies den Rahmen deutlich sprengen würde.

Alternative:

Genauso, wie die eben beschriebene Methode funktioniert auch die folgende (etwas längere) Variante...

<head>
...
<style type="text/css"> @import url ("[Pfad]"); </style>
...
</head>

Der Unterschied besteht darin, dass der Import in diesem Fall direkt in einem Stylesheet erfolgt (rein theoretisch könnte er also nicht nur im HTML sondern sogar in einer CSS-Datei erfolgen).

Beispiel:

Hier wird das Stylesheet aus der Datei "mein_stylesheet.css" importiert. Die Datei befindet sich vom Ort der HTML-Datei aus gesehen, in der dieser Aufruf steht im Unterverzeichnis "styles".

<link rel="stylesheet" type="text/css" href="styles/mein_stylesheet.css">

Angenommen, die Datei liegt im Wurzelverzeichnis des Webs und die HTML-Seite in einem untergeordneten Verzeichnis, dann sieht der Aufruf so aus.

<link rel="stylesheet" type="text/css" href="./mein_stylesheet.css">

Der "." steht dabei stellvertretend für das Wurzelverzeichnis* des Webs. Zwei Punkte, also ".." stehen übrigens für das übergeordnete Verzeichnis**.

* Häufig wird dieser spezielle Wert auch "Home", "Wurzel" oder "Root" genannt.
In einem anderen Kontext, zum Beispiel innerhalb von Framesseiten, wird die Wurzel mit der Zeichenfolge "_top" dargestellt.
** Dies wird auch als "Vater"- oder "Parent" -Verzeichnis bezeichnet.
".." steht hier stellvertretend für "_parent".

 

Autor: Thomas Meyer

Home: www.All-Community.de

 Kontakt: