Beim Aufschreiben von CSS -Stilblättern müssen Sie bemerkt haben, dass Sie häufig einige bestimmte Werte wie die Farbe verschiedener Elemente wiederholt aufschreiben müssen. Um dies zu vermeiden, ermöglicht CSS seinen Benutzern, Variablen für bestimmte CSS -Werte zu deklarieren und sie im Code zu verwenden, anstatt immer wieder Werte aufzuschreiben. Diese Variablen werden als CSS. Die in diesem Beitrag diskutierten Themen sind wie folgt.

1. Variablen in CSS
2. Vorteile der Verwendung von CSS -Variablen
3. Erklärung der globalen und lokalen CSS -Variablen
4. Fallback -Werte
5. Übergeordnete Variablen in CSS

Variablen in CSS

Mit CSS können seine Benutzer maßgeschneiderte Eigenschaften erstellen, die aus bestimmten Namen und Werten bestehen, die als CSS -Variablen bezeichnet werden. Diese Variablen können bei der Deklaration verwendet werden, wo immer im Dokument erforderlich ist.

Um diese Variablen zu deklarieren, müssen Sie eine bestimmte Reihe von Regeln befolgen:

• Der erste ist, dass der Name der benutzerdefinierten Eigenschaft oder die CSS -Variable mit doppelten Bindestrichen beginnen muss.
• Dies sind auch Fallempfindlichkeitsempfindlichkeit.

Hier erfahren Sie, wie Sie diese Variablen nennen können.

--Textfarbe: Blau;

Um auf diese Variablen in Ihren Stilblättern zuzugreifen, wird die Funktion var () in CSS verwendet. So verwenden Sie die Funktion var ().

var (-Textfarbe);

Vorteile der Verwendung von CSS -Variablen

Im Folgenden haben wir einige Vorteile der Verwendung von Variablen in CSS erwähnt.

1. Wenn Sie eine sehr komplizierte Website erstellen, werden Sie feststellen, dass Ihre CSS -Werte viel zu oft wiederholen. Um zu vermeiden, dass die gleichen Werte mehrmals mehrmals aufschreiben, können Sie eine CSS -Variable erzeugen. Diese Variablen werden an einem Ort gespeichert und können überall dort in der Datei zugegriffen werden.
2. Ein weiterer Vorteil von CSS -Variablen oder maßgeschneiderten Eigenschaften ist, dass diese leicht zu verstehen sind, da diese von den Entwicklern selbst deklariert werden. Zum Beispiel ist -Textfarbe weitaus verständlicher als #0000ff.

Erklärung der globalen und lokalen CSS -Variablen

CSS -Regeln geben an, dass die CSS -Variablen entweder einen lokalen oder einen globalen Bereich haben. Eine Variable mit globalem Umfang kann verwendet werden, wo immer im gesamten Dokument erforderlich ist. In der Zwischenzeit kann eine Variable mit einem lokalen Bereich nur vom Selektor abgerufen werden, in dem sie definiert ist.

Zum Zweck der Erstellung einer globalen Variablen mit der Funktion var () muss sie im Root -Selektor deklariert werden. In der Zwischenzeit kann in jedem Selektor eine lokale Variable erstellt werden.

Syntax

Für Variablen mit globalem Umfang.

:Wurzel
--Hauptpadding: 5px

Die Syntax gibt an, dass jedes Element, das über Var () auf die Funktion -Main -Padding -Variable zugreift, eine Polsterung von 5px hat.

Für Variablen mit lokalem Umfang.

P
--Haupttextfarbe: Brown;
Farbe:-Main-Text-Color;

Jetzt können wir die Variable „-main-text-color“ im lokalen "P" -Alektor verwenden und die braune Farbe haben.

Beispiel 1

Angenommen, Sie möchten die Funktion var () verwenden, während Sie globale Variablen deklarieren.

Html

Dies ist ein Absatz.

Im obigen Code -Snippet haben wir einfach einen Div -Container erstellt und eine verschachtelt

Element in diesem Div -Behälter.

CSS

:Wurzel
--Pink: #ffc0cb;
--Brown: #964b00;
--Blau: #0000ff;

div
Farbe: var (-blau);
Hintergrundfarbe: var (-weiß);
Polsterung: 15px;

H1
Hintergrundfarbe: var (-weiß);
Farbe: var (-blau);
Grenze: 3px fest Var (-Brown);
Polsterung: 40px;

Im obigen Code haben wir einige globale Variablen in der: Stammwahl jeweils einer bestimmten Farbe definiert, die jeweils einer bestimmten Farbe entsprechen. Anschließend verwenden wir diese globalen Variablen im gesamten Dokument, sofern dies mit der Funktion var () verwendet wird. Der Vorteil, diese globalen Variablen herzustellen und sie dann in der Funktion var () zu verwenden, besteht darin.

Ausgang

Die Funktion var () funktioniert ordnungsgemäß.

Beispiel 2
Im folgenden Beispiel haben wir gezeigt, wie globale und lokale CSS -Variablen deklariert und verwendet werden können.

Html

Dies ist eine Überschrift.

Dies ist ein Absatz.

Hier haben wir einfach einen Div -Behälter erstellt und einen Übergang und einen Absatz darin verschachtelt.

CSS

:Wurzel
--Pink: #ffc0cb;
--Brown: #964b00;
--Blau: #0000ff;

div
Farbe: var (-blau);
Hintergrundfarbe: var (-pink);
Polsterung: 15px;

H1
Hintergrundfarbe: var (-weiß);
Farbe: var (-blau);
Grenze: 3px fest Var (-Brown);
Polsterung: 40px;

P
--lila: #6a0dad;
Farbe: var (-lila);
Rand: 2px Solid Var (-Brown);
Schriftgröße: 16px;
Polsterung: 20px;

Im obigen Code haben wir einige globale Variablen im: Root Selektor erstellt und später über die Funktion var () im gesamten Dokument verwendet, um unsere Elemente zu stylen. In der Zwischenzeit, wenn Sie das in der bemerken P Selektor haben wir eine lokale Variable mit dem Namen -Purple erstellt, um nur eine lila Farbe für den Absatz bereitzustellen. Diese lokale Variable kann nur vom Selektor zugegriffen werden, in dem sie deklariert wird.

Ausgang

Der Absatz erhielt eine lila Farbe mit einer lokalen Variablen erfolgreich.

Fallback -Werte

Fallback -Werte werden als Substitute angesehen, wenn Sie mithilfe der Funktion var () auf eine CSS -Variable zugreifen möchten, ist die Deklaration der Variablen jedoch ungültig oder wenn die Variable noch nicht deklariert ist. Diese sind auch nützlich, wenn sie benutzerdefinierte Elemente oder Shadow DOM verwenden.

Um Fallback -Werte zu deklarieren, müssen Sie eine bestimmte Reihe von Regeln befolgen, die wir hier erwähnt haben.

1. Der erste Parameter, der an die Funktion var () übergeben wird.
2. Der zweite Parameter, der an die Funktion übergeben wurde.

Hier ist ein Beispiel.

div
Farbe: var (-Textfarbe, rot);

Das obige Code -Snippet definiert, die rote Farbe verwenden, was ein Fallback -Wert als Ersatz für die Farbe des Textes ist, wenn -Textfarbe nicht deklariert wird.

Nachdem wir verstanden haben, welche Variablen in CSS sind, gehen wir zu unserem nächsten Thema über.

Übergeordnete Variablen in CSS

Eine Variable zu überschreiben ist ein Phänomen, bei dem eine Variable eine andere ersetzt. Nachdem wir gelernt haben, wie man CSS -Variablen entweder mit einem globalen Bereich oder einem lokalen Bereich deklariert.

Beispiel

Um das Übergeordnete zu demonstrieren, verwenden wir das oben verwendete Beispiel. Hier überschreibt eine lokale Variable eine globale Variable.

CSS

:Wurzel
--Pink: #ffc0cb;
--Brown: #964b00;
--Blau: #0000ff;

div
Farbe: var (-blau);
Hintergrundfarbe: var (-pink);
Polsterung: 15px;

H1
Hintergrundfarbe: var (-weiß);
Farbe: var (-blau);
Grenze: 3px fest Var (-Brown);
Polsterung: 40px;

P
--Blau: #000080;
Farbe: var (-blau);
Rand: 2px Solid Var (-Brown);
Schriftgröße: 16px;
Polsterung: 20px;

Was wir im obigen Code getan haben, ist, dass wir eine globale Variable -Blue deklariert haben und sie verwenden, um einige Elemente zu stylen. Aber wenn es um die geht

Element Wir möchten ihm einen anderen Farbton der blauen Farbe geben, also definieren wir eine lokale Variable mit demselben Namen "-blue", aber es hat einen anderen Wert. Daher wird diese lokale Variable die globale Variable überschreiben.

Ausgang

Der Absatz wurde unter Verwendung einer lokalen Variablen eine Marinefarbe zur Verfügung gestellt.

Abschluss

CSS ermöglicht seinen Benutzern, maßgeschneiderte Eigenschaften zu erstellen, die aus bestimmten Namen und Werten bestehen, die als CSS -Variablen bezeichnet werden. Diese Variablen können später im gesamten Stilblatt verwendet werden. Darüber hinaus haben diese entweder einen globalen Bereich oder einen lokalen Bereich und können mit der Funktion var () zugegriffen werden. Sie können es vermeiden, wiederholte CSS -Werte aufzuschreiben, indem Sie diese Variablen verwenden. Darüber hinaus sind diese leichter zu verstehen. Es ist auch möglich, CSS -Variablen miteinander zu überschreiben. In diesem Artikel haben wir CSS-Variablen besprochen und wie sie mit verschiedenen Beispielen ausführlich überschrieben werden.