CSS中'@'符号的用途是什么？
我只是偶然发现了这个问题 ，我注意到用户正在使用我从未见过的符号：
@font-face { /* CSS HERE */ } 那么这个@符号是CSS3中的新东西，还是我曾经忽视的东西？ 这是什么东西，像你使用的ID和你使用的类. ？ 谷歌没有给我任何有关这个好文章。 CSS中@符号的用途是什么？
自从@import在CSS1的时代， @就已经出现了，尽pipe在最近的@media （CSS2，CSS3）和@font-face （CSS3）结构中，它已经变得越来越普遍了。 尽pipe如此， @语法本身并不新鲜。
这些在CSS中都被视为规则 。 它们是浏览器的特殊说明，与使用规则和属性的Web文档中（X）HTML / XML元素的样式无直接关系，尽pipe它们在控制样式应用方面发挥了重要作用。
一些代码示例：
/* 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规则定义在您的devise中使用的自定义字体，这些字体在所有计算机上并不总是可用，因此浏览器会从服务器下载字体，并在该自定义字体中设置文本，就好像用户的计算机具有该字体一样。 -
@media规则与媒体查询 （以前只有媒体types ）一起使用，控制哪些样式被应用，哪些不是基于页面显示的媒体。在我的代码示例中，只有在打印文档时，所有文本在黑色背景下设置为白色（纸张）。 您可以使用媒体查询来筛选出不同的打印介质，移动设备等以及样式页。
规则与select器无关。 由于其性质不同，在不同的模块中以不同的方式定义了不同的规则。 更多的例子包括：
- 有条件的规则
- 关键帧animation
- 分页媒体
（这个清单并不完整）
您可以在MDN上find另一个非详尽的列表。
@用于定义规则。
@import
@页
@媒体
@字体面
@charset
@namespace
以上被称为at-rule s。
@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; } }
这将根据屏幕的大小有条件地改变图像的大小，在较小的屏幕上使用较小的图像。 第一个块将会处理宽度为1440px的屏幕; 第二个将解决大于1440px的屏幕。
这适用于诸如在较小的屏幕上浮动拖放或滚动的选项卡之类的东西; 您可以经常在较小的屏幕上将标签标签的字体大小缩小到一个点的大小，并使它们全部合适。
@用作规则说明。 像@font-face
ProBoards CSS样式也使用这些作为variables。
这里是他们的一个CSS页面的一个小的snipptt：
@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; }
注意：不是本地的，请参阅第一条评论。
