iT邦幫忙

2024 iThome 鐵人賽

DAY 16
0
自我挑戰組

從零開始的HTML系列 第 16

Day 16 CSS中設定「類別(class)」與「ID」

  • 分享至 

  • xImage
  •  

在CSS中,類別(class)和ID是兩種常用的選擇器,用來選定HTML元素並應用樣式。它們的主要差別在於應用範圍和唯一性。

類別(class) 是用於標記一組具有相似樣式的元素。它以點號(.)開頭,後接類別名稱。例如,如果你想讓多個段落使用相同的文字顏色,可以將它們都分配一個相同的class名稱:

<p class="highlight">這是一個段落。</p>
<p class="highlight">這是另一個段落。</p>

在CSS中,定義樣式如下:

.highlight {
    color: blue;
}

這樣,所有擁有highlight類別的元素都會變成藍色。類別可以在多個元素上重複使用,因此很適合為多個元素設置統一樣式。

ID 則是用來唯一識別一個元素。它以井字號(#)開頭,後接ID名稱。由於ID在同一頁面中必須是唯一的,所以它通常用於特定元素需要獨特樣式或功能的情況。例如:

<p id="special">這是獨特的段落。</p>

在CSS中,定義樣式如下:

#special {
    font-weight: bold;
    color: red;
}

這樣,ID為special的段落將被設置為紅色並加粗。

使用時機: 如果需要多個元素共用相同的樣式,使用類別是最適合的選擇。而如果需要特定元素擁有獨特樣式或進行JavaScript操作時,則應使用ID。


上一篇
Day 15 CSS的項目清單美化
下一篇
Day 17 CSS版面編排(彈性版面、格線版面)
系列文
從零開始的HTML30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言