Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu02:theorie:a_css-intro [2026/03/25 22:12] – 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 149: / Zeile 149: @@
 <WRAP center round box 80%>
-{{:de:modul:m291:learningunits:lu02:theorie:customize-chrome-font.png?nolink&600| Schriftgrösse ändern im Browser}}
+{{: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>
@@ Zeile 174: / Zeile 174: @@
 ((Einheitenlose ''line-height'' skaliert automatisch mit der Schriftgroesse.))
-----
 ===== 2) CSS-Variablen =====
@@ Zeile 210: / Zeile 209: @@
 //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 267: / 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?}}
 ----