|
In XHTML können Sie Style-Angaben auf drei
Methoden in ein Dokument einbinden.
- Inline-Styles
- Eingebettete Stylesheets
- Externe Stylesheets
Inline-Style
Mit dem style-Attribut können
Sie einem einzelnen Element einen individuellen
Style zuweisen. Hier müssen Sie keine geschweiften
Klammern um die Deklaration setzen.
<h1 style="color:red; text-decoration:underline;">Überschrift
in Rot, unterstrichen</h1>
Eingebettete Stylesheets
Das Element style erlaubt Ihnen, Style-Angaben
für ein einzelnes Dokument zu machen. style
muss im head-Element des Dokuments
eingefügt werden. Für das Attribut type
geben Sie den Wert text/css an. Innerhalb
von style listen Sie Ihre Deklarationen
auf.
<html>
<head>
<title>Eingebettetes
Stylesheet</title>
<style type="text/css">
h1, h2, h3 { color:gray; }
.rot { color:red; }
.blau { color:blue; }
</style>
<head>
...
</html>Externe Stylesheets
In einer separaten Textdatei mit der
Dateinamen-Erweiterung .css schreiben
Sie Ihre Deklarationen wie innerhalb des style-Elementes.
Zum Einbinden der CSS-Datei verwenden Sie das
Element link innerhalb von head.
<html>
<head>
...
<link rel="stylesheet" type="text/css"
href="styles.css" />
</head>
...
</html>Beispiel
anzeigen
externes
Stylesheet anzeigen
Rangordnung der Style-Angaben
Inline-Styles stehen im Rang vor eingebetteten
Stylesheets, eingebettete Stylesheets vor externen
Stylesheets. Wenn Sie zwei oder mehr externe Stylesheets
mit link einbinden, wird das zuletzt
eingebundene Stylesheet identisch benannte Selektoren
aus den vorhergehenden überschreiben.
|
