CSS是什麼

【CSS指南】Day01 – CSS是什麼?入門一定要先知道這些規則 (最詳細說明)

為什麼學習完 HTML 還需要學習 CSS 技術呢? 很多人可能會有這個疑問一直很困惑著說學完 HTML 我就可以架設網頁了嗎? 這邊小青來幫幫你們解決這個困惑,首先你學習完 HTML 確實就是能夠寫出一個有功能的頁面了但你現在呈現出來的網頁會非常單調如果你前面有認真學的話就會知道。

雖然現在網頁上有功能但是用戶一看到你網頁會覺得也太單調了吧?! 這是網頁嗎? 產生疑惑甚至懷疑你的網頁是詐騙網頁,所以你的目的不在是功能需要做的精緻一些些,另外值得一提 HTML 的侷限性就是蠻辦法優化頁面使得網頁看起來更加美麗漂亮,所以才需要學習 CSS 技術,CSS 技術就是負責裝修與美化,在當初 HTML 就是負責網頁架構而 CSS 就是負責頁面的美化相分離的。

所以學習 HTML 為什麼還是需要學一下 CSS 技術就是這個原因。

點我瞭解 小青如何每月多賺5位數台幣

HTML 的侷限性是什麼?

HTML的侷限性是什麼

HTML 就是非常很單純,它只負責關注內容的語意也就是功能的實現並搭建出網頁的整體架構,其它的一概不管例如下列幾個例子說明會比較明確。

  • <h1> 表示這是一個大標題標籤
  • <p> 表示這是一個段落標籤
  • <img> 表示這是一個圖片標籤
  • <a> 表示這是一個鏈接標籤

所以 HTML 就是負責顯示這些標籤元素功能的,很乖的 HTML 你用什麼這個標籤就會乖乖的顯示標籤功能出來的,但是經過前面所學你可能會很懷疑人生網頁有那麼醜嗎? 我看別人寫的網頁很漂亮也,為什麼我寫出來的就是那麼醜,這是很正常的因為你還沒學 CSS 技術,在本節就是向你說明為什麼你看你的網頁還很單調的原因就是因為 HTML 有侷限性存在。

小注意:

  • HTML 有侷限性
  • 只使用 HTML 做出來的網頁必定很醜
  • HTML 只實現元素標籤功能
  • HTML 像是房子的雛形,沒有裝潢

CSS 是什麼呢?

CSS是什麼呢

在前面我們學習了 HTML 的相關技術接下來就是要來學習 CSS 技術,HTML 就是用來建立網頁的框架而 CSS 則是用來修飾整個網頁架構讓整個網頁更加美觀豐富,如果你還是沒有什麼概念就把 HTML 想成主要是用來蓋房子的地基也就是整個房子的基本組成,當你蓋完房子有個雛形但是內裝我們都完全沒有裝設,基本可以遮風避雨而已,但房子主要目的就是遮風避雨。

當人不在煩惱整天到處找遮風避雨的地方,漸漸的人會追求房子的舒適度也就是在醜陋的房子鋪設磁磚、粉刷牆壁把整個房子又進行裝修,裝修這個行為在網頁中就是 CSS 技術使整個場景更加的美化並細微調整佈局頁面,要知道是先有 HTML 才能使用 CSS 技術唷!就像房子要先有雛形出來才能弄裝修,不然是不可能憑空裝修吧!

CSS 的功能有哪些?

CSS的功能有哪些
  • 文本內容
    • 改變字體
    • 改變文字大小
    • 改變文字對齊..等
  • 圖片外型
    • 改變圖片寬度、高度
    • 改變邊框樣式
    • 改變圖片邊距…等
  • 版面佈局
  • 外觀顯示樣式

小注意:

  • Cascading Style Sheets 的縮寫 CSS
  • CSS 的中文說法太多種了,如果要說中文通常都會叫層疊樣式表
  • CSS 也是一種標記語言

小總結:

CSS 技術最大價值是能夠讓 HTML 專注去做結構的呈現,網頁的樣式全部交給 CSS 裝修裝潢就可以了,就是結構 ( HTML )與樣式 ( CSS ) 相分離。

點我瞭解 小青如何每月多賺5位數台幣

CSS 語法規範有哪些該注意?

CSS語法規範有哪些該注意

要開始學習 CSS 技術你總是要先了解別人的規範,如果不遵守規則在實現時你可能會出現很多狀況,不管是 HTML 與 CSS 都是,想要熟練的使用 CSS 技術進行對網頁修飾,首先需要先了解 CSS 樣式規則,CSS 規則是由兩個主要部分所構成,選擇器以及一條或是多條聲明。

  • 選擇器
  • 一條與多條聲明

那下列我們來進行初試使用 CSS 來更改 <p> 段落標籤裡面的文字顏色以及字體大小,你看底下我的寫法 CSS 樣式就是寫在 <head> 頭部標籤裡面的 <style> 樣式標籤,這樣就能實現控制 HTML 的 <p> 段落標籤,也就是結構 ( HTML ) 與樣式 ( CSS ) 相分離這樣是不是比較有一點感覺了呢!

選擇器就是用於指定 CSS 樣式的 HTML 標籤,花括號內是對該 HTML 元素標籤對象設置具體樣式,可設置一條與多條,如果是多條要記得使用空格鍵隔開才不會發生顯示不出來等原因,還有屬性和屬性值必須以鍵值對樣式出現,而屬性與屬性值是有用冒號進行分割結尾需要用分號結尾。

<head>

	<title>我的第一個網頁</title>
	<style>
			<!--選擇器 {樣式} -->
			<!--給誰改樣式 {改什麼樣式} -->
		p {
				color: red;
				font-size: 20px;
			}
	</style>

</head>

<body>

	<p>我是文字</p>

</body>

小總結

  • CSS 樣式一般我們都寫在 <head> 頭部標籤裡面的 <style> 樣式標籤裡面
  • CSS 有兩個部分組成,選擇器 ( 屬性 ) 和樣式 ( 屬性值 )也就是 ( 給誰改樣式和改什麼樣式 )
  • 屬性與屬性值中間必須使用冒號 ( : ) 隔開
  • 每一組寫完屬性值必須補上冒號 ( ;)結尾,表示該屬性值結束

CSS 有代碼風格嗎?

CSS有代碼風格嗎

以下寫法不是強制性的 CSS 樣式代碼寫法,但是是符合一般實際開發專業人士的寫法,如果是團隊合作當同事看見你這樣寫就會覺得說你寫法不錯好像之前有開發過,而且團隊都這樣寫的時候你寫的很跟別人不一樣,團隊一看就知道你之前沒什麼經驗也沒有在讀別人寫的前端網頁代碼,大家心裡都會有準備說這個是菜鳥大家要隨時注意一下,所以代碼風格寫法還是能夠對自己有所要求一點。

雖然你可能認為東西可以跑就好了,但是如果在維護過程中不是你親自維護,維護的當事人讀你寫的東西會很痛苦很難讀那你就該檢討一下,雖然對方不太會當面跟你說但最後大家一定會傳你寫的很難讀的,提升自己的編寫方式很重要能讓團隊合作開發更順利。

CSS 代碼風格需要注意那些點呢?

CSS代碼風格需要注意那些點呢
  • 樣式格式書寫
    • 緊湊格式
    • 展開行格式
  • 樣式英文大小寫風格
    • 英文小寫
    • 英文大寫
  • 樣式空格風格
點我瞭解 小青如何每月多賺5位數台幣

CSS 樣式格式書寫有哪些?

CSS樣式格式書寫有哪些
  • 緊湊格式
p { color: red; font-size: 20px; }

緊湊型格式書寫,可以看見屬性值一寫完就按空格在寫下一個屬性值過程是分常緊湊的,並不推薦任何人用這種方式來書寫 CSS。

  • 展開行格式
p { 
	color: red; 
	font-size: 20px; 
}

展開行格式書寫,可以看見在屬性值一寫完分號結尾,就立刻斷行寫下一行在這過程可以看見讓人讀CSS 代碼非常明確非常值觀,推薦任何人使用這個書寫方式。

樣式格式書寫小總結:

有些人就會很好奇說,那你這樣寫不是很浪費空間嗎?一行可以寫完為什麼需要分那麼多行寫,這點你不用擔心,在寫完全部代碼工程,團隊開發到後期會進行代碼壓縮就會變成全部都是一行,如果直接寫成一行的話到時候需要調整東西或是有錯誤,要查很久很浪費開發時間週期所以呀為什麼這就是大家都是會使用展開式風格來進行開發。

CSS 樣式英文大小寫風格用法

CSS 樣式英文大小寫風格用法
  • 英文小寫風格寫法
p { 
	color: red; 
	font-size: 20px; 
}
  • 英文大寫風格寫法
P { 
	COLOR: RED; 
	FONT-SIZE: 20PX; 
}

樣式大小寫風格小總結:

一般我們在寫前端網頁都是使用英文小寫來進行書寫,你可能會聽說有人會說用大寫比較好,但實際他們根本沒在做團隊開發雖然英文大小寫開發也是可以執行的,但一般團隊開發都要求使用英文小寫來書寫,除非團隊有特殊要求否則不要硬要使用英文大寫來書寫代碼會造成別人合作上開發的困擾,所以推薦使用英文小寫來寫唷!

CSS 樣式空格風格用法

CSS樣式空格風格用法
  • 有空格寫法
p { 
	color: red; 
	font-size: 20px; 
}
  • 不空格寫法
p{ 
	color:red; 
	font-size:20px; 
}

小總結:

可以發現在選擇器 ( 屬性 ) 地方會空一格在打花括號與屬性值名稱冒號完也會打一個空格,這樣的寫法是有空格的寫法,會讓人一眼可以辨識屬性與屬性名後面就是沒有其餘東西,以免造成錯誤或是誤打其它英文字。

如果你使用不空格打法,選擇器 ( 屬性 ) 與屬性名稱是連在一起的如果發生錯誤或是要在進行修改會不太好辨認,辨識度很低引響開發速度和流暢性,一位稱職專業的前端開發人員全部都是使用有空格打法唷!

點我瞭解 小青如何每月多賺5位數台幣

CSS 代碼風格總結

CSS代碼風格總結

一位稱職又專業的前端人員都會這樣寫

  • 樣式格式書寫 – 使用展開式書寫風格
  • 樣式大小寫 – 使用小寫書寫風格
  • 樣式空格 – 使用有空格書寫風格

只要符合以上幾點來進行撰寫前端代碼,就算你是菜鳥別人一看到你這樣寫就會自動認為你是蠻厲害的以前應該是有開發經驗的人在團隊合作也能讓團隊大家知道你不是太菜的人唷!

CSS 基本選擇器有哪些?

CSS基本選擇器有哪些

CSS的基本選擇器,如果你不知道它們使用場景以及作用是什麼,你需要先明白這些知識才會知道原來可以劃分這麼多種種類,所以一定就要來好好一下介紹。

CSS 選擇器的作用是什麼?

CSS選擇器的作用是什麼
<div>我是div01</div>
<div>我是div02</div>
<div>我是div03</div>

<ul>
	<li>我是ul裡的li</li>
</ul>

<ol>
	<li>我是ol裡的li</li>
</ol>

我們直接看個 HTML 代碼問幾個問題讓你好好思考

  • 要如何把 div 裡面的文字都改成紅色,其他標籤都不改
  • 要如何把第一個 div 裡頭字體改成紅色,其他標籤都不改
  • 要如何把所有 <li> 標籤改成紅色字體,其他標籤都不改
  • 要如何把 <ol> 裡的 <li> 標籤改成紅色字體,其他標籤都不改

這時候你可能會覺得有辦法做到嗎? 確實可以這就是 CSS 選擇器會有的特殊功能,你所想到的或是你還沒想到的都有辦法實現的唷! 選擇器 ( 選擇符 ) 就是根據不同需求把不同標籤選擇出來,這就是選擇器的作用,簡單來說就是選擇標籤用的,先選中才能進行下一步動作,你現在卡住的部分小青我會在後續慢慢的解釋說明有什麼方法,一開始先別急先有的概念就好。

小總結:

以上 CSS 做了兩件事

  1. 找到所有 <h1> 標題標籤 就是選擇器 ( 選對人 )
  2. 設置這些標籤樣式,例如改顏色 ( 做對事 )

簡單好理解就是想成我們需要先,選對人才能做對事。

CSS 選擇器是什麼?

CSS選擇器是什麼

CSS 選擇器非常多種,因為會面臨到很多場景都需要有對應的方法,以前的前輩都已經遇過了並提出說這個場景需要用什麼方法來解決,於是他們就埋頭解決掉這問題到後人當碰到這問題時你不需要整個造輪子因為那不是新手該做的事,你只需要查看前輩是不是已經解決問題找到他的說明文檔看一下怎麼用就好,你不用擔心碰到問題因為你遇到的問題基本上已經有人想到了並解決問題了。

查找問題和有沒有該場景用法,也是寫代碼必備技能唷! 這些都在整個 Google 搜尋引擎上,百分之 99 的基本問題都已經解決掉了你只需要查找即可,那可能你會想那麼多 CSS 選擇器我都需要學會才能架設出網站和成為厲害的前端人員嗎?

問這問題的人通常都沒好好思考本質,那我問你小時候學中文有需要會全部中文才開口講嗎?學中文本質就是拿來交流和閱讀文字用,一般人不會用大家很少用的單字文字吧,英文也是怎樣算英文好,沒有英文好這件事的你陷入迷思陷阱了,都只需要懂基本常用大家都懂得就可以了刁鑽的單字就算你會別人不知道,也沒意義,不知道的意思查中文或是英文單字就可以了。

那回過頭來說,你應該知道學 HTML 或是 CSS 該學到哪裡了吧?! 就是學會基本的大家常用的語法就可以了,需要其他功能查就對了,看到新功能查他意思和用法就可以了,而不是去背它意思和語法,寫代碼不是在背誦大賽先搞清楚本質否則你永遠都止步不前。

小總結:

你不需要會全部 CSS 選擇器,你需要用的時候知道那場景在去查手冊就能夠幫助你解決了,不要因為選擇器多你就害怕,多你才要慶幸因為大家都幫你解決了問題你用就好,初學你也不可能去寫功能的,什麼樣的能力就做什麼樣的事,你可以想今天選擇器多就像是我今天回家的路有很多種,你要用走的、坐車的、用飛的都可以到目的地,最慘的是你怎樣都到不了那就說明那語言太新什麼功能都沒有。

點我瞭解 小青如何每月多賺5位數台幣

CSS 選擇器分類有哪些該注意?

CSS選擇器分類有哪些該注意

選擇器雖然很多,但是整體是能夠分成兩大組分別是,基礎選擇器和複合選擇器這兩大類

  • 基礎選擇器
  • 複合選擇器

基礎選擇器就是由單個選擇器所組成的就是那麼簡單,而多個選擇器就是由多個選擇器所組成就這樣沒了其實不難思考吧,但是基礎選擇器還可以再細分成標籤選擇器、class ( 類 ) 選擇器、id 選擇器和推通配符選擇器。

  • 基礎選擇器
    • 標籤選擇器
    • class ( 類 ) 選擇器
    • id 選擇器
    • 通配符選擇器

CSS 標籤選擇器是什麼?

CSS標籤選擇器是什麼

標籤選擇器 ( 元素選擇器 ) 是指用 HTML 標籤名稱作為選擇器,我想你應該還記得 HTML 元素標籤吧?! 如果忘記可以去複習一下,會按照標籤名稱進行分類,為頁面中某一個大類標籤進行指定統一改變 CSS 樣式。

點我瞭解 小青如何每月多賺5位數台幣

CSS 標籤選擇器基本語法用法

CSS標籤選擇器基本語法用法

假設需要改變頁面中所有 <p> 段落標籤如下這樣使用

標籤名{
	屬性名稱01: 屬性值01;
	屬性名稱02: 屬性值02;

}

p {
	color: red;
	font-size: 15px;
	
}

CSS 標籤選擇器作用功能

CSS標籤選擇器作用功能

標籤選擇器就是可以把某一大類的標籤全部選擇出來,統一進行 CSS 樣式改變,例如改變頁面全部的 <p> 段落標籤或是 <div> 標籤。

CSS 標籤選擇器優點與缺點有哪些?

CSS標籤選擇器優點與缺點有哪些

優點

  • 能夠快速為頁面中同類型的標籤統一設置樣式

缺點

  • 無法差異化單獨設置同類型標籤,因為此功能就是只能選擇全部的當前標籤
點我瞭解 小青如何每月多賺5位數台幣

CSS 的 class ( 類 ) 選擇器是什麼?

CSS的class類選擇器是什麼

class ( 類 ) 選擇器是如果你有想要選擇同標籤,但想單獨選擇其中某一個就可以使用 class ( 類 ) 選擇器就能夠解決這個問題囉!

class ( 類 ) 選擇器基本語法

class類選擇器基本語法

假設需要改變頁面中所有 <p> 段落標籤如下這樣使用

.標籤名{
	屬性名稱01: 屬性值01;
	屬性名稱02: 屬性值02;

}

.red {
	color: red;
	font-size: 15px;
	
}

.green {
	color: green;
	font-size: 15px;
	
}

HTML 標籤語言要先進行標記 <p> 段落標籤加入 class 屬性並取名字即可

<ul >

	<li class="red">此文字要改紅色</li>
	<li class="green">此文字是綠色</li>
	<li>此文字是黑色</li>

</ul>

class ( 類 ) 選擇器作用功能有哪些?

class類選擇器作用功能有哪些

class ( 類 ) 選擇器就是可以把某一大類的相同標籤,其中特別某一個加入 class ( 類 ) 並自定義命名進行 CSS 樣式改變,例如改變 <p class=”red”> 段落標籤。

要注意那些點呢?

  • class ( 類 ) 選擇器是使用 “.” ( 英文點號 ) 進行標記,後面才是緊跟自定義名稱。
  • 自定義命名不要使用系統默認文字名稱,例如 div 或是 span
  • 不要使用數字、中文命名,請使用英文命名
  • 自定義命名太長可以使用減號符號 ( – ) 或是底線符號 ( _ ) 補助閱讀

CSS 的 class ( 類 ) 選擇器 – 多類名 是什麼?

CSS的class類選擇器 多類名是什麼

class ( 類 ) 多類名是給一個標籤取多個名稱,從而達到更多的選擇目的,就像你可能叫某某某但是同班同學如果剛好也叫跟你一模一樣名字,這時候老師或是同學為了要區別開來就會叫你暱稱,不然叫一個人名字突然兩個人回答可不是辦法,所以一個人有多個暱稱也是很正常的,那我們也能夠用在 CSS 之中也就是class(類)選擇器能夠讓你取多個名稱做區別開來動作。

點我瞭解 小青如何每月多賺5位數台幣

class ( 類 ) 選擇器 – 多類名的使用方式

class類選擇器 多類名的使用方式
<ul>

	<li class="red font25">此文字要改紅色</li>
	<li>此文字是黑色</li>

</ul>
.red {
	color: red;	
}

.font25 {
	font-size: 25px;
	
}
  • 能在 class 屬性中寫多類名
  • 多類名中間必須用空格分開
  • 多類名標籤會具有多重樣式

CSS 的 class ( 類 ) 選擇器 – 多類名的使用場景

CSS的class類選擇器 多類名的使用場景
<body>

	<div class="red box">紅盒子</div>
	<div class="blue box">綠盒子</div>
	<div class="red box">紅盒子</div>

</body>
.red {
	color: red;	
}

.blue {
	color: blue;	
}

.box {
	width: 100px;
	height: 100px;	
}

這有三個盒子其中有兩個紅色與一個綠色,顏色我們分開來寫 CSS 樣式這樣比較好理解,但今天我每個盒子都需要一定的寬和高值,也是可以直接把 width 寬度屬性和 height 高度屬性寫在顏色的裡面,但問題來了我需要打四行明明是改變同樣東西,所以我把改變寬和高單獨寫一個 box 屬性樣式,只需要寫 2 行就能夠解決。

在往後維護就更加的容易快速控制能夠節省時間,但可能你現在沒有什麼特別感覺,在一個完整的頁面可不只一個盒子假設今天有 10 個盒子你每個盒子都是重複的寬和高是要設定一樣的值,你需要打 20 行,如果需要修改要在一次改 20 個,今天我使用 class ( 類 ) 選擇器 – 多類名的話我只需要改 2 行裡頭的數值,這樣你覺得日後維護誰比較輕鬆呢?! 可以好好思考一下

小總結

  • 能把需要重複的相同標籤元素樣式,放到同一個 class ( 類 ) 裡頭
  • 使用多 class ( 類 ) 名,能提高維護效率
  • 能使相同代碼只需要一組就好,使得代碼更簡潔
  • 多 class ( 類 ) 名在後期佈局越來越豐富的情況下,會使用的情況就會越多 ( 重要 )
點我瞭解 小青如何每月多賺5位數台幣

class ( 類 ) 選擇器優點缺點有哪些?

class類選擇器 多類名的使用方式 1

優點

  • 能夠快速為頁面中同類型的標籤統一設置樣式

缺點

  • 無法差異化單獨設置同類型標籤,因為此功能就是只能選擇全部的當前標籤

CSS 的 id 選擇器是什麼?

CSS的id選擇器是什麼

id 選擇器跟 class ( 類 ) 選擇器相似,如果你有想要選擇同標籤,但想單獨選擇其中某一個就可以使用 id 選擇器就能夠解決這個問題囉!但是id選擇器是只能有特定一組的存在。

id 選擇器基本語法用法

id選擇器基本語法用法

假設需要改變頁面中所有 <p> 段落標籤如下這樣使用

#標籤名{
	屬性名稱01: 屬性值01;
	屬性名稱02: 屬性值02;

}

#red {
	color: red;
	font-size: 15px;
	
}

#green {
	color: green;
	font-size: 15px;
	
}

HTML 標籤語言要先進行標記 <p> 段落標籤加入 class 屬性並取名字即可

<ul >

	<li id="red">此文字要改紅色</li>
	<li iid="green">此文字是綠色</li>
	<li>此文字是黑色</li>

</ul>

id 選擇器作用功能

id選擇器作用功能

id 選擇器就是可以把某一大類的相同標籤,其中特別某一個加入 id 並自定義命名進行 CSS 樣式改變,例如改變 <p id=”red”> 段落標籤。

要注意的點有哪些呢?

  • id 選擇器是使用 ” # ” ( 英文井號 ) 進行標記,後面才是緊跟自定義名稱。
  • 自定義命名不要使用系統默認文字名稱,例如 div 或是 span
  • 不要使用數字、中文命名,請使用英文命名
  • 自定義命名太長可以使用減號符號 ( – ) 或是底線符號 ( _ ) 補助閱讀
點我瞭解 小青如何每月多賺5位數台幣

CSS 的 id 選擇器與 class ( 類 ) 選擇器差異是什麼?

CSS的id選擇器與class類選擇器差異是什麼

樣式通常都會使用 class ( 類 ) 來進行樣式的改變,而 id 選擇器是用來描述結構用的因為 id 只能調用一次,別人切勿使用或是取名跟某 id 選擇器一樣名稱,也就是全網頁只有那一個 id 選擇器命名獨一無二的。

CSS 的 id 選擇器與 class ( 類 ) 的區別是什麼?

CSS的id選擇器與class類的區別是什麼
  • class ( 類 ) 選擇器就好比人的名字,一個人可以有多個名字和暱稱可以進行更改,可多人使用
  • id 選擇器就好比人的身分證 ID 全國只有你一人是這個 ID 碼,不可能出現跟你一樣的,不可重複
  • id 選擇器和 class ( 類 ) 選擇器最大區別在於使用次數上
  • class ( 類 ) 選擇器在修改樣式中用的最多
  • id 選擇器一般用於頁面唯一的標籤元素上,經常會和 Javascript 搭配使用

CSS 的通配符選擇器是什麼?

CSS的通配符選擇器是什麼

在 CSS 中通配符選擇器是使用符號 ” * ” ( 英文星號 ),它表示選取頁面中所有元素標籤,也就是不管你使用了什麼 HTML 標籤元素通通會全部選擇起來,你就能夠全部一起更改樣式。

通配符選擇器基本語法

通配符選擇器基本語法

假設需要改變頁面中所有元素標籤如下這樣使用

* {
	屬性名稱01: 屬性值01;
	屬性名稱02: 屬性值02;

}

* {
	color: red;
	font-size: 15px;
	
}

HTML 標籤語言要先進行標記 <p> 段落標籤加入 class 屬性並取名字即可

<ul >

	<li>此文字要改紅色</li>
	<li>此文字是綠色</li>
	<li>此文字是黑色</li>

</ul>
點我瞭解 小青如何每月多賺5位數台幣

通配符選擇器作用功能有哪些?

通配符選擇器作用功能有哪些

通配符選擇器就是可以把全部元素標籤通通進行選擇起來,不需要指定某個元素標籤或是自定義命名就能夠自動進行 CSS 樣式改變,不過通常通配符選擇器都是特殊情況才會使用,下列是通配符選擇器最常用的情況。

* {
	margin: 0;
	padding: 0;
}

  • 重置頁面的 margin
  • 重置頁面的 padding

所有選擇器大總結

所有選擇器大總結

經過一連串的學習CSS是什麼? 我相信你應該能更掌握 CSS 其中的奧妙了吧! 最重要的事 class ( 類 ) 選擇器和 id 選擇器,你知道分別哪個用到的場景嗎? 還有哪一個使用的頻率會比較高呢? CSS 有撰寫風格嗎還是能跑就好? 以上這些問題你能夠輕鬆回答就說明你了解最常使用的CSS選擇器囉! 如果還不會趕緊回到該節練習練習,學習都是需要一些時間的不需要急掌握自己節奏比較重要,我相信你可以的,共勉之。

點我瞭解 小青如何每月多賺5位數台幣

能看到這裡通常只有 1% 的人,很感謝您可以閱讀到這裡(鞠躬)
本篇文章歡迎社群分享,可按分享按鈕,讓更多的人知道此篇文章
如果是引用本篇文章任何段落請附上本篇文章連結即可唷!
嚴禁搬運整篇文章到你個人部落格、寫成新聞稿
這麼做你會被任何搜尋引擎懲罰 Ban 掉
如需合作請右上角服務項目 -> 聯繫我們
by 小青

發表迴響