4.3　為什么是層疊樣式表

其實，CSS樣式的定義方式有四種，當一個元素出現重復的樣式聲明時，最終生效的樣式是由它們的優先級來決定的。這種允許樣式的重復定義和優先級設置就構成了樣式的層疊性，因此，CSS的全稱是層疊樣式表。

4.3.1　四種定義樣式的方式

這一節我們來具體看看這四種樣式的定義方式，以及它們的優先級，如圖4.8所示。其中優先級的值越大，優先級就越高，意味著對最終樣式的影響越大。

四種樣式的具體說明見表4.1。

以上四種樣式定義，除了內聯樣式是直接在目標元素內定義，此時不要指定目標元素，其余三種方式都采用元素選擇器和聲明塊的定義方式：

其中，元素選擇器是指對哪一個元素應用樣式，如上例中的span元素。聲明塊則是由若干行的樣式聲明語句組成的，其中每一條聲明語句是由“屬性名：值”的形式構成。

對于外部樣式還需要引入外部的css文件，一般它都是加在head內部：

在html文件中引入的外部文件位置都是在＜head＞內部定義的，依靠＜link＞標記來表示要連接的外部文件，內部的rel屬性表明連接的外部對象是一個樣式表（stylesheet），href屬性則是外部文件的路徑。

不同樣式的使用秘籍

CSS有四種定義樣式的方式，到底該用哪一種，還是全用？

正確的做法是，瀏覽器默認是一直都存在的，不存在選擇性。對于其他三種則有分別的適用情況：（1）初學階段，網頁內容非常簡單，又希望樣式聲明和HTML內容在同一個頁面，推薦適用內部樣式定義。

（2）對于中型到大型網站項目，推薦使用外部樣式，原因很簡單，為了便于代碼的重復使用，即“代碼復用”。因為很多樣式可以在多個項目或網頁通用，因此，只需要定義一次，其他地方引入即可。

（3）如果個別元素的樣式非常重要且特殊，你希望提高它的優先級，則采用內聯樣式。

4.3.2　樣式沖突怎么辦

有時，不得不用到兩種以上的方式聲明CSS。那么，就會不可避免地遇到樣式沖突問題，到底該聽誰的？這里總結了兩種常見的沖突情況：

情況1：對某一個元素，使用三種方式定義相同的樣式。

請看下面的例子，代碼如下：

my.css中定義的樣式如下：

上述代碼希望給二級標題設置字體顏色樣式，請問標題文字最終顯示為什么顏色？

根據優先級法則的判定：

應該是綠色。

當然，如果你想強制改變默認的優先級規則，也可以給某個樣式的屬性聲明后添加空格和關鍵字!important，試著修改內部樣式如下：

再試試看二級標題顏色還是綠色嗎？

情況2：同一級別下，重復定義的樣式，誰后定義聽誰的。

修改上述例子，刪除內聯樣式，并添加一個新的內部樣式。因此，二級標題的樣式只有兩個，具體如下代碼所示：

你猜猜標題會是黃色還是藍色呢？自己檢查一下看看，再對對口訣。

樣式不起作用

如果你給一個元素設計了CSS樣式，卻未得到期望的效果，則先要排除屬性拼寫等語法錯誤，然后去查看是否有重復定義的樣式？如果有，則要根據優先級判定一下，是不是你期望的樣式優先級太低了。最后，可以在瀏覽器的開發者工具中選中目標元素，查看樣式，會發現某些樣式雖然聲明了，但是卻沒有被應用，因此，就會被畫線，（見圖4.9中的畫線部分的樣式）。