CSS中的'@'符号有什么作用？

Question

我刚偶然发现了这个问题，并且我注意到用户正在使用一些我从未见过的记号：

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

那这个 @ 符号是 CSS3 中的新东西，还是我不知道的旧事？这是类似于使用 ID 时使用 #，使用类时使用 . 的东西吗？谷歌没有给我任何相关好文章。在 CSS 中，@ 符号的目的是什么？

- Hristo

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规则定义了自定义字体，用于设计中在所有计算机上都不一定都可用，因此浏览器会从服务器下载字体，并将文本设置为该自定义字体，就像用户的计算机拥有该字体一样。

• @media规则结合媒体查询（以前仅限媒体类型）根据页面显示的媒体控制应用哪些样式和哪些不应用。在我的代码示例中，只有打印文档时，所有文本才应设置为黑色，背景为白色（纸张）。您可以使用媒体查询来过滤打印媒体、移动设备等，并为这些设备分别设置不同的样式。

At-rules与选择器毫无关系。由于它们的性质不同，在许多不同的模块中以不同的方式定义了不同的at-rules。更多示例包括：

• 条件规则
• 关键帧动画
• 分页媒体

（此列表远非详尽）

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

- BoltClock

---

@media print{ /* 你是要打印视频或音频文件吗？？ */ } - kurdtpage

Answer 2

@ 用于定义一条规则。

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

以上被称为 at-rule。

- Frankie

---

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

@规则封装了一堆CSS规则并将它们应用于特定的内容。(http://htmldog.com/guides/cssadvanced/atrules/) - Frankie

这应该是被采纳的答案。上面被采纳的答案谈到了“At-rules”，但从未真正回答“@”做什么的问题。 - HoldOffHunger

Answer 3

一个可能有用的 @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以下的屏幕；第二个块将处理宽度大于1440px的屏幕。

在处理像在较小的屏幕上浮动、下拉或滚动的选项卡等内容时，这非常方便；您可以在较小的屏幕上将选项卡标签的字体大小降低一号，并使它们全部适合。

- BobRodes

Answer 4

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

注意：本文作者非中文母语者，请参考第一条评论。

- Tcll

---

回复：关于你的“注意事项”——没有第一条评论，它可能已被删除。 你是否愿意在你的问题中包含细节（对于重要的细节，你应该总是这样做）？ - rory.ap

Answer 5

@用作规则规范。就像@font-face

- Chinmoy