CSS CSS中“@”符号的用途是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3453257/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the purpose of the '@' symbol in CSS?
提问by Hristo
I just stumbled across this questionand I noticed the user is using some notation I've never seen before:
我只是偶然发现了这个问题，我注意到用户使用了一些我以前从未见过的符号：
@font-face {
/* CSS HERE */
}
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?
那么这个@符号是 CSS3 中的新符号，还是我以某种方式忽略的旧符号？这是否类似于您使用的 ID 和您使用#的类.？谷歌没有给我任何与此相关的好文章。@CSS中符号的用途是什么 ？
回答by BoltClock
@has been around since the days of @importin 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.
@自从@importCSS1时代就已经存在，尽管它在最近的@media(CSS2、CSS3) 和@font-face(CSS3) 构造中可以说变得越来越普遍。该@语法本身，不过，正如我所说，是不是新的。
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.
这些在 CSS 中都称为at-rules。它们是针对浏览器的特殊指令，与使用规则和属性的 Web 文档中的 (X)HTML/XML 元素的样式没有直接关系，尽管它们在控制如何应用样式方面确实发挥了重要作用。
Some code examples:
一些代码示例：
/* 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-facerulesdefine 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.
@font-face规则定义在您的设计中使用的自定义字体，这些字体并非总是在所有计算机上都可用，因此浏览器从服务器下载字体并使用该自定义字体设置文本，就好像用户的计算机具有该字体一样。@mediarules，结合媒体查询（以前只有媒体类型），控制应用哪些样式，哪些不基于页面显示的媒体。在我的代码示例中，只有在打印文档时才应该设置所有文本在白色（纸张）背景下的黑色。您可以使用媒体查询过滤掉印刷媒体、移动设备等，并为这些设置不同的页面样式。
At-rules have no relation to selectorswhatsoever. Because of their varying nature, different at-rules are defined in different ways across numerous different modules. More examples include:
规则与选择器没有任何关系。由于其不同的性质，不同的 at 规则在许多不同的模块中以不同的方式定义。更多例子包括：
(this list is far from exhaustive)
（此列表远非详尽无遗）
You can find another non-exhaustive list at MDN.
您可以在MDN找到另一个非详尽列表。
回答by Frankie
@is used to define a rule.
@用于定义规则。
@import
@page
@media
@font-face
@charset
@namespace
@import
@page
@media
@font-face
@charset
@namespace
The above are called at-rules.
以上称为at-rules。
回答by BobRodes
An example of @media that might be useful to illustrate it further:
@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;
}
}
This will vary the size of the image conditionally on the size of the screen, using a smaller image on a smaller screen. The first block would address screens up to width 1440px; the second would address screens larger than 1440px.
这将根据屏幕大小有条件地改变图像的大小，在较小的屏幕上使用较小的图像。第一个块将处理宽度最大为 1440px 的屏幕；第二个将处理大于 1440px 的屏幕。
This comes in handy with things like tabs that float drop or scroll on smaller screens; you can often drop the font size of the tab labels down a point size on smaller screens and have them all fit.
这对于在较小屏幕上浮动或滚动的选项卡之类的东西非常有用；您通常可以在较小的屏幕上将选项卡标签的字体大小降低一个点大小，并使它们都适合。
回答by Tcll
The ProBoards CSS style also uses these as variables.
ProBoards CSS 样式也使用这些作为变量。
Here's a small snipptt from one of their CSS pages:
这是他们的一个 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; }
NOTE: not native, see first comment.
注意：不是本地的，请参阅第一条评论。
回答by r3st0r3
@ is used as a rule specification. Like @font-face
@ 用作规则规范。喜欢@font-face
