css - CSS 中 '@' 符号的用途是什么？

Question

我刚刚偶然发现 this question我注意到用户使用了一些我以前从未见过的符号:

@font-face {
   /* CSS HERE */
}

那么这个 @ 符号是 CSS3 中的新东西，还是我不知何故忽略的旧东西？这是否类似于在 ID 中使用 #，在类中使用 .？谷歌没有给我任何与此相关的好文章。 CSS 中 @ 符号的用途是什么？

Answer 1

@ 自 CSS1 中的 @import 时代以来就已经存在，尽管可以说它在最近的 @media 中变得越来越普遍(CSS2 , CSS3) 和 @font-face (CSS3) 结构。不过，正如我提到的，@ 语法本身并不新鲜。

这些在 CSS 中都称为 at-rules。它们是针对浏览器的特殊说明，与使用规则和属性的 Web 文档中 (X)HTML/XML 元素的样式没有直接关系，尽管它们在控制如何应用样式方面发挥着重要作用。

一些代码示例:

/* Import another stylesheet from within a stylesheet */
@import url(style2.css);

/* Apply this style only for printing */
@media print {
    body {
        color: #000;
        background: #fff;
    }
}

/* Embed a custom web font */
@font-face {
    font-family: 'DejaVu Sans';
    src: local('DejaVu Sans Regular'), url(/fonts/DejaVuSans.ttf);
}

• @font-face rules定义并非在所有计算机上始终可用的设计中使用的自定义字体，因此浏览器从服务器下载字体并使用该自定义字体设置文本，就好像用户的计算机具有该字体一样。

• @media rules , 连同 media queries (以前只有 media types )，根据页面显示的媒体控制应用哪些样式，哪些不应用。在我的代码示例中，只有在打印文档时，所有文本才应设置为黑色和白色(论文)背景。您可以使用媒体查询过滤掉打印媒体、移动设备等，并针对这些设置不同的页面样式。

At 规则与 selectors 无关任何。由于它们的不同性质，不同的 at 规则在许多不同的模块中以不同的方式定义。更多示例包括:

• Conditional rules
• Keyframe animations
• Paged media

(此列表远非详尽无遗)

您可以在 MDN 找到另一个非详尽列表.