CSS中的函数和规则详解-原创手记-慕课网

这篇帖子发布在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中还有其他的规则可用，我们会在后面的课程里讨论这些规则。现在你只需要了解这些语法格式。

更多阅读材料