Kostenlose Tutorials für Anfänger

Appearance

Kapitel 25: CSS-Variablen ​

🔧 Lernziel: Meistern Sie CSS-Variablen (Custom Properties), um CSS-Code zu vereinfachen und Themen zu verwalten.

25.1 Definition von CSS-Variablen ​

💡 Was sind CSS-Variablen? ​

CSS-Variablen (auch Custom Properties genannt) ermöglichen es, Werte zu speichern und wiederzuverwenden.

🎯 Grundlegende Syntax ​

css
/* Variable definieren */
--variablen-name: wert;

/* Variable verwenden */
element {
    eigenschaft: var(--variablen-name);
}

📝 Beispiel 1: Einfache Variable ​

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Einfache Variable</title>
    <style>
        :root {
            /* Globale Variable definieren */
            --hauptfarbe: #4CAF50;
        }
        
        .button {
            background-color: var(--hauptfarbe);
            color: white;
            padding: 15px 32px;
            border: none;
        }
    </style>
</head>
<body>
    <button class="button">Klick mich!</button>
</body>
</html>

Erklärung:

  • :root - Definiert globale Variablen (für die gesamte Website verfügbar)
  • --hauptfarbe: #4CAF50 - Definiert eine Variable namens "hauptfarbe"
  • var(--hauptfarbe) - Verwendet den Wert der Variable

📝 Beispiel 2: Lokale Variable ​

css
/* Lokale Variable (nur innerhalb von .container verfügbar) */
.container {
    --lokale-farbe: blau;
    background-color: var(--lokale-farbe);
}

25.2 Verwendung von CSS-Variablen ​

🎯 var()-Funktion ​

Die var()-Funktion wird verwendet, um den Wert einer CSS-Variablen abzurufen.

css
/* Grundlegende Verwendung */
element {
    eigenschaft: var(--variablen-name);
}

/* Mit Fallback-Wert (falls Variable nicht definiert ist) */
element {
    eigenschaft: var(--variablen-name, fallback-wert);
}

📝 Beispiel 3: Variable mit Fallback ​

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Variable mit Fallback</title>
    <style>
        :root {
            --hauptfarbe: #4CAF50;
        }
        
        .button {
            /* Falls --hauptfarbe nicht definiert ist, wird blau verwendet */
            background-color: var(--hauptfarbe, blue);
            color: white;
            padding: 15px 32px;
            border: none;
        }
    </style>
</head>
<body>
    <button class="button">Klick mich!</button>
</body>
</html>

25.3 Vorteile von Variablen ​

✅ Vorteile ​

VorteilErklärung
Einheitliche ÄnderungEine Änderung der Variablen betrifft alle verwendenden Stellen
Weniger WiederholungenReduziert doppelten Code
Einfache WartungEinfacher zu aktualisieren und zu pflegen
Themen-VerwaltungErmöglicht einfaches Umschalten zwischen Themen

📝 Beispiel 4: Einheitliche Änderung ​

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Einheitliche Änderung</title>
    <style>
        :root {
            --hauptfarbe: #4CAF50;
            --schriftgröße: 16px;
        }
        
        .button {
            background-color: var(--hauptfarbe);
            font-size: var(--schriftgröße);
            color: white;
            padding: 15px 32px;
            border: none;
        }
        
        .text {
            color: var(--hauptfarbe);
            font-size: var(--schriftgröße);
        }
    </style>
</head>
<body>
    <button class="button">Schaltfläche</button>
    <p class="text">Text mit derselben Farbe und Schriftgröße</p>
</body>
</html>

Erklärung:

  • Wenn Sie --hauptfarbe ändern, ändert sich die Farbe sowohl der Schaltfläche als auch des Textes automatisch!

25.4 Praxis: Seitenthemenfarbe einstellen, Thema mit einem Klick umschalten ​

🎨 Praxis 1: Seitenthemenfarbe einstellen ​

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Seitenthemenfarbe</title>
    <style>
        :root {
            /* Variablen für das Thema */
            --hauptfarbe: #4CAF50;
            --hintergrundfarbe: white;
            --textfarbe: #333;
        }
        
        body {
            background-color: var(--hintergrundfarbe);
            color: var(--textfarbe);
        }
        
        .button {
            background-color: var(--hauptfarbe);
            color: white;
            padding: 15px 32px;
            border: none;
        }
    </style>
</head>
<body>
    <h1>Meine Webseite</h1>
    <p>Inhalt der Webseite...</p>
    <button class="button">Klick mich!</button>
</body>
</html>

🎨 Praxis 2: Thema mit einem Klick umschalten (mit JavaScript) ​

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Thema umschalten</title>
    <style>
        :root {
            --hauptfarbe: #4CAF50;
            --hintergrundfarbe: white;
            --textfarbe: #333;
        }
        
        body {
            background-color: var(--hintergrundfarbe);
            color: var(--textfarbe);
        }
        
        .button {
            background-color: var(--hauptfarbe);
            color: white;
            padding: 15px 32px;
            border: none;
        }
        
        /* Dunkles Thema */
        .dunkles-thema {
            --hauptfarbe: #2196F3;
            --hintergrundfarbe: #333;
            --textfarbe: white;
        }
    </style>
</head>
<body>
    <h1>Meine Webseite</h1>
    <p>Inhalt der Webseite...</p>
    <button class="button" onclick="themaUmschalten()">Thema umschalten</button>
    
    <script>
        function themaUmschalten() {
            document.body.classList.toggle('dunkles-thema');
        }
    </script>
</body>
</html>

Erklärung:

  • .dunkles-thema - Definiert ein dunkles Thema (überschreibt die Variablen)
  • document.body.classList.toggle('dunkles-thema') - Schaltet das dunkle Thema ein/aus

✅ Zusammenfassung ​

In diesem Kapitel haben Sie gelernt:

  1. ✅ Definition von Variablen - --variablen-name: wert
  2. ✅ Verwendung von Variablen - var(--variablen-name)
  3. ✅ Vorteile - Einheitliche Änderung, weniger Wiederholungen
  4. ✅ Praxis - Themenfarbe einstellen, Thema umschalten

🎯 Übung ​

Übung 1: Erstellen Sie eine Variable für die Hintergrundfarbe und verwenden Sie sie.

Übung 2: Erstellen Sie ein einfaches Thema mit Variablen.

Übung 3: Erstellen Sie eine Schaltfläche, die das Thema umschaltet.

📚 Nächstes Kapitel ​

Im nächsten Kapitel beginnen wir mit Praxisprojekten (Praxisprojekte), um das Gelernte anzuwenden.

[Weiter zu Kapitel 26: Basis-Projekte →]

Frei für alle Anfänger

Copyright © 2026 Programmier-Tutorials