# 認識CSS#4 CSS的規則
###### tags: `CSS`

## 規則1 - Cascading

CSS是一種 <font color='red'> **階層式(Cascading)**</font> 的語言，由上往下讀程式碼

h1{
    color:red;
}
h2{
    color:green;
}
h1{
    color:yellow;
}

範例中程式碼從第一行開始讀取，原本渲染 h1 的字是要紅色的，到了最後又把 h1 渲染成黃色的，這時候就會把第一行的h1渲染給取代掉

## 規則2 - Specificity
CSS selectors 有不同的權重，CSS 會選擇權重比較重的會蓋過權重比較輕的進行渲染，<font color='red' size=5>不會管 規則1 - Cascading </font>
有相同的權重時就使用規則1來決定要渲染哪一個

### 權重
> id - specificity(1,0,0)
>

> class - specificity(0,1,0)
>

> element selector - specificity(0,0,1)
>

h1.class{ 
/* class+tag(0,1,1)*/
}
h1{/*tag(0,0,1)*/}
/*本來規則h1會蓋過h1.class的設定
但是specificity比h1{}還高
故還是套用h1.class*/

P.S. (1,0,0)>(0,1,1)
specificity最前面的1還是最大

### 不管權重的例外 - inline styling
不管你的權重有多高都會比不上直接用 inline styling 寫 CSS 上去，從範例來看從其他 CSS 檔案撰寫 h1 的樣式都不能蓋過直接從 HTML 寫出來的樣式，所以字體顏色都會是紅色

 <h1 style="color:red"> Hello! </h1>

## 規則3 - inheritance
每個 element 都會預設繼承自己的 parent element 所寫的各種渲染的 CSS 樣式

body{
	color:green;
}
h1{
	/*h1會繼承body的color:green*/
}

## 標籤分數權重

* HTML 標籤 : 1分
* class : 10分
* id : 100分
* HTML style : 1000分
* important : 10000分

## CSS總決定順序總結

<font size=4>inline styling > id selector > class selector > element selector > inheritance </font>