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，以及使用。的类。 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-facerules 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.@媒体规则，以及媒体查询 （以前只有媒体类型），控制应用哪些样式，哪些不适用基于页面显示在什么媒体。在我的代码示例中，只有当打印文档时，所有文本都应以黑色对白色（纸张）背景设置。您可以使用媒体查询过滤出打印介质，移动设备等，并为这些样式设置不同的样式页面。@mediarules, 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
（此列表远不够详尽）
(this list is far from exhaustive)
您可以在 MDN 找到另一个非详尽的列表。
You can find another non-exhaustive list at MDN.
这篇关于CSS中的“@”符号的用途是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
