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新的东西，或某些旧的，我不知何故被忽视？这是类似于使用＃的I​​D，以及使用。的类。 Google没有给我任何与此相关的好文章。 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?

推荐答案

code> @ 已经在CSS1中 @import 的日子已经存在，但是在最近的 @media （CSS2，CSS3）和 @ font-face @ 语法本身，但是，正如我所提到的，不是新的。

@ 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.

规则。它们是浏览器的特殊说明，与使用规则和属性的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-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:

    
    
    • 条件规则
    
    
    • 关键帧动画
    
    
    • 分页媒体
    
    
    • Conditional rules
    • Keyframe animations
    • Paged media

    （此列表远不够详尽）

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

    You can find another non-exhaustive list at MDN.

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