CSS 是用來處理網頁的排版和樣式

基本語法：屬性名稱：屬性內容

1 以文字為例，就有以下常用的屬性
font-family：字體樣式。可以設定一個或多個字體樣式
font-size：字體大小。例如像素（px）、百分比（%）、em、rem 等單位
font-weight：文字粗細。例如正常（normal）或粗體（bold）等大小
font-style：文字的風格。例如斜體（italic）、傾斜（oblique）等
line-height：設定行高。與文字行之間的垂直間距
text-align：設定文字的水平對齊方式。例如置中（center）、向右對齊（right）等
text-decoration：文字的裝飾效果。例如文字下方劃線（underline）、刪除線（line-through）等
color：設定文字的顏色。可以使用顏色名稱（red）、十六進制顏色碼、RGB 值等
letter-spacing：調整文字之間的間距
word-spacing：調整單詞之間的間距
text-indent：設定段落的第一行縮排
white-space：控制文字的空白字元的處理，例如設定為 nowrap 時，可以禁止文字自動換行
text-overflow：當文字內容過長時，用於如何處理溢出的內容
text-shadow：添加文字陰影效果

font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
line-height: 1.5;
text-align: center;
text-decoration: underline;
color: #336699;
letter-spacing: 2px;
word-spacing: 5px;
text-indent: 20px;
white-space: nowrap;
text-overflow: ellipsis;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

2 若是要在 HTML 上透過標籤來套用 CSS 樣式，必須使用 style屬性，以下為範例

<p style="font-weight:bold">你好我是一位新手工程師</p>

3 乾淨簡單明瞭的標籤
<div> 和 <span> 都沒有預設的標籤樣式，所以需要透過 CSS 來設定，以下為範例

<div style="color:blue">今天天氣真好</div>

4 標籤的模式

• inline 模式：它會將內容顯示在同一行，且不會自動換行。包括<span>、<a>、<strong>等
• block 模式：它會將內容顯示為一個獨立的區塊，並自動換行
• none 模式：要透過 CSS 的 display 另外設定。當設定為display: none;時，該內容不會在頁面上顯示，而且不佔用空間

5 選擇器

• 元素選擇器 : p {}
• 類別選擇器 : .classname {}
• ID 選擇器 : #idname {}
• 群組選擇器 : h1, h2, h3 {}
• 子元素選擇器 : ul > li {}
• 屬性選擇器 : [type="text"] {}
• 擴展選擇器 : ul li {}
• 通用選擇器 : * {}
• 偽類選擇器 : :hover {}等
• nth-child 選擇器 : p:nth-child(odd) {}

6 選擇器的優先順序
選擇器的優先順序是很重要的一環，它可以幫助解決樣式衝突的問題，來確保網頁顯示如我們預期設定的樣式

它是根據選擇器的特定性來計算的。每個部分都有自己的權重，它們按照以下順序排序：

- Inline 樣式：特定性為1000
- ID 選擇器：特定性值為100
- 類別選擇器、屬性選擇器和偽類選擇器：特定性值為10
使用類別選擇器（.classname）、屬性選擇器（[attribute="value"]）或偽類選擇器（:hover）
- 元素選擇器和擴展選擇器：特定性值為1
使用元素選擇器（p）或擴展選擇器（div p）

所以要計算特定性，需要將每個部分的權重相加
範例1，如果有以下兩個 CSS

#header {
  color: blue;
}
p {
  color: red;
}

第一個特定性：ID選擇器（#）= 100，其他部分為0，總特定性為100。
第二個特定性：元素選擇器（p）= 1，其他部分為0，總特定性為1。
由於第一個的特定性更高，所以元素的文字顏色將是藍色

範例2，如果特定性相同，則後面的規則將優先應用

p {
  color: red;
}
p {
  color: blue;
}

最後<p>元素的文字顏色會是藍色，因為後面的規則優先應用，所以會覆蓋前面的規則！！