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 规则提供了一种使 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>Tutorialspoint.com</p>
   </body>
</html>

在这里你已经制作了p { color: #ff0000 !important; 强制，现在即使您定义了另一个规则p { color: #000000; ，此规则也将始终适用 }

它将产生以下结果 -