一個元素的樣式，可以通過多種方式來定義，而多種定義方式之間通過復雜的影響關系決定了元素的最終樣式。這種復雜既造就了CSS的強大，也導致CSS顯得如此“混亂”而且難以調試。
對于層疊來說，共有三種主要的樣式來源：
瀏覽器對HTML定義的默認樣式。用戶定義的樣式。開發者定義的樣式，可以有三種形式：定義在外部文件（外鏈樣式）：本教程中案例主要是通過這種形式定義樣式。在頁面的頭部定義（內聯樣式）：通過這種形式定義的樣式只在本頁面內生效。定義在特定的元素身上（行內樣式）：這種形式多用于測試，可維護性較差。用戶定義的樣式表會覆蓋瀏覽器定義的默認樣式，然后網頁開發者定義的樣式又會覆蓋用戶樣式。在這個教程中，你作為網頁的開發者只需要關注開發者樣式。
示例
就你現在看到的這個頁面而言，有一部分樣式是來自瀏覽器定義的默認的HTML樣式。
有一部分樣式可能來自用戶通過瀏覽器自定義的樣式，或者為瀏覽器引入自定義的樣式表。例如，在Firefox中，在“首選項”對話框中可以自定義樣式，也可以建立一個單獨的userContent.css 樣式文件并放到“用戶配置”的文件夾中。
另外，還有一部分樣式來自外鏈的wiki服務器上的樣式表。
在瀏覽器中打開前面寫的例子頁面，你會發現<strong> 元素中的文字會比其他文字粗一些。這些樣式就是在瀏覽器定義的默認HTML樣式。 而<strong> 元素是紅色的，這是你在自己的樣式表中定義的樣式。 同時，<strong> 作為<p> 的子元素，也繼承了<p> 的樣式。同樣的，<p> 也從<body>中繼承了許多的樣式。 再來看看優先級，從高到低依次為：網頁開發者定義的樣式、網頁閱讀者定義的樣式、瀏覽器的默認樣式。 對繼承的元素來說，子元素自身的樣式優先級高于從父級繼承來的樣式。 當然，關于優先級還有更多的知識點，我們會在后面的章節中繼續介紹。
更多細節
CSS 另外提供了一個!important關鍵字，用戶可以通過使用這個關鍵字使自己定義的樣式覆蓋掉開發者定義的樣式。
這就意味著，作為開發者，你很難準確的預知頁面最終在用戶電腦上的顯示效果。
如果你想了解關于層級和繼承的全部細節，請閱讀CSS文檔中的相關章節（英文）：Assigning PRoperty values, Cascading, and Inheritance。
編輯你之前創建的style.css文件。
把下面這行代碼粘到以前的文件中，粘在之前的代碼的上面或下面都可以。 不過，加在css文件的頭部會更符合邏輯一些，因為在頁面中 <p>是<strong>的父級元素:
現在刷新你的瀏覽器，應該可以看到頁面的變化。頁面里所有的文本應該都被加上了下劃線，也包括大寫的首字母。<strong> 從它的父級元素 <p> 上繼承到了下劃線的樣式。 但是，<strong> 元素仍然是紅色的。紅色是它本身的樣式，所以優先級會超過父級元素 <p> 的藍色.
修改前**C**ascading **S**tyle **S**heets
修改后**C**ascading **S**tyle **S**heets
新聞熱點
疑難解答
