网站设计公司北京服务类网站免费建站
1. 什么是 -- 自定义属性?
CSS3 引入了自定义属性,也就是我们说的css变量, 这些变量可以在css中的任何位置使用,与js中变量不同,CSS变量的作用域是基于DOM结构的,换句话说,变量可以被局部或全局使用,这取决于它们声明位置,与传统的CSS样式表中直接写死的值不同,自定义属性可以在多个地方被引用和修改,CSS自定义属性的定义以--开头,且必须var( )函数来引用
语法规则:
- 定义: --变量名: 值;
- 使用: var(--变量名,[可选的默认值])
- 例子:
1. 全局作用域
//定义 :root选择器, 确保它们在全局范围内有效
:root {
--main-color: #3498db;
--font-size: 16px;
}//其他页面都可以使用
body {
background-color: var(--main-color);
font-size: var(--font-size);
}
2. 局部作用域
如果在特定的选择器中定义了变量,它们只会在改选择器内部生效
.container {--local-color: #ff6347;
}.container p {color: var(--local-color);
}.container .title {color: var(--local-color);
}3.CSS变量的默认值
声明了CSS自定义属性之后,在使用var( )时,可以为变量提供一个默认值,如果改变量未定义或者无法找到时,CSS会使用这个默认值,这可以防止页面渲染时因缺少变量而导致的错误, var( )函数接受两个参数:
- 必需的参数: 引用CSS变量名
- 可选的默认值: 如果变量未定义或不可用,使用次默认值
div{
color: var(--undefined-color,#333); //如果--undefined-color 未定义,使用#333
}
在这个例子中,如果--undefined-color没有定义, color属性会使用默认的#333值
4. 动态改变CSS变量
CSS变量不仅可以在静态样式表中使用,还可以在js中动态修改,这使得开发者可以通过js实现动态主题切换,响应式设计和交互样式调整功能
1.在js中修改css变量
可以通过style.setProperty( ) 方法动态更改CSS变量
document.documentElement.style.setProperty('--primary-color', '#9b59b6');
这行代码会把全局变量 --primary-color 的值修改为 #9b59b6
或者CSS修改(鼠标移入按钮,改变变量)
button: hover{
--primary-color : #3498db //修改变量
}
2.实现主题切换, 通过js和css变量, 你可以实现一个简单的主题切换功能
<button onclick="toggleTheme()">切换主题</button><style>:root {--background-color: white;--text-color: black;}body {background-color: var(--background-color);color: var(--text-color);}
</style><script>function toggleTheme() {const currentBackground = getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim();if (currentBackground === 'white') {document.documentElement.style.setProperty('--background-color', '#333');document.documentElement.style.setProperty('--text-color', '#fff');} else {document.documentElement.style.setProperty('--background-color', 'white');document.documentElement.style.setProperty('--text-color', 'black');}}
</script>点击按钮后,toggleTheme( ) 函数会动态切换 --background-color 和-text-color变量,从而实现白天/黑夜主题的切换
5.CSS变量的继承,计算和媒体查询使用
CSS变量支持继承和计算,可以利用数学表达式来操作变量的值,增强样式的灵活性
1. 当一个元素没有定义某个CSS变量时,它会从父元素继承该变量的值
:root {--base-padding: 10px;
}.container {padding: var(--base-padding);
}.card {padding: var(--base-padding); /* 继承自 .container */
}2.可以在CSS变量中使用计算,比如通过calc( ) 函数来计算尺寸
:root {--base-size: 20px;
}.element {width: calc(var(--base-size) * 2);height: calc(var(--base-size) + 10px);
}3.css变量与媒体查询结合使用
CSS变量非常适合和媒体查询一起使用,能够帮助你轻松地创建响应式设计,你可以在不同的屏幕尺寸下,修改变量的值以实现不同的布局主题
:root {--font-size: 16px;
}body {font-size: var(--font-size);
}@media (max-width: 600px) {:root {--font-size: 14px; /* 在小屏幕下修改字体大小 */}
}6.总结
css自定义属性var( )函数式CSS中强大的工具,它使得开发者可以更加灵活地管理样式,提高代码的可维护性,并且可以通过js动态修改样式,通过合理使用CSS变量,我们能够更高效地阻止样式代码,轻松实现主题切换和响应式设计等功能
关键点总结:
- 变量通过--定义,在var( ) 中引用
- 可以使用全局和局部作用域
- 可以为变量提供默认值
- 可以通过js动态修改变量值
- 支持继承和计算,增强了样式表的灵活性
- 避免重复代码,提高样式的复用性
- 使代码更具可维护性,尤其是在大型项目中