CSS中“@"符号的用途是什么? [英] What is the purpose of the '@' symbol in CSS?

问题描述

我刚刚偶然发现了这个问题，我注意到用户使用了一些符号我以前从未见过:

I just stumbled across this question and I noticed the user is using some notation I've never seen before:

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

那么这个 @ 符号是 CSS3 中的新符号，还是我以某种方式忽略的旧符号?这是否与 ID 使用 # 和类使用 . 类似?谷歌没有给我任何与此相关的好文章.CSS中@符号的作用是什么?

So is this @ symbol something new in CSS3, or something old that I've somehow overlooked? Is this something like where with an ID you use #, and with a class you use .? Google didn't give me any good articles related to this. What is the purpose of the @ symbol in CSS?

推荐答案

@ 在 CSS1 中的 @import 时代就已经存在了，尽管它可以说变得越来越普遍在最近的 @media (CSS2, CSS3) 和 @font-face (CSS3) 结构中.不过，正如我所提到的，@ 语法本身并不新鲜.

@ has been around since the days of @import in CSS1, although it's arguably becoming increasingly common in the recent @media (CSS2, CSS3) and @font-face (CSS3) constructs. The @ syntax itself, though, as I mentioned, is not new.

这些在 CSS 中都称为 at-rules.它们是针对浏览器的特殊指令，与使用规则和属性的 Web 文档中的 (X)HTML/XML 元素的样式没有直接关系，尽管它们在控制样式的应用方式方面确实发挥了重要作用.

These are all known in CSS as at-rules. They're special instructions for the browser, not directly related to styling of (X)HTML/XML elements in Web documents using rules and properties, although they do play important roles in controlling how styles are applied.

一些代码示例:

/* 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 规则 定义在您的设计中使用的自定义字体，但并非总是在所有计算机上都可用，因此浏览器会从服务器下载字体并使用该自定义字体设置文本，就好像用户的计算机拥有该字体一样.

  • @font-face rules define custom fonts for use in your designs that aren't always available on all computers, so a browser downloads a font from the server and sets text in that custom font as if the user's computer had the font.

    @media 规则，结合媒体查询(以前只有媒体类型)，控制应用哪些样式以及哪些不基于页面显示的媒体.在我的代码示例中，只有在打印文档时，所有文本都应该在白色(纸张)背景下设置为黑色.您可以使用媒体查询过滤掉印刷媒体、移动设备等，并为这些设置不同的页面样式.

    @media rules, in conjunction with media queries (formerly only media types), control which styles are applied and which aren't based on what media the page is being displayed in. In my code example, only when printing a document should all text be set in black against a white (the paper) background. You can use media queries to filter out print media, mobile devices and so on, and style pages differently for those.

    At 规则与 选择器 没有任何关系.由于其不同的性质，不同的 at 规则在许多不同的模块中以不同的方式定义.更多示例包括:

    At-rules have no relation to selectors whatsoever. Because of their varying nature, different at-rules are defined in different ways across numerous different modules. More examples include:

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

    (此列表远非详尽无遗)

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

    You can find another non-exhaustive list at MDN.

    这篇关于CSS中“@"符号的用途是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！