9.1 利用偽類增強交互性
在CSS中，偽類和偽元素是增強網頁設計和用戶體驗（UX）的強大工具。使用它們可以製作互動和動態的元素，改善視覺感知，並提高可訪問性。
現在來看看如何利用偽類和偽元素達到這些目的。
1. 滑鼠懸停效果
使用偽類 :hover 能夠在用戶將滑鼠懸停在元素上時更改樣式，對於按鈕及鏈結尤為有用。
範例：懸停時改變按鈕顏色
在這個範例中，當滑鼠懸停在按鈕上時，其背景顏色會改變，這樣增強了視覺反饋，讓介面更具互動性：
button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
<button>Click Me</button>
2. 焦點樣式
偽類 :focus 用於當表單元素處於焦點時的樣式設定。這有助於用戶看清楚他們正在輸入哪個元素。
範例：焦點時為輸入框設計樣式
在這個範例中，獲得焦點的輸入框會有藍色邊框和陰影，這增強了活動表單元素的可視性：
input[type="text"] {
border: 1px solid #ccc;
padding: 10px;
}
input[type="text"]:focus {
border-color: #3498db;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}
<input type="text">
3. 活動狀態
偽類 :active 作用於在激活狀態的元素（例如，滑鼠點擊按鈕時）。
範例：點擊按鈕時的樣式
在這個範例中，按鈕在點擊時會稍微縮小並改變顏色，創造按下的效果：
button:active {
background-color: #2c3e50;
transform: scale(0.98);
}
<button>Click Me</button>
9.2 利用偽元素增強視覺感知
4. 添加內容：::before 和 ::after
偽元素 ::before 和 ::after 可以在不改變 HTML 的情況下在元素前後添加內容。
範例：在鏈結前添加圖示
在這個範例中，鏈結前加上圖示，增強了視覺感知並告訴用戶這是一個鏈結：
a::before {
content: "🔗";
margin-right: 5px;
}
<a href="#">Here</a>
範例：在段落後添加裝飾元素
這個範例在段落後添加裝飾元素，提升頁面的視覺設計：
p::after {
content: "❦";
display: block;
text-align: right;
color: #e74c3c;
}
<p>Content</p>
5. 樣式化第一個字母和行：::first-letter 和 ::first-line
偽元素 ::first-letter 和 ::first-line 允許為第一個字母和段落第一行設計樣式，創造字體效果。
範例：樣式化段落的第一個字母
在這個範例中，段落的第一個字母會放大並變成藍色，創造「縮進」效果，這經常用於雜誌設計：
p::first-letter {
font-size: 2.5em;
font-weight: bold;
color: #3498db;
float: left;
margin-right: 0.1em;
}
<p>Content</p>
範例：樣式化段落的第一行
在這個範例中，段落的第一行會加粗並變成綠色，增強了文章的可讀性：
p::first-line {
font-weight: bold;
color: #2ecc71;
}
<p>Content</p>
9.3 利用偽類和偽元素提高可訪問性
6. 表單元素狀態
表單偽類允許根據其狀態設計元素，改善可訪問性和用戶介面。
範例：樣式化選中的核取方塊
在這個範例中，選中的核取方塊會變成綠色，加強了視覺反饋：
input[type="checkbox"]:checked {
background-color: #2ecc71;
}
<input type="checkbox" checked>
範例：樣式化禁用的輸入框
在這個範例中，禁用的輸入框會有淺灰色背景和文字，視覺上顯示其不可用：
input:disabled {
background-color: #f0f0f0;
color: #999;
}
<input type="text" disabled>
範例：樣式化不正確的輸入框
這個範例中，不正確的輸入框會有紅色邊框，幫助用戶識別輸入錯誤：
input:invalid {
border-color: #e74c3c;
}
<input type="text">
9.4 完整實現範例
/* 在鏈結前添加圖示 */
a::before {
content: "🔗";
margin-right: 5px;
}
/* 滑鼠懸停時樣式化段落的第一個字母 */
p:hover::first-letter {
font-size: 2.5em;
font-weight: bold;
color: #3498db;
}
/* 樣式化按鈕 */
button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
button:active {
background-color: #2c3e50;
transform: scale(0.98);
}
/* 焦點時樣式化輸入框 */
input[type="text"]:focus,
input[type="email"]:focus {
border-color: #3498db;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}
/* 樣式化選中的核取方塊 */
input[type="checkbox"]:checked {
background-color: #2ecc71;
}
/* 樣式化禁用的輸入框 */
input:disabled {
background-color: #f0f0f0;
color: #999;
}
/* 樣式化不正確的輸入框 */
input:invalid {
border-color: #e74c3c;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用偽類和偽元素的範例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="#">帶圖示的鏈結</a>
<p>把滑鼠懸停在這段段落上，查看第一個字母的效果。</p>
<button>按鈕</button>
<form>
<label>
輸入文字：
<input type="text" required>
</label>
<br>
<label>
輸入電子郵件：
<input type="email" required>
</label>
<br>
<label>
<input type="checkbox" checked> 核取方塊
</label>
<br>
<button type="submit">提交</button>
<button type="button" disabled>禁用按鈕</button>
</form>
</body>
</html>
偽類和偽元素提供了強大的手段來改善網頁設計和用戶體驗。使用它們可以創建互動和動態的元素，改善視覺感知，提高可訪問性，讓介面更便利和愉悅。
理解和正確應用這些工具能夠開啟創建現代有效的網頁設計的大門。
GO TO FULL VERSION