【自學程式】什麼是CSS選擇器? 學習如何改變網頁內容的樣式

在先前，我們有提到 HTML 與 CSS 為什麼會在網頁開發的技術中，分別獨立成不同的程式語言。

與 HTML 不同，CSS 是專門修改網頁內容「樣式」的程式語言，也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容，但你可以透過 HTML 新增網頁內容後，再使用CSS去修改他的樣式，例如：把文字大小改變、顏色改變等。

CSS 這門程式語言的全名叫做，Cascading style Sheets，是指「堆疊式的樣式表」，要實作一個好的CSS架構有幾個要素，分別為：

那麼究竟要如何透過 CSS 選擇器來改變 HTML 元素的樣式呢？

首先我們需要有已經存在的HTML元素才有辦法去更改他的樣式，然後我們會透過「CSS 選擇器」去選取到這個元素（HTML Element），並更改該選擇器裡面的樣式，如此一來就可以更改他的樣式了。

在範例中，我建立了一個<h1>標籤，這時候我想要把他的樣式從預設的黑色改成紅色的，於是我在 CSS 的面板中寫了一個h1，並在後面接著一組大括號，裡面填寫了我想要修改的樣式：color:red，並在後頭使用「;」半型的分號做為結尾。

這樣一來，我就成功的透過 CSS 選擇器來改變網頁內容的樣式了。

以上的示範，就是最簡單的 CSS 選擇器寫法，你可以發現，只要把原本 <h1> 標籤外面的小括號去除，並在後面接著一組大括號，裡頭加上你想要修改的樣式內容，這就是 CSS 的寫法了，是不是很簡單呢？

當然如果你想要該改的顏色，並不是編譯器預設的那種很簡單的顏色（像是黃色、藍色、綠色），而是想要有更豐富的效果，你也可以透過新增色票來更改文字的顏色。

在這個範例中我建立了兩個 <p> 標籤，並使用相對應的 CSS 選擇器 p ，並在裡頭加入了 font-size: 100px，來將原本字體很小的p段落放大成 100px ，只要使用了該標籤的選擇器，那一類的標籤就會被套用到相同的 CSS 設定。

font-size 跟 color 一樣都是屬於css語言裡的屬性，不同的是，在 font-size 屬性中，不能直接填入數字或是文字直接更改文字的大小，而是要在數字後面加上px、em 或是 rem 等文字大小的單位。

但另外一個問題來了，如果我的網站上，同時有三個p段落，但是我想要三個段落的字體顏色、大小都不一樣怎麼辦？

常見的 CSS 選擇器就跟 HTML 標籤一樣，有不同種的類型，除了有跟 HTML 標籤長得很像的選擇器外，我們也可以透過新增 HTML 類別（class），來幫同樣類型、甚至是不同類型的 HTML 標籤分組套用 CSS 設定。

我們來看看該如何幫 HTML 元素建立類別：

在為 HTML 元素建立類別時，需要在該起始標籤裡 加入 class= “” 的設定，而 HTML 的class設定，像很像 CSS 屬性一樣，屬於 HTML 元素特有的「屬性」。

在 class 裡的內容，我們可以填入想要命名的類別名稱，但這裡要注意的是，千萬不要取一些看不出這個類別是在陳述什麼的名稱，像是：color1，color2這種名稱，如果是需要與別人一起寫同一支程式時，大概是會被隊友殺掉的雷習慣。

所以在這裡我替第一個 p 元素，命名為 color-red ，這個 HTML 類別，也可以成為 CSS 選擇器的一種形式。

與標籤不同，當要把 HTML 類別變成一種CSS選擇器時，必須要在該名稱上加上半形的小數點「.」，並與標籤類型的選擇器一樣，在後面加上大括號，並填入想要更改樣式所對應的屬性值，就是另外一種CSS選擇器的應用。

接著我們可以來看另外一個較為複雜，但也都是用 HTML 及 CSS 選擇器所創造出來的網頁效果：

這是網頁常常會看到的直立式列表，非常常見，也可以透過CSS選擇器創造出不同的網頁效果。

還記得我在剛開始學網頁開發的時候，曾看過一篇文章說， HTML 與 CSS 是非常簡單的，如果想轉職當工程師，這部分並不需要去投入許多時間學習。

但我後來越學越深入後才發現，對於 CSS 選擇器熟悉度，代表操縱網頁元素的熟悉度。

甚至有些同學，在初學 HTML 或是 CSS 的部分時，會覺得很多細節不重要，就跳過不實作，跳來跳去，等到要寫 JavaScript 時就會發現自己連最基本的網頁欄位都切不出來。

今天的章節，主要是要讓初學者認識CSS選擇器，在之後的章節，才會與大家分享有關更多CSS常見的屬性類別，及搭配HTML元素實作不一樣的效果。

其他的網頁技術的問題，或是想要了解更多有關響應式開發的小技巧，歡迎你下方留言跟我討論與交流：）

希望今天的文章有幫助到正在閱讀的你，如果你喜歡我的文章的話，可以留下你的愛心或是收藏我的文章，也或者可以點選「贊助」，你的一杯咖啡絕對是我持續寫下去的動力！或是透過拍拍手，用你小小的行動支持我的創作！

我是Vivian，我們下次見。

關於網頁開發你可能會想知道：

關於我：

一名從英文系畢業的前端工程師，喜歡閱讀、寫東西及自我成長。

｜Instagram: Vivian Yeh｜vivian_enlife

｜聯絡我：[email protected]