• Home
• Seitensuche
  

• XHTML
• CSS
• JavaScript
• Ajax

• Flash

• PHP
• Datenbanken mit PHP
• ASP.NET 2.0
• Hackerschutz

• Suchmaschinoptimierung
• Affiliate-Programme
• Weblogs
• Content Management Systeme
• Barrierefreiheit

• Impressum
• Privacy Policy
• Kontakt
• Sitemap

CSS - Eigenschaften und Werte, Einbinden von CSS

Eigenschaften und Werte

In einem Stylesheet stehen die sogenannten CSS-Deklarationen. Eine CSS-Deklaration setzt sich immer aus einer Eigenschaft und einem Wert zusammen, der der Eigenschaft zugewiesen wird. So erhält durch

color: blue;

die Eigenschaft color (Text - bzw. Vordergrundfarbe) den Wert blue (blau). Eigenschaft und Wert werden durch Doppelpunkt getrennt. Leerzeichen können - müssen aber nicht - vor und nach dem Doppelpunkt stehen. Eine Deklaration wird mit dem Strichpunkt (Semikolon) abgeschlossen. Bei mehreren Deklarationen kann bei der letzten Deklaration der Strichpunkt fehlen.

color: blue; background-color: white

Einbinden von CSS

CSS-Angaben können wir auf unterschiedliche Arten mit den (X)HTML-Dateien verknüpfen. Über Inline-Stile, in einem eingebetteten Stylesheet oder in einer externen Datei.

Inline-Stile

Soll nur ein einzelnes Element innerhalb eines Dokuments formatiert werden, so bietet sich die Formatierung über Inline-Stile an. Notieren wir hierfür direkt im Element, welches formatiert werden soll, das Attribut style. Als Werte schreiben wir die CSS-Eigenschaften.

<p style="color: white; background-color: blue;">weißer Text auf blauen Hintergrund</p>

Eingebettes Stylesheet

Eingebettete Stylesheets sind die richtige Wahl, wenn Formate für mehrere Elemente innerhalb einer (X)HTML-Datei gelten sollen, aber nicht für mehrere (X)HTML-Dateien. Dazu schreiben wir die CSS-Angaben in den Dokumentenkopf, innerhalb des head-Bereichs.

Eingeleitet werden die Stylesheet-Angaben durch das Element style, dem als Attribut der MIME-Typ text/css zugewiesen wird.

<style type="text/css"> ... </style>

Darauf folgt in XHTML ein CDATA-Abschnitt. Die CDATA-Kennzeichnung muss selbst durch Kommentare /* und */ geschützt werden. Innerhalb diese Bereichs stehen die eigentlichen CSS-Angaben.

<style type="text/css">
/* <![CDATA[ */
h1 {
 background-color: blue;
 color: white;
}
p {
 background-color: white;
 color: blue;
}/* ]] */
</style>

Hinter dem Element fassen die geschweiften Klammern die CSS-Angaben zusammen. In beiden Fällen wird eine Hinter - und eine Vordergrundfarbe festgelegt. Damit erhalten alle Überschriften der 1. Ebene h1 einen blauen Hintergrund und weiße Textfarbe. Alle Absätze p erhalten einen weißen Hintergrund und blaue Textfarbe.

Anzeigebeispiel

Bei der Einbindung con CSS gibt es einen Unterschied zwischen XHTML und HTML. In HTML sind CDATA-Abschnitte nicht notwendig, üblich sind stattdessen HTML-Kommentare <!-- CSS-Angaben -->, um die CSS-Angaben vor alten Browsern zu verbergen.

Externe Stylesheets

Am häufigsten werden wir jedoch mit externen Stylesheets arbeiten. Dort können wir Formatierungen angeben, die für mehrere Dateien gelten sollen. So lassen sich ganz zentral projektweite Formatierungen erstellen und verwalten. Dazu erstellen wir eine Textdatei , die nur CSS-Formatierungen enthält. Diese trägt üblicherweise die Endung .css

Im XHTML-Dokument selbst hingegen stehen nun keine CSS-Angaben mehr, sondern nur noch eine Verknüpfung zu CSS-Datei. Diese Verknüpfung befindet sich im Kopfbereich der Datei und ist im Element link angegeben.

<link rel="stylesheet" href="extern.css" type="text/css" />

Das Attribut rel erhält obligatorisch den Wert stylesheet, bei type folgt wieder der MIME-Typ text/css. Hinter href steht der Pfad zur CSS-Datei.

Anzeigebeispiel

Einbindung externer Stylesheets über @import

Zur Verknüpfung mit externen Stylesheet-Dateien gibt es eine zweite Möglichkeit: die @import-Direktive. Diese steht innerhalb des style-Elements, das wiederum wie erwähnt im Dokumentkopf plaziert ist.

Anzeigebeispiel

Hinter @import folgt das Schlüsselwort url und in Klammern der Pfad zur CSS-Datei. Unterhalb der @import-Anweisungen können mehrere CSS-Angaben stehen, wichtig ist nur, dass die @import-Anweisungen als Erstes stehen.

Alternatives Stylesheet

Das link-Element hat noch andere interessante Funktionen. Wir können weitere link-Elemente ins Dokument integrieren. Schreiben wir bei rel="alternate stylesheet", so können wir als Pfad bei href ein alternatives Stylesheet zusätzlich zum eigentlichen Stylesheet angeben. Außerdem sollten wir als Wert des title-Attributs dem Stylesheet noch einen Titel geben, der beim Webseiten-Stil in Mozilla-Browsern unter Ansicht/Webseiten-Stil als Name aufgeführt wird

<link rel="stylesheet" title="Stil AB" href="extern.css" type="text/css" />
<link rel="alternate stylesheet" title="Stil XY" href="stil.css" type="text/css" />

Navigationspunkte als Buttonleiste

Bei rel können wir ganz zentrale Navigationspunkte innerhalb unseres Projekts angeben, die bei den Browsern, welche das unterstützen, als zusätzliche Buttonleiste erscheinen. So kann der Surfer zu einzelnen Stellen wie beispielsweise dem Glossar direkt über die Buttonleiste navigieren. Die Basis für solch eine Navigationsleiste sieht folgendermaßen aus:

<link rel="contents" title="Inhaltsverzeichnis" href="/inhalt/" />
<link rel="help" title="Hinweise zur Bedienung und Orientierung" href="/hilfe/" />

Leider unterstützt der Internet Explorer weder alternative Stylesheets noch Navigationspunkte als Buttonleiste.

Favicon

Gut unterstützt wird hingegen die dritte Einsatzmöglichkeit von link. Hierüber kann ein Favicon eingebunden, also ein kleines Icon, das sich in der Adressleiste des Browsers vor der Adresse befindet. Dazu dient folgender Code:

<link rel="shortcut icon" href="favicon.ico" />

Vorrang bei mehreren Angaben

Hierbei gilt, dass Inline-Stile Vorrang vor anderen Stilangaben haben. Bei den anderen setzt sich die durch, die zuletzt notiert wird - unabhängig davon, ob sie sich im externen oder im eingebetteten Stylesheet befindet.

In folgendem Beispiel wird im eingebetteten Stylesheet für Absätze die Schriftfarbe Weiß und die Hintergrundfarbe Schwarz festgelegt. Der erste Absatz erhält diese Formatierung. Beim zweiten steht hingegen in einer Inline-Stilangabe die Hintergrundfarbe Grau. Damit erhält dieser Absatz Grau als Hintergrundfarbe und Weiß als Schriftfarbe, da diese Angabe aus dem eingebetteten Stylesheet nicht überschrieben wird.

Anzeigebeispiel