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

148

我偶然发现了这个问题，发现用户使用的是我从未见过的符号：

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

那么，这个@符号在CSS3中是新出现的，还是在某种程度上被我忽略的旧事物？这是否类似于您使用ID #和使用类的位置.？Google没有给我任何与此相关的好文章。@CSS中符号的目的是什么？

css syntax symbols

— 里斯托
source

177

@自从@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上找到另一个非详尽列表。

— BoltClock
source

2

@media print {/ *您是否要打印视频或音频文件？* /}

— kurdtpage 2015年

26

@ 用于定义规则。

@import
@page
@media
@ font-face
@charset
@namespace

以上称为at-rule。

— 弗兰基
source

2

“定义规则”是什么意思？

— 赫里斯特

1

规则封装了许多CSS规则，并将它们应用于特定的内容。（htmldog.com/guides/cssadvanced/atrules）–

— 弗兰基

7

@media的一个示例可能对进一步说明它很有用：

@media screen and (max-width: 1440px)
{
    span.sizedImage
    {
        height:135px;
        width: 174px;
    }
}    

@media screen and (min-width: 1441px)
{
    span.sizedImage
    {
        height:150px;
        width: 200px;
    }
}

在较小的屏幕上使用较小的图像，这将根据屏幕的大小有条件地更改图像的大小。第一块将处理最大宽度为1440px的屏幕；第二个将处理大于1440像素的屏幕。

这很方便，例如选项卡可以在较小的屏幕上浮动或滚动。您通常可以在较小的屏幕上将选项卡标签的字体大小降低到一个点大小，然后将它们放在一起。

— 鲍勃·罗德斯
source

1

@用作规则规范。喜欢@font-face

— r3st0r3
source

1

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; }

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

— ll
source