進一步完善造型

嘿，歡迎回到邊編碼邊學習：HTML 和 CSS！今天，我們將深入探討造型的世界。到目前為止，我們一直在直接設計元素的樣式。但是如果你有兩個

該怎麼辦？元素並希望每個元素看起來都不同？輸入 CSS 選擇器！

元素選擇器

您已經熟悉這些，但讓我們回顧一下：

h1 {
  font-size: 32px;
  font-family: Arial;
  font-weight: 500;
}

此規則集針對所有

元素，設定其字體大小、系列和粗細。元素選擇器非常適合大綱，例如為整個頁面設定樣式指南。但讓我們面對現實吧，並非所有

標籤看起來應該是一樣的。對於更具體的造型，我們需要加強我們的遊戲！

類別選擇器

課程來救援！想要兩個

標籤看起來不一樣？新增課程：

<p class="big red">This text is BIG and red.</p>
<p class="small blue">This text is small and blue.</p>

每個

標籤有兩個類別。在 CSS 中，使用 .:
定位這些類

.big {
  font-size: 100px;
}

.small {
  font-size: 9px;
}

.red {
  color: red;
}

.blue {
  color: blue;
}

繁榮！套用樣式。您可能會問，“為什麼不將樣式合併到更少的類別中呢？”好問題！我喜歡保持課程的靈活性。你永遠不知道什麼時候你會想重複使用沒有藍色的小東西。

ID選擇器

對於唯一元素，請使用 ID。看看這個：

<p id="name">My Name is Nolan!</p>

謹慎使用 ID，每頁僅使用一次。在 CSS 中使用 #:
定位它們

#name {
  text-decoration: underline;
}

簡單吧？

風格衝突

現在，如果一個元素同時具有類別和 ID 會怎麼樣？像這樣：

<p id="red" class="blue">Will I be red or blue?</p>

它會變紅！為什麼？因為 ID 比類別更具體。這是一個簡單的例子：

<p id="red" class="underline">I’m styled by three rulesets!</p>

p {
  font-size: 12px;
  color: black;
  text-decoration: none;
}

.underline {
  text-decoration: underline;
}

#red {
  color: red;
}

文字變成紅色並帶有下劃線，字體大小為12px。 ID 勝過類，而類別又會覆寫元素選擇器。這種級聯樣式使您的頁面看起來很優雅，無需重複程式碼。

挑戰

是時候升級你的「關於我」頁面了！這是你的使命：

• 設定

  、

  和

  的預設樣式使用元素選擇器。

• 在您的名字下添加帶有

  的標語使用 ID 對其進行標記和樣式設定。

• 使用類別選擇器讓其他文字變得有趣。

嘗試相互衝突的風格，看看哪種規則獲勝。你能找出原因嗎？

感謝您的閱讀！如果您希望我在本系列中探討任何其他主題，請在評論中告訴我，或只是讓我知道您對本系列的喜愛程度！

以上是進一步完善造型的詳細內容。更多資訊請關注PHP中文網其他相關文章！