网站建设需要哪些软件,二手车网站系统,网页背景图片高清,创新网站建设工作室原生变量root 伪类 原生变量 CSS中我们可以统一设置变量方便页面维护。变量声明的时候#xff0c;自定义样式变量名之前加上两根连词线 – 即可#xff0c;使用 var() 来引用。声明的变量是有作用域的 ( 比如是在html中声明的变量#xff0c;那么该变量在html… 原生变量root 伪类 原生变量 CSS中我们可以统一设置变量方便页面维护。变量声明的时候自定义样式变量名之前加上两根连词线 – 即可使用 var() 来引用。声明的变量是有作用域的 ( 比如是在html中声明的变量那么该变量在html中的任何地方都可以使用这个变量如果该变量在h2标签中声明的那么只能在h2标签下使用这个变量或它的值) 声明
body {--yanse: #f700ff;--kuandu: 30px;--gao: 50px;
}
/*yanse 与 kuandu 与 gao 是变量名称它们的值分别是 #f700ff 和 30px 和 50px变量大小写敏感、变量名等这些参考 js变量名规则而变量名中存储的值的书写规则仍然采用 css的规则如 --x: 50px 30px 而不是 --x: 50px 30px
*/使用 var() 函数是用来读取变量
div{background-color: var(--yanse);width: var(--kuandu);height: var(--gao);
}var() 函数有第二个参数表示变量的默认值如果该变量不存在(第一个参数)那么就使用这个默认值。并且第一个参数后面的全部算第二个参数写多个第二个参数语法也会提示报错
div{background-color: var(--yanse, #ffea00);width: var(--kuandu,50px);height: var(--gao,70px);
}var() 函数也可作为其它变量的值但也仅作为其它变量的值使用
html{--main-color: red;--div-text-color: var(--main-color);/* 无效 */var(--main-color): green;
}作用域 CSS 变量遵从 CSS 优先级的原则变量值可能会被覆盖
style
html {--color: blue;
}
h1 {--color: green;
}
.h1 {--color: yellow;
}
#h1 {--color: red;--div: #a2ffe2
}
* {color: var(--color); /* 在不同作用域中声明同一个变量只生效自己作用域中的变量值且遵从优先级原则 */
}
div{color: var(--div); /* 无法使用 #h1 标签作用域中声明的变量 */
}
/style
h2蓝色/h2
h1绿色/h1
h1 classh1黄色/h1
h1 idh1红色/h1
div我会是什么颜色(蓝色)/div效果:
root 伪类 这个 CSS伪类 :root 匹配文档树的根元素表示 html 被选中除了优先级更高之外与 html 选择器相同 语法
style/* 选中文档的根元素HTML 中的 html */:root {background: yellow;}
/style效果: 使用 只要当前页面引用了 :root 所在的样式文件都可以使用 var() 来引用 style:root{--opc: 0.9;--bgc: 72;--width: 200px;--height: 100px;}div{/* var() 函数可以代替元素中任何属性中的值的任何部分var() 函数不能作为属性名、选择器或者其它除了属性值之外的值 */background-color: rgba(0, var(--bgc), 243, var(--opc));width: var(--width);height: var(--height);}
/style
div/div效果:
