Grundlagen CSS
Weitere Selektoren
Wie man mehreren HTML-Elementen gleiche Eigenschaften zuordnet, davon haben wir im Kapitel 3 bereits berichtet. Da es aber in der Praxis eher vorkommt, dass man einem - einmal vordefinierten - Element ein- oder mehrmalig eine andere als die "Standardeigenschaft" zuordnen möchte, kann man einzelne Selektoren mit "Klassen" oder "ID´s" versehen.
Von Klassen und ID´s
Kapitel 4
"Klassen" (class) sind nichts anderes als "Unterguppen". Einem HTML-Element wird eine "Klasse" zugeordnet und diese mit einem Namen versehen. Dieser "Klasse" wiederum werden in der CSS die gewünschten Eigenschaften zugeordnet, die dann auf ALLE Elemente angewendet werden, die mit dieser "Klasse" versehen sind.
Beispiel
Ein HTML-Element mit einer "Klasse" versehen)
Erreicht werden soll, dass mehrere "p-tags" eines Dokumentes in der Schriftfarbe "orange" erscheinen - aber nicht ALLE. Dazu ordnen wir in der CSS dem Element "p" die Klasse "orange" zu. Das sieht dann - nach den bereits erlernten Syntaxregeln - so aus:
p.orange {color:#FF8000}
Damit haben wir bereits generell die "Klassse "orange" definiert. Im HTML-Dokument kann ich nun an JEDER Stelle, an der ich ein "p-tag" in "orange" haben möchte, dieses mit
<p class="orange">Irgendein Text...</p>
versehen und als Ergebnis bekomme ich immer dann, wenn ich diese Klasse anwende:
Irgendein Text...
Nun gibt es aber auch den Fall, wo ich eine Formatierung einmalig einem HTML-Element zuordnen möchte. In diesem Fall bediene ich mich einer sogenanten "ID" (id). Im Unterschied zur class ist eine id eine eindeutige und damit nur EINMAL pro Dokument zugelassenene Klassifizierung eines HTML-Elementes.
Beispiel
(einem Element eine eindeutige ID zuweisen)
Die Syntax ist im Grunde genommen die Gleiche wie bei der class. Bleiben wir dazu bei unserem Beispiel "orange": Während wir in der CSS mit
#orange {color: #ff8000;}
die id "orange" festlegen, wenden wir diese im HTML-Dokument folgendermassen an:
<div id="orange">Irgendein Text...</div>
Aber nicht vergessen: Die ID "orange" pro Dokument nur EINMAL verwendet werden, weil es sich um ein eindeutiges Universal-Attribut handelt.
Eine class und eine ID unterscheiden sich in der CSS durch das bei der ID vorangestellte #-Zeichen.
Und verschachteln - um eine Formatierung NOCH individueller zu gestalten - kann man das Ganze auch noch.