Keywords

Selektoren

1. einfache Elementselektoren oder Typselektoren

Die einfachste Methode, Stile einem HTML-Dokument zuzuweisen, besteht in der Verwendung von bestimmten HTML-Befehlen, den so genannten Typselektoren, z.B. p, h1, ul, li, form usw.
Alle diese Tags beschreiben Objekte, die in irgendeiner Form einen bestimmten Zweck haben, ein form z.B. beschreibt ein Formular, ein p einen Paragraph etc.; HTML sieht noch zwei weitere allgemeine Selektoren vor, nämlich das <div> ("Division" ein Blockelement) und das <span> (ein Inline-Element). Diese beiden Objekte sind dazu da, um Elemente auf einer Seite zu strukturieren bzw. andere untergeordnete Elemente zusammenzufassen und haben keine unwillkürliche Auswirkung auf das optische Erscheinungsbild einer Seite im Browser (abgesehen von Standard-Abstände) - sie werden erst mit Hilfe von CSS wirksam. Divs bilden in der Regel die Grundlage für ein tabellenloses reines CSS-Layout.

Ein Typselektor wird einfach mit seinem Objektnamen (HTML-Entsprechung, kleingeschrieben) angesprochen:

h1 { color: rgb(20,20,20); background-color: rgb(255, 0, 0); }

Bsp.: Formatierung mit span und div.

 

2. ID-Selektoren

ID-Selektoren beginnen mit einer Raute ("#") und sprechen immer dasjenige Element an, das im Attribut id denselben Attributwert wie der Selektor hat. Dabei ist es egal, welchen Objekttyps das Objekt ist - nur die Id zählt. Ids müssen laut Spezifikation innerhalb eines HTML-Dokuments einzigartig sein.

#meinIdWert { border: 1px solid rgb(255, 0, 0); }

[...]
     <h1>Seitentitel</h1>
     <p id="meinIdWert">
        Im Beispiel hier wird das Objekt mit der id &quot;meinIdWert&quot; (und NUR dieses eine Objekt)
        mit einem 1Pixel breiten roten Rand versehen.
     </p>
[...]

Im Beispiel hier wird das Objekt mit der id "meinIdWert", hier ein Paragraph mit einem 1Pixel breiten roten Rand versehen. Ids dürfen nicht mit einer Zahl beginnen und dürfen keine Leer- und Sonderzeichen enthalten.

 

 3. Klassenselektoren

Klassenselektoren sind (sowie ID-Selektoren) benutzerdefinierte Elemente, d.h. die Bezeichnungen sind frei wählbar und können vom Benutzer angelegt werden. Klassendefinitionen beginnen immer mit einem (.) Punkt und werden dazu verwendet, um Objekte beliebigen Typs (auch gemischt) mit denselben CSS-Attributen zu versehen.

.boldOrange{ color: orange; font-weight: bold; }

Ale HTML-Objekte, die im Attribut "class" nun den Attributswert "boldOrange" haben, werden mit diesem Selektor beschrieben: Orange als Schriftfarbe und fette Textauszeichnung. Im folgenden Beispiel trifft dies auf die Übeschrift und den zweiten Listenpunkt zu:

[...]
     <h1 class="boldOrange">Seitentitel</h1>
     <p>
        Dieser Absatz sieht ganz normal aus.
     </p>
     <ul>
          <li>Dies ist der erste Listenpunkt in einer nicht nummerierten Liste</li>
          <li class="boldOrange">Dies ist der zweite Listenpunkt in einer nicht nummerierten Liste</li>
     </ul>
[...]

 

4. Selektoren für Nachfahren oder kombinierte Selektoren

Durch die Kombination von Selektoren werden Formatierungseigenschaften eines Elementes nur dann angewandt, wenn es sich innerhalb eines anderen Elements befindet.

h1 a {color: red;}

 Im obigen Beispiel werden alle Hyperlinks, die sich innerhalb einer Überschrift erster Ordnug befinden in roter Farbe. Alle Links, die sich nicht in einer Überschrift befinden, werden weiterhin anders (normalerweise blau) dargestellt. Dabei spielt es keine Rolle, ob sich "zwischen" dem <h1>-Element und dem <a> noch andere Elemente befinden, d.h. wären auch die Links betroffen, die sich in einem <span> unterhalb einer <h1> befinden ("verschachtelt"). Es gibt auch einen Selektor, der nur Elemente anspricht, wenn sie Sich unmitelbar unter einem bestimmten anderen befinden, dazu weiter unten mehr.

Bsp.: Selektoren für Nachfahren

Das Kombinieren von Typen-, Objekt- und Klassenselektoren ist natürlich möglich:

#container li .externallinks  {color: red;}

Module, die für die Durchführung vorausgesetzt werden