CSS中“@”符号的用途是什么?

@ 从那以后 @import 在CSS1中,尽管最近几年它越来越普遍 @media @font-face (CSS3)构造。这个 @

这些在CSS中都被称为 at规则 . 它们是针对浏览器的特殊指令,与使用规则和属性设置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

@ 用于定义规则。

@import
@页码
@media
@字体

@namespace

at-rule s。

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

这对于在小屏幕上浮动、下降或滚动的标签来说很方便;您通常可以在较小的屏幕上将选项卡标签的字体大小降低一个点,使它们都适合。

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

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

注意:不是本地的,请参阅第一条注释。