css中的自定义属性 |css 设置百分比宽度 js

在CSS中，自定义属性以两个减号（–）开头

:root{
--main-color: #006699;
}

在这个例子中，大家定义了一个名为”main-color”的自定义属性来存储一个颜色值。这个自定义属性被定义在:root选择器内，它代表整个页面。

在使用自定义属性时，可以使用var()函数来引用它们

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

在这个例子中，大家将–main-color引用了出来，并将它用作了文本颜色。

你还可以定义值的默认值，这样当变量没有被定义时，就可以使用默认值

p {
color: var(--main-color, blue);
}

在这个例子中，大家使用了blue作为默认值，如果–main-color没有被定义，那么文本颜色就会变成蓝色。

自定义属性还可以实现动态的样式变化，如下例所示：

:root {
--bg-color: #fff;
}
button {
background-color: var(--bg-color);
transition: background-color 0.5s ease;
}
button:hover {
--bg-color: #006699;
}

在这个例子中，当鼠标移动到按钮上时，它的背景颜色会从白色渐变到蓝色。

最后需要注意的是，CSS的自定义属性只能用在声明块中，而不能用在选择器或属性名中。