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 Einfach- Selektoren 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 Stylesheet 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 Stylesheet jetzt mit der folgenden Grafik, in der die Bezeichnungen für die einzelnen Bestandteile der Regel farbig hervorgehoben und bezeichnet sind:

Beschreibung der CSS-Regelsyntax.

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

Selektor
- Einfach- Selektor (DIV.ref)
- Kombinator ( )(=whitespace)
- Einfach- Selektor (TH)
Deklarationsblock {
- Deklaration
  - Eigenschaft (font)
  - Wert (1em Georgia, serif)
- Deklaration
  - Eigenschaft (background-color)
  - Wert (#fffcee)
- Deklaration
  - Eigenschaft (padding)
  - Wert (0.1em 0.5em)
- Deklaration
  - Eigenschaft (border)
  - Wert (1px solid #f0f1ec)
- }

Definitionen

Das Schwierigste für viele ist, sich die Bezeichnungen und Funktionen der einzelnen Komponenten der Regel zu merken. Namen sind, wie ein geflügeltes Wort sagt, "Schall und Rauch" — wenn man aber einmal verinnerlicht hat, wie die einzelnen Bestandteile eines Stylesheets prinzipiell zusammenwirken, dann wird man zukünftig jedes noch so komplizierte Stylesheet mühelos lesen können. Deshalb ist im Folgenden alles ausführlich 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 Einfach- Selektoren, die in einer Reihe hintereinander stehen und durch Kombinatoren miteinander verbunden sind.; Die innerhalb der geschweiften Klammer stehenden Deklarationen werden an bestimmten Elementen im HTML- Dokument angebracht. Durch den Selektor wird festgelegt, welche Elemente das sind. 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 Einfach- Selektoren passt. Dann wird diese Zielmenge durch die vorangestellten anderen Einfach- Selektoren mehr oder weniger eingeschränkt.; Einige Beispiele für Selektoren:; Der Selektor des ersten Beispiels besteht aus einem Einfach- Selektor P, der mit jedem Element P, also jedem Absatz, des Webdokuments korrespondiert.; P; Im nächsten Beispiel sind die Einfach- Selektoren 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 Einfach- Selektor 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
Einfach- Selektor (simple selector): (engl. to select = auswählen) Durch den Einfach- Selektor werden praktisch einzelne Elemente des Webdokuments ausgewählt. Ein Einfach- Selektor kann ein Typselektor oder ein Universalselektor sein. Er steht entweder alleine oder es sind an ihn Attributselektoren, ID-Selektoren oder Pseudoklassen in beliebiger Reihenfolge angehängt.
Kombinatoren (combinators): Kombinatoren sind die Zeichen: ' ' (whitespace), '>' und '+'. Sie dienen zur Verkettung bzw. Kombinierung der verschiedenen Einfach- Selektoren eines Selektors.
Subjekte (subjects): Die Elemente des Webdokuments, die zu einem bestimmten Selektor passen, werden Subjekte dieses Selektors genannt.
Deklaration (declaration): 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.; Jede Deklaration wird durch ein Semikolon von der nachfolgenden getrennt, d. h. theoretisch ist das Semikolon nach der letzten Deklaration überflüssig. Dennoch ist es besser, auch dieses Semikolon stets zu notieren. Man vermeidet dadurch potentielle Probleme, falls die Regeln zu einem späteren Zeitpunkt noch einmal umgestellt werden sollen.; Leerzeichen oder Zeilenumbrüche nach dem Semikolon einer Deklaration werden ignoriert. Es spielt also für die Funktion der Stylesheets keine Rolle, ob alle Deklarationen eines Deklarationsblocks hintereinander in einer Reihe stehen oder ob sie untereinander notiert sind.
Deklarationsblock (declaration block): Der Deklarationsblock umfasst den gesamten Teil einer Regel, der hinter den Selektoren liegt: die geschweiften Klammern und alle darin notierten 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.1 möglichen Eigenschaften werden in der Referenz besprochen.
Wert (value): Ein oder mehrere Werte, wie sie nach CSS 2.1 für die entsprechende Eigenschaft zulässig sind. Hinter dem letzten Wert für eine Eigenschaft steht ein Semikolon (;) zur Trennung von der nächsten Deklaration.

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 zusammenpassen. Diese Bedingungen bestehen aus Einfach- Selektoren und Kombinatoren des Selektors und deren Zusammensetzung. So bedingt z. B. das Pseudoelement :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 dazugehörigen Deklarationen angebracht.
TOP

Notizen: