Klassen-Selektoren
Lektion 4 von 15 im Kurs CSS Selectors von Coddy.
Ein Klassenselektor ist ein Typ von CSS-Selektor, der Elemente auswählt, die ein bestimmtes Klassenattribut besitzen. Das Klassenattribut ist ein benutzerdefiniertes Attribut, das Sie HTML-Elementen hinzufügen können, um sie zu gruppieren.
Um Elemente mit einer bestimmten Klasse auszuwählen, verwenden Sie einen Punkt (.) gefolgt vom Klassennamen. Zum Beispiel wählt der Selektor .my-class alle Elemente aus, die die Klasse my-class haben.
Hier ist ein Beispiel, wie man einen Klassenselektor verwendet, um eine Webseite zu gestalten:
.my-class {
color: red;
font-size: 2em;
}Um einem Element eine Klasse hinzuzufügen, schreiben Sie:
<div class="my-class"></div>Diese CSS-Regel wird alle Elemente, die die Klasse my-class haben, so gestalten, dass sie rot sind und eine Schriftgröße von 2em haben.
Aufgabe
Einfach- Erstelle eine Webseite mit drei
h1-Elementen. - Füge dem ersten
h1-Element eine Klasse hinzu. - Füge dem zweiten
h1-Element eine weitere Klasse hinzu. - Verwende einen CSS-Klassenselektor, um das erste
h1-Element rot zu gestalten und ihm eine Schriftgröße von 64px zu geben. - Verwende einen weiteren CSS-Klassenselektor, um ein anderes
h1-Element blau zu gestalten und ihm eine Schriftgröße von 32px zu geben.
Probier es selbst
<html>
<head>
<title>Class Selector Exercise</title>
<style>
/* CSS Code goes here */
</style>
</head>
<body>
</body>
</html>