2024 網頁x人因xDjango 實務課程 11 選擇器
前言
今天課程要來學習，在 .css 設計樣式後，怎麼透過選擇器，讓 .html 可以有所配對，經過這一步後，便可以開始學習，如何正式設計 .css 了。
選擇器
介紹
還記得上次課程，我們在 .css 檔案中，撰寫的程式碼嗎？讓我們來複習看看：
.highlight {
color: red;
font-size: 20px;
}
是不是後來，我們透過設計好的樣式 .highlight ，讓 html 當中的元素 <p>，連結到這個樣式：
<p class="highlight">
早安
</p>
沒錯，選擇器就是一種代號，讓你可以很快的選擇屬於這個代號的標籤，上面這個 <p> 因為我們設計了 class="highlight" ，所以這一個 <p> 就成為了 highlight 的類別。
而在 .css 當中，我們就專為了這個 highlight 設計了，屬於他的紅字樣式。所以便能將所有，屬於 highlight 類別的標籤，都會套用這個樣式。
那接下來，要教大家如何去使用這些選擇器，才能用來設計 CSS 語法。
元素選擇器
也就是直接選擇某個標籤，為這個標籤設計他的專屬樣式。在 .css 當中，我們的寫法長這樣：
p {
color: red;
font-size: 20px;
}
別忘了，在 .html 當中也要有一個 <p> ，像是這樣：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css'%}" />
<title>自我介紹網頁</title>
</head>
<body>
<p>
早安
</p>
</body>
</html>
當你去看網頁後會發現，字也是變成紅色了。但可是，你仔細想喔， <p> 並未連結任何代號，為什麼會變色呢？
沒錯，就如同這個選擇器名稱一樣，他是直接將所有 <p> 標籤去改樣式，並非是一個代號。
所以，我們可以直接為 標籤 ，設計屬於他的樣式。
類別選擇器
顧名思義，也就是我們定義一個類別，讓所有使用這個類別的標籤，可以套用這個類別的樣式。
首先，我們要在 .css 當中設計一個 類別：
.highlight {
color: red;
font-size: 20px;
}
請注意！類別的名稱前面，必須得加一個點 . ，做為代表後面那串字是 類別 的一種定義方式。接下來，讓我們一樣在 <body> 當中，新建一個 <p>：
<p>
早安
</p>
接著，新增屬性 class = "highlight" ，去套用 highlight 這個類別：
<p class="highlight">
早安
</p>
所以說如果你想改套用其他類別，只需要將 "" 內的字做修改即可。如果你做正確的話，便能看見一個帶有紅字的早安。
ID選擇器
當有時候，我們設計好一個完整的網頁。但我想針對某一部分，當中的文字，也就是 <p>標籤 做修改。但是電腦要怎麼知道，我想選的是眾多 <p>標籤 當中，我指定的那一個？
這時候，就得靠 ID選擇器 了。 ID選擇器，專門某一個標籤使用，一個 ID 只能給一個標籤使用，就像是你的身分證一樣，不會有人重複。
讓我們來試試看吧，首先在 .css 檔案當中，新增一個 ID 的樣式：
#highlight {
color: red;
font-size: 20px;
}
我們在新增 ID 樣式的時候，是透過 "#" 這個井字號，去標示說這是一個 ID 。那設計好 ID 的樣式後，便可在 .html 當中，去設置這個 ID 了：
<p index="highlight">
早安
</p>
而在 .html 當中，我們必須透過屬性 index ，去設置這個標籤的 ID ，才能使用這個 ID 的樣式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<title>自我介紹網頁</title>
</head>
<body>
<p index="highlight">
早安
</p>
</body>
</html>
如果你成功的話，就會看到刷新網頁後，會是帶有紅字的 "早安"。
群組選擇器
那我們在設計的過程中，肯定經常會遇到，某些樣式會有重複的內容，像是這樣：
#A {
font-size: 20px;
color: aqua;
}
#B {
font-size: 20px;
color: rgb(231, 233, 116);
}
#C {
font-size: 20px;
color: rgb(255, 0, 13);
}
#D {
font-size: 20px;
color: rgb(0, 17, 255);
}
從這邊可以發現，我設計了四個 ID 的樣式，每個 ID 都被設為 字體： 20px ，但顏色則是被設為了不同的顏色。
像這種重複的內容，我們也可以改成這樣：
#A, #B, #C, #D {
font-size: 20px;
}
#A {
color: aqua;
}
#B {
color: rgb(231, 233, 116);
}
#C {
color: rgb(255, 0, 13);
}
#D {
color: rgb(0, 17, 255);
}
也就是，透過 "," 一次為多個選擇器，設計他的樣式。最後再為個別的選擇器，設計個別的樣式。
結論
感謝你看到這邊，把這些內容持之以恆地讀完肯定不容易，你辛苦啦！
今天我們學到了 .css 當中，選擇器的用法，與他的類別。
接下來，我們將介紹常見的 CSS 語法，作為 CSS 課程的第一步。
你可能也想看
