首页  >  文章  >  web前端  >  css可以使用变量吗

css可以使用变量吗

青灯夜游
青灯夜游原创
2021-04-06 17:24:064207浏览

css可以使用变量。在css中,变量是由CSS作者定义的实体,其中包含要在整个文档中重复使用的特定值;使用自定义属性来设置变量名,并使用var()函数来读取。

css可以使用变量吗

本教程操作环境:windows7系统、CSS3版、Dell G3电脑。

CSS 变量当前有两种形式:

  • 变量,就是拥有合法标识符和合法的值。可以被使用在任意的地方。可以使用var()函数使用变量。例如:var(--example-variable)会返回--example-variable所对应的值

  • 自定义属性。这些属性使用--*where*的特殊格式作为名字。例如--example-variable: 20px;即使一个css声明语句。意思是将20px赋值给--example-varibale变量。

在使用CSS变量的时候, 应该知道的三个主要内容

  • 自定义属性

  • var()函数

  • :root伪类

1、自定义属性

我们可以将重复使用的属性定义成自定义属性, 这样在以后需要修改的时候, 只需要修改自定义属性里的属性值就可以了.

:root {
  --textColor: #444;
}

上面的代码就是自定义属性的写法, 需要注意的是, 自定义属性以 -- 开头

3、var()函数

我们需要使用var()函数来读取变量, 否则浏览器不知道你的自定义属性是啥东东.

var()函数还可以指定第二个属性, 表示属性的默认值

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

要设置p标签的字体颜色, 可以像上面代码那样写

它跟 p { color: #444; } 这样是一样的

3、root伪类

在说:root伪类之前, 要先说一下CSS自定义属性的作用域问题

同一个CSS自定义属性, 可以在多个选择器中声明, 读取的时候, 优先级最高的属性生效.

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

上面的代码, -bgColor的作用域是body, --textColor的作用域是.content 由于这个原因,  最好把自定义属性放在根元素:root里面, 这样的话能保证任何选择器都能读取他们.

(学习视频分享:css视频教程

以上是css可以使用变量吗的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn