Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 26): So klappt der Zugriff mit den Selektoren (1)

HTML & CSS für Einsteiger (Teil 26): So klappt der Zugriff mit den Selektoren (1)

Ein Begriff, der euch im Zusammenhang mit CSS immer wieder begegnen wird, ist der der "Selektoren". Über diese Selektoren legt man letztendlich die Elemente fest, die mittels CSS formatiert werden sollen. In diesem Video-Training werdet ihr die ersten Selektoren kennenlernen. Vorgestellt werden euch hier Element-, ID- und Universalselektoren. Mit denen werdet ihr es, wenn ihr eure Webseiten mit CSS gestaltet, tagtäglich zu tun haben.

... übrigens findest du die komplette Serie hier: HTML & CSS für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Die Selektoren bestimmen, auf welche Weise die CSS-Stile den HTML-Elementen zugewiesen werden. Bei einer entsprechenden Definition gibt man zunächst den Namen des Elements an, auf den der Selektor zugreifen soll. Die eigentliche Deklaration erfolgt anschließend in geschweiften Klammern. Innerhalb einer Deklaration können eine oder mehrere Eigenschaften angegeben werden. Die allgemeine Syntax sieht also folgendermaßen aus:
Selektor {
   Eigenschaft1: Wert;
   Eigenschaft2: Wert;
   Eigenschaft3: Wert;
}

Eine entsprechende Definition ist euch im vorherigen Tutorial bereits begegnet.
h1 {
   font-family:"Courier New", Courier, monospace;
   font-size: 200%;
}

Achtet unbedingt darauf, jede Deklaration über ein Semikolon zu beenden.

Bilder



 

Ein Blick auf die verfügbaren Selektoren

Tatsächlich wartet CSS mit einer recht großen Anzahl an Selektoren auf, von denen ich euch die wichtigsten vorstellen werde. Denn eines ist klar: Nur, wenn man die Arbeit mit den Selektoren beherrscht, kann man überhaupt vernünftig CSS-Eigenschaften definieren.

Die einfachste Möglichkeit, innerhalb eines HTML-Dokuments Stile zuzuweisen, bietet der Element-Selektor.

Durch die folgende Syntax wird allen p-Elementen die Farbe Schwarz zugewiesen.
p { 
   color: #009966; 
}

Wollt ihr mehreren Elementen denselben Stil zuweisen, ist das ebenfalls möglich.

Bilder



 
In diesem Fall notiert ihr die betreffenden Elemente einfach nacheinander, jeweils durch ein Komma voneinander getrennt.
p, h1,  li { 
   color: #000; 
}

Ihr könnt Elementen auch mehrere Stile zuweisen. Dabei werden die Stile jeweils durch ein Semikolon voneinander getrennt notiert.
p { 
   color: #000; 
   background-color: red;
}

Eine Kombination der genannten Varianten ist ebenfalls möglich.
p, h1,  li { 
   color: #009966; 
   background-color: red;
}

Das Ergebnis könnte so aussehen:

Bilder



 

Bereiche mit mehreren Elementen

Oftmals besteht die Notwendigkeit, einen Bereich zu formatieren, der aus mehreren HTML-Elementen besteht. Für solche Fälle gibt es in HTML mit span und div zwei spezielle Elemente. Diese Elemente werden euch – übrigens auch in dieser Reihe – immer wieder begegnen.

Ein Beispiel:
<div class="artikel">
  <h1>Farbexplosion</h1>
  <p class="thema">Ein Tutorial zur Erstellung von Farbexplosion von <span class="autor">MarkusMelzer</span>.</p>
</div>

Der einzige Unterschied zwischen div und span liegt darin, dass das div-Element eine neue Zeile im Textfluss erzwingt. span hingegen erzeugt keine neue Zeile. Im gezeigten Beispiel wird ein div-Bereich definiert, in dem eine Überschrift und ein Textabsatz enthalten sind. Innerhalb des Textabsatzes wiederum gibt es einen span-Bereich.

Bilder



 

ID- und Klassenselektoren

Bislang wurden Elementselektoren verwendet. Durch das folgende Beispiel werden durch einen solchen Selektor alle h1-Überschriften formatiert.
h1 { 
   color: #000; 
   background-color: red;
}

Das ist in dieser Form aber natürlich nicht immer gewünscht. Was beispielsweise, wenn ihr nur einer oder einigen, nicht aber allen h1-Überschriften bestimmte Eigenschaften zuweisen wollt? Für solche Fälle bietet CSS zwei Möglichkeiten, nämlich die Klassen- und die ID-Selektoren.

Mit Klassenselektoren können HTML-Elemente mit Klassenattributen ganz gezielt selektiert werden. Im betreffenden HTML-Element muss dazu das Attribut class angegeben werden. Klassendefinitionen beginnen mit einem Punkt.

Ein Beispiel:
.rot { 
   color: red; 
}

Hier wurde die Klasse rot definiert. Um die rot zugewiesenen Eigenschaften nun einem HTML-Element hinzufügen, gibt man class gefolgt vom Klassennamen an.
<p class="rot">PSD-Tutorials.de</p>

Der ID-Selektor lässt sich ähnlich einfach verwenden. Zu erkennen ist der ID-Selektor an einem Doppelkreuz.
#topnavi { 
   color: blue; 
};

 
In diesem Beispiel wird die ID topnavi definiert. Aber Achtung: Eine ID darf innerhalb eines Dokuments tatsächlich nur einmal zugewiesen werden. Der Zugriff auf eine definierte ID-Eigenschaft sieht dann folgendermaßen aus:
<div id="topnavi">Hier steht die Navigation</div>

Dem Attribut id weist man den ID-Namen zu. Achtet darauf, dass hier dann das Doppelkreuz nicht notiert wird.

Bilder



Die gezeigten Angaben lassen sich übrigens auch miteinander kombinieren. So kann man einem HTML-Element beispielsweise mehrere Klassen zuweisen.
<p class="rot gross">PSD-Tutorials.de</p>

In diesem Beispiel werden dem Textabsatz die beiden Klassen rot und gross zugewiesen. Wollt ihr eine Klasse und eine ID angeben, sieht das hingegen folgendermaßen aus:
<p class="rot" id="navi">PSD-Tutorials.de</p>

 
Ebenso könnt ihr Elemente und IDs miteinander kombinieren. Auch hierzu ein Beispiel:
div.navi { 
   color: blue; 
}

Diese Syntax würde ausschließlich auf div-Elemente mit der Klasse navi zutreffen. p-Elemente, die ebenfalls die Klasse navi besitzen, blieben davon unberührt.

In CSS gibt es noch eine weitere Art der Kombination von Selektoren. Werft dafür einen Blick auf die folgende Syntax:
h1 { 
   color: red;
}
em { 
   color: blue; 
}

Hier wird allen Überschriften der ersten Ordnung die Farbe Rot zugewiesen. em-Elemente bekommen hingegen die Farbe Blau.

Bilder



 
Durch eine Kombination der beiden Anweisungen kann man nun aber dafür sorgen, dass nur die em-Elemente blau eingefärbt werden, die sich innerhalb von h1-Elementen befinden.
h1 em { 
   color: blue; 
};

Die Elementnamen werden hier ohne Kommata voneinander getrennt notiert.

Bilder



 
Das ist übrigens eine beliebte Fehlerfalle, in die gerade auch CSS-Einsteiger tappen. Hier dieselbe Syntax, in der allerdings ein Komma gesetzt wurde:
h1, em { 
   color: blue; 
}

Was bedeutet diese Syntax? Es werden alle h1- und alle em-Elemente angesprochen. Das ist also etwas völlig anderes, als die Syntax ohne Komma!

Bilder



 
Ein weiterer wichtiger Selektor ist der Universalselektor. Dieser ermöglicht die Auswahl eines beliebigen Elements. Definiert wird dieser Selektor über einen Asterisk.
* { 
   color: red; 
}

Durch diese Syntax würden alle Elemente rot eingefärbt. Auch bei diesem Selektor sind wieder einige Syntaxbesonderheiten zu berücksichtigen.
#mainnavi * { 
   color: red; 
}

In diesem Beispiel wird die Vordergrundfarbe aller Elemente innerhalb des Elements mit der ID mainnavi auf Rot gesetzt. Das gilt allerdings nicht für das Element selbst.

Wenn der Universalselektor am Anfang einer Deklaration stehen würde, bräuchte man ihn übrigens nicht zu notieren. So etwas hier wäre also überflüssig:
* p { 
   color: red; 
}

Diese Syntax ist mit folgender gleichbedeutend:
p { 
   color: red; 
}

Im nächsten Tutorial werdet ihr weitere Selektoren kennenlernen.

Weitere Teile


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von ice.cube79
Portrait von Kiasa
  • 24.06.2015 - 18:55

Prima erklärt. Hab ich vorhin ausprobiert. Danke!

Portrait von ZainaPhoto
  • 11.04.2015 - 13:26

Vielen Dank für das Video!

LG Zaina

Portrait von Kiasa
  • 27.03.2015 - 18:03

Super! Vielen herzlichen Dank!

Portrait von Kundentest
  • 08.02.2015 - 18:02

Herzlichen Dank für das Tutorial.

Portrait von renate_C
  • 08.02.2015 - 14:47

Ich bedanke mich für das ebenfalls interessante und lehrreiche Tutorial.

Portrait von Caesarion2004
  • 08.02.2015 - 14:46

Vielen Dank für den weiteren interessanten Teil der Reihe.

Portrait von pallasathena
Portrait von BOPsWelt
  • 08.02.2015 - 13:44

Vielen Dank für einen weiteren Tutorial Teil der Serien, klasse.

Portrait von MicroSmurf
  • 28.12.2014 - 18:31

Gut zur Auffrischung. Vielen Dank.

Portrait von teste123
  • 28.12.2014 - 11:51

Herzlichen Dank für den weiteren Teil.
Schönen Tag

Portrait von samtron
  • 28.12.2014 - 11:51

Herzlichen Dank für den weiteren Teil
MfG

Portrait von renate_C
  • 28.12.2014 - 11:01

Vielen Dank für das informative Videotutorial.

Portrait von Caesarion2004
  • 28.12.2014 - 10:53

Vielen Dank für das weitere interessante Teilstück der Tutorialreihe.

Portrait von Dineria
  • 28.12.2014 - 10:39

Danke! Also entweder kannte ich Element- und ID-Selektoren noch nicht oder die waren tatsächlich schon in Vergessenheit geraten... ^_^

Portrait von Domingo
  • 28.12.2014 - 10:30

Gut erklae/rt, vielen Dank.

Portrait von Kundentest
  • 28.12.2014 - 08:48

Herzlichen Dank für den weiteren Teil.

x
×
×