The Styleworks

CSS 2.1 ::Grundlegendes

CSS-Orthographie: Aufbau der CSS-Regeln

Im Grunde genommen ist die Struktur einer CSS-Regel ganz einfach. Eine Regel besteht aus dem Selektor und dem Deklarationsblock. Der Selektor setzt sich zusammen aus Einfachselektoren und Kombinatoren. Der Deklarationsblock enthält die einzelnen Deklarationen. Diese wiederum enthalten die Eigenschaften und ihre Werte.

Das klingt zu kompliziert? Gut, dann sehen wir uns zunächst ...

Praktisches Beispiel

... ein kurzes Beispiel an, mit dem das verdeutlicht werden soll. Die einzelnen Bestandteile der CSS-Regel werden unten noch genau erklärt. Hier folgt nun eine Regel, so wie sie im Style-Sheet notiert wird:

DIV.ref TH { font: 1em Georgia, serif; background-color: #fffcee; padding: 0.1em 0.5em; border: 1px solid #f0f1ec; }

Bitte vergleichen Sie das Style-Sheet jetzt mit der folgenden Graphik, in der die Bezeichnungen für die einzelnen Bestandteile der Regel farbig hervorgehoben und bezeichnet sind:

Diese Regel wurde dann ihrer logischen Struktur nach aufgeteilt und wird hier noch einmal in Listenform dargestellt:

Definitionen

Das Schwierigste für viele ist wohl, sich die Bezeichnungen und Funktionen der einzelnen Komponenten der Regel zu merken. Deshalb ist im Folgenden alles im Einzelnen erklärt:

Selektoren (selectors)
Der Begriff 'Selektor' umfasst in Bezug auf CSS-Regeln alles, was links der ersten geschweiften Klammer steht. So ein Selektor besteht aus einem oder mehreren Einfachselektoren, die in einer Reihe hintereinander gestellt und durch Kombinatoren miteinander verbunden sind.
Die innerhalb der geschweiften Klammer festgelegten Deklarationen werden durch den Selektor an den korrespondierenden Elementen im HTML-Dokument angebracht. Der Selektor stellt also das Bindeglied zwischen dem HTML-Dokument und den Deklarationen dar.
Jeder Selektor passt zunächst zu allen Elementen des Dokuments, zu denen der letzte seiner Einfachselektoren passt. Dann wird diese Zielmenge durch die vorangestellten anderen Einfachselektoren mehr oder weniger eingeschränkt.
Einige Beispiele für Selektoren:

Der Selektor des ersten Beispiels besteht aus einem Einfachselektor P, der mit jedem Element P des Webdokuments korrespondiert.

P

Im nächsten Beispiel sind die Einfachselektoren H4 und P durch einen Kombinator '+' verbunden. Deshalb wirkt dieser Selektor auf alle Elemente P, die direkt auf ein Element H4 folgen. Der Leerraum zwischen Einfachselektor und Kombinator ist optional.

H4 + P

Der Selektor des folgenden Beispiels korrespondiert mit allen Elementen H1, H2 und H3 des Dokuments.

H1, H2, H3

Der folgende Selektor korrespondiert mit Elementen H1 im Dokument, aber mit Einschränkungen:
1. Einschränkung: sie müssen das erste Kindelement ihres Elternelementes sein.
2. Einschränkung: das Elternelement muss ein DIV sein.
3. Einschränkung: das DIV muss das Attribut-/Wert-Paar id="ident" aufweisen.

DIV#ident > H1:first-child

Einfachselektor (simple selector)
Ein Einfachselektor ist ein Typselektor oder ein Universalselektor. Er steht entweder alleine oder es sind an ihn Attributselektoren, ID-Selektoren oder Pseudoklassen in beliebiger Reihenfolge angehängt. Der Einfachselektor korrespondiert mit den Elementen des Dokuments, auf die jede seiner Komponenten zutrifft.
Kombinatoren (combinators)
Kombinatoren sind die Zeichen: ' ' (whitespace), '>' und '+'. Sie dienen zur Verkettung der verschiedenen Einfachselektoren eines Selektors.
Subjekte (subjects)
Die Elemente des Webdokuments, die zu einem Selektor passen, werden Subjekte des Selektors genannt.
Deklaration (deklaration)
Jede Deklaration besteht aus einer Eigenschaft mit den zugehörigen Werten. Es ist wichtig, dass immer beide Komponenten vorhanden sind, da es sonst zu unvorhersehbaren Ergebnissen kommen kann. Deklarationen, bei denen ein Wert fehlt oder ein unerwartetes Syntaxzeichen auftritt, müssen vom Browser ignoriert werden.
Deklarationsblock (deklaration block)
Der Deklarationsblock umfasst praktisch den gesamten Rest einer Regel: die geschweiften Klammern und alle Deklarationen. Leere Deklarationsblöcke, die nur aus zwei Klammern bestehen, sind zulässig. Das hat den Effekt, dass keine Formatierungen an die korrespondierenden HTML-Elemente angebracht werden.
Eigenschaft (property)
Eine nach der CSS-Spezifikation zugelassene Eigenschaft, gefolgt von einem Doppelpunkt (:). Alle in CSS 2 möglichen Eigenschaften werden in der Referenz besprochen.
Wert (value)
Ein oder mehrere Werte, wie sie nach CSS 2 für die entsprechende Eigenschaft zulässig sind. Hinter dem letzten Wert für eine Eigenschaft steht ein Semikolon (;). Nach der Spezifikation kann das letzte Semikolon einer Regel weggelassen werden, es ist jedoch kein Fehler, wenn es vorhanden ist.

Musterabgleich (pattern matching)

Der Musterabgleich hat den Zweck, die durch einen Selektor definierten Bedingungen daraufhin zu prüfen, ob sie mit einem Element des Webdokuments zusammen passen. Diese Bedingungen bestehen aus Einfachselektoren und Kombinatoren des Selektors und deren Zusammensetzung. So bedingt z. B. das Pseudo-Element :first-child eine Einschränkung auf das erste Kindelement und eine Kombination 'DIV P' gilt nur für Absätze P, die Nachkommenelement eines DIV-Containers sind. Nur auf Elemente des Webdokuments, die diese Bedingungen erfüllen, werden die dazu gehörigen Deklarationen angebracht.
TOP(kl)

Letzte Änderung dieser Seite am: 13-May-2004.

HomeVollreferenzSchnellreferenzGrundlegendesTutorials & ArtikelQuizSupport TablesAllgemeines

Die URL dieser Seite ist: www.thestyleworks.de/basics/regelaufbau.shtml
Gedruckt am Dienstag , dem 08. Juni 2004.

Notizen: