更新时间:2022-02-15 03:56:02
我们来谈谈css是否可以使用变量。相信朋友们也应该密切关注这个话题。现在我们来谈谈css是否可以为朋友使用变量。边肖还收集了css是否可以使用变量的相关信息。我希望你看到后会喜欢。
Css可以使用变量。在css中,变量是由CSS作者定义的实体,其中包含要在整个文档中重用的特定值;使用自定义属性设置变量名,并使用var()函数读取变量名。
本教程操作环境:windows7系统,CSS3版本,戴尔G3电脑。
目前有两种形式的CSS变量:
变量,即具有合法的标识符和合法的值。可以在任何地方使用。您可以使用var()函数来使用变量。例如,var (-example-variable)返回对应于-example-variable的值。
自定义属性。这些属性使用特殊格式-* where *作为它们的名称。例如-example-variable : 20px;甚至是css声明语句。它的意思是将20px赋给- example-varibale变量。
在使用CSS变量时,您应该知道三件主要的事情。
自定义属性
Var()函数
:根伪类
1.自定义属性
我们可以将可重用属性定义为自定义属性,这样以后需要修改时,只需要修改自定义属性中的属性值即可。
:root {
-textcolor : # 444;
}以上代码是如何编写自定义属性的。需要注意的是,自定义属性以-开头。
3.var()函数
我们需要使用var()函数来读取变量,否则浏览器不会知道你的自定义属性是什么。
var()函数还可以指定代表属性默认值的第二个属性。
p {
color : var(-TextColor);
}要设置P标签的字体颜色,可以像上面的代码一样写。
与p { color: # 444}这是一样的。
3.根伪类
在谈论:root伪类之前,我们应该先谈谈CSS自定义属性的范围。
同一个CSS自定义属性可以在多个选择器中声明。读取时,优先级最高的属性生效。
正文{
- bgColor:红色;
}。内容{
- textColor:蓝色;
}上面的代码,-bgColor的范围是body,范围body,- textColor是。由于这个原因,最好将自定义属性放在根元素:root中,这样任何选择器都可以读取它们。
(学习视频分享:css视频教程)以上就是css是否可以使用变量的细节。更多信息请关注php中文网站其他相关文章!
来源:php中文网站