Rückblick

Sechs Lektionen, ein Werkzeug: CSS. Wenn du dieses Kapitel im Griff hast, kannst du jede Seite gestalten, die du dir vornimmst – der Rest ist Nachschlagen.

Das kann ich jetzt

Ich kann CSS auf drei Wegen einbinden und begründen, warum die eigene Datei der richtige ist. (4.1)
Ich kann Elemente über Typ, Klasse, id, Nachfahre und Kind gezielt ansprechen. (4.2)
Ich kann vorhersagen, welche Regel gewinnt, wenn mehrere auf dasselbe Element passen. (4.2)
Ich kann erklären, was sich vererbt und was nicht. (4.2)
Ich kann Farben in hsl angeben und wiederkehrende Werte als eigene Werte (--name) ablegen. (4.3)
Ich kann die vier Schichten des Boxmodells benennen und die Gesamtbreite einer Box ausrechnen. (4.4)
Ich weiß, was box-sizing: border-box ändert und warum die Regel an den Anfang gehört. (4.4)
Ich kann entscheiden, ob eine Anordnung Flexbox oder Grid verlangt, und beides aufsetzen. (4.5)
Ich kann eine Seite so bauen, dass sie auf jedem Bildschirm funktioniert – ohne feste Breiten, mit max-width und Media Queries. (4.6)

Gemischte Aufgaben

Aufgabe 1: Wer gewinnt?

<main>
  <p>Erster Absatz</p>
  <p class="hinweis">Zweiter Absatz</p>
  <section>
    <p class="hinweis">Dritter Absatz</p>
  </section>
</main>

p { color: black; }
main p { color: teal; }
.hinweis { color: orange; }
main > p { color: red; }
section .hinweis { color: green; }

a) Sag für jeden der drei Absätze voraus, welche Farbe er bekommt. Schreib dazu, welche Regeln jeweils überhaupt passen.

b) Prüfe deine Vorhersage im Übungsbereich.

c) Beim ersten Absatz passen zwei Regeln mit gleicher Stärke. Welche gewinnt, und warum?

d) Ergänze main { color: purple; }. Ändert sich etwas? Begründe mit dem Wort Vererbung.

<main> <p>Erster Absatz</p> <p class="hinweis">Zweiter Absatz</p> <section> <p class="hinweis">Dritter Absatz</p> </section> </main>

p { color: black; } main p { color: teal; } .hinweis { color: orange; } main > p { color: red; } section .hinweis { color: green; }

Tipp: In welcher Reihenfolge prüfe ich?

Frag der Reihe nach:

Welche Regeln passen überhaupt auf dieses Element?
Ist eine davon stärker? Eine Klasse schlägt jeden Elementnamen, egal wie viele.
Sind zwei gleich stark – wer steht weiter unten?

Lösung. Erfrage das Passwort bei deiner Lehrkraft.

Aufgabe 2: Rechnen und begründen

a) Eine Box hat width: 300px, padding: 16px, border: 2px und margin: 24px. Wie breit ist sie auf dem Bildschirm, und wie viel Platz beansprucht sie insgesamt?

b) Dieselbe Box bekommt zusätzlich box-sizing: border-box. Wie breit ist der Inhaltsbereich jetzt?

c) In einem Stylesheet steht:

.karte {
  width: 400px;
}

Nenne den Nachteil und schreib die Zeile so um, dass die Karte auf einem schmalen Handy nicht überläuft.

d) Was ist an dieser Media Query unklug?

@media (max-width: 30rem) {
  .navigation { flex-direction: column; }
}

Tipp zu d)

Erinnere dich an die Empfehlung mobile first. In welcher Richtung soll man Media Queries schreiben – und was heißt das für max-width gegenüber min-width?

Lösung. Erfrage das Passwort bei deiner Lehrkraft.

Aufgabe 3: Eine Seite fertig gestalten

Im Übungsbereich steht ein fertig ausgezeichnetes HTML – ohne eine einzige CSS-Regel. Gestalte es.

a) Beginne mit den Grundregeln: box-sizing für alle Elemente, eine lesbare Schrift, ein Zeilenabstand um 1.6.

b) Lege in :root mindestens drei eigene Werte an: zwei Farben und einen Abstand. Benutze sie danach überall – im ganzen Stylesheet soll keine Farbe zweimal ausgeschrieben stehen.

c) Der Inhalt soll höchstens 60rem breit und zentriert sein.

d) Die Navigation im header wird eine Reihe mit Abstand zwischen den Punkten und ohne Aufzählungszeichen.

e) Die drei Karten im main werden ein Raster, das von selbst umbricht: so viele Spalten, wie hineinpassen, jede mindestens 14rem breit.

f) Auf schmalen Bildschirmen soll die Navigation untereinander stehen. Schreib die Media Query von schmal nach breit.

Tipp 1: Reihenfolge

Arbeite von außen nach innen und von allgemein nach speziell:

* und body – die Grundlagen
:root – die eigenen Werte
header, nav, main, footer – die Bereiche
.karte – die Einzelheiten
ganz zum Schluss die Media Query

Tipp 2: Die Navigation

Eine Navigation ist eine Liste. Zwei Dinge sind dafür nötig:

nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
  padding: 0;
}

list-style: none nimmt die Punkte weg, padding: 0 die Einrückung, die Listen von Haus aus haben.

Tipp 3: Das Kartenraster

Das ist die eine Zeile aus Lektion 4.5, die du dir merken solltest:

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

<header> <h1>Schulgarten-AG</h1> <nav> <ul> <li><a href="#">Start</a></li> <li><a href="#">Termine</a></li> <li><a href="#">Kontakt</a></li> </ul> </nav> </header> <main> <p>Wir pflegen die Beete hinter der Turnhalle. Mitmachen kann jede und jeder.</p> <div class="karten"> <article class="karte"> <h2>Beete</h2> <p>Umgraben, saeen, giessen.</p> </article> <article class="karte"> <h2>Kraeuter</h2> <p>Ernte fuer die Mensa.</p> </article> <article class="karte"> <h2>Insekten</h2> <p>Wir bauen ein Insektenhotel.</p> </article> </div> </main> <footer> <p>Garten-AG der Gesamtschule Musterstadt</p> </footer>

Lösung. Erfrage das Passwort bei deiner Lehrkraft.

Selbsttest

1. Auf ein Element passen die Regeln p und .hinweis. Welche gewinnt?

{r1{p, weil sie zuerst steht}}

{r1{!.hinweis, weil eine Klasse stärker ist als ein Elementname}}

{r1{die kürzere}}

{r1{beide zur Hälfte}}

{h{Klasse schlägt Elementname – unabhängig von der Reihenfolge.}} {H{Richtig. Erst bei gleicher Stärke entscheidet die Reihenfolge.}}

2. Zwei Regeln sind gleich stark und setzen dieselbe Eigenschaft. Welche gewinnt?

{r2{die erste}}

{r2{!die letzte}}

{r2{die mit dem kürzeren Selektor}}

{r2{keine von beiden}}

{h{Die Kaskade arbeitet die Datei von oben nach unten ab.}} {H{Richtig.}}

3. Was ist der Unterschied zwischen section p und section > p?

{r3{Es gibt keinen.}}

{r3{!Der Pfeil trifft nur direkte Kinder, das Leerzeichen alle Nachfahren.}}

{r3{Der Pfeil trifft alle Nachfahren, das Leerzeichen nur Kinder.}}

{r3{Der Pfeil ist die stärkere Regel.}}

{h{Es ist genau der Unterschied zwischen Kind und Nachfahre aus Kapitel 3.}} {H{Richtig – und an der Stärke ändert der Pfeil nichts.}}

4. Eine Box hat width 300px, padding 16px und border 2px, ohne border-box. Wie breit ist sie sichtbar?

{z{336}}

{h{300 plus zweimal 16 plus zweimal 2.}} {H{Richtig.}}

5. Wofür nimmt man Flexbox, wofür Grid? Wähle die richtigen Aussagen.

{c1{!Flexbox ordnet in eine Richtung an.}}

{c1{!Grid denkt in Zeilen und Spalten.}}

{c1{!Eine Navigation ist ein Fall für Flexbox.}}

{c1{Grid funktioniert nur mit fester Spaltenzahl.}}

{c1{Beides lässt sich nicht kombinieren.}}

{h{Faustregel: eine Richtung oder zwei?}} {H{Richtig – und ein Grid-Feld darf innen durchaus eine Flexbox sein.}}

6. Welche Zeile macht ein Raster, das von selbst umbricht?

{r4{grid-template-columns: 3;}}

{r4{!grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));}}

{r4{display: grid-wrap;}}

{r4{columns: auto;}}

{h{Gesucht ist: so viele Spalten wie hineinpassen, jede mit Mindestbreite.}} {H{Richtig.}}

7. Warum schreibt man Media Queries von schmal nach breit?

{r5{Weil max-width nicht überall funktioniert.}}

{r5{!Weil dann die einfache Darstellung die Grundregel ist und Ergänzungen nur dort greifen, wo Platz da ist.}}

{r5{Weil Handys älter sind als Bildschirme.}}

{r5{Weil min-width schneller ist.}}

{h{Was passiert, wenn ein Gerät die Media Query gar nicht auswertet? Welche Darstellung bleibt dann übrig?}} {H{Richtig – das ist der Kern von mobile first.}}

8. Wo legt man eigene Werte wie eine Hausfarbe sinnvollerweise an?

{r6{in jeder Regel neu}}

{r6{!einmal in :root und danach überall mit var()}}

{r6{im HTML als Attribut}}

{r6{in einer Media Query}}

{h{Sie sollen für die ganze Seite gelten.}} {H{Richtig – dann ändert man die Farbe später an genau einer Stelle.}}