Aufgabe:
Baue in HTML und CSS eine Mini-Webseite mit den folgenden Elementen:
Teil A: HTML-Struktur
1. HTML-Grundaufbau:
Erstelle eine HTML-Datei mit:
- Einem Titel (z. B.
<title>Übung Klassen und IDs</title>) - Einer Überschrift (
<h1>) mit einer ID „main-title“ - Einem Absatz (
<p>) mit einer Klasse „intro-text“
2. Tabelle mit 10 Zeilen und 5 Spalten
Die Tabelle soll darstellen, wie Daten strukturiert werden. Beispielsweise könnte sie eine Liste von Kunden enthalten:
Inhalt der Tabelle:
3. Verwendung von Klassen-Selektoren:
- Wechsle die Farbe der Hintergrundzeilen in der Tabelle:
- Unterscheide zwischen geraden und ungeraden Zeilen (bspw. eine Farbe für gerade Zeilen, eine andere für ungerade).
- Nutze dazu Klassen (z. B.
.oddund.even).
Teil B: CSS-Regeln
1. ID- und Klassenselektoren:
- Die Überschrift (
#main-title) soll fett und unterstrichen (mit einer Linie) sein und einen orangefarbenen Hintergrund haben.
- Der Absatz (
.intro-text) soll eine gelbe Schriftfarbe und eine andere Schriftgröße haben.
2. Tabellen-Design mit Klassen-Selektoren:
Definiere zwei CSS-Klassen:
.odd: Hintergrundfarbe hellgrau (#f2f2f2).even: Hintergrundfarbe weiß
3. Zusatzaufgabe:
Nutze eine Pseudoklasse wie :hover, damit die Tabellenzeile beim Überfahren mit der Maus blau markiert wird.