首页 > 文章 > 前端

CSS中的功能和@Rules

时间：2025-02-06 08:36:52 268浏览收藏

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《CSS中的功能和@Rules》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

CSS中的功能和@Rules

本文最初发表于thedevspace.io。掌握Web开发所需的一切

CSS函数是赋予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>;
  /* ... */
}

@规则的用途多种多样，难以概括。例如，@charset规则指定CSS文件的字符编码；@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中还有其他@规则，我们将在后续教程中介绍。目前，您只需要了解其基本语法即可。

进一步阅读

如何创建和自定义CSS动画什么是CSS选择器 CSS中的盒模型是什么

本篇关于《CSS中的功能和@Rules》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！