Herkunft: Reihenfolge und einzelne Beispiele (Klausurergebnisse, Pseudoklassen, Variablen in :root, http.cat-Hintergrund, Escape Room) stammen aus Soeren Godes V2 (WiSe 25/26). Im Oktober 2026 umgebaut: fachliche Fehler korrigiert (Eigenschaft statt Attribut, Einheiten, inline-Boxen, position), Float und absolute Positionierung auf je eine Erwaehnung gekuerzt; Kaskade und Spezifitaet, Einheiten, box-sizing, Grid, Media Queries, Variablen mit Dark Mode, Zugaenglichkeit, Live-Demos, Quiz und Aktivphase neu. Vorbereitung und Entscheidungen: WiSe2627/vorbereitung/2026-10-14_vorlesung-css.md Demos: Repo swe1-demos, live unter https://swe1.mylab.th-luebeck.de/web-03/, lokal ueber marp/demos (Symlink). Praesentieren: slides/serve.sh, dann http://localhost:8000/slides/dist/web-03-css.html
- Gestern bei Leif: Versionskontrolle. Diese Woche startet P2 - Letzte Woche haben Sie die Startseite Ihrer Idee als reines HTML gebaut. Heute bekommt sie Stil - Nicht auf dem Titel verweilen, direkt mit der Frage einsteigen
- 3 Minuten, Zurufe. Drei Regeln wollen denselben Button faerben: rot, blau, gruen. Er ist rot. Warum? - Die rote Regel steht zuerst, die gruene zuletzt. Wer "die letzte Regel gewinnt" sagt, tippt auf gruen - Zurufe sammeln, an die Tafel. Nicht aufloesen - Wir kommen am Ende darauf zurueck, dann mit dem Werkzeug, mit dem Sie das selbst herausfinden
- Fuenf Stationen: erst wie eine Regel aussieht und wen sie trifft (1), dann wer gewinnt, wenn sich Regeln streiten (2). Dann wie viel Platz ein Element braucht (3) und wie man Elemente anordnet (4). Am Ende gestalten Sie Ihre eigene Startseite (5) - Station 1: rund 20 Minuten
- Erst ohne CSS: So sah Ihre Startseite letzte Woche aus. Der Browser hat nur seine Standardregeln - Clicker: dieselbe Seite mit CSS. Am HTML hat sich kein Zeichen geaendert - Das ist die Idee von CSS: HTML beschreibt, was etwas ist, CSS, wie es aussieht. Separation of Concerns, steht so auch im Leitfaden fuer P4 - Bekanntes Beispiel: CSS Zen Garden, ein HTML-Dokument mit hunderten Designs
- Sprechweise festlegen: In CSS heissen sie Eigenschaften (properties), in HTML Attribute. Wer das vermischt, sucht spaeter an der falschen Stelle - Ein Block darf beliebig viele Deklarationen haben. Das letzte Semikolon ist optional, setzen Sie es trotzdem, sonst geht die naechste Zeile kaputt, die jemand anhaengt - Kommentare: /* so */. Kein // wie in Java
- Die link-Zeile kennen Sie aus web-02: Grundgeruest, eigener Request im Network-Tab - In der Projektvorlage liegt schon eine style.css unter static/. Dort weiterarbeiten, keine zweite anlegen - Inline-Styles sind im Projekt tabu, ausser JavaScript setzt sie (kommt in JS Teil 2). Grund kommt in Station 2: Sie gewinnen fast immer, und dann wundert man sich - Zum Zeigen: css-werkstatt.html?preset=einbinden hat alle drei Varianten nebeneinander
- Tabelle als Nachschlagewerk, nicht jede Zeile vorlesen. Gleich im Spielplatz ausprobieren - Pseudoklassen: Zustand (hover, focus, checked, visited) oder Position im Baum (first-child, nth-child) - :root ist eine Pseudoklasse fuer das html-Element. Dort stehen spaeter die Variablen
- Beispiel aus der Klausurauswertung, Matrikelnummern erfunden - Warum fuer Stil lieber Klassen: wiederverwendbar, und eine ID gewinnt in Station 2 so hoch, dass man sie spaeter kaum ueberschreiben kann - Klassennamen nach Bedeutung, nicht nach Aussehen: .not-passed statt .rot. Sonst heisst die Klasse rot und die Farbe ist laengst orange
- Das Leerzeichen ist ein Operator. li.passed (ein Element) ist etwas anderes als li .passed (ein .passed irgendwo in einem li). Haeufigster Tippfehler bei Selektoren - Komma: zwei Selektoren, ein Block. Spart Wiederholung - Gelesen wird von rechts nach links: nav a heisst "alle a, die in einem nav stecken"
- Clicker geht neun Selektoren durch, Treffer leuchten im Quelltext und in der Vorschau - Bei jedem Schritt erst fragen: "Was wird gleich leuchten?", dann klicken - Spannend: li:not(.passed) und h1, h2 als Liste - Danach eigene Vorschlaege aus dem Raum eintippen (ins Feld klicken, tippen)
- Frage vorlesen, Finger hoch: 0, 1, 2 oder 3. Clicker: erster Klick loest auf, zweiter holt die naechste - Die Falle ist #aktiv: Raute heisst id, im HTML ist aktiv aber eine Klasse - Vier Fragen reichen, wenn die Zeit knapp ist
- Das C in CSS: Cascading. Mehrere Regeln treffen dasselbe Element, eine setzt sich durch - Station 2: rund 15 Minuten
- Der Browser geht die Stufen von oben nach unten durch und hoert auf, sobald sich die Regeln unterscheiden - Stufe 1 ganz grob: Ihre Regeln schlagen die Standardregeln des Browsers. !important und Inline-Style springen nach vorne. Beides vermeiden - Stufe 2 ist die, die Sie taeglich brauchen. Naechste Folie - Stufe 4 ist eigentlich keine Konkurrenz: Vererbung zieht nur, wenn gar keine Regel das Element trifft
- Zaehlen: IDs, dann Klassen samt Attributen und Pseudoklassen, dann Typen - Verglichen wird von links: eine einzige ID schlaegt jede Menge Klassen. Kein Uebertrag wie beim Rechnen - Das Universal-Zeichen * und Kombinatoren zaehlen nichts. :not() und :is() zaehlen ihr Argument, :where() zaehlt null - Faustregel fuers Projekt: mit Klassen arbeiten, flach bleiben, keine IDs fuer Stil. Dann muss man selten rechnen
- Pro Duell zwei Klicks: erst die Regeln zeigen und tippen lassen, dann den Gewinner aufdecken - Die Farbe im Element ist echt gerendert, nicht behauptet - Acht Duelle: Klasse gegen Typ, Gleichstand (die spaetere gewinnt), ID gegen drei Klassen, Klasse gegen vier Typen, :where() zaehlt null, !important, Inline-Style, Vererbung gegen direkte Regel - Wenn die Zeit knapp ist: nach Duell 4 weiterklicken bis zur naechsten Folie
- Deshalb setzt man Schrift und Textfarbe einmal auf body, nicht auf jeden Absatz - Waere border vererbbar, haette jedes Kind einen eigenen Rahmen. Darum erben Boxen nicht - Formularelemente erben die Schrift nicht von selbst. Darum steht in vielen Stylesheets button, input { font: inherit; }
- height: 200 ohne Einheit: kein Fehler, keine Meldung, die Zeile wird einfach verworfen. Ausser bei 0 braucht jede Laenge eine Einheit. Dazu ein Tippfehler im Eigenschaftsnamen (colour) - Clicker: ein Schritt, zeigt das Pruefergebnis mit drei Problemen - Das Hintergrundbild kommt von http.cat, braucht WLAN - Live in den DevTools zeigen (eigener Browser, z. B. auf der Gaestebuch-Demo): Elements, rechts Styles. Durchgestrichen = verloren gegen eine andere Regel, gelbes Warndreieck = ungueltig. Unter Computed steht der Wert, der am Ende gilt, mit Pfeil zur gewinnenden Regel - Mit Haken im Styles-Panel Regeln an- und ausschalten, Werte live aendern. So probieren Profis
- Handzeichen A oder B, dann aufloesen. Sechs Fragen, vier reichen - Bei der !important-Frage kurz warnen: Wer einmal !important setzt, braucht danach immer mehr davon
- Jedes Element ist ein Rechteck. Wer das verinnerlicht, versteht die meisten Layout-Probleme - Station 3: rund 12 Minuten
- Von innen nach aussen: Inhalt, Innenabstand, Rahmen, Aussenabstand. Genau diese Farben zeigen die DevTools, wenn man ueber ein Element faehrt - Hintergrundfarbe reicht bis zum Rahmen, margin ist immer durchsichtig - Die Stolperfalle: Standardmaessig meint width nur den Inhalt. padding und border kommen obendrauf
- content-box ist ein historischer Standard, border-box rechnet so, wie Menschen denken - 200 + 2 mal 20 + 2 mal 5 = 250. Gleich im Box-Inspektor nachrechnen
- Clicker: width 200, dann padding dazu (die Box waechst), border, margin (Platz aussen), dann border-box (zurueck auf 200), zum Schluss display: inline - Bei inline: width wird ignoriert, vertikaler margin auch. Horizontal schieben padding, border und margin die Nachbarn sehr wohl weg, vertikal ueberlappen sie nur - Typische Elemente: block sind div, p, h1 bis h6, section, ul. Inline sind a, span, strong, em, img
- rem als Standard: Stellt jemand im Browser groessere Schrift ein, waechst die ganze Seite mit. Mit px fuer Schriften geht das kaputt. Das ist eine Frage der Barrierefreiheit - 0 darf ohne Einheit stehen, jede andere Laenge nicht (siehe height: 200 vorhin)
- Keine Farbschreibweise ist "Standard". Hex ist verbreitet, hsl und oklch sind leichter zu variieren - Kontrast pruefen: DevTools zeigen ihn im Farbwaehler an - http.cat liefert zu jedem Statuscode ein Katzenbild, hier 100 Continue. Diesmal mit Einheiten - Google Fonts direkt einbinden schickt die IP-Adresse jedes Besuchers an Google. Das LG Muenchen hat das 2022 als DSGVO-Verstoss gewertet. Datei herunterladen und mit ausliefern
- Zwei Werkzeuge reichen fuer fast alles: Flexbox fuer eine Reihe, Grid fuer Flaechen - Station 4: rund 18 Minuten
- Flex ist eindimensional: eine Reihe oder eine Spalte. Typisch: Navigation, Toolbar, Karte mit Bild und Text, etwas zentrieren - Zentrieren war frueher ein Witz. Heute: display: flex; justify-content: center; align-items: center - flex-direction: column dreht die Achsen. justify-content wirkt dann senkrecht
- Clicker: row, dann justify-content: space-between (Navigation mit Logo links, Links rechts), align-items: center, column, zum Schluss flex-wrap bei schmalem Container - Vor jedem Klick tippen lassen, was passiert - Zum Ueben zuhause: Flexbox Froggy (flexboxfroggy.com)
- Grid legt Zeilen und Spalten zugleich fest. Typisch: Seitenaufbau, Kartenraster, Formulare mit Beschriftung links - fr heisst Anteil am freien Platz: 190px 1fr = feste Seitenleiste, Rest fuer main - grid-template-areas malt das Layout als Text. Die Kinder bekommen grid-area: header usw. - Faustregel: Grid fuer die Seite, Flexbox fuer Dinge in einer Reihe darin
- Clicker: drei gleiche Spalten, 200px 1fr, repeat(auto-fill, minmax(150px, 1fr)), dieselbe Regel bei 420 px (Karten brechen von selbst um, ganz ohne Media Query), dann die Bereiche, dann bei 540 px mit aktiver Media Query. Die Breite laesst sich auch von Hand ziehen - Den letzten Schritt als Ueberleitung nutzen: schmal wird es einspaltig. Das ist responsives Design
- Letzte Woche hiess es bei der viewport-Zeile "Handy: sonst winzig". Hier ist der Grund: Ohne sie tut das Handy so, als waere es ein Desktop, und Media Queries greifen nie - Mobil zuerst, weil die einspaltige Version die einfachere ist. Man fuegt hinzu statt zu entfernen - Live: Gaestebuch-Demo in den DevTools mit Geraete-Modus auf 375 px ziehen
- Wer in alten Tutorials float-Layouts findet: weiterblaettern - absolute: Das Element verlaesst den Fluss, die anderen tun so, als waere es nicht da. Bezugspunkt ist der naechste Vorfahre mit position ungleich static, nicht einfach das Elternelement. Darum setzt man am Eltern-Element oft position: relative - sticky ist das, was Kopfzeilen beim Scrollen oben haelt
- Rund 20 Minuten: Variablen, Zugaenglichkeit, Aktivphase, Aufloesung, Ausblick
- Das ist ein Ausschnitt aus der style.css der Projektvorlage. Sie haben das also schon im Repo - Variablen heissen offiziell Custom Properties. Sie folgen der Kaskade, man kann sie also in einem Bereich ueberschreiben: .warnung { --accent: red; } - Live: System auf Dark Mode umstellen, die Gaestebuch-Demo wechselt mit - Absprache im Team: Palette und Abstaende einmal festlegen, bevor alle losstylen. Spart in P4 Aerger
- Kurz halten, aber einmal gesagt haben. Mit Tab durch die Gaestebuch-Demo gehen: Man sieht immer, wo man ist. Das ist die Fokus-Markierung, die viele wegstylen - Rund acht Prozent der Maenner haben eine Rot-Gruen-Schwaeche - Mehr dazu bei Leif in Benutzerschnittstellen (Di 03.11.)
- Wer die Seite von letzter Woche nicht mehr hat: Die Werkstatt startet mit einer Startseite ohne CSS - Lokal geht genauso: style.css neben die HTML-Datei, link im head - Rumgehen. Typische Fehler: Einheit vergessen, display: flex am Kind statt am Container, Klasse im HTML anders geschrieben als im CSS - Nach 12 Minuten zwei Ergebnisse am Beamer, gern eins in den DevTools aufmachen - Wenn die Zeit knapp ist: 8 Minuten, Punkt 4 streichen
- Mit den Zurufen vom Anfang vergleichen - Jetzt koennen Sie es begruenden: Alle drei Regeln treffen den Button. Die Reihenfolge entscheidet nicht, weil schon die Spezifitaet unterscheidet: 0,2,0 schlaegt 0,1,0 und 0,0,1 - Herausfinden ohne Rechnen: Rechtsklick, Untersuchen, Styles. Oben steht die Gewinnerin, darunter die durchgestrichenen Verliererinnen
- Alles drei laeuft in allen aktuellen Browsern. Erlaubt im Projekt, kein Framework noetig - Nicht Pruefungsstoff, nur damit Sie es erkennen, wenn Sie es sehen - Container Queries passen gut zu Web Components (Mi 04.11.). Sie brauchen ein Eltern-Element mit container-type: inline-size
- Kurz zusammenfassen, nicht nochmal erklaeren - Die eine Sache: Styles-Panel oeffnen, bevor Sie raten
- P2 ist die erste bewertete Abgabe, 100 Punkte. Leifs Termin am Dienstag ist der fachliche Start dazu - Folien und Demos: Lernraum unter Vorlesung Web-Engineering, alle Folien auch unter swe1.mylab.th-luebeck.de/folien - Gleich im Anschluss: Praktikum