3.4.4 Selektoren
- 1 Allgemein
- 2 Typ-Selektoren (type selectors)
- a) Prinzip
- b) Beispiel: Formatieren mit
em - c) Workshop
- 3 Klassen-Selektoren (class selectors)
- a) Prinzip
- b) Beispiel 1
- c) Beispiel 2
- d) Grundlagen-Websites & Workshops
- 4 ID-Selektoren (id-selectors)
- 5 Gruppierung von Selektoren
- 6 Grundlagen-Websites & Workshops
⇧ 1 Allgemein
Man unterscheidet folgende Arten von Selektoren
- Typ-Selektoren (type selectors)
- Klassen-Selektoren (class selectors)
- ID-Selektoren (id-selectors)
⇧ 2 Typ-Selektoren (type selectors)
- a) Prinzip
- b) Beispiel: Formatieren mit
em - c) Workshop
↑ a) Prinzip
-
Der am häufigsten anzutreffende und einfachsten zu verstehende Selektor ist der sogenannte Typ-Selektor.
-
Typ-Selektoren wählen jedes HTML-Element einer Seite aus, welches dem Selektor entspricht - unabhängig von der Position im Dokumentenbaum.
↑
b) Beispiel: Formatieren mit em
1) Im Stylesheetbereich dieses HTML-Dokumentes steht geschrieben
<style type="text/css">
/* Fuer Anleitung: Demonstration der Ausrichtung des Textes */
em {font-style:italic; font-weight:bold; color:red;}
</style>
2) Im Quelltext steht geschrieben
<p>Dieser <em>Text wird mit em</em> hervorgehoben</p>
3) Der Browser des Anwenders zeigt folgendes
Dieser Text wird mit em hervorgehoben
Bemerkung: Obwohl im separaten Stylesheet, das mit dieser Datei verbunden ist eine andere Formatierung für em spezifiziert ist, wird die Formatierung von der im Kopf dieser Datei angegebenen Stylesheetangabe überschrieben.
↑ c) Workshop
- Hessendscher de Selektoren
⇧ 3 Klassen-Selektoren (class selector)
- a) Prinzip
- b) Beispiel 1
- c) Beispiel 2
- d) Grundlagen-Websites & Workshops
↑ a) Prinzip
-
Im Stylesheet erfolgt der Eintrag mit einem Punkt und nachher mit der Angabe der Klasse.
-
Im HTML-Dokument wird nach der Angabe des Elementes die Klasse angegeben.
↑ b) Beispiel 1
1) Angabe im Stylesheetbereich im Kopf dieser Datei
<style type="text/css">
/* Fuer Anleitung: Demonstration der Ausrichtung des Textes */
.center {text-align:center;}
.right {text-align:right;}
</style>
2) Formatierung im Quelltext im Textbereich
<p class="center">This paragraph will be center-aligned.</p>
3) Dann erscheint im HTML-Dokument folgendes
This paragraph will be center-aligned.
↑ c) Beispiel 2
1) Angabe im Stylesheetbereich im Kopf dieser Datei wie bei Beispiel 1
2) Formatierung im Quelltext im Textbereich
<p class="right">This paragraph will be right-aligned.</p>
3) Dann erscheint im HTML-Dokument folgendes
This paragraph will be right-aligned.
↑ d) Grundlagen-Websites & Workshops
-
SELFHTML
de
Formate für Klassen definieren
de Beispiel: H1 ganz normal
de Klassen in Verbindung mit den Elementen div und span
de Beispiel: Eine Kapitelüberschrift
-
W3C Specification
HTML 4.01 en Element identifiers: the id and class attributes
-
W3C Specification
CSS2.1 en Class selectors
-
W3Schools:
en
CSS Syntax - Class selector
- Web Design Group en The CLASS Attribute
⇧ 4 ID-Selektoren (id-selector)
↑ a) Prinzip
-
ID-Selekoren = Individualformate definieren
-
ID's dürfen nur einmal pro Seite existieren
(während Klassen so oft benutzt werden können wie nötig) -
Im Stylesheet erfolgt der Eintrag mit einer Raute und nachher mit der Angabe der Identifikation
#xxx. -
Im HTML-Dokument wird nach der Angabe des Elementes die Identifiktation
id="xxx"angegeben.
↑ b) Websites
-
SELFHTML
de
Individualformate definieren
de Beispiel: Diese Überschrift
-
W3C Specification
HTML 4.01 en Element identifiers: the id and class attributes
- W3C CSS2.1 Specification en ID selectors
- Web Design Group en The ID Attribute
⇧ 5 Gruppierung von Selektoren
↑ a) Prinzip
- Wenn mehrere Selektoren die gleichen Deklarationen teilen, können diese gruppiert werden um sich das mehrfache Schreiben einer Regel zu ersparen.
↑ b) Beispiel
Mehrere Elemente haben die gleiche Formatierung:
1) Angabe im Stylesheet
h1,h2,h3,h4,h5,h6 {color: green }
↑ c) Websites
- Hessendscher de Gruppieren von Selektoren
- W3C CSS2 Specification en Group selectors