Fortgeschrittene CSS Techniken
Fortgeschrittene CSS Techniken
Embedded Files
In den letzten Wochen haben Sie einiges über den Web-Standard CSS gelernt. Dieser Standard wird gepflegt und weiterentwickelt. Aktuell ist die CSS-Version 3 gültig.
Neben diesem Standard gibt weitere Entwicklungen in diesem Bereich, welche versuchen, einige Schwächen von CSS beheben.
Ziele:
Ziele:
E6: Ich wende in meiner Webseite fortgeschrittene Techniken für das Styling an. (z.B. CSS-Variablen, SASS, Frameworks)
CSS-Variablen:
CSS-Variablen:
CSS-Variablen werden verwendet, um Werte, welche in mehreren CSS-Deklarationen eingesetzt werden, zentral an einem Ort zu definieren.
Meistens wird das Pseudo-Element :root verwendet um diese Variablen global für alle CSS-Regeln zu definieren.
Eine CSS-Variable beginnt immer mit einem doppelten --.
CSS-Variablen sind CaseSensitiv.
Um eine CSS-Variabel zu verwenden, wird die Eigenschaft var() verwendet.
Es gelten die allgemeinen CSS-Regeln bezüglich Vererbung und Kaskade:
Wird eine global definierte Variable in einer Deklaration überschrieben, gilt Sie für dieses und alle Nachfahren-Elemente.Jeder Variable kann ein Default-Wert mitgegeben werden. Dieser wird verwendet, wenn die Variable nicht gefunden wird.
Weiterführende Informationen:
:root {
--primary-color: red;
--secondary-color: blue;
--tertiary-color: green;
}
h1 {
color: var(--primary-color);
}
h2 {
color: var(--secondary-color);
}
h3 {
--tertiary-color: pink;
color: var(--tertiary-color);
}
p {
--primary-color: yellow;
color: var(--Primary-color, black);
}
<h1>CSS-Variablen</h1>
<h2>Gültigkeitsbereich</h2>
<h3>Deklaration</h3>
<p>CSS-Variablen werden verwendet um Werte, welche in mehreren CSS-Deklarationen verwendet werden, zentral an einem Ort zu definieren. Meistens wird dafür das Pseudo-Element :root verwendet.</p>
CSS-Nesting:
CSS-Nesting:
CSS Nesting ist eine moderne Funktion, die es erlaubt, Selektoren innerhalb anderer Selektoren zu verschachteln, ähnlich wie in Sass oder Less. Dies verbessert die Lesbarkeit und Strukturierung von Stylesheets, indem es den hierarchischen Aufbau von HTML besser widerspiegelt.
Vorteile von CSS Nesting
Bessere Lesbarkeit & Strukturierung
Der Code bleibt kompakt und spiegelt die HTML-Struktur wider.Weniger Wiederholungen
Gemeinsame Selektoren müssen nicht mehrfach ausgeschrieben werden.Bessere Wartbarkeit
Änderungen lassen sich einfacher durchführen, da verwandte Styles gebündelt sind.
Weiterführende Informationen:
Ohne CSS Nesting:
.container {
background-color: lightgray;
}
.container .header {
font-size: 24px;
color: blue;
}
.container .header a {
color: darkblue;
text-decoration: none;
}
.container .content {
padding: 20px;
}
Mit CSS Nesting:
.container {
background-color: lightgray;
.header {
font-size: 24px;
color: blue;
a {
color: darkblue;
text-decoration: none;
}
}
.content {
padding: 20px;
}
}
👉 Vorteile sichtbar:
Weniger Wiederholungen: .container wird nur einmal geschrieben.
Bessere Hierarchie: Die Struktur ist logischer und übersichtlicher.
CSS-Bibliotheken:
CSS-Bibliotheken:
Eine CSS-Bibliothek ist eine Sammlung von Gestaltungselementen und Hilfsmitteln für einfaches und standardisiertes Webdesign mit CSS. Die meisten CSS-Frameworks bieten als Basis ein Grid-Gestaltungsraster sowie einige grundlegende Gestaltungselemente wie Schaltflächen, Menüs und Eingabefelder.
Bekannte CSS-Bibliotheken sind:
Bekannte CSS-Bibliotheken sind:
Bootstrap
Tailwind CSS
Bulma
Foundation CSS
Materialize CSS
Weiterführende Informationen:
Page updated
Report abuse