Verzeichnisse und Dateien für dieses Tutorial:
style\default.css
home.html
Es gibt verschiedene Selektoren in CSS. Für die Selektornamen dürfen keine Umlaute (ä,ö,ü) und Sonderzeichen benutzt werden, die Groß- und Kleinschreibung wird dabei berücksichtigt und der Selektornamen darf nicht mit einer Zahl beginnen.
Der Typselektor
Der
Typselektor zeigt auf ein Typ (Element). Hier ein Beispiel:
home.html
<html>
<head>
<title> Selektoren in CSS </title>
<link rel="stylesheet" type="text/css"
href="style/default.css" />
</head
<body >
<h1>Schaue dich um, Schönheit ist überall zu finden!</h1>
<h2>Wer denkt perfekt sein ist, alles richtig zu machen,
der liegt falsch!</h2>
<h3>Fehler sind dazu da, um daraus zu lernen!</h3>
</body>
</html>
default.css
Für den
Typselektor können
HTML-Tags verwendet werden, die Tags werden aber ohne
< und
> angegeben. In den
{ und
} stehen die
Eigenschaften und die dazugehörigen Werte. Eigenschaft und Wert werden von einem
: getrennt, nach dem Wert steht ein
Semikolon (
;). Es können natürlich mehrere Eigenschaften mit Werten angegeben werden, sie werden immer durch ein
Semikolon getrennt. Mit der Eigenschaft
color und dem Wert
red wird der Text des Überschriften-Tags <h1> rot dargestellt. Dies bezieht sich auf alle <h1>-Tags die im Dokument vorkommen.
Der Universalselektor
Universalselektoren der mit
* dargestellt wird, spricht alle Elemente (z.B. HTML-Tags) in einem Dokument an. Hier ein Beispiel:
* {color: red;}
Durch den
Universalselektor wird den Tags in den Dokument die Eigenschaft
color zugewiesen, dadurch werden alle Texte in roter Schrift dargestellt.
Der
Universalselektor spricht auch die Tags
<head> und
<style> an, diese werden aber durch ihre speziellen Eigenschaft nicht angezeigt.
Der ID-Selektor
Ein
ID-Selektor ist eine einfache
ID, der ID-Syntax besteht aus dem
#-Zeichen und einen Namen, dies wurde im Tutorial
Links in HTML besprochen. Hier ein Beispiel:
home.html
<html>
<head>
<title> Selektoren in CSS </title>
<link rel="stylesheet" type="text/css"
href="style/default.css" />
</head
<body >
<h1>Schaue dich um, Schönheit ist überall zu finden!</h1>
<h2 id="roter_text">Wer denkt perfekt sein ist, alles
richtig zu machen, der liegt falsch!</h2>
<h3>Fehler sind dazu da, um daraus zu lernen!</h3>
</body>
</html>
default.css
#roter_text {color: red;}
Die ID sollte nur einmal im HTML-Dokument vorkommen.
Der Klassenselektor
Klassenselektoren sind ähnlich wie ID-Selektoren. Klassenselektoren werden mit dem
.-Zeichen dargestellt. Hier ein Beispiel:
home.html
<html>
<head>
<title> Selektoren in CSS </title>
<link rel="stylesheet" type="text/css" href="style/default.css" />
</head
<body >
<h1 class="elternklasse">Schaue dich um, Schönheit ist
überall zu finden!</h1>
<h2 class="elternklasse kindklasse">Wer denkt perfekt sein
ist, alles richtig zu machen, der liegt falsch!</h2>
<h3>Fehler sind dazu da, um daraus zu lernen!</h3>
</body>
</html>
In HTML kann auf Klassen mit den Attribut
class zugegriffen werden. in Zeile 7 wird mit dem Wert
Elternklasse auf die Klasse mit diesen Namen zugegriffen. In Zeile 9 wird auf eine
Kindklasse der Elternklasse zugegriffen. Dabei muss immer erst die Elternklasse und dann die Kindklasse angegeben werden.
default.css
.elternklasse {font-family: "Segoe Script", cursive;}
.elternklasse.kindklasse {color: green;}
In der elternklasse wird die Schriftart geändert. In Zeile 2 wird in der kindklasse die Textfarbe geändert. Eine
Kindklasse hat immer die
Eigenschaften und
Werte einer
Elternklasse, dies nennt man
Vererbung.
Wie man im Browser sehen kann wurde ohne unser Zutun die Schriftart durch die Vererbung geändert.
Die Eigenschaft der Elternklasse kann aber auch durch die Kindklasse überschrieben werden. Hier noch ein Beispiel:
home.html
<html>
<head>
<title> Selektoren in CSS </title>
<link rel="stylesheet" type="text/css"
href="style/default.css" />
</head
<body >
<h1 class="elternklasse">Schaue dich um,
Schönheit ist überall zu finden!</h1>
<h2 class="elternklasse kindklasse">Wer denkt perfekt
sein ist, alles richtig zu machen, der liegt falsch!</h2>
<h3 class="elternklasse kindklasse kindklasse2">Fehler
sind dazu da, um daraus zu lernen!</h3>
</body>
</html>
Wie man in Zeile 12 sehen kann, können Kindklassen wieder Kindklassen haben, dadurch werden die Eigenschaften der Vorherigen Klassen (hier im Beispiel elternklasse und kindklasse) vererbt.
default.css
.elternklasse {font-family: Segoe Script, cursive;}
.elternklasse.kindklasse {color: green;}
.elternklasse.kindklasse.kindklasse2 {color: blue;}
Wie wir in Zeile 3 sehen, erbt die Klasse kindklasse2 von der kindklasse. Dadurch dass in der kindklasse aber die Textfarbe nochmal geändert wird, wird ein blauer text angezeigt, weil die Eigenschaft aus der kindklasse von kindklasse2 überschrieben wird. Natürlich ist dieses Beispiel nicht sinnvoll, es soll nur zeigen dass man Klassen immer weiter vererben kann und die Eigenschaften auch überschreiben kann. Sinnvoller wäre für dieses Beispiel, dass die kindklasse2 nur von der elternklasse erbt. Dadurch ergibt sich das gleiche Ergebnis und der Klassennamen wird nicht unnötig lang.
Der Attributselektor
Bei dem
Attributselektor wird der gewünschte Name des Attribut im CSS-Code zwischen
[ und
] geschrieben. Hier ein Beispiel:
home.html
<html>
<head>
<title> Selektoren in CSS </title>
<link rel="stylesheet" type="text/css"
href="style/default.css" />
</head
<body >
<h1>Schaue dich um, Schönheit ist überall zu finden!</h1>
<h2>Wer denkt perfekt sein ist, alles richtig zu machen,
der liegt falsch!</h2>
<h3 test>Fehler sind dazu da, um daraus zu lernen!</h3>
</body>
</html>
In Zeile 11 wird auf das Attribut test zugegriffen (hier wird der Namen des Attributs
ohne [ und
] geschrieben, das <h3>-Tag nimmt die Eigenschaften das Attributs an.
default.css
[test] {font-family: "Segoe Script", cursive;}
Beim definieren des Attributs wird der Name in
[ und
] geschrieben.
Es ist auch möglich den
Typselektor,
Universalselektor,
ID-Selektor und
Klassenselektor mit dem
Attributsselektor zu verbinden. Hier ein Code-Beispiel:
h3[test] {font-family: "Segoe Script", cursive;}
Vor dem Attribut haben wir jetzt ein Typselektor geschrieben, dadurch wird der Attributselektor nur im <h3>-Tags verwendet. Es gibt noch weitere Möglichkeiten den Attributsselektor zu verwenden, wie z.B. Vergleiche ausführen. Dafür wird es noch ein eigenes Tutorial dazu geben.
