湖州专业网站建设公司,写文案要看的网站,沈阳高端网站制作,会员管理系统下载我们常见的网站日夜间模式的变化#xff0c;其实用到了 css 自定义属性。 CSS 自定义属性#xff08;也称为 CSS 变量#xff09;是一种在 CSS 中预定义和使用的变量。它们提供了一种简洁和灵活的方式来通过多个 CSS 规则共享相同的值#xff0c;使得样式更易于维护和修改。… 我们常见的网站日夜间模式的变化其实用到了 css 自定义属性。 CSS 自定义属性也称为 CSS 变量是一种在 CSS 中预定义和使用的变量。它们提供了一种简洁和灵活的方式来通过多个 CSS 规则共享相同的值使得样式更易于维护和修改。
:root {--main-color: #06D6A;
}
在这个例子中我们定义了一个名为 --main-color 的 CSS 自定义属性并将其值设置为 #06D6A。
然后在任何需要使用这个颜色的地方你可以使用 var() 函数来使用这个自定义属性像这样
body {background-color: var(--main-color);
}
在这个例子中背景颜色会使用在 :root 中定义的 --main-color 属性的值即 #06D6A。
CSS 自定义属性可以帮助你更有效地组织和复用样式使你的 CSS 更加简洁和易于维护。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.container1,.container2 {display: flex;margin: 0 auto;width: 550px;height: 300px;line-height: 300px;text-align: center;border: 1px solid #cccccc;}.container1 div,.container2 div {flex: 1;border: 1px solid #cccccc;}/* 定义 css变量 选择器定义变量的范围 */html {--main-color: skyblue;}.container1 div {/* var() 输入css变量 */background-color: var(--main-color);}.container2 div {/* var() 输入css变量 */color: var(--main-color);}/style
/headbodydiv classcontainer1divbox1/divdivbox2/divdivbox3/div/divdiv classcontainer2divbox4/divdivbox5/divdivbox6/div/div
/body/html 最后结果
