Wenn wir CSS-Regeln schreiben, dann wenden wir sie ja mindestens auf ein am Anfang der Regel definiertes Ziel (engl. target) an. Die Elemente, die man per CSS stylen will, zu treffen, bezeichnet man auch als Targeting. In unserem Beispiel haben wir es uns bisher mit dem Targeting einfach gemacht, wir haben jeweils nur mit jeweils einem Tag-Namen pro Regel gearbeitet (<h1>, <h2>, <p> etc.), und dadurch alle im Projekt vorkommenden Elemente dieses Typs/Tags mit der CSS-Regel getroffen und gestylt. Ein Beispiel aus unserem Projekt:
<style>
p {
margin:16px 20px;
}
</style>
Da wir ein sehr kleines Projekt und damit auch kompaktes Stylesheet haben, sind redundante, d.h. sich wiederholende Deklarationen noch nicht so sehr in's Gewicht gefallen. In größeren Projekten kann es aber sinnvoll sein, Deklarationen, die für mehrere Selektoren/Elemente gelten sollen, auch gleichzeitig auf diese mit einer Regel anzuwenden statt diese bei mehreren einzelnen Regeln zu wiederholen. Dies kann man einfach dadurch erreichen, dass man die gewünschten Selektoren durch Kommas trennt:
<style>
p, h3, div {
margin:16px 20px;
}
</style>
Durch diese Regel würde also die Deklaration für den Außenrand für alle drei Tags wirksam. Dadurch kann man Deklarationen sinnvoll bündeln, z.B. bei der Zuweisung von Farben, Schriftarten oder eben Abständen.
Eine ganz andere Bedeutung hat die Aufzählung von mehr als einem Selektor ohne Komma:
<style>
header p {
margin:16px 20px;
}
</style>
Hier wird nicht der Außenabstand für <header> und <p> eingestellt. Vielmehr handelt es sich einen sogenannten Nachfahren-Selektor. Dieser Selektor wählt zunächst den <header>-Tag aus (meistens gibt es nur einen) und dann alle <p>-Tags innerhalb des <header>-Elements. Dadurch erhält man also die Möglichkeit, spezifischer, d.h. gezielter Elemente zu stylen. So kann man z.B. mit der allgemeinen Regel für <p> die Schriftfarbe der "normalen" Absätze einstellen und mit obiger Regel dann nur die <p> innerhalb des <header> mit einer abweichenden Schriftfarbe versehen.
Auch um unser konkretes Problem mit der <h2> im Layout lösen, müssen wir zwei Elemente des gleichen Typs mit unterschiedlichen Deklarationen versehen. Allerdings liegen diese im gleichen Container, wodurch wir sie nicht über Nachfahren-Selektoren unterscheiden können. Daher brauchen wir einen anderen Weg, um im CSS diese Unterscheidung treffen zu können. Eine recht intuitive Möglichkeit bieten IDs und Klassen. Man kann in HTML jedes Element mit einer selbst gewählten ID (id="idname") und/oder einer Klasse (class="klassenname") versehen, um dieses gezielt ansprechen zu können. Der Unterschied zwischen IDs und Klassen liegt darin, dass IDs innerhalb einer HTML-Seite nur einmal vergeben werden sollten und Klassen beliebig oft verwendet werden können. Auch kann ein Element gleich mit mehreren Klassen versehen werden, falls dies für das Targeting im CSS hilfreich erscheint. Hier ein fiktives Beispiel für IDs und Klassen:
<h2 class="direkt">Alles in Ordnung?</h2> <p>HTML hilft uns dabei, Texte zu ordnen:</p> <ul id="betont"> <li>Durch Überschriften</li> <li>Durch Absätze</li> <li>Durch Listen</li> <li>Durch optische Betonungen</li> </ul>
Deratige IDs und Klassen mögen sehr hilfreich beim spezifischen Targeting sein, aber wie spricht man sie per CSS an? Das ist recht einfach, man muss es sich nur merken:
IDs werden über # (Raute/Hashtag) kombiniert mit dem gewählten ID-Namen selektiert, in unserem Fall heißt der Selektor also #betont.
Klassen werden mit einem . (Punkt) kombiniert mit dem gewählten Klassen-Namen selektiert, im Beispiel: .direkt.
Auch wenn dies nicht zwingend ist, kann man zusätzlich den Tag angeben, der die ID oder Klasse trägt: h2.direkt bzw. ul#betont.
Mit diesem neuen Wissen können wir nun unser Problem mit der <h2> lösen. Wie im Beispiel gezeigt, vergeben wir im HTML-Markup die Klasse "direkt" (weil die Überschrift direkt und ohne Abstand nach dem vorhergehenden Element kommt):
<h2 class="direkt">Alles in Ordnung?</h2>
Im Stylesheet verwenden wir diese Klasse nun, um den Abstand nach oben nur für diese <h2> mit der Klasse "direkt" zu entfernen:
<style>
/* Ausgelassene Regeln */
h2 {
background-color: #04407a;
color: #ffffff;
padding: 20px 0;
text-align: center;
}
h2.direkt {
margin-top: 0px;
}
/* Ausgelassene Regeln */
</style>
Betrachten wir wieder die Ausgabe im Browser. Die <h2> ist deutlich an das Bild herangerückt. Komischerweise bleibt ein schmaler weißer Rand. Bevor Sie sich nun auf eine lange (und ev. vergebliche) Reise in die Entwicklertools begeben, hier gleich die Lösung: Das liegt nicht an irgendwelchen definierten Abständen, sondern daran, dass das Bild (<img>-Tag) aufgrund der Browser-Stile nicht als Block- sondern als Inline-Element deklariert ist und das macht hier etwas Ärger. Ändern wir das also schleunigst im Stylesheet:
<style>
/* Ausgelassene Regeln */
img {
width: 580px;
display: block;
}
/* Ausgelassene Regeln */
</style>
Der Check im Browser zeigt, dass wir das Problem nun vollständig behoben haben. Das Layout der Vorlage haben wir damit sehr genau abgebildet. Abschließen müssen wir noch ein paar letzte optische Anpassungen machen.
> weiter