12.5 Arten von CSS-Stilen 
Grundsätzlich gibt es zwei Möglichkeiten, mit CSS zu arbeiten: Entweder können Sie:
- CSS-Stile direkt in HTML-Dokumenten deklarieren oder
- extern in separaten, eigens dafür erstellten CSS-Dokumenten abspeichern.
12.5.1 Interne CSS-Stile
Bei internen CSS-Stilen werden die so genannten Selektoren im Head-Bereich des HTML-Dokuments definiert.
Listing 12.1 Interner CSS-Stil im Head-Bereich des HTML-Dokuments
<head>
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
-->
</style>
</head>Diese Vorgehensweise bewirkt, dass der Stil nur in diesem einen Dokument zur Verfügung steht. Das kann sinnvoll sein, wenn Sie einzelne Dokumente mit besonderem Verwendungszweck unabhängig von den generellen Formatierungen für die Website verwenden möchten.
Interne CSS-Stile können in Dreamweaver 8 bei Bedarf in externe CSS-Dateien exportiert werden und stehen dann für mehrere Dokumente zur Verfügung.
12.5.2 Externe CSS-Stile
Externe CSS-Stile werden in einer eigenen Datei mit der Endung .css abgespeichert. Diese Datei wird im Head-Bereich eines HTML-Dokuments verknüpft:
Listing 12.2 Einbindung einer externen CSS-Datei im HTML-Dokument
<head> <title>Unbenanntes Dokument</title> <link href="stile.css" rel="stylesheet" type="text/css"> </head>
Der Vorteil dieser Vorgehensweise liegt darin, dass Sie externe CSS-Stile auf beliebig viele Dokumente anwenden können. Alle mit der CSS-Datei verknüpften Dokumente erhalten so die gleichen Formatvorgaben aus dem zentralen Zuweisungsdokument.
Externe CSS-Stile ersparen viel Arbeit und die Pflege der Website wird deutlich einfacher. Wenn Sie sich entscheiden, die Schriften auf Ihrer Website einen Pixel größer einzustellen, muss die Änderung nur in der zentralen CSS-Datei vorgenommen werden. Bei internen CSS-Stilen müssten alle HTML-Dokumente einzeln geändert werden.
| Umfangreiche CSS-Stile übersichtlich halten |
| Teilen Sie CSS-Stile auf mehrere externe Dateien auf. Sie können Textformatierungen, Layout und Formatierungen für Formularelemente in verschiedene CSS-Dateien ablegen und erhalten so eine bessere Übersicht. |
12.5.3 CSS-Syntax
Die grundsätzliche CSS-Syntax ist wie folgt aufgebaut:
Listing 12.3 CSS-Syntax
Selektor {
Eigenschaft-A: Wert-A;
Eigenschaft-B: Wert-B;
}Einen vollständigen Aufbau wie in Listing 12.3 nennt man eine Regel. In den geschweiften Klammern befindet sich der Deklarationsbereich, hier mit zwei Deklarationen.
In jeder Regel können beliebig viele Deklarationen enthalten sein, die wiederum aus Eigenschaftsbezeichnern und einem Wert bestehen. Die gesamte Deklaration ist einem Selektor zugewiesen.
Ihre Meinung
Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.
