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:
- <!-- Dateiname: test.html -->
- <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