css可以使用变量。在css中，变量是由CSS作者定义的实体，其中包含要在整个文档中重复使用的特定值；使用自定义属性来设置 变量名 ，并使用 VAR ()函数来读取。
本教程操作环境：windows7系统、CSS3版、Dell G3 电 脑。
CSS 变量当前有两种形式：
变量，就是拥有合法标识符和合法的值。可以被使用在任意的地方。可以使用var()函数使用变量。例如：var(--ex am ple-variable)会返回--example-variable所对应的值
自定义属性。这些属性使用--*where*的特殊格式作为名字。例如--example-variable: 20px;即使一个css声明语句。 意思 是将20px赋值给--example-varibale变量。
在使用 CSS变量 的时候, 应该 知道 的三个主要内容
自定义属性
var()函数
:root 伪类
1、自定义属性
我们可以将重复使用的属性定义成自定义属性, 这样在以后需要修改的时候, 只需要修改自定义属性里的属性值就可以了.
:root {
- -t extColor: # 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可以使用变量吗的详细内容，更多请关注其它相关 文章 ！
总结
以上是 为你收集整理的 css可以使用变量吗 全部内容，希望文章能够帮你解决 css可以使用变量吗 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。