CSS是什麼

CSS（Cascading Style Sheets 階層式樣式表）用來為HTML或XML添加樣式。CSS 不能單獨運作，它必須配合 HTML 或 XML，一起呈現頁面

CSS選擇器、屬性、值

選擇器 {
	屬性：值;
}

h1{
    color: blue;
}

.highlight{
    color: red;
    background: yellow;
    font-weight: bold;
}

#footer{
   background: white;
}

• h1 、 .hightlight、#footer分別是三種選擇器（Selector）:

  以下是一些常見的選擇器：

• color、background、font-weight是屬性（property)
• 用冒號隔開，指定了color為red、background為yellow則是值（Value)

CSS的權重(css specificity)

就是當疊很多層樣式的時候，CSS選擇器的優先權

important! > inline style > ID > Class > Element > *

🛑 important! 沒事不要亂用，會不好維護喔！

我們來看一個小題目，以下情況會文字會是什麼顏色?

<div id="intro">
  <p class="highlight">
    What color is it?
  </p>
</div>

div p {
    color: blue;
}

.highlight {
  color: red; 
}

#intro {
  color: green; !important
}

你可能會想都有important，那肯定是綠色吧

不是！答案是紅色

因為CSS還有一個很重要的條件叫做繼承，就是子元件會繼承父元件的某些屬性，但是自己的屬性(直接選用的)優先於繼承來的屬性，所以不管怎樣他的父親不管權重多高，只要自己已經選了屬性父親的屬性就影響不到他了

CSS盒模型(Box Model)

當瀏覽器在渲染(document) 時，css會把每一個元素視為是一個長方形Box，這個長方形內而外分別是 Content ( 內容 )、Padding ( 內邊距 )、Border ( 邊框 ) 和 Margin ( 外邊距 )

圖片來源：https://www.geeksforgeeks.org/css/css-box-model/

• Content：實際內容區域
• Padding：內容與邊框之間的距離
• Border：元素的邊框
• Margin：元素與其他元素的距離

參考資料

https://medium.com/when-you-feel-like-quitting-think-about-why-you/css-權重-css-specificity-6c9160bbd07d

https://zh.wikipedia.org/zh-tw/CSS#CSS4

https://www.explainthis.io/zh-hant/swe/css-box-model

https://www.oxxostudio.tw/articles/202008/css-box-model.html

https://ithelp.ithome.com.tw/m/articles/10269959