CSS - @ Rules
本章将介绍以下重要的@规则 -
@import:规则将另一个样式表导入当前样式表。
@charset规则指示样式表使用的字符集。
@font-face规则用于详尽地描述在文档中使用的字体。
!important规则表示用户定义的规则应优先于作者的样式表。
NOTE - 我们将在后续章节中介绍其他@规则。
@import规则
@import规则允许您从另一个样式表导入样式。 它应该出现在任何规则之前的样式表的开头，它的值是一个URL。
它可以用以下两种方式之一编写 -
<style type = "text/css">
<!--
@import "mystyle.css";
or
@import url("mystyle.css");
.......other CSS rules .....
-->
</style>
@import规则的重要性在于它允许您使用模块化方法开发样式表。 您可以创建各种样式表，然后将它们包含在您需要的任何位置。
@charset规则
如果使用ASCII或ISO-8859-1以外的字符集编写文档，则可能需要在样式表的顶部设置@charset规则，以指示样式表的写入字符集。
@charset规则必须直接写在样式表的开头，甚至没有空格。 该值保存在引号中，应该是标准字符集之一。 例如 -
<style type = "text/css">
<!--
@charset "iso-8859-1"
.......other CSS rules .....
-->
</style>
@ font-face规则
@ font-face规则用于详尽地描述在文档中使用的字体。 @ font-face也可用于定义要下载的字体的位置，尽管这可能会遇到特定于实现的限制。
一般来说，@ font-face非常复杂，除了那些专业的字体指标外，不推荐使用它。
这是一个例子 -
<style type = "text/css">
<!--
@font-face {
font-family: "Scarborough Light";
src: url("http://www.font.site/s/scarbo-lt");
}
@font-face {
font-family: Santiago;
src: local ("Santiago"),
url("http://www.font.site/s/santiago.tt")
format("truetype");
unicode-range: U+??,U+100-220;
font-size: all;
font-family: sans-serif;
}
-->
</style>
重要的规则
级联样式表级联。 这意味着样式的应用顺序与浏览器读取的顺序相同。 应用第一种样式，然后应用第二种样式，依此类推。
！important规则提供了一种制作CSS级联的方法。 它还包括始终应用的规则。 无论CSS文档中出现何种规则，都将始终应用具有！important属性的规则。
例如，在以下样式表中，段落文本将为黑色，即使应用的第一个样式属性为红色:
<style type = "text/css">
<!--
p { color: #ff0000; }
p { color: #000000; }
-->
</style>
因此，如果要确保始终应用属性，则应将！important属性添加到标记中。 因此，要使段落文本始终为红色，您应该按如下方式编写 -
<html>
<head>
<style type = "text/css">
p { color: #ff0000 !important; }
p { color: #000000; }
</style>
</head>
<body>
<p>iowiki.com</p>
</body>
</html>
在这里你做了p { color: #ff0000 !important; } 强制性，现在这个规则总是适用，即使你已经定义了另一个规则p { color: #000000; } p { color: #000000; }
它会产生以下结果 -
新页面打开