blocks|key|1610992|text|@在CSS1中的@import时代就已经出现了，尽管它在最近的@media+(CSS2，CSS3)和@font-face+(CSS3)构造中变得越来越普遍。但是，正如我所提到的，@语法本身并不新鲜。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1610993|这些在CSS中都被称为at-rules。它们是针对浏览器的特殊指令，与使用规则和属性在Web文档中设置(X)HTML/XML元素的样式没有直接关系，尽管它们在控制样式的应用方式方面扮演着重要的角色。|BOLD|1610994|一些代码示例：|1610995|/*+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);
}|code-block|syntax|javascript|1610996|1610997|@font-face+rules定义了在您的设计中使用的自定义字体，这些字体并不总是在所有计算机上都可用，因此浏览器从服务器下载一种字体，并以该自定义字体设置文本，就像用户的计算机将font.|unordered-list-item|1610998|@media+rules，与media+queries+(以前只有media+types)结合使用一样，控制应用哪些样式，而不是基于显示页面的媒体。在我的代码示例中，只有在打印文档时，所有文本才应该在白色(纸张)背景上设置为黑色。您可以使用媒体查询来筛选出打印媒体、移动设备等，并为这些设备设置不同的页面样式。|1610999|1611000|At-rules与selectors没有任何关系。由于其不同的性质，不同的at-rules在众多不同的模块中以不同的方式定义。更多的例子包括：|1611001|1611002|Conditional+rules|1611003|Keyframe+animations|1611004|Paged+media|1611005|1611006|(这个列表远不是详尽的)|1611007|你可以在MDN上找到另一个非详尽的列表。|1611008|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/css3-fonts/#font-face-rule|1|http://www.w3.org/TR/css3-conditional/#at-media|2|http://www.w3.org/TR/css3-mediaqueries|3|http://www.w3.org/TR/CSS21/media.html|4|http://www.w3.org/TR/selectors|5|http://www.w3.org/TR/css3-conditional|6|http://www.w3.org/TR/css3-animations|7|http://www.w3.org/TR/css3-page|8|https://developer.mozilla.org/en-US/docs/CSS/At-rule^0|0|1|8|7|V|6|1E|A|2H|1|0|B|8|0|0|0|0|0|A|0|G|0|0|0|6|0|C|1|E|D|2|X|B|3|0|0|9|9|4|0|0|0|H|5|0|0|J|6|0|0|B|7|0|0|0|4|3|8|0^^$0|@$1|2|3|4|5|6|7|1Y|8|@$9|1Z|A|20|B|C]|$9|21|A|22|B|C]|$9|23|A|24|B|C]|$9|25|A|26|B|C]|$9|27|A|28|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|29|8|@$9|2A|A|2B|B|H]]|D|@]|E|$]]|$1|I|3|J|5|6|7|2C|8|@]|D|@]|E|$]]|$1|K|3|L|5|M|7|2D|8|@]|D|@]|E|$N|O]]|$1|P|3|-4|5|6|7|2E|8|@]|D|@]|E|$]]|$1|Q|3|R|5|S|7|2F|8|@$9|2G|A|2H|B|C]]|D|@$9|2I|A|2J|1|2K]]|E|$]]|$1|T|3|U|5|S|7|2L|8|@$9|2M|A|2N|B|C]]|D|@$9|2O|A|2P|1|2Q]|$9|2R|A|2S|1|2T]|$9|2U|A|2V|1|2W]]|E|$]]|$1|V|3|-4|5|6|7|2X|8|@]|D|@]|E|$]]|$1|W|3|X|5|6|7|2Y|8|@]|D|@$9|2Z|A|30|1|31]]|E|$]]|$1|Y|3|-4|5|6|7|32|8|@]|D|@]|E|$]]|$1|Z|3|10|5|S|7|33|8|@]|D|@$9|34|A|35|1|36]]|E|$]]|$1|11|3|12|5|S|7|37|8|@]|D|@$9|38|A|39|1|3A]]|E|$]]|$1|13|3|14|5|S|7|3B|8|@]|D|@$9|3C|A|3D|1|3E]]|E|$]]|$1|15|3|-4|5|6|7|3F|8|@]|D|@]|E|$]]|$1|16|3|17|5|6|7|3G|8|@]|D|@]|E|$]]|$1|18|3|19|5|6|7|3H|8|@]|D|@$9|3I|A|3J|1|3K]]|E|$]]|$1|1A|3|-4|5|6|7|3L|8|@]|D|@]|E|$]]]|1B|$1C|$5|1D|1E|1F|E|$1G|1H]]|1I|$5|1D|1E|1F|E|$1G|1J]]|1K|$5|1D|1E|1F|E|$1G|1L]]|1M|$5|1D|1E|1F|E|$1G|1N]]|1O|$5|1D|1E|1F|E|$1G|1P]]|1Q|$5|1D|1E|1F|E|$1G|1R]]|1S|$5|1D|1E|1F|E|$1G|1T]]|1U|$5|1D|1E|1F|E|$1G|1V]]|1W|$5|1D|1E|1F|E|$1G|1X]]]]

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

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.

Some code examples:

<pre class="lang-css prettyprint-override"><code>/* 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);
}
</code></pre>

<ul>
<li><a href="http://www.w3.org/TR/css3-fonts/#font-face-rule" rel="noreferrer"><code>@font-face</code> rules</a> 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.</li>
<li><a href="http://www.w3.org/TR/css3-conditional/#at-media" rel="noreferrer"><code>@media</code> rules</a>, in conjunction with <a href="http://www.w3.org/TR/css3-mediaqueries" rel="noreferrer">media queries</a> (formerly only <a href="http://www.w3.org/TR/CSS21/media.html" rel="noreferrer">media types</a>), 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.</li>
</ul>

At-rules have no relation to <a href="http://www.w3.org/TR/selectors" rel="noreferrer">selectors</a> whatsoever. Because of their varying nature, different at-rules are defined in different ways across numerous different modules. More examples include:

<ul>
<li><a href="http://www.w3.org/TR/css3-conditional" rel="noreferrer">Conditional rules</a></li>
<li><a href="http://www.w3.org/TR/css3-animations" rel="noreferrer">Keyframe animations</a></li>
<li><a href="http://www.w3.org/TR/css3-page" rel="noreferrer">Paged media</a></li>
</ul>

(this list is far from exhaustive)

You can find another non-exhaustive list at <a href="https://developer.mozilla.org/en-US/docs/CSS/At-rule" rel="noreferrer">MDN</a>.

blocks|key|1611010|text|@用于定义规则。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1611011|@import|1611012|@page|1611013|@media|1611014|@font-face|1611015|@charset|1611016|@namespace|1611017|以上内容称为s.+。|BOLD|1611018|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/css3-syntax/#at-import|1|http://www.w3.org/TR/css3-syntax/#at-media-rule|2|http://www.w3.org/TR/css3-syntax/#defining^0|0|1|0|0|7|0|0|0|0|6|1|0|0|0|0|A|2|0|6|2|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|19|8|@]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|H|3|I|5|6|7|1D|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1E|8|@]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|L|3|M|5|6|7|1I|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|1J|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1K|8|@]|D|@$9|1L|A|1M|1|1N]]|E|$]]|$1|R|3|S|5|6|7|1O|8|@$9|1P|A|1Q|B|T]]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1R|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]|12|$5|X|Y|Z|E|$10|13]]|14|$5|X|Y|Z|E|$10|15]]]]

<code>@</code> is used to define a rule.

<a href="http://www.w3.org/TR/css3-syntax/#at-import" rel="noreferrer">@import</a> 
@page 
<a href="http://www.w3.org/TR/css3-syntax/#at-media-rule" rel="noreferrer">@media</a> 
@font-face 
@charset 
<a href="http://www.w3.org/TR/css3-syntax/#defining" rel="noreferrer">@namespace</a> 

The above are called <a href="http://www.w3.org/TR/css3-syntax/#at-rules" rel="noreferrer"><code>at-rule</code></a>s.

blocks|key|1611023|text|@被用作规则规范。像@font-face一样|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1611024|entityMap^0|A|A|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

@ is used as a rule specification. Like <code>@font-face</code>

blocks|key|2698664|text|@media的一个示例可能有助于进一步说明它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2698665|@media+screen+and+(max-width:+1440px)
{
++++span.sizedImage
++++{
++++++++height:135px;
++++++++width:+174px;
++++}
}++++

@media+screen+and+(min-width:+1441px)
{
++++span.sizedImage
++++{
++++++++height:150px;
++++++++width:+200px;
++++}
}|code-block|syntax|javascript|2698666|这将根据屏幕的大小有条件地改变图像的大小，在较小的屏幕上使用较小的图像。第一个块将寻址宽度最大为1440px的屏幕；第二个块将寻址大于1440px的屏幕。|2698667|这对于在小屏幕上浮动、下拉或滚动的选项卡很有用；在小屏幕上，您通常可以将选项卡标签的字体大小降低一个磅大小，使它们都适合。|2698668|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

An example of @media that might be useful to illustrate it further:

<pre><code>@media screen and (max-width: 1440px)
{
 span.sizedImage
 {
 height:135px;
 width: 174px;
 }
} 

@media screen and (min-width: 1441px)
{
 span.sizedImage
 {
 height:150px;
 width: 200px;
 }
}
</code></pre>

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. 

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.

blocks|key|1611072|text|ProBoards+CSS样式也将这些用作变量。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1611073|下面是他们的一个CSS页面中的一个小片段：|1611074|@wrapper_width:+980px;
@link_color:+#c06806;
@link_font:+100%25+@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;+}|code-block|syntax|javascript|1611075|注意:不是原生的，请看第一条评论。|1611076|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

The ProBoards CSS style also uses these as variables.

Here's a small snipptt from one of their CSS pages:

<pre><code>@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; }
</code></pre>

NOTE: not native, see first comment.

I just stumbled across <a href="https://stackoverflow.com/questions/3451541/css-font-face-anti-aliasing">this question</a> and I noticed the user is using some notation I've never seen before:

<pre class="lang-css prettyprint-override"><code>@font-face {
 /* CSS HERE */
}
</code></pre>

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

What is the purpose of the '@' symbol in CSS?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我偶然发现了，我注意到用户使用了一些我以前从未见过的符号：@font-face {   /* CSS HERE */}那么，这个@符号是CSS3中的新东西，还是我忽略了的旧东西？这是不是类似于在ID中使用#，而在类中使用.？谷歌没有给我任何与此相关的好文章。@符号在CSS中的用途是什么？

问CSS中“@”符号的用途是什么？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS中“@”符号的用途是什么？EN