php-homepage.com

CSS - überschreiben und kombinieren von Klassen

In diesem Teil lernen wir die Kombination von Selektoren, Überschreiben von CSS Klassen und das Zusammenfassen von Attributen.

ueberschreiben mit css Grafik
Vererbte Attribute
in CSS Überschreiben

bestimmte Atribute mehreren Selektoren zuweisen

Wollen wir beispielsweise das Design unserer Seite in einer bestimmten Farbe, Schriftart,.. einheitlich gestalten, so weisen wir sämtlichen Überschriften die selbe Farbe zu. Mit bisherigen Mitteln und Kenntnissen machten wir das in dieser Art:
h1 {color:red;}
h2 {color:red;}
h3 {color:red;}
#logo {color:red;}
.logoschrift {color:red;} usw.

Das würde uns das gewünschte Ergebnis liefern, wir müssten jedoch das Attribut "color" in sämtlichen Selektoren hinzufügen, bzw ändern.
Wir weisen deshalb allen Selektoren, die in unserem .css vorkommen und sich auf Schriften beziehen, die Schriftfarbe rot zu (alle anderen Attribute aus vorangegangen Zuweisungen bleiben erhalten:
h1, h2, h3, #logo, .logoschrift {color:red;}
Einfach Selektoren gefolgt von Beistrich und Leerzeichen hintereinander schreiben und in geschwungenen Klammern die gewünschten Attribute zuweisen ("color").

Dies macht Sinn und erleichtert die Arbeit, wenn man etwa schnell zwischen verschiedenen Farblayouts wechseln will:
Wir hätten dann ein .css, das die Grundlegende Formatierung beschreibt, in einer weiteren .css-Datei, die nur die Farben festlegt zB. "rot.css" hätten wir nur die Zeile h1, h2, h3, #logo, .logoschrift {color:red;}
eine .css-Datei mit Namen "blau.css" legt als Farbe blau fest:h1, h2, h3, #logo, .logoschrift {color:blue;} wobei wir nun die "blau.css" anstelle von "rot.css" einbinden könnten um nur mit dieser kleineren Änderung in unsererem html-Dokument (Einbindung von "rot.css" statt "blau.css")das Design der Seite rasch und einheitlich zu ändern.

Anstatt mehreren Selektoren die selben Attribute zuzuweisen, kann man auch

Selektoren kombinieren

nehmen wir dazu als Beispiel einfach wieder eine Überschrift, die wir mit "h1" auszeichen:
CSS HTML
h1 {font-size:150%; font-weight:bold; text-align:center;} <h1">Überschrift in "h1"</h1>

weiters haben wir css-Klassen für verschiedene Schriftfarben wie rot und blau:

CSS HTML
.rot {color:red; <span class="rot">Text, den wir mit Klasse "rot" auszeichen</span>
. blau {color:blue;} <span class="blau">Text, den wir mit Klasse "blau" auszeichen</span>
Wir möchten nun eine Überschrift mit "h1" formatieren und sie je nach Bedarf, mal in blau mal in rot haben und kombinieren deshalb den Selektor "h1" mit Klasse ".blau" oder ".rot"
CSS HTML
h1 {font-size:150%; font-weight:bold; text-align:center;}
.rot {color:red;}
.blau {color:blue;}
<h1 class"rot">dieser Text bekommt die Eigenschaften von "h1" und ".rot"</h1>
<h1 class"blau">dieser Text bekommt die Eigenschaften von "h1" und ".blau"</h1>
Damit kommen wir gleich zu einem weiteren wichtigen Punkt in css:

CSS Klassen überschreiben - überschreiben von Attributen

CSS Überschreiben bedeutet, man überschreibt Attribute, die schon vorher definiert wurden. Dies wird oft gebraucht, da man wie oben erklärt, kombinierte bzw. zusammengefasste Attribute an bestimmten Stellen anders auszeichnen möchte. Dieses erste Zusammenfassen von Attributen das dann wiederum überschrieben wird klingt auf den ersten Blick unlogisch, macht aber Sinn, da man durch kobinieren erstmal unzählige Elemente formatiert, dann aber später einzelne Elemente wiederum durch Überschreiben anders auszeichnet.

Wäre etwa für Selektor "h1" schon eine Schriftfarbe festgelegt worden, zB. h1 {color:green;}, so würde man mit h1 {color:blue;} grün mit blau überschreiben, wenn der Selektor h1 mit dem Attribut blue später im Stylesheet vorkäme. Klingt für dieses Beispiel unsinnig, denn wozu soll man erst die Schriftfarbe für h1 grün(green) machen und diese dann gleich später blau(blue) überschreiben?
Das obige Beispiel erläutert nur die Funktionsweise von Überschreibungen in CSS, praktische Anwendung wäre zB. folgende:

Da eine Homepage/Webseite aus mehreren Unterseiten (pages) besteht, kommt idealerweise auf jeder dieser Unterseiten eine mit h1 formatierte Überschrift vor.
Zur Arbeitserleichterung formatieren wir aber die Farbe aller dieser Überschriften nur einmalig mit h1 {color:green;}. Nun sind alle h1-Überschriften auf allen Seiten (die dieses Stylesheet verwenden) grün.
Wollen wir aber eine bestimmte h1-Überschrift mit einer anderen Schriftfarbe auszeichnen, so könnten wir nur diese eine h1-Überschrift mit einer anderen Farbe

überschreiben für obiges Beispiel:

Damit wir diese spezielle h1-Überschrift explizit ansprechen können, benötigen wir aber einen speziellen Selektor für diese. Dazu vergeben wir beispielsweise die Klasse (frei gewählt) blue.
Wir zeichen nun die spezielle h1-Überschrift in Html nicht nur mit dem tag <h1>, sondern mit <h1 class="blue"> aus.
Im Stylesheet definieren wir nun einerseits h1 {color:green;} für alle h1-Überschriften, aber für die eine blaue h1-Überschrift h1.blue {color:green;} indem man einfach die Klasse blue mittels Punkt an den Selektor h1 anhängt.

Wir haben also die Schriftfarbe der h1-Überschrift mit der Klasse "blue", die wir vorher mit allen anderen h1-Überschriften (global) definiert haben, mit blau überschrieben.
Mit dieser Methode, die ich hier mithilfe des "h1"-tags hoffentlich einfach erklärt habe, kann man mittels globaler/höherwertigerer Selektoren erstmal grundlegende Formatierungen festlegen und diese dann in speziellen Fällen einfach überschreiben.

CSS Klassen überschreiben

Grundsätzlich könnte man CSS Klassen auch überschreiben, indem man später im Stylesheet die Zuweisung von Attributen wiederholt, sprich: definiert man im eingebundenen Stylesheet
h1{color:red;}
Könnte man dann weiter unten einfach:
h1{color:blue;}
definieren und schon wäre die erst mit red formatierte Überschrift nun blue, was aber im Normalfall unsinnig wäre, aber im Speziellen manchmal gebraucht wird. Etwa bei diversen Content Managment Systemen, wo man vorgefertigte templates hat, aber doch einige spezifische Elemente gezielt überschreiben möchte.
Meist aber besser geegnet und zielgerichteter ist die Spezifität, wie folgend erklärt:

Spezifität

Eine besondere Form der "Überschreibung" in CSS ist die Spezifität. Denn je spezieller ein Element (Tag) angesprochen wird, desto gewichtiger ist die Zuweisung der betreffenden Attribute.
Beispiel für eine Überschrift mit <h1>, um diese Überschrift spezieller stylen zu können, geben wir ihr die Klasse "blau" mit:
<h1 class="blau">

Natürlich lassen sich Klassen endlos verschachteln und somit noch spezieller formulieren.
Am einfachsten behält man den Überblick, wenn man sich den developer (Chrome) installiert:
rechtsklick auf die Seite/inspect element .
Als Anschauungsbeispiel habe ich hierfür eine Beispielüberschrift angelegt und diese wiederum in ein div gepackt:

Beispiel für Spezifität

So sieht das dann im Developer aus - unten erkennt man die Cascade

Klassen Überschreiben mittels Developer
gezieltes Überschreiben von CSS Klassen durch Spezifität

body html, div#wrap article div.Beispiel h1.Beispielüberschrift
Im Stylesheet habe ich die Überschrift spezifiziert, indem ich nicht nur h1.Beispielüberschrift deklariert habe sondern auch den umgebenden Container (div.Beispiel)
div.Beispiel h1.Beispielüberschrift{ color:blue }

Man könnte hier die ganze Kaskade ausformulieren (body, html usw., in der Praxis reichen aber die letzten 2-4 Stufen (Schachteln), im obigen Beispiel habe ich das Div "Beispiel" als Container für die h1 Beispielüberschrift deklariert und diese Kombination wird sonst nirgends vorkommen.

CSS bedeuted:cascading stylsheets und nach dem Prinzip der Kaskade trifft die Regel zu, die entweder

CSS Klassen Überschreiben Verhindern

Manchmal möchte man eventuell unbeabsichtigtes Überschreiben verhinden, auch dies ist möglich.
Dies sollte nur im "Notfall" angewendet werde, da es bessere Möglichkeiten gibt!
Der Vollständigkeit halber erwähne ich die Regel aber: ! important wird dann einfach an die Eigenschaft des jeweiligen Elementes angehängt:
color:red !important;

!important (mit oder ohne Leerzeichen, beides wird von den browsern gleichbehandelt) wurde früher für Browserhacks benutzt. Ich halte nach wie vor nichts von "Hacks", angestrebt werden sollte valider Code
und aktuelle Technologien,dann sind solch unnütze Verrenkungen nicht (mehr) nötig.
Der aktuelle Nutzen besteht vielmehr darin, sogenannte User-Stylesheets zu "überschreiben" bzw. zu verhindern, dass Besucher, die selbst Inhalte erstellen können,
eigene Formatierungen im Text verwenden und so das Design der Seite verunstalten:-)
Laut W3C Definition sollte man die !important-Regel aber auch hier möglichst vermeiden
und stattdessen "speziellere" Regeln verwenden, wie oben Schlagwort Spezifität.
Man könnte sich mit der "!important" Regel sonst selbst ein Bein stellen, wenn man später das Design überarbeitet und Klassen überschreiben möchte.

CSS Important Überschreiben

Leider kommt es oft vor, dass ! Important verwendet wurde (templates, Werbung,..).
etwa sowas: p.testimportant{
    color:green !important;
}

Möchte man diese "important" Regeln überschreiben, muss man entweder die Spezifität erhöhen (siehe weiter oben):
also das Element detailierter ansprechen - hier beispielsweise mit dem übergeordneten Container "article": article p.testimportant{
    color:blue !important;
}

Hilft auch die Spezifität nicht weiter, styled man das betreffende Element inline mit "!important", was immer die höchste Gewichtung hat: <p class="testimportant" style="color:red !important;">important mit inline style überschreiben</p>