3.4.4 Selektoren

Allgemein

Man unterscheidet folgende Arten von Selektoren:

1. Typ-Selektoren (type selectors)
2. Klassen-Selektoren (class selectors)
3. ID-Selektoren (id-selectors)

Typ-Selektoren (type selectors)

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.

Beispiel: Formatieremit 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 Text wurde mit  ist ein Versuch<em>Text mit em</em>
hervorzuheben</p>

3) Der Browser des Anwenders zeigt folgendes:

Dies ist ein Versuch Text mit em hervorzuheben

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.

Workshop

• Hessendscher: Selektoren

Klassen-Selektoren (class selector)

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.

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.

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.

Grundlagen und Workshops

• SELFHTML: Formate für Klassen definieren
  SELFHTML: Beispiel: H1 ganz normal
  SELFHTML: Klassen in Verbindung mit den Elementen div und span
  SELFHTML: Beispiel: Eine Kapitelüberschrift

• W3C Specification
  HTML 4.01: Element identifiers: the id and class attributes

• W3C Specification
  CSS2.1: Class selectors

• W3Schools: CSS Syntax - Class selector

• Web Design Group: The CLASS Attribute

ID-Selektoren (id-selector)

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.

• SELFHTML: Individualformate definieren
  SELFHTML: Beispiel: Diese Überschrift

• W3C Specification
  HTML 4.01: Element identifiers: the id and class attributes

• W3C CSS2.1 Specification: ID selectors

• Web Design Group: The ID Attribute

Gruppierung von Selektoren

Prinzip:

• Wenn mehrere Selektoren die gleichen Deklarationen teilen, können diese gruppiert werden um sich das mehrfache Schreiben einer Regel zu ersparen.

Beispiel

Mehrere Elemente haben die gleiche Formatierung:

h1,h2,h3,h4,h5,h6 {color: green }

• Hessendscher: Gruppieren von Selektoren

• W3C CSS2 Specification: Group selectors

↑