Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu02:theorie:a_css-intro [2026/02/02 01:29] – gkoch
+++ de:modul:m291:learningunits:lu02:theorie:a_css-intro [2026/05/19 15:49] (aktuell) – gkoch
@@ Zeile 72: / Zeile 72: @@
   * ''line-height'': Zeilenhöhe (Best Practice: **einheitenlos**, z.B. ''1.4'')
-----
-==== Einheiten bei Schriftgroessen ====
+==== Einheiten bei Schriftgrössen ====
 <WRAP center round box 80%>
@@ Zeile 136: / Zeile 136: @@
 === rem ===
   * ''1rem'' ist relativ zur Schriftgroesse des Root-Elements ''html''.
+  * Falls keine Schriftgrösse auf ''html'' gesetzt ist, wird die Browsereinstellung genutzt. Das ist besonders für Menschen mit Seh-Einschränkungen wichtig, da sie damit die Schriftgrösse selbstständig vergrössern können.
   * Vorteil: bleibt konsistent, egal wie tief ein Element verschachtelt ist.
@@ Zeile 146: / Zeile 147: @@
 </WRAP>
-((Mit ''rem'' vermeiden Sie „Schriftgroessenvermehrung“ durch verschachtelte Elemente.))
+<WRAP center round box 80%>
+{{:de:modul:m291:learningunits:lu02:theorie:customize-chrome-font.png?nolink&600 | Schriftgrösse ändern im Browser}}
+//Ohne setzen der Schriftgrösse aufs HTML-Tag via CSS, wird mit ''rem'' die Browsereinstellung multipliziert.//
+<code css>
+h1   { font-size: 4rem; }      /* 4x Browsereinsteillung */
+p    { font-size: 1.125rem; }  /* 1.125x Browsereinstellung (Default-Einstellung im Browser ist 16px) */
+</code>
+</WRAP>
 ==== Empfehlung für dieses Modul ====
@@ Zeile 164: / Zeile 174: @@
 ((Einheitenlose ''line-height'' skaliert automatisch mit der Schriftgroesse.))
-----
 ===== 2) CSS-Variablen =====
@@ Zeile 196: / Zeile 205: @@
 </WRAP>
-----
+{{ :de:modul:m291:learningunits:lu02:theorie:m291_lu02_css_variables_responsiveness_final_small.mp4?1040x585 | CSS-Variablen und Media-Queries anschaulich erklärt. }}
+//Das Video zeigt anschaulich, wie CSS-Variablen eingesetzt werden und responsive Designs mit Media-Queries (Details weiter unten auf der Seite) umgesetzt werden.//
 ===== 3) CSS Cascade =====
@@ Zeile 253: / Zeile 265: @@
 Für ein vertieftes Verständnis schauen Sie sich diese interaktive Darstellung an:
 [[https://2019.wattenberger.com/blog/css-cascade|CSS Cascade]]
+Wenn Sie in einem Projekt viele (über 10) ''!important''-Statements haben, dann gibt es ein Problem: Der CSS-Code wird unübersichtlich – man weiss nicht mehr was wird wo überschrieben und warum. Besser darum ''@layer''-Syntax zu verwenden: {{youtube>dwI0QANfFXs?}}
 ----