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

Question

我只是偶然发现了这个问题,我发现用户正在使用一些我以前从未见过的符号:

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

那么这个@符号在CSS3中是新的东西,还是我曾经忽略过的旧东西？这类似于您使用的ID #,以及您使用的类.吗？谷歌没有给我任何与此相关的好文章.@CSS中符号的用途是什么 ？

Answer 1

@自@importCSS1 时代开始就存在,尽管它在最近@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规则,与媒体查询(以前只有媒体类型)一起,控制应用哪些样式,哪些不基于页面显示的媒体.在我的代码示例中,只有在打印文档时才应设置所有文本在黑色反对白色(纸)背景.您可以使用媒体查询过滤掉打印介质,移动设备等,并为这些页面设置不同的样式页面.

规则与选择器无关.由于它们的性质不同,在不同的模块中以不同的方式定义了不同的规则.更多例子包括:

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

(这个清单远非详尽无遗)

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

Answer 2

@ 用于定义规则.

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

以上称为at-rules.

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的屏幕.

这样可以方便地使用像浮标一样的标签或在较小的屏幕上滚动; 您通常可以在较小的屏幕上将标签标签的字体大小缩小到点大小并使它们全部适合.