Im vorherigen Teil der Serie Cascading Style Sheets (CSS) 101 haben wir besprochen, wie man mit mehreren Regeln für ein Element umgeht. In diesem Artikel wird eine weitere wichtige CSS-Funktion behandelt: Selektoren, mit denen Elemente innerhalb einer Seite ausgewählt werden können, um eine Webseite zu stilisieren.
Selektortyp
CSS-Stile bieten viele Möglichkeiten, die Elementauswahl zu implementieren. Zu den verschiedenen Auswahlmethoden gehören die Auswahl über den Universalselektor, den Typselektor, den Klassenselektor, den ID-Selektor, den Vorfahrenselektor, den Nachkommenselektor, den benachbarten Geschwisterselektor und den Attributselektor.
Hier betrachten wir jede dieser Methoden einzeln (mit Ausnahme benachbarter Geschwister und Attribute, die wir nächste Woche besprechen werden). Hinweis: Die Browserunterstützung für CSS-Selektoren ist inkonsistent, Sie können jedoch mithilfe der Online-Anweisungen überprüfen, ob ein bestimmter Selektor in Ihrem Zielbrowser funktioniert.
Universal
Mit universellen Selektoren können Sie Stile auf der gesamten Seite verwenden. Grundsätzlich gibt ein Stil kein bestimmtes Element, keine bestimmte Klasse usw. an, sondern gilt für alle Elemente auf der Seite. Dies ist nützlich zum Festlegen von Farben, Schriftarten usw.
Universelle Selektoren können für alle Elemente auf der Seite verwendet werden, sie können jedoch durch bestimmte Selektoren überschrieben werden. Die CSS-Spezifikation besagt, dass ein Sternchen (*) zur Darstellung eines universellen Selektors verwendet werden kann. Listing A zeigt, wie man universelle Selektoren verwendet, um den Hintergrund und die Standardschriftart für die Seite festzulegen.
Typ
Eine der gebräuchlichsten Möglichkeiten, ein Element zu formatieren, ist der Typ. Das bedeutet, dass ein bestimmtes Element über einen eigenen definierten Stil verfügt und dieser Stil für alle Elemente dieses Typs verwendet werden kann, unabhängig von der Position des Elements auf der Seite. Das Beispiel in Listing B zeigt die Verwendung eines Typselektors zum Formatieren aller Segmentelemente auf der Seite.
Bei diesem Selektortyp haben alle Absatzelemente im Blatt (sofern sie nicht durch spezifischere Selektoren überschrieben werden) bestimmte Ränder und roten Text. Jetzt können Sie auch Ihre eigenen CSS-Klassen erstellen, um die Gestaltung bestimmter Elemente auf der Seite zu verwalten.
Art
Klassenselektoren geben Ihnen mehr Kontrolle als Typselektoren, wenn es darum geht, zu entscheiden, was ein Stil abdeckt. Durch einen Klassenselektor definierte Stile können auf alle Elemente mit einem Klassenattribut angewendet werden, unabhängig von der Position des Elements auf der Seite. Es bietet eine hervorragende Kontrolle darüber, welche Elemente Stile erhalten. Das Beispiel in Listing C zeigt die Verwendung einer Klasse, um nur den ersten Absatz einer Seite zu formatieren. Der erste Absatz hat also eine gezackte Schriftart und die folgenden Absätze sind anders.
Klassenselektoren können keine reservierten HTML-Elemente wie Überschrift, p, h1 usw. verwenden. Sie können auch mehrere Klassen für dasselbe Element verwenden, indem Sie sie durch Leerzeichen trennen. Listing D zeigt die Verwendung mehrerer Klassen zum Formatieren eines bestimmten Absatzes.
Sie können Klassenselektoren mit Typselektoren kombinieren, um bestimmte Elemente zu formatieren, denen Klassen zugewiesen sind. In diesem Szenario weist der Elementname beim Definieren von Stilen einen durch Leerzeichen getrennten Klassennamen auf. Das Beispiel in Listing E demonstriert die Technik, bei der nur Segmentelemente, die einen bestimmten Klassennamen erhalten, auf eine Art formatiert werden, während Header mit demselben Klassennamen auf eine andere Art stilisiert werden. Ich werde näher auf die Verwendung des ID-Attributs des Elements eingehen.