函数是 CSS 中的特殊语句，可为语言添加编程特性。函数接受一个或多个输入并返回一个输出，然后将其分配给 CSS 属性。
例如，rgb()我们之前讨论的函数接受三个值作为输入，并返回相应的颜色代码作为输出。然后将颜色代码分配给属性color。
p {
color: rgb(168, 189, 45);
}CSS 中有几十种不同的函数，您可以在此处找到完整的参考。
由于有些功能非常高级，因此不可能在一节课中全部讨论。相反，我们将在将来遇到具体示例时更多地讨论它们。
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: skyblue;
--font-size: 16px;
--font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}
p {
border: var(--primary-color) solid 2px;
font-size: var(--font-size);
font-family: var(--font-family);
}@ 规则
@ 规则是 CSS 中的特殊语句。它们的语法如下：
@<identifier> <rule>;
@<identifier> {
<rule>;
<rule>;
/* . . . */
}
@<identifier> <name> {
<rule>;
<rule>;
/* . . . */
}很难概括@规则到底是什么，因为不同的规则在CSS中有不同的用途。例如，规则@charset指定了CSS文件中使用的字符编码方法。
@charset "utf-8";@import用于导入外部CSS文件。
@import url("/path/to/external-styles.css");url()是另一个用于加载外部文件的 CSS 函数。稍后，我们还将使用它来加载背景图像和其他资源。
@font-face用于指定显示文本的自定义字体。
@font-face {
font-family: "Trickster";
src: url("/path/to/trickster.woff") format("woff");
/* . . . */
}@keyframes定义动画效果中的关键帧。
@keyframes changecolor {
from {
color: red;
}
to {
color: blue;
}
}当然，CSS 中还有其他 @ 规则，我们将在以后的课程中讨论它们。目前，您只需要熟悉语法即可。