Erster Kontakt mit CSS-Variablen-CSS-Tutorial-php.cn

Ich glaube, dass jeder, der gerade mit CSS-Variablen in Berührung gekommen ist, viele Fragen zu CSS-Variablen haben muss, also lassen Sie uns für Sie über CSS-Variablen sprechen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

So definieren und verwenden Sie CSS-Variablen

Beginnen Sie mit der Sprache, mit der wir am besten vertraut sind, JavaScript: Variablen in JavaScript definieren verwendet Vars.

Um eine einfache JavaScript-Variable zu deklarieren, sehen Sie folgendermaßen aus:

var mainColor = &#39;red&#39;;

Nach dem Login kopieren

Um eine CSS-Variable zu deklarieren, müssen Sie vor dem Namen der Variable einen doppelten Bindestrich hinzufügen. Zum Beispiel:

body{
    --color:red;
}

Nach dem Login kopieren

Um nun den Wert einer CSS-Variablen zu verwenden, können wir die Funktion var(...) verwenden. Wie folgt:

.demo{
    background:var(--color);
}

Nach dem Login kopieren

Der einfachste Weg, CSS-Variablen zu verwalten, besteht darin, sie als Root-Pseudoklasse zu deklarieren. Da CSS-Variablen wie jede andere CSS-Definition Regeln folgen, stellt die Platzierung in :root sicher, dass alle Selektoren Zugriff auf diese Variablen haben.

:root{    --color:red;
}           
.demo{
    background:var(--color);
}           
p{
    color:var(--color);
}

Nach dem Login kopieren

Unterstützt der Browser CSS-Variablen?

Die Browserunterstützung für CSS-Variablen ist ziemlich gut. Es ist nur so, dass der IE-Browser es nicht unterstützt. Wenn Sie die Browserkompatibilität überprüfen möchten, klicken Sie hier und Sie werden sehen, dass alle gängigen Browser CSS-Variablen standardmäßig unterstützen. Sei es mobil oder Desktop.

Eine praktische Anwendung von CSS-Variablen

Beispiel 1 – Farben verwalten

Bisher Einer der besten Kandidaten für die Verwendung von CSS-Variablen ist die Verwaltung der Farben einer Webseite. Anstatt dieselben Farben immer wieder zu kopieren und einzufügen, können wir sie in Variablen einfügen. Wenn uns jemand gebeten hat, einen bestimmten Grünton zu aktualisieren oder alle Schaltflächen rot statt blau zu machen, ändern Sie einfach den Wert dieser CSS-Variablen und fertig. Sie müssen nicht alle Instanzen dieser Farbe suchen und ersetzen.

Aufgeführt als:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>管理颜色</title>
		<style type="text/css">
			/*css_vars.css*/
			:root {
			  --primary-color: #ed6564;
			  --accent-color: #388287;
			}
			
			html {
			  background-color: var(--primary-color);
			}
			
			h3 {
			  border-bottom: 2px solid var(--primary-color);
			}
			
			button {
			  color: var(--accent-color);
			  border: 1px solid var(--accent-color);
			}
			
			p {
			  color: var(--accent-color);
			}
			
			
			/*base.css*/
			* {
			  margin: 0;
			  padding: 0;
			  box-sizing: border-box;
			}
			
			html {
			  padding: 30px;
			  font: normal 13px/1.5 sans-serif;
			  color: #546567;
			  background-color: var(--primary-color);
			}
			
			.container {
			  background: #fff;
			  padding: 20px;
			}
			
			h3 {
			  padding-bottom: 10px;
			  margin-bottom: 15px;
			}
			
			p {
			  background-color: #fff;
			  margin: 15px 0;
			}
			
			button {
			  margin:0 5px;
			  font-size: 13px;
			  padding: 8px 12px;
			  background-color: #fff;
			  border-radius: 3px;
			  box-shadow: none;
			  text-transform: uppercase;
			  font-weight: bold;
			  cursor: pointer;
			  opacity: 0.8;
			  outline: 0;
			}
			
			button:hover {
			  opacity: 1;
			}
			
			.center {
			  text-align: center;
			}
		</style>
	</head>

	<body>
		<div class="container">
		  <h3>管理颜色</h3>
		  <p>管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色管理颜色</p>
		  <div class="center">
		    <button>查看详情</button><button>取消</button>
		  </div>
		</div>
	</body>

</html>

Nach dem Login kopieren

Rendering:

Erster Kontakt mit CSS-Variablen

Beispiel 2 – Doppelten Code löschen

Oft möchten Sie mehrere verschiedene Variationen einer Komponente erstellen. Gleicher Grundstil, etwas anders. Lassen Sie uns einige Schaltflächen mit unterschiedlichen Farben verwenden. Die typische Lösung besteht darin, eine Basisklasse wie .btn zu erstellen und Variantenklassen hinzuzufügen.

.btn { border: 2px solid black;}
.btn:hover {background: black;}
.btn.red {border-color: red}
.btn.red:hover {background: red}

Nach dem Login kopieren

Verwenden Sie sie jetzt wie folgt:

<button class="btn">Hello</button>
<button class="btn red">Hello</button>

Nach dem Login kopieren

Dies führt jedoch zu einer gewissen Codeduplizierung. Bei der .red-Variante müssen wir die Rahmenfarbe und den Hintergrund auf Rot setzen.

Diese Situation kann mithilfe von CSS-Variablen leicht behoben werden. Wie folgt:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>删除重复的代码</title>
		<style type="text/css">
			.btn{
			  border-radius:4px;
			  text-align:center;
			  padding:.5em;
			  margin-bottom:0.5em;
			  background:#fff;
			  border:1px solid var(--color, black);
			}
			.btn:hover{
			  color:#fff;
			  cursor:pointer;
			  background:var(--color, black);
			}
			.btn.red{
			  --color:red;
			}
			.btn.green{
			  --color:green;
			}
			
			.btn.blue{
			  --color:blue;
			}
		</style>
	</head>

	<body>
		<div class="btn">HMOE</div>
		<div class="btn red">HMOE</div>
		<div class="btn green">HMOE</div>
		<div class="btn blue">HMOE</div>
	</body>

</html>

Nach dem Login kopieren

Rendering:

Erster Kontakt mit CSS-Variablen

Beispiel 3 – Einige Attribute lesbar machen

Wenn wir wollen Um Verknüpfungen zu komplexeren Eigenschaftswerten zu erstellen, sind CSS-Variablen großartig zu verwenden, sodass wir sie uns nicht merken müssen. CSS-Eigenschaften wie Box-Shadow, Transform und Font oder andere CSS-Regeln, die mehrere Parameter benötigen, sind perfekte Beispiele. Wir können die Eigenschaft in eine Variable einfügen, damit wir sie in einem besser lesbaren Format wiederverwenden können.

Zum Beispiel:

:root {
  --tiny-shadow: 4px 4px 2px 0 rgba(0, 0, 0, 0.8);
  --animate-right: translateX(20px);
}

li {
  box-shadow: var(--tiny-shadow);
}

li:hover {
  transform: var(--animate-right);
}

Nach dem Login kopieren

Beispiel 4 – Kaskadierende Variablen

Standardkaskadierungsregeln gelten auch für CSS-Variablen. Wenn also eine benutzerdefinierte Eigenschaft mehrmals deklariert wird, überschreibt die niedrigste Definition in der CSS-Datei die darüber liegenden Definitionen. Das folgende Beispiel zeigt, wie einfach es ist, Eigenschaften von Benutzeraktionen dynamisch zu manipulieren und dabei den Code dennoch klar und prägnant zu halten.

CSS_var.css-Datei:

.orange-container {
  --main-text: 18px;
}
.orange-container:hover {
  --main-text: 22px;
}
.red-container:hover {
  --main-text: 26px;
}
.title {
  font-size: var(--title-text);
}
.content {
  font-size: var(--main-text);
}.container:hover {
  --main-text: 18px;
}

Nach dem Login kopieren

base.css-Datei:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}html {
  background: #eee;
  padding: 30px;
  font: 500 14px sans-serif;
  color: #333;
  line-height: 1.5;
}.orange-container {
  background: orange;
}.red-container {
  background: red;
}.red-container,
.orange-container {
  padding-top: 10px;
  padding-left: 50px;
}.container {
  background: blue;
  padding: 20px;
  color: white;
}p {
  transition: 0.4s;
}.title {
  font-weight: bold;
}

Nach dem Login kopieren

index.html-Datei:

<html>

<head>
<link rel="stylesheet" type="text/css" href="base.css">
<link rel="stylesheet" type="text/css" href="css_vars.css">
</head>

<body>
<div class="orange-container">
    Hover orange to make blue bigger.
    <div class="red-container">
         Hover red to make blue even bigger.
        <div class="container">
            <p class="content">Hover on the different color areas to change the size of this text and the title.</p>
        </div>
    </div>
</div>
</body>

</html>

Nach dem Login kopieren

Rendering:

Erster Kontakt mit CSS-Variablen

Beispiel 5 – Theme-Umschalter mit CSS-Variablen

Ein Vorteil von CSS-Variablen ist ihre Reaktivität. Sobald wir es aktualisieren, werden auch alle Eigenschaften mit CSS-Variablenwerten aktualisiert. Mit nur wenigen Zeilen Javascript und der intelligenten Verwendung von CSS-Variablen können wir einen Theme-Switcher-Mechanismus erstellen.

Zum Beispiel:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>具有CSS变量的主题切换器</title>    
        <style>
            
            body {
              background-color: var(--bg, #b3e5fc);
              color: var(--bg-text, #37474f);
              font-family: sans-serif;
              line-height: 1.3;
            }
            
            .toolbar {
              text-align: center;
            }
            
        </style>
    </head>
    <body>
        
        <div class="toolbar">
            <button value="dark">dark</button>
            <button value="calm">calm</button>
            <button value="light">light</button>
        </div>
    
        <h2>Stackoverflow Question</h2>
        <p>I would like to use an external javascript file in another javascript file. For example, I could store all my global variables
        in a globals.js file and then call then from the website logic logic.js. Then in the index.html, i would insert the tag.
        How do I use the globals.js inside the logic.js?
        </p>
        <script>
            var root = document.documentElement;
            var themeBtns = document.querySelectorAll(".toolbar > button");
            
            themeBtns.forEach(function (btn){
              btn.addEventListener("click", handleThemeUpdate);
            });
            
            function handleThemeUpdate(e) {
              switch (e.target.value) {
                case "dark":
                  root.style.setProperty("--bg", "black");
                  root.style.setProperty("--bg-text", "white");
                  break;
                case "calm":
                  root.style.setProperty("--bg", "#B3E5FC");
                  root.style.setProperty("--bg-text", "#37474F");
                  break;
                case "light":
                  root.style.setProperty("--bg", "white");
                  root.style.setProperty("--bg-text", "black");
                  break;
              }
            }
        </script>

    </body>
</html>

Nach dem Login kopieren

Rendering 1 – einfach ausführen:

Erster Kontakt mit CSS-Variablen

Rendering 2 – auf Dunkel klicken:

5Erster Kontakt mit CSS-Variablen

Rendering 3 – Klicken Sie auf Ruhe:

5Erster Kontakt mit CSS-Variablen

Rendering 4 – Klicken Sie auf Licht:

5Erster Kontakt mit CSS-Variablen

CSS变量的使用提示

像CSS中几乎所有的东西一样，变量也非常简单易用。以下是一些未包含在示例中的提示，但在某些情况下仍然非常有用：

1）css变量区分大小写。下面的示例是两个不同的变量：

:root {
   --color: blue;
   --COLOR: red;
}

Nach dem Login kopieren

2）当您使用var（）函数时，您可以使用第二个参数。如果找不到自定义属性，将使用第二个参数为默认值：

width: var(--custom-width, 50%);

Nach dem Login kopieren

3）可以直接将CSS变量用于HTML：

<!--HTML--><html style="--size: 600px"><!--CSS-->body {
  max-width: var(--size)
}

Nach dem Login kopieren

4) 可以在其他CSS var中使用CSS变量：

--base-red-color: #f00;
--background-gradient: linear-gradient(to top, var(--base-red-color), #222);

Nach dem Login kopieren

5) 可以使用媒体查询使CSS变量成为条件。例如，以下代码根据屏幕大小更改填充的值：

:root {
    --padding: 15px 
}@media screen and (min-width: 750px) {
    --padding: 30px}

Nach dem Login kopieren

6) 不要害怕在 clac() 函数中使用CSS变量。

--text-input-width: 5000px;
max-width: calc(var(--text-input-width) / 2);

Nach dem Login kopieren

当然，CSS变量不是灵丹妙药。不会解决你在CSS领域遇到的每一个问题。但是，使用它使您的代码更具可读性和可维护性。此外，它极大地改善了大型文档的易变性。只需将所有常量设置在一个单独的文件中，当您只想对变量进行更改时，就不必跳过数千行代码。

Das obige ist der detaillierte Inhalt vonErster Kontakt mit CSS-Variablen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!