# Übungsblatt 12 ## 1. CSS-Übung: Selektoren **Aufgabenstellung**: Definieren Sie ein CSS-Stylesheet, das ein vorgegebenes HTML-Dokument einfärbt. #### Arbeitsschritte 1. Verwenden Sie dazu das vorgebene HTML-Formular [bunt.html](bunt.html). 2. Erstellen Sie ein Stylesheet und verlinken es im HTML. 3. Setzen Sie die Hintergrundfarbe des Dokuments auf `slateblue`. 4. Die Überschrift der ersten Ebene soll `lightcoral` sein. 5. Alle Überschriften der zweiten Ebene sollen `whitesmoke` sein. 6. Setzen Sie die restlichen Farben, wie der Text es fordert. ## 2. CSS- und Javascript-Übung: Farben und Events **Aufgabenstellung**: Erstellen Sie eine interaktive Webseite, die nach Auswahl einer Farbe die Hintergrundfarbe verändert. #### Arbeitsschritte: 1. Erstellen Sie eine HTML-Seite auf der ein Eingabefeld des Typs `color` zu sehen ist. Denken Sie auch an eine geeignete Beschriftung. 2. Schreiben Sie ein Javascript-Programm, dass bei Auswahl einer Farbe 1. den Hintergrund der HTML-Seite anpasst 2. die gewählte Farbe in einer `alert`-Nachricht ausgibt #### Tipps - Setzen der Hintergrundfarbe [w3schools.com: Backgroundcolor](https://www.w3schools.com/jsref/prop_style_backgroundcolor.asp) - Auslesen der Farbauswahl [w3schools.com: Input Color](https://www.w3schools.com/jsref/prop_color_value.asp) ## 3. CSS-Übung: Schrift **Aufgabenstellung**: Ergänzen Sie eine vorgegebene HTML-Seite um Schriftart, Farben und Schriftgrößen mit einem CSS-Stylesheet. #### Arbeitsschritte 1. Erstellen Sie ein CSS-Stylesheet und binden Sie es in diese HTML-Seite ein: [Nachricht](nachricht.html). 2. Verwenden Sie die Google Font "Open Sans". 3. Setzen Sie die Basis-Schriftgröße (``) auf `16px`. 4. Die Überschriften der ersten und zweiten Ebene sollen die Farbe `#005CA9` haben. 5. Text der Klasse `headline` soll eine dunkelgraue Farbe haben und eine kleinere Schriftgröße als die Basis-Schrift haben. 6. Text der Klasse `meta` soll eine hellgraue Farbe haben und eine kleinere Schriftgröße als `headline` haben. Außerdem soll der Text kursiv dargestellt werden. 7. Text der Klasse `source` soll unterstrichen sein. 8. Testen Sie, ob das relative Verhältnis der Schriftgrößen bestehen bleibt, wenn Sie die Basis-Schriftgröße anpassen (z.B. auf `10px`). ## 4. CSS-Übung: Selektoren und Spezifität **Aufgabenstellung**: Untersuchen Sie das folgende HTML-Dokument mit dem zugehörigen CSS-Stylesheet und geben Sie zu jedem Kalendereintrag die *Hintergrundfarbe*, *Schriftfarbe* und *unterstrichen/nicht unterstrichen* an. ![HTML mit CSS](uebung02.png) #### Antworten 1. Termine: 2. 10k-Lauf: 3. Elternabend: 4. Wocheneinkauf: 5. Yoga: 6. Handball-Training: 7. Mathearbeit: 8. Fußball-Training: 9. FCB vs. Eintracht: 10. Pizza-Tag!: