Um den Styling-Prozess zu vereinfachen und das gesamte Design der Webseite einheitlich zu gestalten, können Sie Variablen in CSS verwenden. Mit Variablen können Sie einen Wert einmal definieren und ihn dann in verschiedenen Stilisierungsregeln mehrmals verwenden.
Die Definition einer Variablen in CSS erfolgt mit einem Schlüsselwort var. Geben Sie dazu den gewünschten Variablennamen an und weisen Sie ihm einen Wert zu. So können Sie beispielsweise eine Variable mit dem Namen "primary-color" erstellen und sie auf einen roten Wert festlegen:
:root
Um die erstellte Variable als Nächstes in den Stilisierungsregeln zu verwenden, geben Sie einfach ihren Namen ein und setzen Sie ihn in doppelte Anführungszeichen. So können Sie beispielsweise die Textfarbe für alle h1-Überschriften auf einer Seite festlegen:
Die Verwendung von Variablen macht es einfach, die gesamte Farbskala eines Projekts zu ändern, indem nur ein Variablenwert geändert wird. Dies ermöglicht eine Einheit von Stil und visueller Wahrnehmung, wenn Sie das Design weiter ändern oder neue Elemente zu einer Seite hinzufügen.
Grundlegende CSS-Konzepte
Webseiten werden mit HTML erstellt, aber CSS (Cascading Style Sheets, Cascading Style Sheets) wird auch verwendet, um Stil und Aussehen der Seite hinzuzufügen. Mit CSS können Sie verschiedene Aspekte des Designs einer Webseite steuern, z. B. Farben, Schriftarten, Größen und die Positionierung von Elementen.
Zu den grundlegenden Konzepten von CSS gehören:
- Selektore: Definiert Elemente auf einer Webseite, auf die ein bestimmter Stil angewendet wird.
- Eigenschaften: Definiert bestimmte Aspekte des Elementstils, z. B. Textfarbe, Schriftgröße und Einzug.
- Versuchswerte: definieren Sie bestimmte Eigenschaftsparameter.
- Pseudo-Elemente und Pseudo-Klassen: Fügen Sie die Möglichkeit hinzu, Elemente in bestimmten Zuständen oder Teilen eines Elements zu stylen.
- Kaskadierung: Legt fest, welche Stile Vorrang vor anderen Stilen haben, wenn mehrere Stile auf ein einzelnes Element angewendet werden.
- Inline-Stile: Ermöglicht das Definieren von Stilen direkt innerhalb des Element-Tags.
- Externe Stylesheets: Ermöglicht das Erstellen einer separaten Datei mit einer Erweiterung .css, das Stile für mehrere Webseiten definiert.
Wenn Sie diese grundlegenden CSS-Konzepte verstehen und verwenden, können Sie schöne und stilvolle Webseiten erstellen.
Variablentypen in CSS
Es gibt verschiedene Variablentypen in CSS, die zum Definieren von Eigenschaftswerten verwendet werden können. Im Folgenden sind die grundlegenden Variablentypen in CSS aufgeführt:
1. Globale Variablen:
Globale Variablen sind außerhalb eines beliebigen Selektors definiert und können überall im Styling verwendet werden. Sie haben einen globalen Gültigkeitsbereich.
2. Lokale Variablen:
Lokale Variablen sind innerhalb eines Selektors definiert und können nur innerhalb dieses Selektors verwendet werden. Sie haben einen lokalen Gültigkeitsbereich.
3. In Funktionen definierte Variablen:
CSS-Funktionen können Variablen enthalten, die nur innerhalb der Funktion verwendet werden können, in der sie definiert wurden. Sie haben nur einen Gültigkeitsbereich innerhalb der Funktion.
4. Innerhalb von Medienausdrücken definierte Variablen:
Medienausdrücke in CSS können Variablen enthalten, die nur innerhalb des Medienausdrucks verwendet werden können, in dem sie definiert wurden. Sie sind nur innerhalb des Mediums sichtbar.
Notiz: Variablen in CSS beginnen mit einem Doppelpunkt (:) und kann Buchstaben, Zahlen, Bindestriche und Unterstriche enthalten.
Syntax zum Erstellen von Variablen
Das Schlüsselwort var wird verwendet, um Variablen in CSS zu erstellen, kombiniert mit zwei Bindestrichen vor dem Variablennamen und dem Wert, der ihr zugewiesen wird. Die erstellte Variable kann anstelle des Werts der CSS-Eigenschaft verwendet werden.
Hier ist ein Beispiel zum Erstellen einer Variablen:
:root
Im obigen Beispiel wird die Variable --primary-color innerhalb des Selektors :root erstellt, der das Stammelement des HTML-Dokuments darstellt.
Um diese Variable nun in anderen CSS-Selektoren zu verwenden, rufen Sie sie einfach mit der var() Funktion auf:
In diesem Beispiel wird die Variable --primary-color verwendet, um die Textfarbe der Elemente festzulegen.
Verwenden von Variablen in CSS
Verwenden Sie das Schlüsselwort, um eine Variable in CSS zu erstellen var gefolgt von dem Variablennamen, gefolgt von einem Doppelpunkt und dem Wert der Variablen. Zum Beispiel:
:root h1
Hier haben wir eine Variable mit dem Namen erstellt --primary-color und sie haben ihr einen Wert gegeben blue. Dann haben Sie diese Variable in der Eigenschaft verwendet color für Kopfzeilen der ersten Ebene. Als Ergebnis haben h1-Header eine Farbe blue.
Der Hauptvorteil von Variablen besteht darin, dass wir die Werte von Variablen leicht ändern können, und diese Änderungen werden automatisch auf der gesamten Website widergespiegelt. Um beispielsweise die Hauptfarbe einer Website zu ändern, müssen wir den Wert der Variablen ändern --primary-color es gibt nur einen Stil an einer Stelle, und die neue Farbe wird überall angewendet, wo diese Variable verwendet wird.
Es ist wichtig zu beachten, dass Variablen in CSS verschiedene Datentypen wie Farben, Zahlen, Strings usw. speichern können. Sie können auch in verschiedenen Kontexten verwendet werden, einschließlich Elementproben, Medienabfragen und sogar in benutzerdefinierten Eigenschaften.
Die Verwendung von Variablen in CSS ermöglicht es Ihnen, den Code besser zu unterstützen, flexibler und effizienter zu gestalten. Sie vereinfachen den Prozess der Designänderung und ermöglichen es Ihnen, Stile zu erstellen, die sich leicht an verschiedene Projektbedingungen und -anforderungen anpassen können.
Vorteile der Verwendung von Variablen in CSS
Die Verwendung von Variablen in CSS bietet eine Reihe von Vorteilen, die stilvollen und unterstützten Code flexibler und effizienter machen.
1. Verbesserung der Lesbarkeit von Code: Variablen ermöglichen es Ihnen, Farben, Schriftgrößen, Einrückungen und andere Werte zu benennen, wodurch der Code verständlicher und lesbarer wird. Dadurch wird es viel einfacher, Fehler zu erkennen und zu korrigieren.
2. Einfaches Ändern von Stilen: Die Verwendung von Variablen erleichtert das Ändern von Stilen auf der Website. Wenn Sie beispielsweise die Grundfarbe des Hintergrunds oder der Schriftart ändern müssen, müssen Sie den Wert der Variablen einfach an einer Stelle ändern, und alle Elemente, die diese Variable verwenden, werden automatisch aktualisiert.
3. Einfache Wiederverwendung: Mit Variablen können Sie stilvolle Lösungen effizient wiederverwenden. Wenn Sie zum Beispiel mehrere Schaltflächen haben, die die gleichen Stile haben müssen, können Sie eine Variable verwenden, um allgemeine Stile zu definieren und sie auf alle Schaltflächen anzuwenden.
4. Große Flexibilität und Skalierbarkeit: Mit Variablen in CSS können Sie universelle Stile erstellen, die auf verschiedenen Seiten und in verschiedenen Kontexten verwendet werden können. Dies erleichtert den Entwicklungsprozess und ermöglicht die Erstellung von vorgefertigten Stilen für zukünftige Projekte.
5. Bequemlichkeit der Unterstützung: Die Verwendung von Variablen erleichtert die Wartung und Aktualisierung des Codes erheblich. Um Änderungen am Design vorzunehmen oder Fehler zu beheben, müssen Sie nur einen Ort ändern, an dem die Variable definiert ist, und alle Elemente, die diese Variable verwenden, werden automatisch aktualisiert.
Die Verwendung von Variablen in CSS ist ein leistungsfähiges Werkzeug, um Stile zu erstellen, die Entwicklung zu vereinfachen und den Code zu unterstützen. Dies reduziert die Entwicklungszeit und erhöht die Flexibilität und Effizienz Ihres Designs.
