home  |  suche  |  kontakt/johner  |  institut 
studierende  |  tech-docs  |  mindmailer 

CSS-Selektoren

Selektoren legen Regeln für den Mustervergleich fest, welche Elemente im DOM angesprochen werden. Diese Muster nennt man auch Selektoren.Wenn alle Bedingungen, also die korrekte Angabe an einem bestimmten Element zutreffen, so können die Regeln auf das Element angewendet werden. Heißt, ich makiere ein Element mit einer id oder Klasse, um damit zu sagen,dass sie einem definierten Schema nach formatiert werden sollen.

 

Selektor { Stylesheet-Angabe;}
Selektor
{
Stylesheet-Angabe;
Stylesheet-Angabe;
...
}

 

Universal-Selektoren

verknüpfen jedes vorhandene Element mit Stylesheetangaben.

 

 * {
font-size:14px;
color:#ff0000;}

 

Typ-Selektoren

verknüpfen ein HTML-Tag mit einer Formatierung.

 

 h1
{
font-size:14px;
font-style:italic;
}
p {color:#ff0000;}

 

Klassenselektoren

sind Selektoren mit beliebigen Namen.

 

Stylesheet: .fett {font-weight:bold;} 

 

 

HTML <p class=„fett“>Dieser Text würde fett erscheinen</p>

 

 

ID-Selektoren

verknüpfen Elemente über das ID-Attribut mit einer Formatierung. Jedes ID-Element wird nur einmal pro Seite verwendet.

 

#b
{
position:absolute;
top:150px; left:300px;
width:120px; height:80px;
}

 

 

[...] 

 

 

<body>

<div id="b">150 Pixel von oben und 300 Pixel von links</div>

</body>

 

 

[...]

 

 

Hinweis zu den ID-und Class-Selektoren

Das Grundproblem, welches sich oft stellt ist, dass nicht richtig verstanden wird was der Unterschied zwischen einer ID und einer Klasse ist. Die ID darf bzw. sollte pro Seite nur einmal verwendet werden.Dies bedeutet natürlich dann auch,dass eine ID, welche vergeben ist im gesamten weiteren Verlaufe nicht mehr verwendet werden kann. Man kann dies sehr gut mit einem Primärschlüssel bei der Modellierung von Datenbanken vergleichen.Eine Class wiederum ist dazu da,dass man gemeinsame Eigenschaften unabhängig von Typ bzw. Tag definieren kann. Dies ist mit einer ID nicht möglich,da diese ja nur einmal pro Seite benutzt werden sollt

Hinweis für Namen der Selektoren

Die Namen der Selektoren dürfen nur aus Groß- oder Kleinbuchstaben (a-z, A-Z),
Ziffern (0-9) und dem Bindestrich (-) bestehen und müssen mit einem Buchstaben anfangen.