CSS @规则

本章将介绍以下重要的@规则–

@import: 规则将另一个样式表导入到当前样式表中。
@charset 规则指示样式表使用的字符集。
@font-face 规则用于详细描述用于文档中的字体。
!important 规则表示用户自定义规则应优先于作者的样式表。

注意 − 还有其他@规则，我们将在后续章节中介绍。

`@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`规则

层叠样式表具有层叠性。这意味着样式按照浏览器读取的顺序应用。首先应用第一个样式，然后是第二个，依此类推。

!important规则提供了一种使CSS层叠的方法。它还包括始终应用的规则。具有!important属性的规则将始终被应用，无论该规则出现在CSS文档的何处。

例如，在下面的样式表中，段落文本将为黑色，尽管首先应用的样式属性是红色的：

<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>Deepinout.com</p>
   </body>
</html>

在这里你已经设置了p标签的样式，让它成为必须的，现在这条规则将始终生效，即使你定义了另一条规则 p { color: #000000; }

它将产生以下结果 −

CSS @规则