HTML: CSS Einführung (Teil 1)

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

Comments are closed.