CSS 的概念和應用
CSS 基礎教學
1. CSS 是什麼？
CSS（Cascading Style Sheets，層疊樣式表）是一種用來控制 HTML 文件外觀的語言。它可以為網頁提供樣式，如顏色、字型、版面布局等，使網頁更加美觀和符合設計需求。
CSS 與 HTML 的區別
- HTML 負責結構和內容，決定了網頁上顯示的文字和圖像。
- CSS 則控制這些內容的呈現方式，如字體顏色、大小、排版、邊框等。
例子：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>CSS 範例</title>
<style>
h1 {
color: blue; /* 設定標題的顏色為藍色 */
}
p {
font-size: 18px; /* 設定段落文字大小為18像素 */
}
</style>
</head>
<body>
<h1>這是標題</h1>
<p>這是一段文字。</p>
</body>
</html>2. CSS 語法
CSS 的基本語法由三個部分組成：選擇器（selector）、屬性（property）、值（value）。
選擇器 {
屬性: 值;
}範例：
p {
color: red; /* 設定段落文字顏色為紅色 */
font-size: 16px; /* 設定段落文字大小為16像素 */
}- 選擇器（Selector）：指定要套用樣式的 HTML 元素，例如
p代表段落元素。 - 屬性（Property）：要修改的樣式屬性，例如
color代表文字顏色。 - 值（Value）：屬性的新值，例如
red表示紅色。
3. 如何引入 CSS
引入 CSS 有三種常見的方法：
1. 內聯樣式（Inline CSS）
直接在 HTML 標籤的 style 屬性中編寫 CSS。
<p style="color: blue; font-size: 18px;">這是一段文字。</p>2. 內部樣式（Internal CSS）
在 HTML 文件的 <head> 區塊中使用 <style> 標籤。
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>3. 外部樣式表（External CSS）
將 CSS 寫在獨立的 .css 檔案中，並在 HTML 文件中通過 <link> 標籤引入。
<head>
<link rel="stylesheet" href="styles.css">
</head>在 styles.css 文件中：
p {
color: blue;
font-size: 18px;
}4. 常見的 CSS 屬性
文字樣式
color：設定文字顏色。color: blue;font-size：設定文字大小。font-size: 16px;font-family：設定字體。font-family: Arial, sans-serif;font-weight：設定字體粗細。font-weight: bold;
盒模型（Box Model）
CSS 的盒模型定義了網頁元素的大小和間距，包括以下幾個部分：
- 內容區域（Content）：元素的實際內容，如文字或圖片。
- 內邊距（Padding）：內容與邊框之間的距離。
- 邊框（Border）：包圍內容和內邊距的框線。
- 外邊距（Margin）：元素與其他元素之間的距離。
範例：
div {
width: 200px;
padding: 10px; /* 內邊距 */
border: 2px solid black; /* 邊框 */
margin: 20px; /* 外邊距 */
}佈局屬性
-
display：控制元素的顯示行為。display: block; /* 元素獨佔一行 */ display: inline; /* 元素與其他元素同一行顯示 */ -
position：設定元素的位置方式。position: relative; /* 相對於正常位置 */ position: absolute; /* 相對於最近的父元素 */ -
float：讓元素左右浮動。float: left; /* 元素向左浮動 */ float: right; /* 元素向右浮動 */
5. 選擇器（Selectors）
CSS 提供多種選擇器來選取 HTML 元素：
基本選擇器：
-
元素選擇器：直接選擇元素。
h1 { color: green; } -
類選擇器：選擇擁有特定 class 屬性的元素。
.classname { background-color: yellow; } -
ID 選擇器：選擇擁有特定 ID 的元素，注意 ID 必須是唯一的。
#idname { font-size: 20px; }
複合選擇器：
-
群組選擇器：為多個元素應用相同的樣式。
h1, p { color: red; } -
後代選擇器：選擇某元素的所有後代元素。
div p { color: blue; } -
子選擇器：選擇某元素的直接子元素。
div > p { font-size: 14px; }
6. CSS 層疊和優先級
當多個樣式衝突時，CSS 會根據以下規則來決定哪個樣式優先應用：
- 重要性：使用
!important的樣式具有最高優先級。 - 具體性：ID 選擇器比類選擇器具體，類選擇器又比元素選擇器具體。
- 來源順序：當具體性相同時，後面定義的樣式會覆蓋前面的樣式。
例子：
p {
color: red;
}
#myparagraph {
color: blue; /* ID 選擇器的優先級更高 */
}
p {
color: green !important; /* 使用了 !important，強制應用這個樣式 */
}在這個例子中，即使有 ID 選擇器，段落的顏色最終會被設為綠色，因為 !important 優先級最高。
總結
CSS 是控制網頁樣式的重要工具。通過理解基本的 CSS 語法、選擇器、屬性，以及運用佈局和盒模型概念，你可以設計出更具吸引力和實用性的網頁。隨著學習深入，還可以探索更進階的 CSS 技術，如 CSS 動畫、Flexbox、Grid 等，這些技術將進一步豐富網頁設計的可能性。
