Eine weitere Anwendungsmöglichkeit von CSS ist das definieren von HTML Elementen über Ihre Klassenzugehörikeit, dazu wird jedem gewünschten HTML Element einer Klasse zugeordnet, die dann möglichst Zentral (am Besten in einer externen CSS Datei) definiert wird. Die CSS Grundlagen hast du mittlerweile verinnerlicht hoffen wir.
1 – CSS Selektor Klasse
Hier ein Besipiel mit interner CSS Deklaration.
CSS-Code-
<html>
<head>
<style type="text/css">
<!--
.blau_und_dick { color: blue;
font-weight:bolder
}
-->
</style>
</head>
<body>
<h1> Klassen funktionieren so:</h1>
<p class="blau_und_dick">Erster Absatz</p>
<p>Zweiter Absatz</p>
<div class="blau_und_dick">div-container</div>
</body>
</html>
Hier sehen Sie das Ergebnis
Erklärung:
In Zeile 13 und 15 wurden HTML Elemente der Klasse „blau_und_dick“ zugewiesen. Die Klasse an sich wird mit vorangestelltem Punkt wie eine Normale CSS Deklaration angegeben.
Ein Selektor – Mehrere Eigenschaften:
Wird einem Selektor mehrere Eigenschaften zugewiesen, so werden diese durch ein Semikolon getrennt. Im oberen Beispiel zwischen der Eigenschaft Color und font-weight.
2 – CSS Selektor ID
Die Deklaration von HTML Elementen mittels einer ID als Selektor unterscheidet sich von der mittels Klassen nur unwesentlich. Der einzige Unterschied besteht darin, dass innerhalb eines Dokumentes jede ID ein Unikat ist (jede ID darf nur einmal vorkommen) Eine ID wird mit voranstehendem Hash (#) definiert:
<html>
<head>
<style type="text/css">
<!--
#blau_und_dick { color: blue;
font-weight:bolder
}
-->
</style>
</head>
<body>
<h1> Klassen funktionieren so:</h1>
<p id="blau_und_dick">Erster Absatz</p>
<p>Zweiter Absatz</p>
</body>
</html>
Hier sehen Sie das Ergebnis
3 – Gruppieren von Selektoren
Selektoren können mittels Komma gruppiert werden, sodass alle vorangestellten Selektoren die selben Eigenschaften haben.
CSS Selektoren gruppieren:
H1, H2, p, span { color:green }
Ohne Komma wirkt sich das gleich ganz anders aus:
Nehmen wir folgendes Beispiel, Sie benutzen häufig den strong-Tag, wollen aber nur wenn dieser innerhalb eines p-Tags vorkommt die Schriftfarbe ändern, so gehts:
<html>
<head>
<style type="text/css">
<!--
p strong { color: blue;
font-weight:bolder
}
-->
</style>
</head>
<body>
<h1> Klassen funktionieren so:</h1>
<p>Erster Absatz mit <strong>dicker Auszeichnung</strong></p>
<p>Zweiter Absatz</p>
<strong>Dicke Auszeichnung</strong>
</body>
</html>
Hier sehen Sie das Ergebnis
Erklärung:
Der Selektor in Zeile 5 sagt dem Browser, dass innerhalb eines Absatzes (p-Tag) jeder strong-Tag die Textfarbe Blau bekommt.
