Dies ist eine alte Version des Dokuments!
LU02.A03 - Pseudo-Klassen
Aufgabe 1: Theoriefragen zu Pseudo-Klassen
Beantworten Sie die folgenden Fragen zu CSS-Pseudo-Klassen:
- Was ist eine CSS-Pseudo-Klasse? Erkläre den Unterschied zwischen einer normalen Klasse und einer Pseudo-Klasse.
- Welche Pseudo-Klasse wird verwendet, um das Styling eines Links zu ändern, wenn die Maus darüberfährt?
- Mit welcher Pseudo-Klasse kann ein Element gezielt werden, das den Fokus hat (z. B. ein Input-Feld)?
- Welche Pseudo-Klassen ermöglichen es, das erste und das letzte Kind eines übergeordneten Elements zu stylen?
- Erkläre den Unterschied zwischen
nth-child(n)undnth-of-type(n).
Rahmenbedingungen
| Was | Beschreibung |
|---|---|
| Produkt | Notiz mit Ihren Antworten |
| Zeit | 5 Min. |
| Sozialform | Einzel- oder Partnerarbeit |
Aufgabe 2: Praktische Übung mit Pseudo-Klassen
Ausgangslage
Erstellen Sie eine Datei index.html mit folgendem Inhalt:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pseudo-Klassen Übung</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Ein Text über Lorem Ipsum</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <blockquote class="custom-quote">Every programmer is an author.</quote> </body> </html>
Aufgabenstellung
- Erstellen Sie eine CSS-Datei
styles.cssund verknüpfe sie die CSS-Datei mit der HTML-Datei. - Fügen Sie eine Regel hinzu, die bei den
<blockquote>-Elementen mit der Klasecustom-quotedie Zitatzeichen „«“ und „»“ hinzufügt.
Rahmenbedingungen
| Was | Beschreibung |
|---|---|
| Produkt | HTML- und CSS-Datei |
| Zeit | 5 Min. |
| Sozialform | Einzel- oder Partnerarbeit |