css中变量_CSS中的变量

css中变量

CSS | 变数 (CSS | Variables)

CSS variables allow you to create reusable values that can be used throughout a CSS document.

CSS变量允许您创建可在CSS文档中使用的可重用值。

In CSS variable, function var() allows CSS variables to be accessed.

在CSS变量中 ，函数var()允许访问CSS变量。

For example, in CSS it's quite common to reuse a single color or text-size throughout the code, this would mean reusing the same color or text-size value several times throughout a document. With CSS variables the color or text-size value can be assigned to a variable and used in multiple places. This makes changing values easier and is more convenient than using traditional CSS values.

例如，在CSS中，在整个代码中重复使用单一颜色或文本大小是很普遍的，这意味着在整个文档中多次重复使用相同的颜色或文本大小。使用CSS变量，可以将颜色或文本大小值分配给变量，并在多个位置使用。与使用传统CSS值相比，这使更改值更容易并且更方便。

Note: Variables should be declared in a CSS selector that defines variables scope. In the global scope, you can use either the: root or the body selector.

注意：变量应在定义变量范围CSS选择器中声明。在全局范围内，可以使用： root或body选择器 。

The name of the variable must start with two dashes (--), also the name of the variable is case sensitive.

变量的名称必须以两个破折号( - )开头，并且变量的名称区分大小写。

CSS变量| 有效/无效 (CSS variables | Valids/Invalids)

When naming CSS variables, it contains only letters and dashes just like other CSS properties but it should start with double dashes (--).

命名CSS变量时，与其他CSS属性一样，它仅包含字母和破折号，但应以双破折号( - )开头。

    //These are Invalids variable names 
--123color: blue; 
--#color: red;
--$width: 100px; 
//Valid variable names
--color: red;
--bg-color: yellow ;
--width: 100px;

可变属性 (Variable properties)

Variable color
颜色可变
Variable dimension
可变尺寸
Variable cascading
可变级联

Let's look at each property more closely...

让我们更仔细地观察每个属性...

a)可变颜色 (a) Variable color)

This property allows us to reuse a single color throughout the code. CSS Variables the color value can be assigned to a variable and used in multiple places.

此属性使我们可以在整个代码中重用单一颜色。 CSS变量的颜色值可以分配给一个变量，并可以在多个地方使用。

Syntax:

句法：

Element {
--main-bg-color: coral;
}

Example:

例：

<!DOCTYPE html>
<html>
<head>
<style>
:root {
--primary-color: blue;
}
#div1 {
background-color: var(--primary-color);
padding: 5px;
}
#div2 {
background-color: var(--primary-color);
padding: 10px;
}
#div3 {
background-color: var(--primary-color);
padding: 15px;
}
</style>
</head>
<body>
<div id="div1"> Variables in CSS.</div>
<br>
<div id="div2">Variables in CSS.</div>
<br>
<div id="div3">Variables in CSS.</div>
</body>
</html>

Output

输出量

In the above example, we have reused blue color in three division element.

在上面的示例中，我们在三个划分元素中重用了蓝色。

b)尺寸可变 (b) Variable dimensions)

This property allows us to reuse a few sets of dimensions throughout the code.

此属性使我们可以在整个代码中重用几组维度。

Syntax:

句法：

Element {
--W200: 200px;
--W10: 10px;
}

Example:

例：

<!DOCTYPE html>
<html>
<head>
<style>
:root {
--W200: 200px;
--W10: 10px;
}
#div1 {
width: var(--W200);
margin: var(--W10);
padding: 5px;
}
#div2 {
width: var(--W200);
margin: var(--W10);
padding: 10px;
}
</style>
</head>
<body>
<div id="div1">Variables in CSS.</div>
<br>
<div id="div2">Variables in CSS.</div>
<br>
</body>
</html>

Output

输出量

In the above example, the same dimensions are used in both the divisions.

在上面的示例中，两个分区使用相同的尺寸。

c)可变级联 (c) Variable cascading)

Variables in CSS cascade in the same way as other properties, and can be reused safely.

CSS中的变量以与其他属性相同的方式级联，并且可以安全地重用。

You can define variables multiple times and only the definition with the highest specificity will apply to the element selected.

您可以多次定义变量，并且只有具有最高特异性的定义才适用于所选元素。

Syntax:

句法：

Element {
--color: green;
border: 1px solid var(--color);
}

Example:

例：

<!DOCTYPE html>
<html>
<head>
<style>
.button {
--color: green;
border: 1px solid var(--color);
color: var(--color);
}
.button:hover {
--color: blue;
}
.button_red {
--color: red;
}
</style>
</head>
<body>
<a class="button">Button Green</a>
<a class="button button_red">Button Red</a>
<a class="button">Button Hovered On</a>
</body>
</html>

Output

输出量