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

我只是偶然发现了 这个问题，我注意到用户正在使用一些我从未见过的符号:

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

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

95676 次浏览
小开
最佳答案

自从 @import在 CSS1中出现以来，@就一直存在，尽管在最近的 @media(CSS2，CSS3)和 @font-face(CSS3)构建体中可以说越来越常见。但是，正如我提到的，@语法本身并不新。

这些在 CSS 中都称为 按规矩办事。它们是针对浏览器的特殊指令，与使用规则和属性在 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找到另一个非详尽列表。

小开

@用于定义规则。

@ import
@ page
@ media
@ font-face
@ charset
@ nampace < br/>

以上这些称为 at-rule。

小开

@ 用作规则说明，就像 @font-face

小开

@ 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 的屏幕。

这对于在较小的屏幕上浮动或滚动的标签来说很方便; 你可以经常在较小的屏幕上将标签的字体大小降低一个点，并使它们都适合。

小开

ProBoardsCSS 样式也使用这些作为变量。

下面是他们其中一个 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; }

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


提交答案