CSS Selektoren: So kann CSS definiert werden!

OnPage SEO Buch

Wie in dem vorherigen Tutorial „CSS in Html einbinden“ erklärt, wird CSS in eine externe Datei ausgelagert, als inline Style verwendet oder einfach zwischen zwei style-Tags in den Head oder body-Bereich geschrieben.

CSS besteht grundlegend aus, Selektoren, Deklarationen mit verschiedenen Deklarationsformen, die in den Deklarationen enthaltenen Werte und dem Deklarationsblock.

Dem Deklarationsblock wird immer ein Selektor voran gestellt. Hier wird zwischen vier verschiedenen Selektoren unterschieden:

Der Universal-Selektor

Ein Universal Selektor spricht alle Elemente eines HTML-Dokuments an und wir mit eine * vor dem Deklarationsblock definiert.

Instagram Business Banner
Instagram Business mobile Banner

Klassen-Selektor

Mit einem Klassen-Selektor wird eine in HTML definierte Klasse (Class) angesprochen. Diese wird in CSS mit einem .Klassennamen eingeleitet und ebenfalls vor den Deklarationsblock geschrieben.

ID-Selektor

Neben dem Klassen-Selektor gibt es natürlich auch den sogenannten ID-Selektor, mit dem die gesetzten IDs einer HTML-Datei angesprochen werden können. Ein ID-Selektor wird in CSS durch eine #ID-Name eingeleitet.

Builderall Banner
Builderall mobile Banner

Typ-Selektor

Mit dem Typ-Selektor werden in CSS HTML-Elemente wie z. B. div angesprochen. Hierfür wird der Name des Elements einfach vor den Deklarationsblock gestellt. So bekommt jedes Element der Selben Bezeichnung dieselben Stylesheets zugewiesen.

Wie oben bereits erwähnt werden diese Selektoren vor einen Deklarationsblock geschrieben. Ein Deklarationsblock beinhaltet die verschiedene Deklarationen und Deklarationsformen und wird mit einer geschweiften Klammer geöffnet und wieder geschlossen:

Was sind Deklarationen und Deklarationsformen?

Deklarationen sind die einzelnen Styleangaben, die dem jeweiligen Selektor im Deklarationsblock zugewiesen werden. Ein Beispiel hierfür ist z. B. die Styleangabe „height“ mit dem Wert “100px“

Das oben genannte Beispiel ist eine von zwei verschiedenen Deklarationsformen. Die andere Deklarationsmöglichkeit fasst mehrere Deklarationen in einer Deklaration zusammen. Die Deklaration „border“ kann zum Beispiel drei Werte beinhalten, die auf verschiedene Deklarationen verteilt werden können:

Um in CSS Platz zu sparen, kann man diese Deklaration in die Deklaration border zusammenfassen:

Der Wert einer Deklaration in CSS wird mit einem : (Doppelpunkt) einer Deklaration zugewiesen und mit einem ; (Semikolon) weder geschlossen.

Bewerte diesen Artikel
1 Stern2 Sterne3 Sterne4 Sterne5 Sterne

15 Bewertung(en), durchschnittlich: 5,00 von 5

Loading...

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.