2024 網頁x人因xDjango 實務課程 11 選擇器

Caffeine 咖啡因

發佈於2024 網頁x人因實務課程

2024/03/14閱讀時間約 7 分鐘

前言

今天課程要來學習，在 .css 設計樣式後，怎麼透過選擇器，讓 .html 可以有所配對，經過這一步後，便可以開始學習，如何正式設計 .css 了。

選擇器

介紹

還記得上次課程，我們在 .css 檔案中，撰寫的程式碼嗎？讓我們來複習看看：

.highlight {
    color: red;
    font-size: 20px;
}

是不是後來，我們透過設計好的樣式 .highlight ，讓 html 當中的元素 ，連結到這個樣式：

<p class="highlight">
	早安
</p>

沒錯，選擇器就是一種代號，讓你可以很快的選擇屬於這個代號的標籤，上面這個  因為我們設計了 class="highlight" ，所以這一個  就成為了 highlight 的類別。

而在 .css 當中，我們就專為了這個 highlight 設計了，屬於他的紅字樣式。所以便能將所有，屬於 highlight 類別的標籤，都會套用這個樣式。

那接下來，要教大家如何去使用這些選擇器，才能用來設計 CSS 語法。

元素選擇器

也就是直接選擇某個標籤，為這個標籤設計他的專屬樣式。在 .css 當中，我們的寫法長這樣：

p {
    color: red;
    font-size: 20px;
}

別忘了，在 .html 當中也要有一個  ，像是這樣：

<!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>

當你去看網頁後會發現，字也是變成紅色了。但可是，你仔細想喔， 並未連結任何代號，為什麼會變色呢？

沒錯，就如同這個選擇器名稱一樣，他是直接將所有  標籤去改樣式，並非是一個代號。

所以，我們可以直接為 標籤 ，設計屬於他的樣式。

類別選擇器

顧名思義，也就是我們定義一個類別，讓所有使用這個類別的標籤，可以套用這個類別的樣式。

首先，我們要在 .css 當中設計一個 類別：

.highlight {
    color: red;
    font-size: 20px;
}

請注意！類別的名稱前面，必須得加一個點 . ，做為代表後面那串字是 類別 的一種定義方式。接下來，讓我們一樣在 <body> 當中，新建一個 ：

<p>
	早安
</p>

接著，新增屬性 class = "highlight" ，去套用 highlight 這個類別：

<p class="highlight">
		早安
</p>

所以說如果你想改套用其他類別，只需要將 "" 內的字做修改即可。如果你做正確的話，便能看見一個帶有紅字的早安。

ID選擇器

當有時候，我們設計好一個完整的網頁。但我想針對某一部分，當中的文字，也就是 標籤 做修改。但是電腦要怎麼知道，我想選的是眾多 標籤 當中，我指定的那一個？

這時候，就得靠 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);
}