CSS in HTML verwenden
Will man in HTML Dateien CSS-Definitionen einsetzen, muss man in der HTML-Datei nur zwei Schritte durchführen:
1. Schritt
Im <Head> der HTML-Seite werden die verwendeten CSS-Datei(en) verlinken:
<link rel="stylesheet" type="text/css" href="theme1.css" media="all"/>
2. Schritt
Elemente entweder mit:
id=“NameDesElements“
oder
class=“Klassenname1 Klassenname2 Klassenname3 …“
bezeichnen.
IDs sollten immer innerhalb einer Seite (bzw. eines Form-Tags) eindeutig sein.
Da die Klassen mit Leerzeichen getrennt werden, darf kein Leerzeichen im Klassennamen sein.
CSS Grundlagen
Kommentare
/*
Alles innerhalb von Slash-Stern und Stern-Slash wird ignoriert.
Hier kann man also Bemerkungen eintragen,
die vom Browser ignoriert werden...
*/
Elemente via Tagtypen ansprechen
a {
font-size : 12px;
}
/* alle <a> Tags haben eine 12er Schriftgröße */
Elemente via ID ansprechen
#NameDesElements {
font-size : 15px;
}
/*
CSS-Definitionen für einzelne Elemente mit Nummernzeichen.
Nur das Element mit id="NameDesElements" bekommt eine 15er Schriftgröße
*/
Elemente via Class ansprechen
.Klasse1 {
background-color : red;
}
.Klasse2 {
color : black;
}
/* CSS-Definitionen für Klassen mit Punkt */
CSS Kombinationen
a.Klasse1{
/*
alle Elemente, die <a> UND Klasse1 sind
*/
}
div.Klasse1.Klasse2{
/*
alle Elemente, die <div> UND Klasse1 UND Klasse2 sind
*/
}
.Klasse1.Klasse2{
/*
alle Elemente, die Klasse1 UND Klasse2 sind
*/
}
#ID1, #ID2, #ID3{
/*
Aufzählung: Betrifft sowohl ID1, ID2 und ID3
*/
}
CSS Pfade (Child Selektors)
Man kann in CSS bestimmte Elemente ansprechen, die in einer bestimmten hierarchischen Struktur vorliegen. Das ist nötig, um z.B. Links innerhalb des Content-Bereichs ein anderes Aussehen zu verleihen als im Footer-Bereich. Auch beim Design eines Multilevel-Popup-Menüs wird diese Vorgehensweise verwendet.
HTML:
<body>
<div id="oma">
<div id="block1" class="block">ABCD</div>
<div id="mutter">
<div id="block2" class="block">EFGH</div>
</div>
</div>
<div id="block3" class="block">IJKL</div>
</body>
CSS:
#oma .block{
font-size : 17px;
} /* Das selektiert block1 und block2 */
Hier ist das Leerzeichen zwischen #mutter und .block wichtig! Es bedeutet, dass wir Kinder und Kindeskinder vom Element mit der ID=“oma“ ansprechen. In diesem Fall: alle Element mit class=“block“, d.h. „block1“ und „block2“. Das Element mit ID=“block3″ wird nicht beeinflusst, da es nicht innerhalb von „oma“ sitzt.
Würde man das Leerzeichen vergessen, hätte die CSS-Definition nur Einfluss auf ein Element mit id=“oma“ und class=“block“. Das haben wir in diesem Beispiel nicht.
CSS:
#oma > .block{
font-size : 17px;
} /* Das selektiert nur block1 */
Hier ist das Größerzeichen zwischen #mutter und .block wichtig! Es bedeutet, dass wir nur Kinder vom Element mit der ID=“mutter“ ansprechen. In diesem Fall: direktes Kind mit class=“block“, d.h. „block1“. Die Elemente mit id=“block2″ und id=“block3″werden nicht beeinflusst, da sie nicht direkt innerhalb von „oma“ sitzen.
Teil 2
Jetzt fehlen noch CSS-Zustände (:hover, :link, :active, :focus, :visited), der Attribut- und der Sibling-Selektor. Das machen wir im zweiten Teil.
Cheers,
Ralf