Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu02:theorie:a_css-intro [2026/02/01 23:37] – gkoch
+++ de:modul:m291:learningunits:lu02:theorie:a_css-intro [2026/02/02 01:29] (aktuell) – gkoch
@@ Zeile 4: / Zeile 4: @@
 **Ziel von LU02:** Sie bringen Ihr Projekt „Landingpage Alarado“ optisch näher ans Figma-Design, indem Sie
 \\
-) die Schrift (Google Font) einbinden, 2) Designwerte als CSS-Variablen definieren und 3) ein erstes responsives Verhalten via Media Query umsetzen.
+  - die Schrift (Google Font) einbinden,
+  - Designwerte als CSS-Variablen definieren und
+  - mit Media Queries das Responsive-Layout für Mobile umsetzen.
 </WRAP>
 ==== Lernziele ====
-  * Sie können eine Google Font per ''<link>'' einbinden und sinnvoll als ''font-family'' verwenden.
+  * Sie können eine Google Font per ''<link>'' einbinden und als ''font-family'' verwenden.
-  * Sie verstehen den Unterschied zwischen ''px'', ''em'' und ''rem'' und setzen Schriftgrössen konsistent um.
+  * Sie verstehen ''px'', ''em'' und ''rem'' und setzen Schriftgroessen konsistent um.
-  * Sie können CSS-Variablen in '':root'' definieren und mit ''var(...)'' wiederverwenden.
+  * Sie können CSS-Variablen in '':root'' definieren und mit ''var(...)'' einsetzen.
-  * Sie verstehen die CSS-**Cascade** (Reihenfolge/Überschreiben/Vererbung).
+  * Sie verstehen die CSS-**Kaskade** (Vererbung, Spezifität, Reihenfolge).
   * Sie können Media Queries für Responsive Design nutzen und mit DevTools testen.
 ----
-===== A) Fonts im Web =====
+===== 1) Fonts im Web =====
+{{:de:modul:m291:learningunits:lu02:theorie:jon-tyson-x5bnzeywcug-unsplash_700.jpg?nolink&400|}}
-==== A1) Schnellstart: Google Fonts via CDN ====
+==== Google Fonts via CDN ====
-In vielen Projekten werden Fonts schnell über ein CDN eingebunden (z.B. Google Fonts) – das ist praktisch für Prototypen und Schulprojekte.
+In vielen Projekten werden Fonts schnell über ein CDN eingebunden (z.B. Google Fonts). Das ist praktisch für Schulprojekte und schnelle Prototypen.
-**Typischer Aufbau im ''<head>''** (Performance-Tipp: ''preconnect''):
+<WRAP center round box 80%>
+**Typischer Aufbau im ''<head>''** (hier mit **Poppins**):
 <code html>
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet" />
+<link
+  href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+  rel="stylesheet"
+/>
 </code>
+</WRAP>
+<WRAP center round box 80%>
 **Dann im CSS verwenden:**
 <code css>
@@ Zeile 34: / Zeile 43: @@
 }
 </code>
+</WRAP>
-<WRAP center round box 80%>
+<WRAP center round tip 70%>
-**Hinweis zur Praxis:** In professionellen Projekten werden Fonts häufig **lokal** im Projekt gespeichert (Datenschutz/Performance/Offline-Fähigkeit). Für dieses Modul genügt zu Beginn das Einbinden via ''<link>''.
+**Praxis-Hinweis:** In professionellen Projekten werden Fonts oft **lokal** gespeichert (Datenschutz, Performance, Offline-Fähigkeit). Für dieses Modul genügt zu Beginn das Einbinden via ''<link>''. ((CDN-Fonts sind bequem, aber Sie sind abhängig von einem externen Dienst.))
 </WRAP>
-==== A2) Besser in der Praxis: Fonts lokal speichern (kurz) ====
+==== Fonts lokal speichern ====
-Mit ''@font-face'' können Sie eine Schrift von Ihrer eigenen Projekt-URL laden und einen Namen vergeben. :contentReference[oaicite:0]{index=0}
+Wenn Fonts lokal im Projekt liegen, werden sie mit ''@font-face'' eingebunden.
+<WRAP center round box 80%>
 <code css>
 @font-face {
@@ Zeile 50: / Zeile 61: @@
 }
 </code>
+</WRAP>
-==== A3) Wichtige Font-Eigenschaften (Repetition) ====
+((Für lokale Fonts brauchen Sie die Font-Dateien im Projekt, idealerweise ''woff2''.))
-  * ''font-family'': Schrift-Familie (immer mit Fallbacks arbeiten, z.B. ''sans-serif'')
-  * ''font-weight'': Dicke (z.B. 400 normal, 700 bold – nicht jede Schrift hat alle Stufen) :contentReference[oaicite:1]{index=1}
+==== Wichtige Font-Eigenschaften ====
-  * ''font-style'': normal/italic (oblique selten sinnvoll) :contentReference[oaicite:2]{index=2}
+  * ''font-family'': Schriftfamilie mit Fallback (z.B. ''sans-serif'')
-  * ''text-transform'': Darstellung (uppercase/lowercase/capitalize) – gehört zur Präsentation, nicht zum Inhalt :contentReference[oaicite:3]{index=3}
+  * ''font-weight'': Schriftschnitt (400 normal, 700 bold) ((Nicht jede Font bietet jede Weight-Stufe.))
-  * ''line-height'': Zeilenhöhe (Best Practice: **ohne Einheit**, z.B. 1.4)
+  * ''font-style'': normal oder italic
+  * ''text-transform'': Darstellung (z.B. ''uppercase'') ((Der Inhalt bleibt gleich, nur die Darstellung ändert sich.))
+  * ''line-height'': Zeilenhöhe (Best Practice: **einheitenlos**, z.B. ''1.4'')
+----
-==== A4) Einheiten bei Fonts: px vs em vs rem ====
+==== Einheiten bei Schriftgroessen ====
-  * **px** = absolute Einheit (kann bei Accessibility/Zoom/Default-Einstellungen unflexibler sein)
-  * **em** = relativ zur Schriftgrösse des *Eltern-Elements*
-  * **rem** = relativ zur Schriftgrösse des ''<html>'' (Root) – dadurch konsistenter im ganzen Projekt :contentReference[oaicite:4]{index=4}
 <WRAP center round box 80%>
-**Best Practice (für dieses Modul):**
+**Wichtig:** Bei Schriftgroessen geht es nicht nur um „schön“, sondern auch um **Skalierung, Wartbarkeit und Accessibility**.
 \\
-- Nutzen Sie für Schriftgrössen bevorzugt **rem**.
+Viele Menschen nutzen Browser-Zoom oder haben eine grössere Standard-Schrift eingestellt.
-\\
-- Nutzen Sie für ''line-height'' einen **einheitenlosen Wert** (z.B. 1.4).
 </WRAP>
+=== px ===
+  * ''px'' ist eine „fixe“ Design-Einheit: ''16px'' bleibt rechnerisch 16px.
+  * Vorteil: direkt und einfach.
+  * Nachteil: In grossen Projekten wird es schnell unübersichtlich, weil Anpassungen an vielen Stellen nötig werden.
+((Browser-Zoom vergrössert zwar alles. Trotzdem ist ''px'' oft weniger flexibel, wenn Sie ein Designsystem skalieren oder mehrere Breakpoints sauber pflegen wollen.))
+<WRAP center round box 80%>
+<code css>
+h1 { font-size: 64px; }
+p  { font-size: 18px; }
+</code>
+</WRAP>
+=== em ===
+  * ''1em'' entspricht der **berechneten Schriftgroesse** (''font-size'') des aktuellen Elements.
+  * ''em'' wirkt wie ein Faktor: ''2em'' ist doppelt so gross wie die Schriftgroesse des Eltern-Elements.
+((Historisch stammt „em“ aus der Typografie. In CSS ist ''em'' eine Recheneinheit: 1em = aktuelle ''font-size''.))
+<WRAP center round box 80%>
+<code css>
+body { font-size: 16px; }  /* Basis */
+h1   { font-size: 2em; }   /* 2 × 16px = 32px */
+</code>
+</WRAP>
+**Die typische EM-Falle**
+Wenn mehrere Eltern-Elemente die Schrift bereits verändern, multipliziert sich der Effekt:
+<WRAP center round box 80%>
+<code css>
+body { font-size: 1.2em; }  /* 1.2 × 16px = 19.2px */
+div  { font-size: 1.3em; }  /* 1.3 × 19.2px = 24.96px */
+h1   { font-size: 2em; }    /* 2 × 24.96px = 49.92px */
+</code>
+</WRAP>
+((Darum ist ''em'' für globale Typografie manchmal schwerer zu kontrollieren, wenn viel verschachtelt wird.))
+**Wann ist em sinnvoll**
+  * Für Proportionen innerhalb einer Komponente: Padding, Icon-Grössen, Abstände, die mit dem Text mitwachsen sollen.
+<WRAP center round box 80%>
+<code css>
+button {
+  font-size: 1rem;
+  padding: 0.8em 1.2em; /* wächst mit der Button-Schrift */
+}
+</code>
+</WRAP>
+=== rem ===
+  * ''1rem'' ist relativ zur Schriftgroesse des Root-Elements ''html''.
+  * Vorteil: bleibt konsistent, egal wie tief ein Element verschachtelt ist.
+<WRAP center round box 80%>
+<code css>
+html { font-size: 16px; }
+h1   { font-size: 4rem; }      /* 64px */
+p    { font-size: 1.125rem; }  /* 18px */
+</code>
+</WRAP>
+((Mit ''rem'' vermeiden Sie „Schriftgroessenvermehrung“ durch verschachtelte Elemente.))
+==== Empfehlung für dieses Modul ====
+  * Für Schriftgroessen überwiegend **rem** verwenden.
+  * **em** gezielt innerhalb von Komponenten einsetzen.
+  * **px** sparsam einsetzen, z.B. für 1px Linien oder sehr feine Details.
+==== line-height ====
+Setzen Sie ''line-height'' möglichst **einheitenlos**, z.B.:
+<WRAP center round box 80%>
+<code css>
+body { line-height: 1.4; }
+</code>
+</WRAP>
+((Einheitenlose ''line-height'' skaliert automatisch mit der Schriftgroesse.))
 ----
-===== B) CSS-Variablen (Custom Properties) =====
+===== 2) CSS-Variablen =====
-==== B1) Was sind CSS-Variablen? ====
+==== Was sind CSS-Variablen ====
-CSS-Variablen (korrekt: Custom Properties) sind benannte Werte, die Sie **einmal zentral** definieren und dann überall mit ''var(...)'' verwenden. Das spart Copy/Paste und macht Anpassungen viel einfacher. :contentReference[oaicite:5]{index=5}
+CSS-Variablen sind benannte Werte, die Sie einmal zentral definieren und dann überall wiederverwenden.
-**Beispiel:**
+<WRAP center round box 80%>
 <code css>
 :root {
   --primary: #263fa9;
   --text: #223344;
+  --h1-size: 4rem;
 }
-body {
-  color: var(--text);
+body { color: var(--text); }
-}
+button { background: var(--primary); }
-button {
+h1 { font-size: var(--h1-size); }
-  background: var(--primary);
-}
 </code>
+</WRAP>
-==== B2) Warum ist das nützlich? ====
+==== Warum lohnt sich das ====
-  * **Wiederverwendbarkeit**: Farben/Grössen müssen nicht überall kopiert werden. :contentReference[oaicite:6]{index=6}
+  * **Wiederverwendbarkeit:** weniger Copy/Paste, weniger Fehler
-  * **Wartbarkeit**: Eine Änderung in '':root'' wirkt im ganzen Projekt. :contentReference[oaicite:7]{index=7}
+  * **Wartbarkeit:** 1 Änderung in '':root'' wirkt im ganzen Projekt
-  * **Semantik**: ''--main-text-color'' ist verständlicher als ''#223344''. :contentReference[oaicite:8]{index=8}
+  * **Lesbarkeit:** Namen sind verständlicher als zufällige Hex-Zahlen
-  * **Reagiert auf Media Queries und DOM** (im Gegensatz zu reinen Preprocessor-Variablen). :contentReference[oaicite:9]{index=9}
 <WRAP center round box 80%>
-**Vergleich zu Print-Design (z.B. InDesign):**
+**Vergleich zu Print-Design**
 \\
-CSS-Variablen sind ähnlich wie **Absatz-/Zeichenstile** oder ein **Designsystem**: Sie definieren Regeln einmal zentral und wenden sie überall an.
+CSS-Variablen funktionieren ähnlich wie Absatz- und Zeichenstile: Sie definieren Werte zentral und wenden sie konsistent an.
 </WRAP>
 ----
-===== C) CSS Cascade (Kaskade) – kurz & wichtig =====
+===== 3) CSS Cascade =====
-Die Kaskade bestimmt, **welche CSS-Regel am Ende gewinnt**.
+{{:de:modul:m291:learningunits:lu02:theorie:ezgi-kimball-jg8jcmefhdg-unsplash_700.jpg?nolink&500|}}
+\\
+//Viele CSS-Regeln funktionieren nach dem Prinzip "Wasserfall" -> Styles, die für Elemente ganz "oben" im HTML definiert wurden, vererben sich an Elemente weiter "unten" in der HTML-Struktur (gemeint sind Kinder-Elemente)//
-==== C1) Grundprinzip ====
+<WRAP center round box 80%>
-  * Viele Eigenschaften werden **vererbt** (z.B. ''color'', ''font-*'', ''line-height'', ''text-transform''). :contentReference[oaicite:10]{index=10}
+**Was ist die Kaskade**
-  * Andere werden **nicht vererbt** (z.B. viele ''background-*'' Eigenschaften). :contentReference[oaicite:11]{index=11}
+\\
-  * Wenn Sie eine Eigenschaft «weiter innen» oder «später» neu setzen, **überschreiben** Sie nur diese Eigenschaft – der Rest wird weiter vererbt. :contentReference[oaicite:12]{index=12}
+Die CSS-Kaskade entscheidet, welche CSS-Regel am Ende wirklich angewendet wird, wenn mehrere Regeln dasselbe Element betreffen.
+</WRAP>
-**Mini-Beispiel:**
+==== Vererbung ====
+Einige Eigenschaften werden von Eltern an Kinder **vererbt**.
+  * Häufig vererbt: ''color'', ''font-*'', ''line-height'', ''text-transform''
+  * Meist nicht vererbt: ''background-*'', ''margin/padding'', ''border'', ''width/height'', ''display''
+<WRAP center round box 80%>
 <code css>
-body { color: #223344; }
+body {
-p { color: #223344; }
+  font-family: "Poppins", sans-serif;
-p span { color: #263fa9; } /* überschreibt nur die Farbe im span */
+  color: #223344;
+  line-height: 1.4;
+}
 </code>
+</WRAP>
-==== C2) Reihenfolge, die Sie sich merken sollen ====
+==== Überschreiben ====
-  - Spezifischere Selektoren gewinnen meist gegen allgemeine.
+Wenn zwei Regeln dieselbe Eigenschaft setzen, gilt diese Reihenfolge:
-  - Bei gleicher Spezifität gewinnt die **Regel, die später im CSS steht**.
-  - Media Queries wirken wie „zusätzliche Regeln“, die nur aktiv sind, wenn die Bedingung stimmt.
+  - **Wichtigkeit:** ''!important'' gewinnt ((Nur im Ausnahmefall verwenden.))
+  - **Spezifität:** ID schlägt Klasse, Klasse schlägt Element
+  - **Reihenfolge:** bei gleicher Spezifität gewinnt die spätere Regel
+<WRAP center round box 80%>
+<code css>
+a { color: black; }
+.menu a { color: gray; }
+a.active { color: blue; }
+#special a { color: red; }
+</code>
+</WRAP>
+==== Reihenfolge im CSS ====
+Bei gleicher Spezifität gewinnt die Regel, die später im CSS steht.
+<WRAP center round box 80%>
+<code css>
+.menu a { color: gray; }
+.menu a { color: green; } /* gewinnt, weil später */
+</code>
+</WRAP>
+Für ein vertieftes Verständnis schauen Sie sich diese interaktive Darstellung an:
+[[https://2019.wattenberger.com/blog/css-cascade|CSS Cascade]]
 ----
-===== D) Media Queries & Responsive Design =====
+===== 4) Media Queries und Responsive Design =====
+{{:de:modul:m291:learningunits:lu02:theorie:media-queries.webp| Responsive Media Queries: Desktop, Tablet, Mobile}}
-==== D1) Was macht eine Media Query? ====
+==== Was macht eine Media Query ====
-Media Queries erlauben, dass sich das Layout an verschiedene Bildschirmgrössen anpasst, ohne den Inhalt zu ändern – nur die Darstellung wird angepasst. :contentReference[oaicite:13]{index=13}
+Media Queries passen die Darstellung an verschiedene Bildschirmbreiten an. Der Inhalt bleibt gleich, nur das Layout ändert sich.
-==== D2) Breakpoints: nach Inhalt, nicht nach Geräten ====
+==== Breakpoints ====
-Setzen Sie Breakpoints dann, wenn Ihr Layout **„kaputt“** aussieht – nicht weil ein bestimmtes Handy angeblich 390px breit ist. :contentReference[oaicite:14]{index=14}
+Ein Breakpoint ist eine Breite, bei der Sie das Layout anpassen, weil es sonst nicht mehr sauber wirkt.
-==== D3) Beispiel aus unserem Projekt ====
+<WRAP center round box 80%>
-Unser Desktop-Layout ist 2-spaltig (Text links, Bild rechts).
-Auf Mobile wird es 1-spaltig, mit dem Bild zuerst:
 <code css>
+@media (width < 1024px) { ... }
+</code>
+</WRAP>
+Typische Hinweise, dass ein Breakpoint nötig ist:
+  * Elemente überlappen oder stossen sich
+  * Navigation passt nicht mehr
+  * 2 Spalten werden zu eng
+  * horizontales Scrollen entsteht
+<WRAP center round tip 70%>
+**Merksatz:** Ein Breakpoint ist ein Layout-Umbruchpunkt, nicht ein „Handy-Mass“.
+</WRAP>
+==== Beispiel aus unserem Projekt ====
+Desktop: Text links, Bild rechts.
+Mobile: Bild oben, Text darunter.
+<WRAP center round box 80%>
+<code css>
+#hero-section { flex-direction: row; }
 @media screen and (width < 1024px) {
-  #hero-section {
+  #hero-section { flex-direction: column-reverse; }
-    flex-direction: column-reverse; /* Bild oben, Text unten */
-  }
 }
 </code>
+</WRAP>
-==== D4) Media Queries und Kaskade ====
+==== Media Queries und Kaskade ====
-  * Innerhalb der Media Query überschreiben Sie **nur** die Eigenschaften, die sich ändern sollen.
+Media Queries folgen denselben Regeln wie normales CSS:
-  * Wenn ein Selektor gleich bleibt (z.B. ''#hero-section''), gewinnt bei aktiver Media Query die Regel, die **später** kommt (also im ''@media''-Block).
+  * Bei aktivem Breakpoint überschreiben Sie nur die Eigenschaften, die sich ändern.
+  * Bei gleicher Spezifität gewinnt die Regel, die später kommt.
 ----
-===== E) Responsive Testing mit DevTools =====
+===== 5) Responsive Testing mit DevTools =====
+{{:de:modul:m291:learningunits:lu02:theorie:screenshot_2026-02-02_at_00.23.31.png?direct&1100| Screenshot Chromebrowser mit Dev-Tools }}
   * Öffnen Sie DevTools (Chrome/Edge: F12)
-  * Aktivieren Sie den **Device Toolbar** (Handy/Tablet Symbol)
+  * Aktivieren Sie Device Toolbar (Handy/Tablet Symbol)
   * Testen Sie:
-    - Breitenwechsel über/unter **1024px**
+    - Breitenwechsel über/unter 1024px
-    - verschiedene Presets (z.B. iPhone, iPad)
+    - Presets (z.B. iPhone, iPad)
-    - Landscape/Portrait
+    - Hoch-/Querformat
-  * Prüfen Sie auch:
+  * Prüfen Sie:
-    - ob Elemente verschwinden/überlappen
+    - Überlappungen oder abgeschnittene Bereiche
-    - ob Text zu klein/gross wirkt
+    - horizontales Scrollen
-    - ob es horizontales Scrollen gibt (meist ein Zeichen für zu grosse Breiten)
+    - Lesbarkeit der Schrift
+<WRAP center round box 80%>
+**Praxis-Tipp**
+\\
+Wenn etwas nicht greift: DevTools → „Styles“ öffnen und schauen, welche Regel durchgestrichen ist. Das ist Kaskade in Aktion.
+</WRAP>