Basic.md
CSS(Cascading Style Sheets)是用來控制 HTML 元素的樣式表語言。透過 CSS,可以設定顏色、字型、排版、位置與動畫等視覺效果。
1. CSS 基本語法結構
選擇器 {
屬性: 值;
}
例如:
h1 {
color: blue;
font-size: 24px;
}
2. 常見選擇器
元素選擇器
針對 HTML 標籤名稱指定樣式。
p {
line-height: 1.6;
}
類別選擇器(class)
以 .
開頭,選擇具有該 class 的元素。
.card {
border: 1px solid #ccc;
}
ID 選擇器
以 #
開頭,選擇特定 id 的元素。
#header {
background-color: lightgray;
}
群組選擇器
一次設定多個元素。
h1, h2, h3 {
font-family: sans-serif;
}
3. 選擇器的專一性(Specificity)
當多個樣式同時套用到同一元素時,CSS 會依照「專一性」決定哪一個樣式優先。
專一性計算規則:
每種選擇器對應一個數值:
行內樣式(如
style=""
):1000 分ID 選擇器:100 分
類別、屬性與偽類選擇器:10 分
元素與偽元素選擇器:1 分
範例說明:
h1 { color: black; } /* specificity: 1 */
.title { color: green; } /* specificity: 10 */
#mainTitle { color: red; } /* specificity: 100 */
若同時套用,最終文字顏色為紅色,因為 ID 選擇器的專一性最高。
補充:專一性的實際運作原理
上述「1000 / 100 / 10 / 1」的分數是一種教學用比喻。實際上,CSS 會計算一個四位數向量 (a, b, c, d)
來比較不同選擇器的優先順序:
a
: 是否有行內樣式(有則為 1)b
: ID 選擇器的數量c
: 類別、屬性選擇器、偽類的數量d
: 元素選擇器與偽元素的數量
這個向量的比較是逐位進行的。例如:
#main
→ (0,1,0,0).title
→ (0,0,1,0)h1
→ (0,0,0,1)
因此 ID 選擇器會優先於類別選擇器,而類別又優先於元素。
注意事項:
!important
會強制覆蓋所有其他規則,但不建議常用。維持選擇器簡潔清晰,可提升維護性。
4. 常見屬性與範例
文字樣式
p {
color: #333;
font-size: 16px;
font-weight: bold;
text-align: center;
}
區塊樣式與邊框
div {
width: 300px;
height: 200px;
padding: 10px;
margin: 20px auto;
border: 1px solid black;
}
背景與顏色
body {
background-color: #f2f2f2;
}
連結樣式
a {
color: blue;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
5. 引入 CSS 的方式
行內樣式(Inline Style)
直接在 HTML 標籤中使用 style
屬性。
<p style="color: red;">紅色文字</p>
內部樣式表(Internal CSS)
寫在 HTML 的 <style>
區塊中。
<style>
h1 { color: green; }
</style>
外部樣式表(External CSS)
將樣式寫在 .css
檔案中,並用 <link>
標籤引入。
<link rel="stylesheet" href="styles.css">
CSS 是網頁設計與前端開發的基礎工具,學會它可以讓網頁更具吸引力與可用性。
Last updated