CSS - Focus：初學者的指南
你好，未來的網頁設計超級明星！今天，我們將要深入CSS focus的精彩世界。別擔心如果你從來沒有寫過一行代碼——我會成為你這次旅程中的友好導遊。在這個教學結束時，你將會像專業人士一樣聚焦元素！
CSS Focus是什麼？
我們先從基礎開始。CSS focus是一個偽類，它讓我們能在元素獲得焦點時為其添加樣式。但「獲得焦點」是什麼意思呢？想象你在網上填寫表單。當你點擊輸入字段時，它會被突出顯示或以某種方式改變。這就是焦點的作用！
焦點對於無障礙性來說非常重要。它幫助用戶，特別是那些使用鍵盤導航的用戶，了解他們當前正在與哪個元素進行交互。
應用於
在我們開始樣式化之前，關鍵是要知道哪些元素能夠實際獲得焦點。這裡有一個方便的表格：
| 可聚焦元素 |
|---|
�鏈接 (<a>) |
| 按鈕 |
| 表單輸入 |
| 下拉菜單 |
| 文本區域 |
| 選擇元素 |
記住，不是所有HTML元素都能夠默認獲得焦點。但別擔心，我們稍後會涵蓋如何使其他元素可聚焦！
語法
現在，讓我們看看我們如何實際寫CSS focus。基本語法非常簡單：
element:focus {
/* 在這裡寫入你的樣式 */
}看到「focus」前的冒號了嗎？這就是它成為偽類的原因。它就像是在說，「嘿CSS，當這個元素聚焦時應用這些樣式！」
CSS Focus - 鏈接
我們先從一個常見的使用案例開始：樣式化聚焦的鏈接。這裡有一個例子：
a:focus {
color: #ff6600;
text-decoration: underline;
outline: 2px solid #ff6600;
}在這段代碼中，當鏈接獲得焦點時：
- 它的顏色變為鮮橙色（#ff6600）
- 它會被加上底線
- 總共會出現一個2像素的實心橙色外框
這使得當前聚焦的鏈接非常清晰，提高了無障礙性和用戶體驗。
CSS Focus - 按鈕
按鈕是另一個焦點樣式非常重要的元素。讓我們樣式化一個按鈕：
button:focus {
background-color: #4CAF50;
color: white;
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.5);
}當這個按鈕獲得焦點時：
- 它的背景變為綠色（#4CAF50）
- 文字變為白色
- 總共會出現一個半透明的綠色「光環」
這為我們的按鈕創造了一個視覺上吸引人且清晰的焦點狀態。
CSS Focus - 輸入框
輸入框是焦點真正發光的地方。這裡是我們如何樣式化聚焦的輸入框：
input:focus {
border: 2px solid #3498db;
background-color: #e8f4fc;
outline: none;
}在這個例子中：
- 邊框變為2像素的實心藍色（#3498db）
- 背景變為淺藍色（#e8f4fc）
- 移除默認的外框
專業提示：當移除默認外框時，總是要提供一個清晰的視覺指示。否則，鍵盤用戶可能會跟丟他們的焦點！
CSS Focus - 下拉框
下拉框（或選擇元素）也可以在聚焦時樣式化：
select:focus {
border-color: #9b59b6;
box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.2);
}在這裡，當下拉框聚焦時：
- 邊框顏色變為紫色（#9b59b6）
- 總共會出現一個淺紫色的「光環」
這個微妙的变化幫助用戶了解他們正在與哪個下拉框交互。
CSS Focus - 切換按鈕
切換按鈕有點特殊。我們通常希望在他們聚焦和被勾選時樣式化他們。這是怎麼做到的：
.toggle:focus {
outline: 2px solid #3498db;
}
.toggle:focus:checked {
outline-color: #e74c3c;
}在這段代碼中：
- 當切換按鈕聚焦時，它會得到一個藍色外框
- 如果它同時聚焦和被勾選，外框會變為紅色
這幫助用戶同時了解焦點狀態和切換狀態。
CSS Focus - 相關屬性
有幾個CSS屬性通常與焦點一起使用。這裡是一個最有用屬性的表格：
| 屬性 | 描述 |
|---|---|
| outline | 在元素周圍創建一條線 |
| box-shadow | 為元素添加陰影效果 |
| border | 定義元素的邊框 |
| background | 設置元素的背景 |
| color | 改變文本顏色 |
| text-decoration | 為文本添加裝飾（如底線） |
記住，你可以組合這些屬性來創建獨特且無障礙的焦點樣式！
結論
好了，各位！你剛剛踏入了CSS focus的世界。記住，好的焦點樣式不僅僅是讓事物看起來漂亮——它們是為了創建一個無障礙、對所有人都有利的網絡。
在你繼續編碼旅程時，永遠要將無障礙性放在心上。它不僅是一個可有的東西；它是網頁開發的關鍵部分。誰知道呢？你的焦點樣式可能正是讓某人的日子變得稍微容易一點的事物。
繼續練習，保持好奇心，最重要的是，玩得開心！CSS是你的遊樂場，焦點只是你有很多樂趣玩具中的一個。快樂編程！
Credits: Image by storyset