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

更新於 2022/03/18閱讀時間約 5 分鐘
在先前,我們有提到 HTML 與 CSS 為什麼會在網頁開發的技術中,分別獨立成不同的程式語言。
與 HTML 不同,CSS 是專門修改網頁內容「樣式」的程式語言,也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容,但你可以透過 HTML 新增網頁內容後,再使用CSS去修改他的樣式,例如:把文字大小改變顏色改變等。
CSS 這門程式語言的全名叫做,Cascading style Sheets,是指「堆疊式的樣式表」,要實作一個好的CSS架構有幾個要素,分別為:
  1. HTML 元素
  2. CSS 選擇器
  3. 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
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶,不用腳踩十公分、連妝都可以不用化的職場人生,文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
上華蒙特梭利小學、中學和高中的教學理念以蒙特梭利教育為基礎,是台南地區一所特別的實驗學校。小學部分經營已經有七年,從一開始僅有八位學生到如今成長至七十多名學生,這樣的發展過程中,需要家長們慢慢了解並認同蒙特梭利的教育理念。 在這幾年的疫情風波中,學校經歷了許多挑戰,但已逐漸趨於穩定。上華蒙特梭利小
整理幾個自學網站,或許未來用得上。
Thumbnail
第二題練習題~應用的內容跟判斷質數差不多,甚至再更少一點(因為沒有要用到迴圈),所以這次寫起來就快很多,除了題目難度比較低之外,經過上次的洗禮之後,對於解題應該有再抓到更多感覺,所以寫這題比較有成就感一點XD 主題:宣告變數和判斷式的的綜合小應用 題目:每個人都有心目中夢想的身高,像小鳴就夢想著
Thumbnail
從跟著教學影片把老師的程式抄過一遍,變成看到題目能把題目轉為程式,對於初學者來說蠻困難的。所以我想以初學者的角度來分享自己怎麼適應這段轉換的過程,以及我解題的方法是什麼。(也順便紀錄一下自己的思路) ※主題:流程控制為主的綜合小應用 ※題目:讓使用者輸入一個數字,並用程式判斷該數字是否為質數
Thumbnail
網路上提到自學程式的文章,都會說自學程式非常地辛苦,而且要很自律,決心夠強;而當自己踏上這條路後,才發現何止是辛苦,根本是佈滿荊棘,常常寸步難行,且被刺地遍體鱗傷(喂~是不是有點太浮誇了),但在每個寫出程式豁然開朗的當下,卻又成就感滿滿,所以想藉著寫部落格紀錄一下自己的學習過程!
Thumbnail
程式語言只是工具,更重要的是程式邏輯 【運算思維】 1.拆解: 將一個任務或問題拆解成數個步驟或部分。 2.找出規律: 預測問題的規律,並找出模式做測試。 3.歸納與抽象化: 找出最主要導致此模式的原則或因素。 4.設計演算法: 設計出能夠解決類似問題並且能夠被重複執行的指令流程。
Thumbnail
最近很多人私訊我他們自學遇到的瓶頸,有些人會覺得學不會程式,是自己太笨沒天分,或從小數理能力就差,才學不起來。但以我自己這些年自學程式並創業的經驗,我認為可能原因是自己操之過急了,因為想要快速達到像是轉職或是創業等等目標,所以覺得得學得越快越好。但這個領域需要的是長時間的磨練,慢慢一點點累積
Thumbnail
設定好你的目標,做好目標分解,接下來就是學習與實作,在過程中,肯定會遇到各種問題需要debug,這應該是剛入門自學程式的人最痛苦的部分,可能看到bug不知道google要下甚麼關鍵字,也可能搜出一堆文章看得頭昏腦脹,所以想跟大家分享我在自學製作封鎖電商黑名單chrome插件過程,是怎麼面對這種狀況的
Thumbnail
之前跟大家分享【表現目標】和【學習目標】,有助於設定自學的終點,但是在執行目標的過程中是否遇過有目標也難以下手的問題呢?今天想跟大家說說【拆解目標】,這也是我在自學製作封鎖電商黑名單chrome插件賺取被動收入過程中運用的方法,希望對剛入門自學程式的朋友有幫助
Thumbnail
除了增進程式技術和技巧以外,我覺得建立起正確的【自學心態】更重要,保持正確的態度能讓你持續不斷的精進學習,不會半途而廢,也更能享受進步帶來的成就感,我從自己過去零基礎開始自學程式然後做出線上服務的經驗,整理出一些入門自學的朋友應該抱持的心態,相信會很有幫助
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
上華蒙特梭利小學、中學和高中的教學理念以蒙特梭利教育為基礎,是台南地區一所特別的實驗學校。小學部分經營已經有七年,從一開始僅有八位學生到如今成長至七十多名學生,這樣的發展過程中,需要家長們慢慢了解並認同蒙特梭利的教育理念。 在這幾年的疫情風波中,學校經歷了許多挑戰,但已逐漸趨於穩定。上華蒙特梭利小
整理幾個自學網站,或許未來用得上。
Thumbnail
第二題練習題~應用的內容跟判斷質數差不多,甚至再更少一點(因為沒有要用到迴圈),所以這次寫起來就快很多,除了題目難度比較低之外,經過上次的洗禮之後,對於解題應該有再抓到更多感覺,所以寫這題比較有成就感一點XD 主題:宣告變數和判斷式的的綜合小應用 題目:每個人都有心目中夢想的身高,像小鳴就夢想著
Thumbnail
從跟著教學影片把老師的程式抄過一遍,變成看到題目能把題目轉為程式,對於初學者來說蠻困難的。所以我想以初學者的角度來分享自己怎麼適應這段轉換的過程,以及我解題的方法是什麼。(也順便紀錄一下自己的思路) ※主題:流程控制為主的綜合小應用 ※題目:讓使用者輸入一個數字,並用程式判斷該數字是否為質數
Thumbnail
網路上提到自學程式的文章,都會說自學程式非常地辛苦,而且要很自律,決心夠強;而當自己踏上這條路後,才發現何止是辛苦,根本是佈滿荊棘,常常寸步難行,且被刺地遍體鱗傷(喂~是不是有點太浮誇了),但在每個寫出程式豁然開朗的當下,卻又成就感滿滿,所以想藉著寫部落格紀錄一下自己的學習過程!
Thumbnail
程式語言只是工具,更重要的是程式邏輯 【運算思維】 1.拆解: 將一個任務或問題拆解成數個步驟或部分。 2.找出規律: 預測問題的規律,並找出模式做測試。 3.歸納與抽象化: 找出最主要導致此模式的原則或因素。 4.設計演算法: 設計出能夠解決類似問題並且能夠被重複執行的指令流程。
Thumbnail
最近很多人私訊我他們自學遇到的瓶頸,有些人會覺得學不會程式,是自己太笨沒天分,或從小數理能力就差,才學不起來。但以我自己這些年自學程式並創業的經驗,我認為可能原因是自己操之過急了,因為想要快速達到像是轉職或是創業等等目標,所以覺得得學得越快越好。但這個領域需要的是長時間的磨練,慢慢一點點累積
Thumbnail
設定好你的目標,做好目標分解,接下來就是學習與實作,在過程中,肯定會遇到各種問題需要debug,這應該是剛入門自學程式的人最痛苦的部分,可能看到bug不知道google要下甚麼關鍵字,也可能搜出一堆文章看得頭昏腦脹,所以想跟大家分享我在自學製作封鎖電商黑名單chrome插件過程,是怎麼面對這種狀況的
Thumbnail
之前跟大家分享【表現目標】和【學習目標】,有助於設定自學的終點,但是在執行目標的過程中是否遇過有目標也難以下手的問題呢?今天想跟大家說說【拆解目標】,這也是我在自學製作封鎖電商黑名單chrome插件賺取被動收入過程中運用的方法,希望對剛入門自學程式的朋友有幫助
Thumbnail
除了增進程式技術和技巧以外,我覺得建立起正確的【自學心態】更重要,保持正確的態度能讓你持續不斷的精進學習,不會半途而廢,也更能享受進步帶來的成就感,我從自己過去零基礎開始自學程式然後做出線上服務的經驗,整理出一些入門自學的朋友應該抱持的心態,相信會很有幫助