如何为甘肃省建设类证书查询网站设计一个有效的团队网站建设？
摘要：甘肃省建设类证书查询网站,团队网站建设,网站开发界面图标设计,政务网站的建设方案前端的开发工作中，CSS 是不可或缺的部分；实际工作中，我们通过Jav
甘肃省建设类证书查询网站,团队网站建设,网站开发界面图标设计,政务网站的建设方案前端的开发工作中#xff0c;CSS 是不可或缺的部分#xff1b;实际工作中#xff0c;我们通过JavaScript 来进行数据和交互工作#xff0c;CSS 为用户呈现可视化的界面。有时#xff0c;CSS 来进行部分交互效果是不是会比 JavaScript 更高效、更省事呢#xff1f; 一、变…前端的开发工作中CSS 是不可或缺的部分实际工作中我们通过JavaScript 来进行数据和交互工作CSS 为用户呈现可视化的界面。有时CSS 来进行部分交互效果是不是会比 JavaScript 更高效、更省事呢 一、变量使用 一命名规范 我们已经很熟悉 JavaScript 中的变量了在 JavaScript 中
var a hellow world在 CSS 中以两个横线开头的“属性”都是 CSS 变量其他没有任何限制如
:root {--1: red
}
/*** var()函数就是用于读取变量* color: var(--深蓝, #fff); //第二个参数就是默认值* 假设--深蓝为空情况下会使用#fff**/
body {color: var(--1)--深蓝: #fffbackground-color: var(--深蓝, #fff)
}// 注意变量值只能用作属性值不能用作属性名
.foo {--style: color/* 很显然下面是无效的 */var(--style): black
}二变量值类型 如果变量值是一个字符串可以与其他字符串拼接如
--bar: hello
--foo: var(--bar) world// 示例
body:after {content: --screen-category : var(--screen-category)
}如果变量值是数值不能与数值单位直接连用如
foo {--gap: 20;/* 下面无效 */margin-top: var(--gap)px/* 通过calc去计算下面有效 */margin-top: calc(var(--gap) * 1px)
}如果变量值带有单位就不能写成字符串如
/* 无效 */
.foo {--foo: 20pxfont-size: var(--foo)
}/* 有效 */
.foo {--foo: 20pxfont-size: var(--foo)
}三变量作用域 :root 选择器允许你定位到 DOM 中的最顶级元素或文档树相当于全局变量同一个 CSS 变量可以在多个选择器内声明。读取的时候优先级最高的声明生效。