2. Unterrichtsblock: Farben, Rahmen und Box-Modell

Aufgabe 1 – Drei Schreibweisen, eine Farbe

Zeit: ca. 7 Minuten

Dieselbe Farbe lässt sich auf mehrere Arten schreiben. Du findest heraus, welche Zahlen hinter dem Namen tomato stecken.

Lege farben.html an (Inhalt des body, das style-Element gehört in den head):

<p class="kasten a">Farbname</p>
<p class="kasten b">HEX</p>
<p class="kasten c">RGB</p>

1. Schreibe Regeln für .kasten (padding: 20px; und color: white;) und gib .a die Hintergrundfarbe tomato.
2. Öffne die Entwicklerwerkzeuge (F12), klicke den ersten Absatz an und klicke in der Regel auf das kleine Farbquadrat neben tomato. Lies den HEX-Wert und die RGB-Zahlen ab.
3. Trage die HEX-Schreibweise bei .b und die RGB-Schreibweise bei .c ein. Sage voraus: Wie sehen die drei Kästen aus? Prüfe es.
4. Setze bei .c den ersten RGB-Wert (Rot) auf 0. Sage voraus, was passiert, und prüfe es.

Kontrolle: Alle drei Kästen sind gleich rot. Ohne Rotanteil wird der dritte Kasten dunkel blaugrün.

Der vierte Kasten (.d) zeigt Schritt 4. tomato ist #ff6347, also rgb(255, 99, 71): Rot 255 (ff), Grün 99 (63), Blau 71 (47). Ohne Rot bleiben nur Grün und Blau übrig, das ergibt ein dunkles Blaugrün.

Aufgabe 2 – Wie breit ist die Box?

Zeit: ca. 8 Minuten

Eine Box hat width: 300px;, padding: 20px;, border: 5px solid darkslategray; und margin: 10px;. Rechne zuerst, dann prüfe.

1. Berechne, wie breit die Box samt Innenabstand und Rahmen ist, und wie viel Platz sie mit dem Außenabstand in der Zeile belegt.
2. Lege box-breite.html an und prüfe die Rechnung. Fahre dazu in den Entwicklerwerkzeugen (Reiter „Elemente“) mit der Maus über das Element: Der Browser färbt Inhalt, Innenabstand, Rahmen und Außenabstand ein und zeigt die Maße.
3. Füge box-sizing: border-box; hinzu. Wie breit ist die Box jetzt, und wie viel Platz belegt sie?

Kontrolle: Ohne border-box sind es 350 px und 370 px, mit border-box 300 px und 320 px.

Aufgabe 3 – Tourenkarten für die Projektseite

Zeit: ca. 12 Minuten

Auf deiner Projektseite sollen drei Touren als Karten erscheinen. Alle Farben schreibst du ab jetzt als HEX-Wert (#rrggbb) oder hsl(), keine Farbnamen mehr.

Ergänze in index.html (zum Beispiel unter deiner Einleitung):

<h2>Unsere Touren</h2>
<div class="tour">
  <h3>Bergsee-Runde</h3>
  <p>Gehzeit: 2 Stunden</p>
  <p>Schwierigkeit: leicht</p>
</div>
<div class="tour schwer">
  <h3>Gipfeltour</h3>
  <p>Gehzeit: 5 Stunden</p>
  <p>Schwierigkeit: schwer</p>
</div>
<div class="tour">
  <h3>Klamm-Wanderung</h3>
  <p>Gehzeit: 1 Stunde</p>
  <p>Schwierigkeit: mittel</p>
</div>

1. Gestalte .tour in style.css: Hintergrundfarbe als HEX-Wert, Rahmen 2px solid in einer dunkleren Farbe, abgerundete Ecken (border-radius), Innenabstand 16 px und 20 px Außenabstand nach unten.
2. Die schwere Tour soll auffallen. Gib ihr über eine zweite Klasse schwer einen dicken roten linken Rahmen (border-left: 8px solid crimson;).
3. Verschiebe die Regel .schwer über die Regel .tour. Sage voraus, was mit dem linken Rand passiert, prüfe es und erkläre es in einem Satz.

Kontrolle: Drei Karten mit Abstand untereinander, nur die mittlere hat links einen dicken roten Rand. Steht .schwer über .tour, sieht der linke Rand wieder aus wie die anderen, weil .tour später kommt und bei gleichem Rang gewinnt.

Steht .schwer über .tour, überschreibt .tour (border: 2px solid ...) den linken Rand wieder. Beide Selektoren sind Klassen und haben denselben Rang, deshalb entscheidet die Reihenfolge. Die vollständige Datei steht unter Aufgabe 6.

Aufgabe 4 – Abstände ohne Überraschung

Zeit: ca. 8 Minuten

Zwischen zwei Absätzen ist margin-bottom: 30px und margin-top: 20px eingestellt. Sage voraus, wie groß der Abstand zwischen den Absätzen ist.

abstaende.html (Inhalt des body):

<p class="oben">Absatz oben</p>
<p class="unten">Absatz unten</p>

1. Schreibe deine Vorhersage auf: 20 px, 30 px oder 50 px? Gib beiden Absätzen eine Hintergrundfarbe, damit du die Lücke siehst, und prüfe die Vorhersage. Miss den Abstand mit den Entwicklerwerkzeugen.
2. Stelle margin-top des unteren Absatzes auf 40 px. Sage voraus, wie groß der Abstand jetzt ist, und prüfe es.
3. Gib beiden Absätzen zusätzlich padding: 10px;. Wird dadurch der Abstand zwischen den farbigen Flächen größer, kleiner oder bleibt er gleich?

Kontrolle: Erst 30 px, dann 40 px: Die beiden Außenabstände werden nicht addiert, es gilt der größere. Das padding macht die Flächen höher, der Abstand dazwischen bleibt.

Aufgabe 5 – Das Gerüst der Projektseite

Zeit: ca. 15 Minuten

Deine Projektseite hat bisher header, main, einen Abschnitt section und footer. Jetzt bekommen diese Bereiche Farben und Abstände.

1. Lege am Anfang von style.css die Regel * { box-sizing: border-box; } an.
2. header: dunkle Hintergrundfarbe als HEX-Wert, weiße Schrift, padding: 20px;, Text zentriert.
3. Am Rand der Seite siehst du einen weißen Streifen. Finde mit den Entwicklerwerkzeugen heraus, woher er kommt, und entferne ihn.
4. main bekommt 20 px Innenabstand. Der section mit den Quellen bekommt oben eine Linie (border-top) und darüber 20 px Außenabstand.
5. footer: hellere Hintergrundfarbe, border-top, 15 px Innenabstand, Text zentriert.
6. Die Links in nav bekommen weiße Schrift, keine Unterstreichung und padding: 0 12px;, damit sie nicht aneinander kleben.

Tipp: Der weiße Streifen ist der Standard-Außenabstand von body (8 px). Mit margin: 0 am body verschwindet er.

Kontrolle: Der Kopfbereich geht bis an den Rand des Fensters. Es gibt keinen weißen Streifen mehr, und die Navigationslinks haben sichtbar Platz zueinander.

Die weiße Kante ist der Standard-Außenabstand des body von 8 px. Die vollständige Datei steht unter Aufgabe 6.

Aufgabe 6 – Eine Palette aus einem Farbton

Zeit: ca. 10 Minuten

Gute Farbpaletten bestehen aus einem Farbton in verschiedenen Helligkeiten. Mit hsl(farbton, sättigung, helligkeit) geht das besonders einfach: Du änderst nur die dritte Zahl.

1. Ersetze alle Farben in style.css durch hsl()-Werte mit demselben Farbton, zum Beispiel 210 (Blau): Kopfbereich Helligkeit 25 %, Rahmen und Linien 45 %, Tourenkarten 92 %, Seitenhintergrund 97 %. Sättigung 50 %.
2. Die Textfarbe der Seite ist ein sehr dunkles hsl(210, 30%, 15%).
3. Schreibe einen Kommentar, in dem steht, wie man die ganze Seite grün macht. Probiere es aus: Ändere in allen Werten nur den Farbton, zum Beispiel auf 140.
4. Bleibt der Text überall gut lesbar? Prüfe vor allem die weiße Schrift im Kopfbereich.

Kontrolle: Die Seite ist komplett blau, nach der Änderung der ersten Zahl komplett grün. Kein HEX-Wert und kein Farbname ist übrig.

Fertige Fassung der style.css mit Farbton 210. Für Grün ersetzt du überall 210 durch 140.

Bonusaufgabe 1 – Durchsichtig: rgba oder opacity?

Es gibt zwei Wege, etwas durchsichtig zu machen, und sie verhalten sich unterschiedlich. rgba(r, g, b, a) ist wie rgb(), hat aber einen vierten Wert für die Deckkraft (0 bis 1). opacity gilt für das ganze Element.

Lege bonus-transparenz.html an: ein div mit dunkelgrünem Hintergrund, goldenem Rahmen und 40 px Innenabstand, darin ein Absatz mit großer Schrift (28 px) und 16 px Innenabstand.

1. Gib dem Absatz background-color: rgba(255, 255, 255, 0.6);. Sage voraus, ob der Text ebenfalls durchsichtig wird, und prüfe es.
2. Ersetze die Regel durch background-color: white; und opacity: 0.6;. Was ist jetzt anders?
3. Formuliere in einem Satz, wann du welche Variante nimmst.

Kontrolle: Mit rgba bleibt der Text schwarz und gut lesbar, nur der Hintergrund ist durchsichtig. Mit opacity wird auch der Text blass.

rgba für durchscheinende Hintergründe, opacity nur, wenn das ganze Element samt Inhalt verblassen soll.

Bonusaufgabe 2 – Ein rundes Abzeichen

Mit border-radius: 50% wird aus einem Quadrat ein Kreis. Daraus baust du ein Abzeichen für eine Wandertour.

1. Lege bonus-abzeichen.html an: ein div mit 120 px Breite und Höhe, box-sizing: border-box, Hintergrund dunkelgrün, weiße zentrierte Schrift (24 px) und dem Text „1000 m“.
2. Mache einen Kreis daraus und gib ihm einen goldenen Rahmen 8px double gold.
3. Der Text klebt oben im Kreis. Rücke ihn mit padding-top in die Mitte. Rechne vorher, welcher Wert ungefähr passt.

Kontrolle: Ein Kreis mit doppelter goldener Linie, der Text liegt etwa in der Mitte. Mit border-radius: 20px würde daraus ein Quadrat mit runden Ecken.