de:modul:m291:learningunits:lu02:theorie:a_css-intro

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Nächste Überarbeitung		 Vorhergehende Überarbeitung
de:modul:m291:learningunits:lu02:theorie:a_css-intro [2026/02/01 21:51] – angelegt gkochde:modul:m291:learningunits:lu02:theorie:a_css-intro [2026/02/02 01:29] (aktuell) – gkoch
Zeile 1: Zeile 1:
-====== CSS: Cascading Style Sheets ====== +====== LU02: Fonts, CSS-Variablen, Cascade & Media Queries ======
-Was heisst Kaskade etc.+
  
 +<WRAP center round box 80%>
 +**Ziel von LU02:** Sie bringen Ihr Projekt „Landingpage Alarado“ optisch näher ans Figma-Design, indem Sie
 +\\
 +  - 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 als ''font-family'' verwenden.
 +  * Sie verstehen ''px'', ''em'' und ''rem'' und setzen Schriftgroessen konsistent um.
 +  * Sie können CSS-Variablen in '':root'' definieren und mit ''var(...)'' einsetzen.
 +  * Sie verstehen die CSS-**Kaskade** (Vererbung, Spezifität, Reihenfolge).
 +  * Sie können Media Queries für Responsive Design nutzen und mit DevTools testen.
  
 +----
 +
 +===== 1) Fonts im Web =====
 +{{:de:modul:m291:learningunits:lu02:theorie:jon-tyson-x5bnzeywcug-unsplash_700.jpg?nolink&400|}}
 +
 +==== Google Fonts via CDN ====
 +In vielen Projekten werden Fonts schnell über ein CDN eingebunden (z.B. Google Fonts). Das ist praktisch für Schulprojekte und schnelle Prototypen.
 +
 +<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: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>
 +body {
 +  font-family: "Poppins", sans-serif;
 +}
 +</code>
 +</WRAP>
 +
 +<WRAP center round tip 70%>
 +**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>
 +
 +==== Fonts lokal speichern ====
 +Wenn Fonts lokal im Projekt liegen, werden sie mit ''@font-face'' eingebunden.
 +
 +<WRAP center round box 80%>
 +<code css>
 +@font-face {
 +  font-family: "Poppins";
 +  src: url("./fonts/Poppins-Regular.woff2") format("woff2");
 +  font-weight: 400;
 +  font-style: normal;
 +}
 +</code>
 +</WRAP>
 +
 +((Für lokale Fonts brauchen Sie die Font-Dateien im Projekt, idealerweise ''woff2''.))
 +
 +==== Wichtige Font-Eigenschaften ====
 +  * ''font-family'': Schriftfamilie mit Fallback (z.B. ''sans-serif'')
 +  * ''font-weight'': Schriftschnitt (400 normal, 700 bold) ((Nicht jede Font bietet jede Weight-Stufe.))
 +  * ''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'')
 +
 +----
 +
 +==== Einheiten bei Schriftgroessen ====
 +
 +<WRAP center round box 80%>
 +**Wichtig:** Bei Schriftgroessen geht es nicht nur um „schön“, sondern auch um **Skalierung, Wartbarkeit und Accessibility**.
 +\\
 +Viele Menschen nutzen Browser-Zoom oder haben eine grössere Standard-Schrift eingestellt.
 +</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.))
 +
 +----
 +
 +===== 2) CSS-Variablen =====
 +
 +==== Was sind CSS-Variablen ====
 +CSS-Variablen sind benannte Werte, die Sie einmal zentral definieren und dann überall wiederverwenden.
 +
 +<WRAP center round box 80%>
 +<code css>
 +:root {
 +  --primary: #263fa9;
 +  --text: #223344;
 +  --h1-size: 4rem;
 +}
 +
 +body { color: var(--text); }
 +button { background: var(--primary); }
 +h1 { font-size: var(--h1-size); }
 +</code>
 +</WRAP>
 +
 +==== Warum lohnt sich das ====
 +  * **Wiederverwendbarkeit:** weniger Copy/Paste, weniger Fehler
 +  * **Wartbarkeit:** 1 Änderung in '':root'' wirkt im ganzen Projekt
 +  * **Lesbarkeit:** Namen sind verständlicher als zufällige Hex-Zahlen
 +
 +<WRAP center round box 80%>
 +**Vergleich zu Print-Design**
 +\\
 +CSS-Variablen funktionieren ähnlich wie Absatz- und Zeichenstile: Sie definieren Werte zentral und wenden sie konsistent an.
 +</WRAP>
 +
 +----
 +
 +===== 3) CSS Cascade =====
 +{{: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)//
 +
 +<WRAP center round box 80%>
 +**Was ist die Kaskade**
 +\\
 +Die CSS-Kaskade entscheidet, welche CSS-Regel am Ende wirklich angewendet wird, wenn mehrere Regeln dasselbe Element betreffen.
 +</WRAP>
 +
 +==== 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 {
 +  font-family: "Poppins", sans-serif;
 +  color: #223344;
 +  line-height: 1.4;
 +}
 +</code>
 +</WRAP>
 +
 +==== Überschreiben ====
 +Wenn zwei Regeln dieselbe Eigenschaft setzen, gilt diese Reihenfolge:
 +
 +  - **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]]
 +
 +----
 +
 +===== 4) Media Queries und Responsive Design =====
 +{{:de:modul:m291:learningunits:lu02:theorie:media-queries.webp| Responsive Media Queries: Desktop, Tablet, Mobile}}
 +
 +==== Was macht eine Media Query ====
 +Media Queries passen die Darstellung an verschiedene Bildschirmbreiten an. Der Inhalt bleibt gleich, nur das Layout ändert sich.
 +
 +==== Breakpoints ====
 +Ein Breakpoint ist eine Breite, bei der Sie das Layout anpassen, weil es sonst nicht mehr sauber wirkt.
 +
 +<WRAP center round box 80%>
 +<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 { flex-direction: column-reverse; }
 +}
 +</code>
 +</WRAP>
 +
 +==== Media Queries und Kaskade ====
 +Media Queries folgen denselben Regeln wie normales CSS:
 +  * Bei aktivem Breakpoint überschreiben Sie nur die Eigenschaften, die sich ändern.
 +  * Bei gleicher Spezifität gewinnt die Regel, die später kommt.
 +
 +----
 +
 +===== 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 Device Toolbar (Handy/Tablet Symbol)
 +  * Testen Sie:
 +    - Breitenwechsel über/unter 1024px
 +    - Presets (z.B. iPhone, iPad)
 +    - Hoch-/Querformat
 +  * Prüfen Sie:
 +    - Überlappungen oder abgeschnittene Bereiche
 +    - horizontales Scrollen
 +    - 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>
  
  • de/modul/m291/learningunits/lu02/theorie/a_css-intro.1769979062.txt.gz
  • Zuletzt geändert: 2026/02/01 21:51
  • von gkoch