CSS - @ Rules - 極客書

本章將介紹以下重要的「規則」&負;

@import:規則將另一個樣式表導入到當前樣式表中。
@charset規則指示樣式表使用的字符集。
@font face規則用於詳盡地描述文檔中使用的字體。
是的！重要信息規則表示用戶定義的規則應優先於作者的樣式表。

注意−還有其他@規則，我們將在後續章節中介紹。

The @import rule

@import規則允許您從另一個樣式表導入樣式。它應該出現在任何規則之前的樣式表的開頭，其值是一個URL。

它可以用以下兩種方式之一寫&負;

<style type = "text/css">
   <!--
      @import "mystyle.css";
      or
      @import url("mystyle.css");
      .......other CSS rules .....
   -->
</style>

@import規則的意義在於，它允許您使用模塊化方法開發樣式表。您可以創建各種樣式表，然後在需要時將其包含在任何位置。

The @charset Rule

如果使用ASCII或ISO-8859-1以外的字符集編寫文檔，則可能需要在樣式表頂部設置@charset規則，以指示樣式表使用的字符集。

@charset規則必須寫在樣式表的開頭，前面甚至沒有空格。該值用引號括起來，應該是標準字符集之一。例如−

<style type = "text/css">
   <!--
      @charset "iso-8859-1"
      .......other CSS rules .....
   -->
</style>

The @font-face Rule

@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>

The !important Rule

層疊樣式表層疊。這意味著應用樣式的順序與瀏覽器讀取樣式的順序相同。應用第一種樣式，然後應用第二種樣式，依此類推。

這個！重要規則提供了一種使CSS層疊的方法。它還包括要始終應用的規則。有一條規則！重要屬性將始終應用，無論該規則出現在CSS文檔中的何處。

例如，在以下樣式表中，即使應用的第一個樣式屬性爲紅色，段落文本也將爲黑色：

<style type = "text/css">
   <!--
      p { color: #ff0000; }
      p { color: #000000; }
   -->
</style>

所以，如果您想確保始終應用某個屬性，您可以添加！標記的重要屬性。因此，要使段落文本始終爲紅色，您應該按以下方式編寫它&負;

Live Demo

<html>
   <head>
      <style type = "text/css">
         p { color: #ff0000 !important; }
         p { color: #000000; }
      </style>
   </head>

   <body>
      <p>Tutorialspoint.com</p>
   </body>
</html>

在這裡你已經做了p{顏色：#ff0000！重要信息;}強制，現在即使您定義了另一個規則p{color:#000000;}

它將產生以下結果&負;