Cascading Style Sheets im Detail

... [ Seminar WWW und JAVA ] ... [ Thema CSS ] ... [ Neue Gestaltungsmöglichkeiten ] ...

Übersicht: Cascading Style Sheets im Detail

Syntax
Verknüpfung der Stilinformationen mit dem Dokument
Verwendung von mehreren Stylesheets
Vererbung und Verschachtelung
Zuweisung von Eigenschaften

Syntax

<HTML-Element> {<Eigenschaft> : <Wert>;...}
Als erstes steht das zu behandelnde HTML-Element, dann folgt eine in geschweifte Klammern gefaßte Liste der Eingenschaftszuweisungen. Die Listenelemente werden per Semikolon voneinander getrennt.
Ein Listenelement besteht aus dem Namen der Eigenschaft, ":" und dem zugeordneten Wert.
Gültige Werte können entweder Schlüsselwörter (z. B. red, medium) oder Zahlenwerte sein. Für Zahlenwerte stehen absolute und relative Einheiten zur Verfügung. (z. B. absolut: mm, relativ: %).
Mehreren Elementen kann gleichzeitig ein Format zugewiesen werden

H1, H2, H3 {color: red}

* {color: red}

Wenn eine Eigenschaft mehrere Werte erfordert (z.B. Positionsangaben), so werden diese nur durch ein Leerzeichen voneinander getrennt.
Alternativwerte (z. B. bei Schriften) werden durch Kommata getrennt. Sie werden von links nach rechts abgearbeitet.
Die Sprache ist nicht casesensitiv.
Kommentar kann wie in C in den Code eingefügt werden: /* Kommentar */

Verknüpfung der Stilinformationen mit dem Dokument

Um eine Stilvorlage mit dem Dokument zu verknüpfen, gibt es verschiedene Möglichkeiten.

Lokale Formatvorlage
Durch das Element STYLE kann die Formatzuweisung direkt bei der Verwendung eines HTML-Elementes angegeben werden. Dadurch bleiben die eigentlichen Vorteile von CSS jedoch ungenutzt, da die Formatierungsanweisungen nicht vom Inhalt getrennt werden und auch nur innerhalb dieses Tags gültig sind.
<H1 STYLE= "font-family: sans-serif; text-align:center; color: red"> Überschrift</H1>

Positionierung am Anfang des Dokumentes
Alle Formatvorlagen werden im Dokumentkopf hinter dem TITLE-Tag in das STYLE-Element eingebettet und gelten für das gesamte Dokument. Browser, die das Style Element nicht kennen, würden die Formatangaben als normalen Text darstellen.
Als Kommentar gekennzeichnet, werden die Zeilen einfach überlesen und die Seite ganz normal, nur eben ohne die speziellen Formatierungen angezeigt.
<STYLE TYPE="text/css">

</STYLE>

Verbinden einer externen Formatvorlage mit dem Dokument
Mit dem <LINK> Element können externe Formatvorlagen mit dem Dokument verknüpft werden. Die externen Dateien haben typischer Weise die Endung .css und enthalten die Formatvorlagen im Format wie bei der Deklaration im Dokumentkopf.
Die Attribute REL=stylesheet und TYPE="text/css" signalisieren dem Browser, daß es sich um ein Style-Sheet handelt.
<LINK REL=stylesheet HREF="default.css" TYPE="text/css" MEDIA=screen TITLE="Stylesheet">

Verwendung von @import
Durch die Verwendung von @import am Anfang des Dokumentes kann ebenfalls eine externe Formatvorlage importiert werden:
@import "blau.css"

Verwendung von mehreren Stylesheets

Mit der Eigenschaft MEDIA können für verschiedene Ausgabemedien jeweils unterschiedliche Formatvorlagen verwendet werden, um das Aussehen des Dokumentes auf die speziellen Anforderungen der Ausgabe auf Bildschirm, Drucker, Handheld-PC oder Sprachausgabe für Sehbehinderte zu optimieren.
Sollen mehrere externe Dateien miteinander zu einer Formatvorlage verknüpft werden, so ist es erforderlich, daß alle den gleichen Titel erhalten.
Durch die Verwendung von REL=alternate ist es möglich, dem Leser ein Menü mit alternativen Formatvorlagen für ein Dokument anzubieten.

@media print {
BODY {font-size: 10pt}
}

@media screen {
BODY {font-size: 12pt}
}

oder im Dokumentkopf:

<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=aural>
<LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="24-bit Color
Style" MEDIA="screen, print">

Vererbung und Verschachtelung

CSS ist so aufgebaut, daß die Eigenschaften eines Elementes oftmals an andere Elemente durchgereicht werden. Wird dem <BODY>-Element eine bestimmte Textfarbe zugeordnet, so wird diese automatisch an alle Elemente innerhalb des <BODY>-Tags (z.B. <H1>) durchgereicht, sofern die Tochterelemente keine eingene Formatvorlage besitzen, die die Farbeigenschaft definieren.
Durch die Zuweisung des Wertes inherit kann explizit angegeben werden, daß der Wert vom Mutterelement übernommen werden soll.
H1 {color:inherit}
Bei Mehrfachdefinitionen einer Eigenschaft verwendet der Browser folgende Reihenfolge, um das Aussehen des Elementes festzulegen (1 = höchste Priorität):
1. Lokal definierte Formate
2. Formatvorlage in Dokumentkopf
3. Externe Formatvorlagen
4. Einstellungen des Browsers
Gibt es konkurrierende Definitionen mit gleicher Priorität, so gilt die letzte Definition.
Bei Verwendung der ! important-Regel erhält eine Formatanweisung automatisch höchste Priorität.
BODY {background-repeat: center ! important}

Zuweisung von Eigenschaften

Benannte Formate
Neben der Definition einer Formatvorlage für ein bestehendes HTML-Element (z.B. <H1>) können auch eigene benannte Formate erstellt werden. Die Fomatvorlage heißt „anmerkung“ (der Punkt ist wichtig) und kann nahezu jedem beliebigen Element zugewiesen werden

<STYLE>
.anmerkung {background: red; color:black}
</STYLE>

Zuweisung benannter Formate zu einem Element
Die Zuweisung eines benannten Formates erfolgt mit Hilfe des CLASS-Attributs:
<P CLASS=anmerkung>Ich bin ein Absatz, der als Anmerkung markiert ist</P>

Zuweisung zu bestimmten Elementen
Benannte Formate sind nicht an ein bestimmtes Element gebunden und können somit im gesamten Dokument zugewiesen werden. Um die Formatvorlage besser zu strukturieren, können von einem HTML-Element verschiedene Klassen gebildet werden, wodurch ein benanntes Format nur noch zu einem bestimmen Element gehört:

<STYLE>
P.anmerkung {color:red}
P.notiz { color:green}
</STYLE>

IDs
Elementen kann anhand eines IDs ein bestimmtes Format zugewiesen werden.

#0815 {color:red}

<P ID=0815><Ein Element, das den ID 8125 besitzt, erhält eine rote Farbe</P>

DIV / SPAN
Um Teilen eines Dokumentes einfacher ein Format zuweisen zu können, kann man bestimmte Container mit <DIV> und <SPAN> definieren. Mit Hilfe des CLASS-Attributes kann dann dem Container ein Format zugewiesen werden. <DIV> ist für Blöcke aus mehreren Elementen zuständig, der <SPAN>-Befehl wird auf zeichenebene innerhalb eines Elementes verwendet.
<DIV CLASS=anmerkung>
<H1>Anmerkung</H1>
<P>Dies ist eine <SPAN CLASS=wichtig>wichtige</SPAN> Anmerkung mit Überschrift</P>
</DIV>
In diesem Beispiel erhält der gesamte Block die Eigenschaften von DIV.anmerkung. Zusätzlich wird das Wort "wichtige" mit den Eigenschaften von SPAN.wichtig formatiert.

... [ Seminar WWW und JAVA ] ... [ Thema CSS ] ... [ CSS im Detail ] ... [ Neue Gestaltungsmöglichkeiten ] ...