ID: 27

Erstellen und Einbinden einer seperaten CSS Datei

Erstellen und Einbinden einer separaten Datei
Um eine separate CSS-Datei einzubinden müssen Sie zwei Dateien erstellen. Zuerst einmal eine HTML Datei namens "test.html". In die sollten Sie dann folgendens hineinschreiben:

<html>
<head>
<title>Grundgerüst einer HTML-Datei</title>
<meta name="author" content="wicoh">
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<h1>Überschrift</h1>
<p>Fließtext, nichts als Fließtext</p>
</body>
</html>

Wenn Sie zwar mit HTML vertraut sind aber mit Style Sheets bisher noch gar nichts anfangen konnten, wird Ihnen die Zeile mit <style type="... Rätsel aufgeben. Sie veranlasst den Browser die Datei “test.css” aufzurufen und als Style Sheet einzubinden.
Als nächstes erstellen Sie eine Datei namens "test.css", in die Sie folgendes schreiben:

/* Dateiname: test.css */
P, H1 { font-family: Tahoma, Verdana, sans-serif; }
P { font-size: 10pt; line-height: 15pt; }
H1 { color: #000080; font-size: 17pt; line-height: 17pt; letter-spacing: 0.4em; }

Wenn Sie CSS-Tags in eine eigene Datei schreiben, müssen Sie dem Browser mitteilen, welche Anweisungen zu welchen HTML-Tags gehören. Um dies zu tun schreiben Sie erst das HTML-Element als Selektor (P oder P, H1) groß, Leerzeichen, geschweifte Klammer, neue Zeile, einrücken, Deklaration (mit Strichpunkt!), neue Zeile, geschweifte Klammer zu.
Eine externe CSS-Datei wird auf keinen Fall mit einen HTML-Kommentar (<-- -->) eingeschlossen.

Diese Schreibweise ist anfangs leichter zu lesen. Wenn Sie rutinierter werden können Sie die Datei verkleinern, indem Sie sie so aufbauen:

/* Dateiname: test.css */
P, H1 { font-family: Tahoma, Verdana, sans-serif; }
P { font-size: 10pt; line-height: 18pt; }
H1 { color: #000080; font-size: 17pt; line-height: 17pt; letter-spacing: 0.4em; }

eingestellt am: 11.10.2005 (1333 mal gelesen)

Druckansicht | Übersicht CSS | zurück

Juli 2008

Topics / CSS / ID: 27

Erstellen und Einbinden einer seperaten CSS Datei