声明全局变量
CSS全局变量的声明是在变量名称前加两个中横线--。
body {
--Color: #2C51CD
--BackGround: #B4D4FD
}
上述代码中,body选择器中声明了Color和BackGround两个变量。而使用--是因为$被Sass占用了,@被Less占用了。
“
变量的声明对大小写敏感。如:Color和color表示两个不同的变量。
读取变量
使用var()函数来读取变量。
p {
background: var(--Color)
}
var()函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。
p {
background: var(--Color, #2C51CD)
}
第二个参数不处理内部的逗号或空格,都视作参数的一部分。
p {
font-family: var(--fontF, "Roboto", "Helvetica")
margin: var(--Margins, 15px 20px 25px)
}
var()函数还可以用在变量声明中
body {
--Color: #2C51CD
--BackGround: var(--Color)
}
在样式文件或style标签里设置全局样式,具体的写法如下:<style>
*{
color: blue
font-family: '楷体'
}
</style>
color表示字体颜色, font-family表示字体样式