Anleitung Stilvorlagen

Eigenschaften und Werte

Eine CSS-Eigenschaft (englisch: property) bestimmt, was in der Darstellung angepaßt werden soll. Ein Wert (englisch: value) zu einer Eigenschaft bestimmt wie etwas in der Darstellung angepasst werden soll. Für eine Eigenschaft muß immer mindestens ein Wert angegeben werden. Viele Eigenschaften lassen sich über den Wert ‚inherit‘ vererben, auch wenn sie nicht automatisch vererbt werden. Siehe dazu den Abschnitt zu Kaskadierung, Spezifität und Vererbung.

Die Werte sind bei jeder Eigenschaft angegeben. Oft sind dies bestimmten Schlüsselwörter wie bereits genanntes ‚inherit‘. Solch ein Schlüsselwort ist dann exakt so wie angegeben, aber ohne Anführungsstriche zu notieren; die Anführungsstriche kennzeichnen in diesem Buch lediglich, wo das Schlüsselwort beginnt und endet.

Weitere häufig auftretende Werte sind Zahlen, Längen oder Farben, die in einem der folgenden Abschnitte erläutert werden.

Referenzierte Dateien als Werte

Gelegentlich können auch andere Dateien referenziert werden. Dazu ist eine URI/IRI absolut oder relativ anzugeben. Ein solcher Wert beginnt immer mit der Zeichenkette 'url(' und endet mit der Zeichenkette ')', jeweils ohne die Anführungszeichen, die hier nur verwendet werden, um zu kennzeichnen, wo die Zeichenkette beginnt und endet. Zwischen den beiden Zeichenketten wird dann die URI/IRI notiert. Nach 'url(' dürfen optional Leerzeichen folgen, dann folgt die URI/IRI selbst, optional umschlossen von einfachen oder doppelten Anführungszeichen, also ' oder ". Dem abschließenden ')' dürfen optionale Leerzeichen vorangehen.

Beispiele:

• Absolute Adresse: url( http://example.com/garnknaeulhintergrund.png )
• Relative Adresse: url( /hintergrund/garnknaeul.png )
• ... mit Anführungszeichen: url( 'irgendwasschoenes.jpg' )
• ... oder: url("sonstwas.svg")

Relative Pfadangaben wie bei den letzten beiden Beispielen werden relativ zur Stilvorlagendatei zu einer absoluten Adresse aufgelöst. Die beiden letzten Beispiele verweisen also auf Dateien im selben Verzeichnis wie die Datei, in welcher das Beispiel notiert ist.

Man sollte bei den Adressen problematische Zeichen vermeiden. Treten zum Beispiel doch die verwendeten Anführungszeichen oder Klammern auch in der URI/IRI auf, so sind sie mit einem vorangehenden Zeichen '\' zu kennzeichnen (zu maskieren). Bei HTTP(S) und einigen anderen Protokollen ist es ferner möglich oder notwendig, weitere Zeichen wie Leerzeichen zu maskieren (URI-Maskierung).

Zeichenketten

Teilweise können auch Zeichenketten als Werte angegeben werden, zum Beispiel bei der Eigenschaft content.

Solche Zeichenketten werden mit einfachen oder doppelten Anführungszeichen umschlossen notiert. Entsprechend sind dann in der Zeichenkette entweder die verwendeten Anführungszeichen zu vermeiden oder mit einem vorangehenden '\' zu maskieren. Statt '\"' kann auch notiert werden: '\22' oder statt "\'" entsprechend "\27" - die Zahlen ergeben sich aus dem Unicode des entsprechenden Anführungszeichens.

Zeichenketten können nicht direkt einen Zeilenumbruch enthalten. Sollte ein Zeilenumbruch erwünscht sein, so ist dieser wiederum zu maskieren. Dazu wäre dann zu notieren: '\A' oder '\00000a'.

Ist es hingegen erwünscht, nur bei dem notierten Wert einen Zeilenumbruch einzufügen - warum auch immer - so ist dieser ebenfalls zu maskieren, also etwa so:
"Irgendein Text,\
mit Zeilenumbruch notiert"
Das wird interpretiert wie:
"Irgendein Text, mit Zeilenumbruch notiert"

Nun kann es auch noch vorkommen, insbesondere, aber nicht nur bei solchen Zeichenketten, dass Zeichen notiert werden sollen, welche bei der verwendeten Kodierung nicht verfügbar sind, oder wo man das Zeichen nicht auf der eigenen Tastatur suchen mag oder finden kann. Innerhalb von einer CSS-Datei können dann die Unicode-Nummern mit vorangehendem '\' verwendet werden, entsprechend den oben bereits genannten Nummern für Anführungszeichen wie '\22' oder "\27".

Wird das CSS hingegen in (X)HTML oder SVG im Attribut style notiert, so wird der Inhalt des Attributes interpretiert, also können auch dort entsprechend maskierte Angaben stehen, zum Beispiel ü für 'ü'. Bei XHTML und SVG, nicht aber HTML gilt dies auch, wenn das CSS im Element style notiert ist.

Selektoren und Deklarationsblöcke

Ein Selektor hat die Aufgabe, das gewünschte Element auszuwählen (selektieren). Die zu einem Selektor passende CSS-Notation mit folgendem Deklarationsblock sieht wie folgt aus:

Selektor { Eigenschaft: Wert }

Leerzeichen sind optional. Werden mehrere Eigenschaften notiert, so sind diese mit Semikolon zu trennen. Ein Leerzeichen als Eigenschaft hat keine Wirkung. Also sind folgende Notationen gleichwertig:

Selektor { Eigenschaft1: Wert1; Eigenschaft2: Wert2 }
Selektor { Eigenschaft1: Wert1; Eigenschaft2: Wert2; }
Selektor {Eigenschaft1: Wert1 ;   Eigenschaft2:  Wert2  }
Selektor
{
  Eigenschaft1: Wert1 ;
  Eigenschaft2: Wert2
}
Selektor
{
  Eigenschaft1: Wert1 ;
  Eigenschaft2: Wert2;
}

Element-Selektor

Die einfachste Variante ist der Element-Selektor. Hierbei werden alle Elemente mit gleichem Elementnamen ausgewählt.

p { color: #300; background: #ffc }

Diese Definition spricht alle p-Elemente in einem Dokument an. Für diese wird die aktuelle Farbe (Eigenschaft: color) als dunkelrot (#300) auf hellgelbem Hintergrund (#ffc) festgelegt, was unter anderem dazu führt, daß der darin notierte Text dunkelrot auf gelblichem Hintergrund dargestellt wird, was eine grobe Annäherung an einen vergilbten Text sein könnte.

Fragmentidentifizierer

Um ein einzelnes, bestimmtes Element zu formatieren, kann dieses mit einem Fragmentidentifizierer (bei (X)HTML und SVG zum Beispiel mit dem Attribut id) versehen und anhand dessen ausgewählt werden. Ein id-Attributwert darf nur einmal pro Dokument vorkommen und darf nicht mit einer Zahl beginnen. In Bezug zu CSS eignen sie sich daher gut, um Bestandteile eines Dokumentes zu kennzeichnen, welche nur einmal auftreten. Es ist hilfreich, den Wert als erklärenden Namen zu notieren, wobei sich erklärend auf die inhaltliche Bedeutung des Elementes in der Dokumentstruktur beziehen sollte, nicht etwa auf die Art der Dekoration durch die Stilvorlage, die ja mit einer anderen Stilvorlage anders aussehen kann.

Der Wert des Fragmentidentifizierers wird in CSS mit einer vorangehenden Raute (#) gekennzeichnet, gefolgt vom Wert. Ist der Wert ID, folglich:

#ID { Eigenschaft: Wert}

Um ein bestimmtes Element zu kennzeichnen wird also etwa im (X)HTML-Quelltext das id-Attribut gesetzt:

<p id="einleitung">Hier erscheint die Einleitung zu einem langen Text.</p>

… und anschließend mit CSS ausgewählt:

#einleitung { color: #003; background: #eef}

Klassen

Möchte man mehrere, jedoch nicht alle Elemente gleichartig formatieren, bietet sich die Nutzung einer Klasse an. Eine Klasse kann im Gegensatz zu einem Fragmentidentifizierer mehrfach in einem (X)HTML-Dokument oder SVG-Dokument angegeben werden. Es können also mehrere Elemente zu einer Klasse gehören, andererseits kann ein Element auch zu mehreren Klassen gehören. Dies ist hilfreich, um immer wiederkehrende Formatierungen anzuwenden, ohne diese auf alle gleichartigen Elemente auszudehnen. Man beachte hier, daß das verwendete Format ein Attribut definiert haben muß, welches der Kennzeichnung von Klassen dient. Dies ist bei (X)HTML und SVG der Fall. Viele andere Formate haben solch ein Attribut allerdings nicht. Die CSS-Spezifikation weist ausdrücklich darauf hin, daß das verwendete Format explizit angegeben muß, daß dieser Selektor auf solch ein Attribut anwendbar sein soll. Ansonsten ist der Selektor wirkungslos. Insbesondere ist der Selektor also nicht bei beliebigem XML anwendbar, bei welchem das Darstellungsprogramm die Spezifikation des individuellen Formates nicht kennt.

Klassen werden in CSS durch einen Punkt (.) gekennzeichnet, gefolgt vom Klassennamen.

.Klasse { Eigenschaft: Wert}

Um ein (X)HTML-Element oder SVG-Element mit einer Klasse zu versehen, wird das class-Attribut genutzt:

<p>Ein "normaler" Absatz.</p>
<p class="farbig_hervorgehoben">Ein optisch hervorgehobener Absatz.</p>
<p>Ein "normaler" Absatz.</p>
<p class="farbig_hervorgehoben">Ein optisch hervorgehobener Absatz.</p>
<p>Ein "normaler" Absatz.</p>

… und via CSS selektiert:

p { color: black}
.farbig_hervorgehoben { color: blue}