CSS中'@'符号的用途是什么？答案

【问题标题】：What is the purpose of the '@' symbol in CSS?CSS中'@'符号的用途是什么？
【发布时间】：2011-03-28 01:33:39
【问题描述】：

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

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

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

【问题讨论】：

标签： css syntax symbols

【解决方案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-rules 与 selectors 没有任何关系。由于它们的不同性质，不同的规则在许多不同的模块中以不同的方式定义。更多示例包括：

（此列表远非详尽）

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

【讨论】：

@media print{ /* 你想打印视频或音频文件吗？ */ }

【解决方案2】：

@ 用于定义规则。

@import
@page
@media
@字体脸
@charset
@namespace

以上称为at-rules。

【讨论】：

“定义规则”是什么意思？
At-rules 封装了一堆 CSS 规则并将它们应用于特定的东西。 (htmldog.com/guides/cssadvanced/atrules)
这应该是公认的答案。上面接受的答案是关于at-rules，但实际上从未停止回答@ 的作用。

【解决方案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;
    }
}

这将根据屏幕大小有条件地改变图像的大小，在较小的屏幕上使用较小的图像。第一个块将寻址宽度达 1440 像素的屏幕；第二个将解决大于 1440 像素的屏幕。

这对于在小屏幕上浮动或滚动的选项卡之类的东西很方便；您通常可以在较小的屏幕上将选项卡标签的字体大小降低一个磅值并使其全部适合。

【讨论】：

【解决方案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; }

注意：不是原生的，请参阅第一条评论。

【讨论】：

RE：你的“注意：”——没有第一条评论；它一定被删除了。关心在你的问题中包含细节（就像你应该总是对重要细节做的那样）？

【解决方案5】：

@ 用作规则规范。赞@font-face

【讨论】：