CSS中“ @”符号的作用是什么？

Question

我偶然发现了这个问题，发现用户使用的是我从未见过的符号：@font-face {   /* CSS HERE */}那么，这个@符号在CSS3中是新出现的，还是在某种程度上被我忽略的旧事物？这是否类似于您使用ID #和使用类的位置.？Google没有给我任何与此相关的好文章。@CSS中符号的目的是什么 ？

Answer 1

@自@importCSS1诞生以来，它就已经存在了，尽管可以说在最近的@mediaCSS2，CSS3和@font-faceCSS3结构中它变得越来越普遍。该@语法本身，不过，正如我所说，是不是新的。

这些在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规则定义了并非总是在所有计算机上都可用的供设计中使用的自定义字体，因此浏览器从服务器下载字体，并以该自定义字体设置文本，就像用户计算机具有该字体一样。

@media规则与媒体查询（以前仅是媒体类型）一起，根据显示页面所用的媒体来控制应用哪种样式，以及哪种样式不是基于该样式。在我的代码示例中，仅当打印文档时，才应设置所有文本黑色，白色（纸张）背景。您可以使用媒体查询来过滤出打印媒体，移动设备等，并为这些页面设置样式。

规则与选择器没有任何关系。由于其性质各异，因此在众多不同模块中以不同方式定义了不同的规则。更多示例包括：

条件规则

关键帧动画

分页媒体

（此列表并非详尽无遗）

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

Answer 2

ProBoards CSS样式也将这些用作变量。

这是他们的CSS页面中的一小段：

@wrapper_width: 980px;

@link_color: #c06806;

@link_font: 100% @default_forum_text_font_family;

@link_decoration: none;

#wrapper { width: @wrapper_width; margin: 0 auto; overflow-x: hidden; }

table { table-layout: fixed; }

a { cursor: pointer; color: @link_color; font: @link_font; text-decoration: @link_decoration; }

注意：不是本机，请参阅第一个评论。