# CSS 11. CSS Inheritance / CSS 繼承關係 ### CSS 第三個 rule. - 前面已經學習到兩個 CSS 規則: 1. CSS Casciding - 漸層式覆蓋 2. CSS Specificity - 特定度 ### CSS properties (特性): - 主要有兩種: 1. **inherited properties**: 從 **parent element** (上層/父元素)繼承而來。 2. **non-inheritrd properties**: 為元素本身自己所設定的屬性，而非從上層繼承而來。 --- - 假設我的 CSS 檔案預設了 body 屬性: ``` body { color: green; } ``` - 此時可以發現，整個 index 的文字都呈現為「綠色」。 唯一不變的可能就是 a 連結了，原因是為什麼? ### 於網頁右鍵，確認「檢查」: - 這邊可以找到 h1 來確認屬性: ![](https://i.imgur.com/ohzXr6k.png) ![](https://i.imgur.com/0LMDA8d.png) - 我們呢，可以發現到 `h1` 它本身就有附帶好的屬性，也就是上面所描述的 - non-inheritrd properties。 - 而它的綠色是怎麼來的? 可以看到 Inherited from body 也就是，它的父元素繼承而來的。 --- ### 最強的特性 - inline styleing: - 假設來講，我們 CSS 都已經套好了屬性，但今天我可能其中一個 h1 我直接，直接在該標籤設定了 style 屬性，來看看會發生什麼事: ``` <h1 style="color: red">相關連結</h1> ``` ![](https://i.imgur.com/H6rU7gW.png) - ok, 由此可見，相關連結的 h1 就變成了「紅色」 而檢查元素頁面也可看到，element.style 確實也是紅色 原因是為什麼? ### 網頁從上往下來閱讀程式碼: - 姑且不論 inline style 為特別等級最高的屬性: 由編輯器所見，網頁在渲染的時候，是由上至下來閱讀程式碼的 ``` <link rel="stylesheet" href="./style.css" /> ``` - 我們的 CSS 檔案，一般來說會出現在 **head** 也就是比 **body** 更早出現，那麼 inline style 則是寫在 head 之後，也就是 body 的本身裡頭，所以可以這麼被解釋。 ``` ### 解析 .... <head> <link rel="stylesheet" href="./style.css" /> </head> <body> <h1 style="color:red;">1234</h1> </body> ``` ###### tags: `2022 網頁開發全攻略教程 / CSS篇章`