Shulou(Shulou.com)06/02 Report--

This article mainly explains "what is a variable in css". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is a variable in css".

In css, a variable refers to a custom attribute that has a legal identifier and a legal value that can be used anywhere. CSS variables can access DOM, which means that developers can create variables with local or global scope, use JavaScript to modify variables, and modify variables based on media queries.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

The CSS custom property is also known as the CSS variable. A variable has a legal identifier and a legal value and can be used anywhere. Use variables through the var () function. For example, var (--example) returns the value corresponding to-- example.

The var () function is used to insert the value of the CSS variable.

CSS variables have access to DOM, which means that you can create variables with local or global scope, use JavaScript to modify variables, and modify variables based on media queries.

A good way to use CSS variables involves designing colors. You can put them in variables without having to copy and paste the same color over and over again.

Basic usage:

Declare a local variable:

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

Use a local variable:

Element {background-color: var (--main-bg-color);}

Declare a global CSS variable:

: root {--global-color: # 666;-- pane-padding: 5px 42px;}

Use a global CSS variable:

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

Supplement

: root is a CSS pseudo-class that matches the root element of the document tree. For HTML,: root represents the element, which is the same as the html selector, except for a higher priority. So we usually write the custom attribute in: root {}, and the elements in the html tag will inherit it.

CSS custom attributes can be cascaded: each custom attribute can appear multiple times, and the value of the variable will be calculated with the help of the cascading algorithm and the custom attribute value.

The CSS variable does not support the! important declaration, note that it is just a declaration.

Thank you for your reading, the above is the content of "what is a variable in css". After the study of this article, I believe you have a deeper understanding of what a variable is in css, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.