一個完整的網站由 HTML、CSS 和 JavaScript 三者協同運作，各司其職，缺一不可。HTML 負責網站的結構，CSS 負責視覺美感，而 JavaScript 則處理動作與使用者互動。

這次的主題以掌管「視覺」的 CSS 為主，網站需要藉由 CSS 來美化，想像一下，如果一個網站沒有 CSS，會是多麼單調！不信的話，讓我們來看看以下的範例：

這是 2024 iThome 鐵人賽的報名頁面

如果沒有 CSS 美化就會變成這樣 (抱歉，傷了大家的眼睛😨)

是不是很可怕！CSS 對網站來說真是太重要了！

因此，我們可以運用 CSS 的各種屬性來打造一個美麗的網站，而這一切的實現，都必須依賴 CSS 選擇器。本次主題將深入探討各類 CSS 選擇器，了解如何使用、組合它們，從而創造出一個引人注目的網站外觀。

💠 什麼是 CSS 選擇器(Selector)

就如前面所提到的，HTML 負責網站的架構，其中包含許多標籤元素。為了對這些元素應用樣式，我們需要使用 CSS 選擇器來找到並選定這些 HTML 元素，然後為它們加上樣式。簡單來說，CSS 選擇器就是幫助我們定位和選擇特定 HTML 元素的工具。

💠 如何使用選擇器

先選定好指定元素後，就可增添樣式屬性區塊。

1
2
3

選擇器 {
  屬性名: 屬性值;
}

1 2	<h1>Lala Code</h1> <p>一起來學 CSS 選擇器吧！</p>

h1 {
  color: navy;
}

p {
  color: dodgerblue;
  font-weight: bold;
}

結果會是長成這個樣子：

以下是在本主題將會介紹到的各種選擇器

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。