Mit einer CSS-Datei bestimmt ihr das spätere Design eurer Webseite. Was CSS-Selektoren sind und wie ihr sie nutzt, zeigen wir euch hier auf GIGA.
CSS steht für „Cascading Style Sheets“. Es handelt sich um eine Stylesheet-Sprache, die für elektronische Dokumente und zusammen mit HTML und JavaScript eine der Kernsprachen des World Wide Web ist. Die Stylesheets gelten als lebendiger Standard und sie wird vom World Wide Web Konsortium beständig weiterentwickelt.
Kennt ihr die noch? Diese Programme hatte damals jeder auf dem PC:
Das sind CSS-Selektoren
CSS-Selektoren sind nützliche Helfer, um die Gestaltung eurer Homepage zu ermöglichen. So könnt ihr Formateigenschaften auf bestimmte Elemente anwenden, wenn ihr sie vorher definiert. Dies geschieht in den bereits erwähnten Selektoren. Als einen Selektor bezeichnet man die Teile einer CSS-Regel, die vor einem Abschnitt aus geschweiften Klammern stehen. Sollen voneinander unabhängige Selektoren die gleichen Eigenschaften zugewiesen werden, könnt ihr diese sogar in einer mit Kommata getrennten Selektor-Liste notieren.
Um das eben beschriebene besser zu verdeutlichen, zeigen wir ein kleines Beispiel:
einfacher Selektor { CSS-Eigenschaft } oder auch erster Selektor, zweiter Selektor { CSS-Eigenschaften }
So aktiviert ihr JavaScript:
auf YouTube
CSS Selektortypen
CSS kennt verschiedene Selektortypen. Wir beschreiben euch kurz die Gängigsten:
- Universalselektoren: Diese Selektoren sprechen alle Elemente in einem Dokument an. Sie werden mit dem „*“-Zeichen beschrieben.
- Typselektoren: Diese bestehen aus dem Namen des anzusprechenden Elements. Mit diesem Selektor könnt ihr alle Elemente eines bestimmten Typs ansprechen.
- Klassenselektoren: Sie sprechen Elemente an, die einer bestimmten Klasse zugehören. Welche Elemente dies sind, hängt von der verwendeten Auszeichnungssprache ab. In HTML beispielsweise werden Klassen über das „class-Attribut“ vergeben. Einen Klassenselektor bildet ihr, indem ihr einen Punkt vor den jeweiligen Klassennamen einfügt.
- ID-Selektor: Der ID-Selektor kann ein bestimmtes Element ansprechen, dem eine bestimmte ID zugeordnet wurde. Wie dieses angesprochen wird, ist wieder von der jeweiligen Auszeichnungssprache abhängig. Bei HTML- oder XML-Dokumenten ist es das „id-Attribut“. Den ID-Selektor bildet ihr, indem ihr ein Rautezeichen „#“ vor den jeweiligen ID-Namen stellt.
Hat dir der Beitrag gefallen? Folge uns auf WhatsApp und Google News und verpasse keine Neuigkeit rund um Technik, Games und Entertainment.
