这篇帖子发布在thedevspace.io。所有你需要掌握的 web 开发内容，一站式服务。
函数是 CSS 中的特殊声明，为语言添加了编程特性。函数可以接受一个或多个参数，并返回一个输出，该输出会被赋值给 CSS 属性。
比如说，之前我们讨论过的 rgb() 函数接受三个值输入，返回相应的颜色代码。然后将这个颜色代码赋给 color 属性。
p {
color: rgb(168, 189, 45); /* 这里的颜色是rgb(168, 189, 45) */
}进入全屏，退出全屏
CSS中有数十种不同的功能可以使用，你可以在这里找到一个完整的参考文档。
一次课里讨论所有这些功能是不可能的，因为其中一些功能比较复杂。相反，当我们遇到具体例子时，我们会更详细地讨论它们。
var() 函数今天我们来聊聊一个特别的函数 var()。了解 var() 的工作原理会让你对函数是什么以及它们能做什么有更深的理解。
你可以通过var()函数获取一个用户定义的变量，这样你就可以使用它了。
:root {
--primary-color: salmon;
}
p {
color: var(--primary-color);
}
点击进入全屏模式，点击退出全屏模式
这些变量定义在 :root。:root 是一个 伪选择器，它用于匹配 HTML 文档的根元素，也就是 <html> 标签。
在这个示例中，--primary-color 是变量名，salmon 则是变量值。var() 函数将变量名作为输入，并返回该值。
var()函数允许你在CSS文件中的不同位置重用相同的变量。
在设计网页时，你需要保持设计风格的一致性。比如说，如果你想把skyblue作为你的主要强调色，你需要在整个CSS文件中的多个地方使用这个值。
a {
color: skyblue;
/* 字体颜色为天蓝色 */
}
button {
background-color: skyblue;
/* 背景颜色为天蓝色 */
}
/* . . . */全屏模式 退出全屏
但这意味着当你想要调整设计时，必须浏览整个文件进行调整。这很容易出错，尤其是在大型项目里。
更好的方式是将这些信息作为变量放在 :root 部分，然后使用 var() 函数访问它们。当你需要更改强调色时，只需修改相应的变量即可。
:root {
--primary-color: skyblue;
}
a {
color: var(--primary-color);
}
button {
background-color: var(--primary-color);
}
点击进入全屏 按钮 退出全屏 按钮
当然，var()的功能不仅仅局限于颜色。你可以定义你想要的任何内容，比如字体系列、字号、宽度和高度等。
:root {
--primary-color: 天蓝色;
--font-size: 16px;
--font-family: 潘布拉, 考林, 乔治亚, Times, "Times New Roman";
}
p {
边框: var(--primary-color) solid 2px;
大小: var(--font-size);
字体: var(--font-family);
}
进入全屏，退出全屏
@ 的规矩这些 @ 规则是在 CSS 中的特殊规则。其语法如下：
@<标识符> <规则类型>;
@<标识符> {
<规则类型>;
<规则类型>;
// . . .
}
@<标识符> <名称标识符> {
<规则类型>;
<规则类型>;
// . . .
}全屏（点击进入/退出）
很难准确地概括 @ 规则是什么，因为它们在 CSS 中有着不同的作用。例如，@charset 规则用于指定 CSS 文件中采用的字符编码方式。
@charset "utf-8"; /* 设置字符集为UTF-8 */退出全屏模式, 进入全屏模式
@import 用于引入外部的 CSS 文件。
@import url("/path/to/external-styles.css");这是从外部导入样式表的代码。请注意，CSS代码在不同语言环境下保持不变。
进入全屏 切换全屏 退出全屏
url() 是另一个 CSS 函数，用于加载外部文件。之后，我们也将使用它来加载背景图片和其他类型的资源，包括加载背景图片。
@font-face 用于指定自定义字体，这些字体用于显示文本。自定义字体链接。
@font-face {
font-family: "Trickster";
src: url("/path/to/trickster.woff") format("woff");
/* . . . */
}全屏模式，退出全屏
在 CSS 中，@keyframes 用于定义动画的关键帧。
@keyframes 改变颜色 {
从 {
color: red;
}
到 {
color: blue;
}
}点击全屏显示 点击退出全屏
当然，CSS中还有其他的规则可用，我们会在后面的课程里讨论这些规则。现在你只需要了解这些语法格式。
更多阅读材料共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
