CSS - Eigenschaften nach Maß: Ein freundlicher Leitfaden für Anfänger

Hallo da draußen, zukünftige CSS-Zauberer! ? Heute machen wir uns auf eine aufregende Reise in die Welt der CSS-Eigenschaften nach Maß. Keine Sorge, wenn du neu im Programmieren bist – ich werde dein freundlicher Guide sein, und wir gehen das Schritt für Schritt durch. Bis zum Ende dieses Tutorials wirst du deine Freunde mit deinen CSS-Superkräften beeindrucken!

CSS - Custom Properties

Was sind CSS-Eigenschaften nach Maß?

Lass uns mit den Grundlagen beginnen. CSS-Eigenschaften nach Maß, auch bekannt als CSS-Variablen, sind wie magische Behälter, die Werte enthalten, die du überall in deinen Stylsheets verwenden kannst. Stell dir vor, sie sind wie kleine Kästchen, in denen du deine Lieblingsfarben, Größen oder andere CSS-Werte aufbewahren kannst.

Warum Eigenschaften nach Maß verwenden?

Wiederverwendbarkeit: Einmal schreiben, überall verwenden!
Flexibilität: Ändere Werte an einer Stelle, siehe Änderungen überall.
Wartung: Einfacher zu aktualisieren und zu verwalten.

Syntax: Wie man Eigenschaften nach Maß deklariert und verwendet

Lassen wir uns ein bisschen Code ansehen! Hier ist, wie man eine Eigenschaft nach Maß deklariert:

:root {
--meine-lieblingsfarbe: #ff6347;
}

Hier erstellen wir eine Eigenschaft nach Maß namens --meine-lieblingsfarbe und weisen ihr den Wert einer schönen Tomatenrot zu. Der Selektor :root bedeutet, dass diese Variable in unserem gesamten Dokument verfügbar ist.

Um diese Eigenschaft zu verwenden, nutzen wir die var()-Funktion:

.tomaten-text {
color: var(--meine-lieblingsfarbe);
}

Jetzt hat jedes Element mit der Klasse tomaten-text unsere Lieblingstomatenrot!

Mögliche Werte: Was kann man in Eigenschaften nach Maß speichern?

Eigenschaften nach Maß sind unglaublich vielseitig. Du kannst fast jeden CSS-Wert in ihnen speichern:

Wertetyp	Beispiel
Farben	`--hauptfarbe: #3498db;`
Längen	`--abstand: 20px;`
Zeichenketten	`--schriftenart: 'Arial', sans-serif;`
Zahlen	`--z-index: 100;`
Berechnungen	`--breite: calc(100% - 20px);`

Anwendungsbereich: Wo kann man Eigenschaften nach Maß verwenden?

Die kurze Antwort? Überall! Du kannst Eigenschaften nach Maß in jedem CSS-Eigenschaftswert verwenden. Sehen wir uns einige Beispiele an:

:root {
--primärfarbe: #3498db;
--sekundärfarbe: #2ecc71;
--hauptschriftart: 'Helvetica', sans-serif;
--abstand: 20px;
}

.button {
background-color: var(--primärfarbe);
color: white;
font-family: var(--hauptschriftart);
padding: var(--abstand);
margin-bottom: var(--abstand);
}

.section {
border: 2px solid var(--sekundärfarbe);
}

CSS-Eigenschaften nach Maß - Wertezuweisung

Du kannst Eigenschaftswerte in deinem CSS festlegen, aber wusstest du, dass du sie auch in JavaScript festlegen kannst? Das eröffnet eine Welt der dynamischen Gestaltungsmöglichkeiten!

// Festlegung eines Eigenschaftswerts mit JavaScript
document.documentElement.style.setProperty('--primärfarbe', '#e74c3c');

CSS-Eigenschaften nach Maß - Farben teilen

Hier ist ein cooler Trick: Du kannst Farben in ihre Komponenten aufteilen und Eigenschaften nach Maß für jeden Teil verwenden!

:root {
--rot: 255;
--grün: 99;
--blau: 71;
}

.tomaten-hintergrund {
background-color: rgb(var(--rot), var(--grün), var(--blau));
}

CSS-Eigenschaften nach Maß - Schatten

Eigenschaften nach Maß machen komplexe Eigenschaften wie box-shadow viel handhabbarer:

:root {
--schattenfarbe: rgba(0, 0, 0, 0.2);
--schatten-versatz-x: 5px;
--schatten-versatz-y: 5px;
--schatten-weichzeichnen: 10px;
}

.schattiertes-element {
box-shadow: var(--schatten-versatz-x) var(--schatten-versatz-y) var(--schatten-weichzeichnen) var(--schattenfarbe);
}

CSS-Eigenschaften nach Maß - Verläufe

Verläufe werden mit Eigenschaften nach Maß zum Kinderspiel:

:root {
--verlauf-start: #3498db;
--verlauf-ende: #2ecc71;
}

.verlauf-hintergrund {
background: linear-gradient(to right, var(--verlauf-start), var(--verlauf-ende));
}

CSS-Eigenschaften nach Maß - Raster

Eigenschaften nach Maß können deine Rasterlayouts flexibler machen:

:root {
--raster-spalten: 3;
--raster-abstand: 20px;
}

.raster-container {
display: grid;
grid-template-columns: repeat(var(--raster-spalten), 1fr);
gap: var(--raster-abstand);
}

CSS-Eigenschaften nach Maß - Transformationen

Transformationen werden lesbarer und wartbarer:

:root {
--drehwinkel: 45deg;
--skalierungsfaktor: 1.2;
}

.transformiertes-element {
transform: rotate(var(--drehwinkel)) scale(var(--skalierungsfaktor));
}

CSS-Eigenschaften nach Maß - Verkettung von Einheitentypen

Du kannst Eigenschaften nach Maß mit Einheiten kombinieren:

:root {
--basngröße: 10;
}

.geschnittenes-element {
width: calc(var(--basngröße) * 1px);
height: calc(var(--basngröße) * 2px);
}

CSS-Eigenschaften nach Maß - Verwendung der Kaskade

Eigenschaften nach Maß respektieren die CSS-Kaskade, das bedeutet, du kannst sie für spezifische Elemente überschreiben:

:root {
--textfarbe: black;
}

.dark-theme {
--textfarbe: white;
}

p {
color: var(--textfarbe);
}

CSS-Eigenschaften nach Maß - :root

Wir haben :root oft verwendet. Es ist eine spezielle Pseudo-Klasse, die das Wurzelelement des Dokumentbaums darstellt, normalerweise das <html>-Element. Es ist ein großartiger Ort, um globale Eigenschaften nach Maß zu definieren.

CSS-Eigenschaften nach Maß - Kombination mit !important

Eigenschaften nach Maß können mit !important kombiniert werden:

.überschriebene-farbe {
color: var(--textfarbe) !important;
}

CSS-Eigenschaften nach Maß - Fallbacks

Du kannst Fallback-Werte angeben, falls eine Eigenschaft nach Maß nicht definiert ist:

.fallback-beispiel {
color: var(--undefinierte-farbe, blue);
}

CSS-Eigenschaften nach Maß - @property

Die @property-Regel ist eine aufregende neue Funktion, die es dir ermöglicht, die Eigenschaften von Eigenschaften nach Maß zu definieren:

@property --meine-farbe {
syntax: '<color>';
inherits: false;
initial-value: #c0ffee;
}

Dies definiert eine Eigenschaft nach Maß --meine-farbe, die ein gültiger Farbwert sein muss, nicht von übergeordneten Elementen erbt und einen anfänglichen Wert von #c0ffee hat.

Und das war's, meine lieben Schüler! Wir haben heute viel Boden coberter, von den Grundlagen der Eigenschaften nach Maß bis hin zu einige fortgeschrittene Techniken. Denke daran, der Schlüssel zum Beherrschen dieser Konzepte ist die Übung. Also geh los, experimentiere und erstelle erstaunliche Designs mit deinen neuen CSS-Superkräften!

Bis zum nächsten Mal, happy coding! ??‍??‍?

Credits: Image by storyset