【自學程式】什麼是CSS選擇器? 學習如何改變網頁內容的樣式
在先前，我們有提到 HTML 與 CSS 為什麼會在網頁開發的技術中，分別獨立成不同的程式語言。
與 HTML 不同，CSS 是專門修改網頁內容「樣式」的程式語言，也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容，但你可以透過 HTML 新增網頁內容後，再使用CSS去修改他的樣式，例如：把文字大小改變、顏色改變等。
CSS 這門程式語言的全名叫做，Cascading style Sheets，是指「堆疊式的樣式表」，要實作一個好的CSS架構有幾個要素，分別為：
- HTML 元素
- CSS 選擇器
- HTML 類別
那麼究竟要如何透過 CSS 選擇器來改變 HTML 元素的樣式呢？
實作 CSS 選擇器
首先我們需要有已經存在的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 類別
常見的 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
｜聯絡我：vivian.enlife@gmail.com
此篇文章會顯示動態置底廣告
為什麼會看到廣告
431會員
101內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
你可能也想看
Google News 追蹤
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
什麼是 CSS 預處理器
CSS 預處理器是一種工具，使用專門的語法來生成 CSS 樣式表。市面上有許多 CSS 預處理器可供選擇，它們通常會提供一些純 CSS 中沒有的功能，例如變數、混入、巢狀選擇器等。這些功能可以使 CSS 結構更易讀、更易於維護，並提高開發效率。
為什麼使用 CSS 預處
前言
今天課程要來學習，在 .css 設計樣式後，怎麼透過選擇器，讓 .html 可以有所配對，經過這一步後，便可以開始學習，如何正式設計 .css 了。
選擇器
介紹
還記得上次課程，我們在 .css 檔案中，撰寫的程式碼嗎？讓我們來複習看看：
.highlight {
co
前言
終於要到這個振奮人心的章節了，我們終於要來學習，如何讓自己的網頁更加美觀。
但在這之前，我們肯定得先學習，如何將我們的 CSS 檔案，連接到 HTML 當中。
連結分類
首先，我們在連結 CSS 的方法中，有分為三種：
內聯連結
在 .html 當中，任一標籤的裡面，用屬性 s
HTML 標籤是網頁內容的基礎，透過學習不同的標籤，你可以設計出各式各樣的內容。本文介紹了各種基本的標籤，如標題、段落、修飾樣式、超連結以及區塊等，讓你對 HTML 標籤有更深入的瞭解。
在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。
現代社會跟以前不同了，人人都有一支手機，只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行，然而如今科技快速發展之下，金融App無聲無息地進到你生活中。但同樣的，每一家銀行都有自己的App時，我們又該如何選擇呢？(本文係由國泰世華銀行邀約)
今天我會用不同角度帶大家看這款國泰世華CUB
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
什麼是 CSS 預處理器
CSS 預處理器是一種工具，使用專門的語法來生成 CSS 樣式表。市面上有許多 CSS 預處理器可供選擇，它們通常會提供一些純 CSS 中沒有的功能，例如變數、混入、巢狀選擇器等。這些功能可以使 CSS 結構更易讀、更易於維護，並提高開發效率。
為什麼使用 CSS 預處
前言
今天課程要來學習，在 .css 設計樣式後，怎麼透過選擇器，讓 .html 可以有所配對，經過這一步後，便可以開始學習，如何正式設計 .css 了。
選擇器
介紹
還記得上次課程，我們在 .css 檔案中，撰寫的程式碼嗎？讓我們來複習看看：
.highlight {
co
前言
終於要到這個振奮人心的章節了，我們終於要來學習，如何讓自己的網頁更加美觀。
但在這之前，我們肯定得先學習，如何將我們的 CSS 檔案，連接到 HTML 當中。
連結分類
首先，我們在連結 CSS 的方法中，有分為三種：
內聯連結
在 .html 當中，任一標籤的裡面，用屬性 s
HTML 標籤是網頁內容的基礎，透過學習不同的標籤，你可以設計出各式各樣的內容。本文介紹了各種基本的標籤，如標題、段落、修飾樣式、超連結以及區塊等，讓你對 HTML 標籤有更深入的瞭解。
在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。