Rheinwerk Design :: Dreamweaver 8 – 12.6 Selektor-Typen

12.6 Selektor-Typen

Die verschiedenen Arten von Selektoren ergeben sich aus der Art der Anwendung im Dokument. Im Einzelnen sind dies Klassen-Selektoren, Tag-Selektoren, ID- und Kontext-Selektoren. Die Bezeichnung »Selektoren« beschreibt sehr gut die Eigenschaft der einzelnen CSS-Stile, einen Bereich zu selektieren und dann auf diesen selektierten Bereich Stilvorgaben anzuwenden.

12.6.1 Klassen-Selektoren

Klassen werden durch einen Namen mit vorangestelltem Punkt deklariert. In Listing 12.4 finden Sie eine Klassendefinition. Die definierte Klasse heißt in diesem Fall stilvorlage.

Listing 12.4 Deklaration der Klasse stilvorlage

<style type="text/css">
<!--
..stilvorlage {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #000000;
}
-->
</style>

Klasse anwenden | Klassen sind Sammlungen von Eigenschaften. Sie müssen explizit auf einen Tag angewandt werden, um eine Wirkung zu erzielen. Dabei spielt es keine Rolle, in welchem Bereich des Dokuments die Klasse angewandt wird.

Grundsätzlich besteht ein CSS-Stil mit Klassen-Selektoren immer aus zwei Teilen – einer ist die Regel, der zweite die Anwendung des Stils im HTML-Tag.

Listing 12.5 Anwendung des zuvor deklarierten Stils

<span class="stilvorlage">Stilanwendung</span>

Den der Klassendefinition vorangestellten Punkt müssen Sie bei Dreamweaver 8 nicht eintragen, es sei denn, Sie schreiben den Stil von Hand direkt in den Quelltext. Achten Sie darauf, keine Sonderzeichen etc. zu verwenden. Es gelten hier die üblichen Regeln für Dateinamen in UNIX-Systemen.

Auskommentieren für ältere Browser | Sie können die eigentliche CSS-Regel in spitze Kommentarzeichen setzen, damit die Definition von alten Browsern, die kein CSS unterstützen, nicht als Text ausgegeben wird.

12.6.2 Tag-Selektoren

Nicht nur über Klassen können Formate zugewiesen werden, sondern auch jedem HTML-Element – mit Ausnahme nicht zu schließender Tags wie <br>. Die Deklaration sieht folgendermaßen aus:

Listing 12.6 Formatierter HTML-Tag

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #000000;
}

Automatisch zugewiesen | CSS-Stile mit Tag-Selektoren müssen Sie im HTML-Element nicht explizit zuweisen. Die Formatierungen werden automatisch verwendet, wenn der entsprechende Tag im Dokument vorkommt. Üblicherweise werden formatierte Tags bei Tabellen, Body-, H1- und H2-Elementen usw. eingesetzt.

12.6.3 Kontext-Selektoren

Kontext-Selektoren beziehen ihren Wirkungskreis aus der Eigenschaft eines Elementes. Häufig angewandte sind etwa a:link, a:hover und a:active, die bestimmte Zustände von Links beschreiben.

Das folgende Beispiel weist normalen, nicht aktiven Hyperlinks Schrifttyp, -größe und -farbe zu. Die Formatierung ist als interner CSS-Stil im Head-Bereich des Dokumentes angelegt.

Listing 12.7 Kontext-Selektor für einen Textlink

<html>
<head>
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
a:link {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #000000;
}
-->
</style>
</head>
<body>
<a href="#top">Stilanwendung</a></body>
</html>

12.6.4 ID-Selektoren

Nahezu jedem Element innerhalb eines HTML-Dokuments kann man eine ID zuweisen. ID-Selektoren formatieren dann das Element selbst oder seine Inhalte.

Der Selektor selbst wird mit einem # gefolgt vom ID-Namen gesetzt. Im HTML-Code wird der ID-Name einem Tag durch Hinzufügen des Attributes id="[ID-Name]" zugewiesen. Alles innerhalb dieses Tags wird gemäß der Vorgaben in der CSS-Regel formatiert.

Listing 12.8 ID-Selektor für ID-Tabelle

<html>
<head>
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
#tabelle {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #000000;
}
-->
</style>
</head>
<body>
Stilanwendung
<table width="200" border="1" id="tabelle">
  <tr>
    <td>Stilanwendung</td>
  </tr>
</table>
</body>
</html>

ID- und Kontext-Selektoren sind vor allem beim Entwickeln dynamischer Websites sehr wichtig. Beide lassen sich auch kombinieren.

Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.