0251 / 590 644 - 0
info@a-coding-project.de

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:

CSS Level 1 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; }

CSS Level 2 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;}

<!-- im HTML-Bereich -->
<p> rot <em> blau </em> rot </p>
<p> rot <em class="Z"> rot </em> rot </p>

CSS Level 1 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;}

CSS Level 2 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.

Gratis: CSS-Kurs per E-Mail

Mit unserem CSS-Kurs wirst Du deine Website in kurzer Zeit mit CSS gesalten können.
Du erhältst von uns:

  • Schritt für Schritt Anleitungen, um CSS zu lernen
  • Tipps & Tricks, die dir die Arbeit mit CSS erleichtern
  • Aktuelle Neuerungen rund um das Thema CSS