CSS: Regeln, Selektoren, Eigenschaften

CSS (Cascading Style Sheets) ist eine Stilsprache, die zum Entwerfen von Webseiten verwendet wird. Es ermöglicht Ihnen, den Seiteninhalt von seiner Präsentation zu trennen, was die Arbeit mit Layouts und Design erleichtert.

CSS besteht aus einer Reihe von Regeln, die jeweils bestimmen, wie ein bestimmtes Element auf einer Webseite gestaltet werden soll. Zu den Regeln gehört das Auswählen von Elementen mithilfe von Selektoren und das Festlegen von Eigenschaften für diese Elemente. Schauen wir uns die Hauptkomponenten von CSS an – Regeln, Selektoren und Eigenschaften.

Regeln

Eine CSS-Regel besteht aus einem Selektor und einem Eigenschaftsblock. Die Regel teilt dem Browser mit, welche Elemente der Webseite gestaltet werden sollen und wie sie gestaltet werden sollen. Jede Regel beginnt mit einem Selektor, der Elemente auswählt, und endet mit einem Block von Eigenschaften, die für die ausgewählten Elemente gelten.

Hier ist ein Beispiel für eine einfache Regel:

Hier ist `p` ein Selektor, der alle Absätze auf der Seite auswählt. Im Eigenschaftsblock werden Stile für Absätze festgelegt: blaue Textfarbe und Schriftgröße 16 Pixel.

Selektoren

Mit Selektoren können Sie ein oder mehrere Elemente auf einer Webseite auswählen, um bestimmte Stile darauf anzuwenden. Selektoren können sehr einfach oder komplexer sein und ermöglichen Ihnen die Auswahl von Elementen basierend auf ihrem Typ, ihren Klassen, IDs, Attributen und sogar ihrer Position auf der Seite.

Beispiele für einfache Selektoren:

• `p` – wählt alle Absätze aus.
• `.header` – wählt alle Elemente mit der Klasse „header“ aus.
• `#logo` – wählt das Element mit der ID „logo“ aus.

Beispiele für komplexere Selektoren:

• `ul li` – wählt alle Elemente der `li`-Liste aus, die Kinder des `ul`-Elements sind.
• `input` – wählt alle Textfelder auf der Seite aus.

Eigenschaften

Eigenschaften bestimmen das Aussehen von Elementen, die mithilfe von Selektoren ausgewählt werden. Jede Eigenschaft hat einen Wert, der angibt, wie das Element aussehen soll.

Immobilienbeispiele:

• `color` – definiert die Textfarbe des Elements.
• `font-size` – legt die Schriftgröße fest.
• `background-color` – legt die Hintergrundfarbe des Elements fest.
• `border` – definiert den Stil, die Dicke und die Farbe des Rands des Elements.

Hier ist ein Beispiel für die Verwendung von Eigenschaften:

Diese Regel wählt alle h1-Überschriften aus und legt ihre Textfarbe auf Rot, die Schriftgröße 24 Pixel, den gelben Hintergrund und den schwarzen Rand mit einer Dicke von 1 Pixel fest.

Kombinatoren

Mit Kombinatoren in CSS können Sie Selektoren kombinieren und spezifischere Regeln erstellen. Hier sind einige Beispiele für Kombinatoren:

• `div p` – wählt alle „p“-Elemente aus, die Kinder von „div“-Elementen sind.
• `.menu-item > a` – wählt alle „a“-Elemente aus, die direkte Nachkommen von Elementen mit der Klasse „.menu-item“ sind.
• `h2 + p` – wählt alle „p“-Elemente aus, die direkt nach „h2“-Elementen kommen.

Mithilfe von Kombinatoren können Sie die Art und Weise, wie Stile auf Elemente auf einer Seite angewendet werden, optimieren.

Pseudoklassen und Pseudoelemente

Mit Pseudoklassen und Pseudoelementen können Sie Elemente auswählen, die sich in bestimmten Zuständen befinden oder bestimmte Teile haben. Sie werden nach dem Hauptselektor angegeben und durch einen Doppelpunkt gekennzeichnet.

Beispiele für Pseudoklassen:

• `:hover` – Wendet Stile an, wenn sich der Cursor über einem Element befindet.
• `:active` – wendet Stile an, wenn das Element aktiv ist (zum Beispiel beim Klicken auf eine Schaltfläche).
• `:focus` – wendet Stile an, wenn das Element den Fokus hat (z. B. ein Eingabefeld, wenn darauf geklickt wird).

Beispiele für Pseudoelemente:

• `::before` – fügt Inhalt vor dem Inhalt des ausgewählten Elements hinzu.
• `::after` – fügt Inhalt nach dem Inhalt des ausgewählten Elements hinzu.
• `::first-line` – wendet Stile auf die erste Textzeile im Element an.
• `::first-letter` – wendet Stile auf den ersten Buchstaben des Textes im Element an.

CSS-Dateien importieren

Um Ihren Code strukturierter und einfacher zu verwalten zu gestalten, können Sie mit CSS Stile aus anderen Dateien importieren. Dies wird mit dem Befehl „@import“ erreicht, der oben in der CSS-Datei platziert werden kann.

Auf diese Weise können Sie Stile in verschiedene Dateien aufteilen, was die Bearbeitung erleichtert und die Größe der einzelnen Dateien verringert.

Kaskadierung und Prioritäten

CSS basiert auf dem Prinzip der Kaskadierung, was bedeutet, dass Stile an verschiedenen Orten und in verschiedenen Quellen definiert werden können und der Browser anhand von Prioritäten entscheidet, welcher Stil angewendet werden soll. Kaskadierung umfasst:

• Selektorpriorität: Der Browser respektiert die Spezifität von Selektoren. Je spezifischer der Selektor ist, desto höher ist seine Priorität.
• Stilreihenfolge: Wenn zwei Regeln die gleiche Spezifität haben, wird die letzte Regel auf das Element angewendet.
• Stilwichtigkeit: Sie können die Wichtigkeit eines Stils mit „!important“ festlegen. Dadurch hat der Stil Vorrang.

Es ist wichtig, `!important` sorgfältig zu verwenden, um zukünftige Probleme bei der Codewartung zu vermeiden.

Medienabfragen

CSS ermöglicht die Anpassung von Stilen basierend auf Geräteeinstellungen wie Bildschirmbreite und Auflösung. Mit Medienabfragen können Sie responsive Designs erstellen, die auf einer Vielzahl von Geräten gut aussehen, vom Mobiltelefon bis zum Desktop.

Beispiel für eine Medienabfrage:

In diesem Beispiel werden Stile auf Seitenelemente angewendet, wenn die Bildschirmbreite 768 Pixel nicht überschreitet.

CSS ist ein leistungsstarkes Tool zum Gestalten von Webseiten. Diese Grundlagen helfen Ihnen dabei, damit schöne und funktionale Designs zu erstellen. Übung und Erfahrung werden Ihnen helfen, Ihre Fähigkeiten zu verbessern und ein erfahrener Front-End-Entwickler zu werden.