CSS 表达式（也称作自订特性）是一类当代 CSS 规范化，虽然应用程序的普遍认可，它愈来愈注重。它增加了代码和保护天数，并容许您合作开发跨应用程序相容的中文网站。
他们将积极探索甚么是CSS表达式和怎样在CSS中采用变量来建立很漂亮的积极响应式中文网站。
What Are CSS Variables? 甚么是CSS 表达式
CSS 表达式是自订特性，您能在当中储存值并在 HTML 标识符中的任何人边线采用它。
CSS 表达式的调用是通过在表达式中文名称前面加之“–”来顺利完成的。比如，下列句法将表达式“my_font”调用为 20px。
–my_font: 20px;
“my_font”表达式那时能在标识符中的任何人边线采用，值“20px”。
1
font-size: var(–my_font, 20px);
缺省在相同各方面的组织工作形式相同。他们将在责任编辑前面探讨这一点儿，并提供更多许多与 Web 应用程序有关的有意思插画。
CSS表达式的促进作用
在他们竭尽全力介绍如何在 CSS 中采用表达式以后，让他们深入探讨呵呵在 CSS 中采用表达式的许多好处。作为Web合作开发人员，您将能够与之有关，并回顾采用它们您的生活将怎样更轻松。
1. 增加冗余标识符
CSS 中的表达式消除了系统中的这种冗余，他们只需要更改一次颜色 – 在表达式的值中。
超级灵活，能在任何人边线定义表达式
CSS 表达式是 CSS 的自订特性。与其他自订特性类似，您能在任何人边线采用 CSS 中的表达式。下列是将其与样式标签一起采用的方法：
<style>
h2 {
color: var(–heading_color, black);
}
</style>
内联采用它可能是另一类选择：
Calc 和CSS 表达式
font-size: calc(20 * 2.5)px;
1
2
3
4
5
:root {
–paragraph_size: 20px;
}
h2 {
font-size: calc(var(–paragraph_size) * 2.5);
CSS 表达式的促进作用域
全局表达式
:root {
–my_variable: <value>
}
:root {
–my_variable: <value>;
}
div {
<property>: var(–my_variable, fallback)
}
局部表达式
div {
width: 300px;
height: 200px;
color: white;
font-weight: bold;
font-size: 30px;
}
#first_div {
–my_bg: #692a3c;
background-color: var(–my_bg, black);
}
<div id = “first_div”>I am a div</div>
CSS 表达式缺省
当没有设置表达式时，var 能设置缺省
<style>
:root {
–my_bg : #9e2e50;
}
div {
width: 300px;
height: 200px;
color: black;
font-weight: bold;
font-size: 30px;
background-color: var(–my_bg, black);
}
</style>
</head>
<body>
<center>
<div>
I am a div box!!
</div>
</center>
</body>
设置两层var值时
当第二个值没有设置正确时，将会采用第一个设置的background-color
<style>
:root {
–my_bg : #9e2e50;
}
div {
background-color: #9e2e50;
background-color: var(–my_bg, black);
}
</style>
1
background-color: var(variable_name, var(variable_name, fallback));
CSS 表达式异常处理
循环依赖：
–variable_name_1 : var(variable_name_2, fallback);
–variable_name_2 : var(variable_name_1, fallback);
自身依赖
–variable_1 = var(variable_1, fallback);
CSS 表达式是大小写敏感
CSS 表达式不能是特性名
如不能是“font-size.
Javascrip 中采用CSS Variables
透过js 来调整字体大小
<style>
:root {
–fontSize: 20px;
}
div {
font-size: var(–fontSize, 12px);
background-color: #9e2e50;
}
</style>
<script>
function changeFontSize() {
var r = document.querySelector(:root);
var rs = getComputedStyle(r);
r.style.setProperty(–fontSize, 40px);
}
</script>
</head>
<body>
<center>
<div>
I am a div box!!
</div>
<br><br>
<button onclick=”changeFontSize()”>Change Font Size</button>
</center>
</body>
