6 < 7 Webdesign | start | Webdesign 7 > 8

CSS-Befehle | Veriante 3: Externe CSS-Datei | HTML-Seitenaufbau

Elemente, die nicht nur auf einer Seite sondern auf vielen Seiten vorkommen und einheitlich gestaltet werden sollen, werden sinnvollerweise in einer externen CSS-Datei definiert.

HTML-Seitenstruktur und Verlinkung auf externe CSS-Datei

Sie können Ihre CSS-Befehle aus dem Stylebereich in eine externe CSS-Datei exportieren und einen Link auf diese Datei in jede HTML-Datei importieren, die Sie mit denselben Regeln gestalten möchten.

Aufgabe: Ergänzen Sie Ihre HTML-Seite um Strukturelemente nach W3C-Syntax

Eine moderne Internetseite nach HTML5-Standard besteht aus mindestens 5 HTML-Struktur-Elementen:
Dokumenttypangabe, head, meta, title, body

Zwischen <head> und </head> befinden sich Metainformationen zur Seite. Dort hinein gehört z.B. der Style-Bereich.

Zwischen <body> und </body> sind alle Inhalte, die der Browser anzeigt.

Kommentare im HTML-Quelltext können Sie mit folgendne Zeichen einfügen: <!-- Kommentar -->

Achtung: Kommentare in einer CSS-Datei werden mit /* und */ gebildet. In der CSS-Dürfen keine < und > benutzt werden

Die Seite "Gruselett" mit HTML-Seitensyntax

<!doctype html>
<html>
<head>
<meta charset="utf-8"> <!-- Angabe des Zeichensatzes -->
<title>Gedichte und Sprüche</title>
  <style>
    /* CSS-Kommentar */
    h1 {color: red} /*Beispiel CSS-Befehl */

  </style>
</head>
<body>
</body>
</html>

Erstellen einer externen CSS-Datei

Aufgabe:

  1. Erstellen Sie mit Notepad++ eine externe CSS-Datei mit dem Namen style.css. Speichern Sie diese Datei dort ab, wo auch ihre anderen HTML-Dateien gespeichert sind.
  2. Kopieren Sie alle CSS-Informationen aus der HTML-Datei, die zwischen <style> und </style> stehen in die CSS-Datei. Der HTML-Steuerbefehl <style>, bzw. </style> dürfen nicht in die CSS-Datei kopiert werden

Auswirkung

Ihre HTML-Datei wird jetzt ohne CSS-Befehle angezeigt. Nur die Struktur des Textes ist erkennbar. Damit die CSS-Gestaltung aus der externen CSS-Datei zur Anwendung kommt, muss diese jetzt in der HTML-Datei verlinkt werden.

Aufgabe: Erstellen Sie einen Link in Ihrer HTML-Datei auf die externe CSS-Datei style.css.

Der Link lautet: <link href="style.css" rel="stylesheet" type="text.css">

Dadurch wird die Datei style.css eingebunden. HTML erfährt, dass es sich um eine Stylesheet-Datei handelt vom Typ text/css. mit einer Erweiterung des Medientyps könnte man noch angeben, wann die CSS-Datei wirksam werden soll. Die Ergänzung media="screen" oder media="print" hätte zur Folge, dass im ersten Fall die CSS-Datei nur für die Bildschirmansicht, im zweiten Fall nur beim Ausdruck wirksam werden würde. Für diese Unterscheidung gibt es aber noch andere Möglichkeiten direkt in der CSS-Datei.

<!doctype html>
<head>
<meta charset="utf-8"> <!-- Angabe des Zeichensatzes -->
<title>Gedichte und Sprüche</title>
<link href="style.css" rel="stylesheet" type="text/css">
  <style>
  </style>
</head>
<body>
</body>
</html>

Merksatz: Ergänzen Sie folgende Satzanfänge:

Gestaltung in einer externen CSS-Datei eignet sich...

 

 

Gestaltaung im Style-Bereich eignen sich weniger...

 

 

johannes.bucka@t-online.de. Diese Anleitung steht unter Creative Commons Lizenz: Namensnennung | Keine kommerzielle Nutzung | Weitergabe unter gleichen Bedingungen (http://de.creativecommons.org/).