Lektion 7
April 3, 2012
Lektion 7: Identifikation und Gruppierung von Elementen (class und id)
Manchmal möchte man einen speziellen Stil nur einem bestimmten Element oder eine Gruppe von Elementen zuweisen. In dieser Lektion werden wir uns genauer anschauen, wie man class und id nutzen kann, um Eigenschaften für ausgewählte Elemente festzulegen.
Wie kann man eine spezielle Überschrift andersfarbig als alle anderen Überschriften einer Webseite gestalten? Wie kann man Links zu verschiedenen Kategorien gruppieren und jeder Gruppe ein eigenes Aussehen verleihen? Das sind nur ein paar Beispiele, derer wir uns in dieser Lektion annehmen.
Gruppieren von Elementen in Klassen (class)
Nehmen wir an, wir haben zwei Listen mit Links zu verschiedenen Traubensorten, die zur Herstellung von Weiß- oder Rotwein genommen werden. Der HTML-Code sieht wie folgt aus:
<p>Grapes for white wine:</p>
<ul>
<li><a href="ri.htm">Riesling</a></li>
<li><a href="ch.htm">Chardonnay</a></li>
<li><a href="pb.htm">Pinot Blanc</a></li>
</ul>
<p>Grapes for red wine:</p>
<ul>
<li><a href="cs.htm">Cabernet Sauvignon</a></li>
<li><a href="me.htm">Merlot</a></li>
<li><a href="pn.htm">Pinot Noir</a></li>
</ul>
Wir wollen aber, dass die Weißweinlinks gelb und die Rotweinlinks rot werden und die restlichen Links auf der Seite blau bleiben.
Um dies zu erreichen, teilen wir die Links in zwei Kategorien. Dies wird gemacht, indem man jedem Link mit dem Attribut class eine Klasse zuschreibt.
Lassen Sie uns für das obige Beispiel Klassen vergeben:
<p>Grapes for white wine:</p>
<ul>
<li><a href="ri.htm" class="weisswein">Riesling</a></li>
<li><a href="ch.htm" class="weisswein">Chardonnay</a></li>
<li><a href="pb.htm" class="weisswein">Pinot Blanc</a></li>
</ul>
<p>Grapes for red wine:</p>
<ul>
<li><a href="cs.htm" class="rotwein">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="rotwein">Merlot</a></li>
<li><a href="pn.htm" class="rotwein">Pinot Noir</a></li>
</ul>
Jetzt können wir für Links der Klasse “weisswein” spezielle Eigenschaften vergeben. Für “rotwein” analog.
a {
color: blue;
}
a.weisswein {
color: #FFBB00;
}
a.rotwein {
color: #800000;
}
Wie man in dem Beispiel sieht, kann man Eigenschaften von Elementen einer bestimmten Klasse mit Hilfe von .classname im Stylesheet des Webdokumentes festlegen.
Identifikation eines bestimmten Elementes (id)
Zusätzlich zu der Gruppierung der Elemente ist es möglich einzelne Elemente anzusprechen. Dazu braucht man das Attribut id.
Das besondere an dem Attribut id ist, dass es kein weiteres Element im selben Dokument geben kann, welches die selbe id trägt. Jede id muss einzigartig sein. In anderen Fällen nutzen Sie besser das Attribut class. Lassen Sie uns nun ein Anwendungsbeispiel für id anschauen:
<h1>Kapitel 1</h1>
…
<h2>Kapitel 1.1</h2>
…
<h2>Kapitel 1.2</h2>
…
<h1>Kapitel 2</h1>
…
<h2>Kapitel 2.1</h2>
…
<h3>Kapitel 2.1.2</h3>
…
Dies hier oben könnten Überschriften eines jeden Dokumentes sein, welches in Kapitel und Absätze eingeteilt ist. Es ist wohl nicht ganz unlogisch, für jedes Kapitel eine id zu vergeben:
<h1 id="k1">Kapitel 1</h1>
…
<h2 id="k1-1">Kapitel 1.1</h2>
…
<h2 id="k1-2">Kapitel 1.2</h2>
…
<h1 id="k2">Kapitel 2</h1>
…
<h2 id="k2-1">Kapitel 2.1</h2>
…
<h3 id="k2-1-2">Kapitel 2.1.2</h3>
…
Nehmen wir an, die Überschrift für Kapitel 1.2 muss unbedingt rot sein. Dies können wir mit CSS wie folgt bewerkstelligen:
#k1-2 {
color: red;
}
Wie zu sehen war, definiert man die Eigenschaften eines bestimmten Elementes, indem man #idname im Stylesheet des Dokumentes schreibt.
