Klassen und IDs
Oft möchte man das Aussehen eines bestimmten Elements oder Gruppen von HTML-Elementen auf eine andere Art festlegen, als die Standardformatierung.
Hier ein Beispiel für eine Standardformatierung, dass heißt eine Regel, nach der alle Elemente eines Typs festgelegt werden:
p
{
color: blue;
font-family: arial, sans-serif;
font-size: 12px;
}
Möglicherweise möchte man aber bestimmte <p>-Elemente anders darstellen, zum Beispiel eine andere Schriftfarbe - dafür sind Klassen und IDs gedacht.
Nach obenDie Verwendung des ID-Attributs
Ein ID-Attribut darf nur einmal im Quelltext vorkommen, da es ein einmaliges Element auf einer Webseite identifiziert. Das Attribut gibt also einem Element quasi eine eingene "Identität" - daher der Attributsname "ID". Ein Beispiel:
<p id="gruener_text">Dieser Absatz soll grünen Text haben.</p>
Das CSS-Attribut für diesen Absatz muss nun mit CSS formatiert werden. Bei der Notation als CSS-Selektor muss man einiges beachten. Wenn man die Formatierung des ID-Attributs mit CSS vornehmen möchte, kann dies auf zwei verschiedene Arten machen:
entweder man gibt den Selektor direkt an, z.B. so:
#gruener_text
{
color: green;
}
oder man schreibt noch dazu, auf welches Element die ID angewendet wurde (ist aber bei IDs nicht notwendig, da es nur einmal vorkommen darf - bei Klassen jedoch relevant):
p#gruener_text
{
color: green;
}
Bei beiden Beispielen zeigt das Rautezeichen ('#') an, dass es sich bei dem Selektor um eine ID handelt.
Oft wird bei der Verwendung von Ids vergessen, dass beim Attributnamen Groß- und KLeinschreibung unterschieden wird:
So ist #abc nicht dasgleiche wie #ABC. Schließlich sollte man darauf achten, für den Attrbutsnamen nicht HTML-Elemente wie img zu verwenden.
Die Verwendung des class-Attributs
Im Gegensatz zum ID-Attribut kann mann mit dem class-Attribut Regeln für Elementgruppen aufstellen, sie also Klassifizieren (engl. Classify) und dürfen daher unbeschränkt im Quelltext vorkommen. Ein Beispiel:
<p class="gruener_text">Dieser Absatz soll grünen Text haben.</p>
Unterschiedliche Schreibweise hat bei dem Klassenselektor, anders als beim ID-Selektor, Auswirkungen. Zum Beispiel wirkt sich diese Formatierung:
.gruener_text
...auf alle Elemente im Quelltext aus, die das class-Attribut "gruener_text" besitzen. Hingegen sind durch diese Formatierung...
p.gruener_text
...nur Absätze betroffen, die das entsprechende Attribut haben.
Charakteristisch für den class-Selektor ist der Punkt vor dem Namen('.')
Gast
hi,
ganz oben in der ersten CSS Definition des p-Tags wurde die Eigenschaft "font-family" falsch geschrieben.
Gruß, Gast.
donjon
Interessant wäre vielleicht noch, wann man id und wann class nutzen sollte, und welcher Vorteil welches Attribut mitbringt.
Ist es richtig, das id besser über Javascript angesprochen werden kann?
Ich nutze id für das grundlegende Layout und class für immer wiederkehrende Formatierungen.
Twisting
@donjon: Steht doch da...man soll IDs nur einmalig verwenden und mit class kann man Elementengruppen zusammenfassen...
Zum Javascript: Man kann beides gut ansprechen... if(variable.className){} oder per regexp, für Ids gibt es document.getElementById
Flo
Ich habe die Erfahrung gemacht, dass zu kurze Zeichen (wie z.B. nur '1') nicht von allen Browsern unterstützt werden. - Ab drei Buchstaben ging es dann...
thoralf
Vieleicht sollte man hier noch erwähnen das man mittels des ID selectors auch sehr gut Formatblöcke erstellen kann.
in etwa so:
<div id="format1">
<p>text</p>
</div>
<div id="format2">
<p>text</p>
</div>
#format1 p { color: #FF0000; }
#format2.p { color: #00FF00; }
Angewandt auf eine Menüliste reduziert man auch mal schnell den HTML-Code da man nicht für jedes li element eine classe notieren muss.
Gruß Thoralf