Regeln in CSS

In CSS gibt es verschiedene Regeln, die die Bedeutung sowie die Darstellung von Elementen und Dokumenten beeinflussen. In CSS Level 1 und Level 2 sind die folgenden Regeln beschrieben:

Erbschaftsregel (CSS 1)

Wird mit Cascading StyleSheets einem Element eine bestimmte Eigenschaft (z.B. rote Farbe) zugewiesen, so überträgt sich dies auf sämtliche "Kinder" und eingeschlossene Elemente. Wird z.B. das BODY-Element mit rotem Text definiert, so werden auch alle enthaltenen P-Elemente mit rotem Text dargestellt. Eine Ausnahme tritt dann ein, wenn dieses Kind (P-Element) wiederum mit anderen Eigenschaften (z.B. blauer Farbe) definiert wird. Weitere Ausnahmen bildet das Ausschließen von bestimmten Elementen durch die Verknüpfung mit Verknüpfungen, Pseudo-Klassen oder Pseudo-Elementen.

Des Weiteren können beschriebene Eigenschaften durch andere überdeckt bzw. überschrieben werden. Das Überschreiben/Überdecken richtet sich dabei nach der Notation der Eigenschaften: Eine bereits notierte Eigenschaft wird dann durch eine andere überdeckt, wenn diese später (im Quelltext) erscheint.

Beispiel:
Es werden mit Hilfe des @import-Aufrufes Style-Angaben importiert. In diesem StyleSheet wird z.B. das Element P mit der Eigenschaft für blauen Text beschrieben. Des Weiteren wird zusätzlich zu dem @import-Aufruf notiert, dass das Element P mit roter Schriftfarbe darzustellen ist. Die Erbschaftsregel besagt hierbei nun, dass das später definierte Element P (mit der roten Farbe) das vorher im importierten StyleSheet definierte Element P (mit der blauen Farbe) zu überlagern hat - die Elemente P werden demnach in diesem Dokument mit roter Farbe dargestellt. Beispiel als Notation:

/* in MySheet.css */
P { color: blue; }

/* im eigentlichen Dokument */
@import url(MySheet.css);
P { color: red; }

Erbschaftsregel (CSS 2)

Zusätzlich zu der in Level 1 formulierten Regel wird in Level 2 von CSS ein weiterer Teil ergänzt: Der inherit-Wert.
Er sagt aus, dass die Eigenschaft - zu der dieser Wert notiert wird - unbedingt den Wert erben (engl. inherit = erben) muss. Dies kann durch die Grundeinstellungen des Browsers, durch Elternelemente oder andere Dinge geschehen. Beispiel:

/* im StyleSheet */
P { color: red; }
EM { color: blue; }
*.Z { color: inherit;}


 rot blau rot 
 rot rot rot

important-Regel (CSS 1)

Beim definieren von Elementeigenschaften ist es möglich festzulegen, ob der Wert einer Eigenschaft wichtig ist. Somit kann sicher gestellt werden, dass diese Eigenschaft den definierten Wert erhält und nicht den Standardwert des Browsers/darstellenden Programms.
Die Kennzeichnung eines Wertes als "wichtig" erfolgt mit der Notation von ! important (engl. important = wichtig) nach dem Wert. Beispiel:

P.abc { color: blue ! important;}
BODY { font-size: 12pt ! important; color: green ! important;}

important-Regel (CSS 2)

In CSS Level 2 wurde daran nicht viel geändert, lediglich die Gewichtung der Benutzer- und Autoren-Vorlage wurde geändert:
Laut CSS 1 sollte die Notation von ! important vom Autor des Dokumentes, der des Vorlagen-StyleSheets des Benutzers vorzuziehen sein - in CSS 2 wurde dies vertauscht. Es gilt nun, die Benutzerangaben den Angaben des Autors eines Dokumentes vorzuziehen.

Beispiel:
Der Autor einer Seite beschreibt in seinen StyleSheets, dass beispielsweise alle Elemente A:link mit roter Textfarbe dargestellt werden sollen. Der Benutzer/Besucher jedoch hat in seinem Browser eingestellt, dass diese Links immer in blauer Farbe dargestellt werden sollen. Laut CSS 1 sollte der Browser jetzt diese Links mit der Farbe des Autors (also rot) darstellen - laut CSS 2 sollte er diese aber in der eingestellten Farbe des Besuchers darstellen (also blau).

Anmerkung:
Beachten Sie dabei bitte, dass dies nur für Eigenschaften mit dem zusätzlichen Wert ! important gilt. Alle anderen Einstellungen des Besuchers können dabei einfach überschrieben werden. Nach dem Beispiel wäre das dann also doch wiederum rot, wenn der Besucher nicht blau als wichtig definiert hat.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Weiterlesen: ⯈ Box-Eigenschaften

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project