Can variables be used in css?

css can use variables. In CSS, a variable is an entity defined by the CSS author that contains a specific value to be reused throughout the document; use custom properties to set the variable name and use the var() function to read it.

The operating environment of this tutorial: Windows 7 system, CSS3 version, Dell G3 computer.

CSS variables currently have two forms:

• Variables have legal identifiers and legal values. Can be used anywhere. Variables can be used using the var() function. For example: var(--example-variable) will return the value corresponding to --example-variable

• custom attribute. These properties use the special format --*where* as their names. For example --example-variable: 20px; even a css declaration statement. It means assigning 20px to the --example-varibale variable.

Three main things you should know when using CSS variables

• Custom attributes

• var() function

• : root pseudo-class

##1. Custom attributes

We can define reused attributes as custom attributes, so that when we need to modify them in the future, we only need to modify the attribute values ​​​​in the custom attributes.

:root {
　　--textColor: #444;
}

The above code is custom When writing attributes, it should be noted that custom attributes start with --

3. var() function

We need to use the var() function to read the variable, otherwise the browser will not know what your custom attribute is.

The var() function can also specify a second attribute, which represents the default value of the attribute

p {
　　color: var(--textColor);
}

To set the font color of the p tag, you can write

as in the above code. It is the same as

p { color: #444; }

3 , root pseudo-class

Before talking about: root pseudo-class, we must first talk about the scope issue of CSS custom attributes

The same CSS custom attribute can be used in multiple Declared in the selector, when reading, the attribute with the highest priority takes effect.

body {
　　--bgColor: red;
}
.content {
　　--textColor: blue;
}

In the above code, the scope of -bgColor is body, and the scope of --textColor is .content. For this reason, the most It is best to put the custom attributes in the root element: root, so that any selector can read them.

(Learning video sharing:

css video tutorial)

The above is the detailed content of Can variables be used in css?. For more information, please follow other related articles on the PHP Chinese website!