我刚刚偶然发现 this question我注意到用户使用了一些我以前从未见过的符号:
@font-face {
/* CSS HERE */
}
那么这个 @
符号是 CSS3 中的新东西,还是我不知何故忽略的旧东西?这是否类似于在 ID 中使用 #
,在类中使用 .
?谷歌没有给我任何与此相关的好文章。 CSS 中 @
符号的用途是什么?
最佳答案
@
自 CSS1 中的 @import
时代以来就已经存在,尽管可以说它在最近的 @media
中变得越来越普遍(CSS2 , CSS3) 和 @font-face
(CSS3) 结构。不过,正如我提到的,@
语法本身并不新鲜。
这些在 CSS 中都称为 at-rules。它们是针对浏览器的特殊说明,与使用规则和属性的 Web 文档中 (X)HTML/XML 元素的样式没有直接关系,尽管它们在控制如何应用样式方面发挥着重要作用。
一些代码示例:
/* 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
rules定义并非在所有计算机上始终可用的设计中使用的自定义字体,因此浏览器从服务器下载字体并使用该自定义字体设置文本,就好像用户的计算机具有该字体一样。@media
rules , 连同 media queries (以前只有 media types ),根据页面显示的媒体控制应用哪些样式,哪些不应用。在我的代码示例中,只有在打印文档时,所有文本才应设置为黑色和白色(论文)背景。您可以使用媒体查询过滤掉打印媒体、移动设备等,并针对这些设置不同的页面样式。
At 规则与 selectors 无关任何。由于它们的不同性质,不同的 at 规则在许多不同的模块中以不同的方式定义。更多示例包括:
(此列表远非详尽无遗)
您可以在 MDN 找到另一个非详尽列表.
关于css - CSS 中 '@' 符号的用途是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16426636/