---
# System prepended metadata

title: CSS 11. CSS Inheritance / CSS 繼承關係
tags: [2022 網頁開發全攻略教程 / CSS篇章]

---

# 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篇章`
