iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Modern Web

你阿嬤成為網頁前端工程師的第一步系列 第 13

[Day 13] 阿嬤都看得懂的基礎 CSS 選擇器

阿嬤都看得懂的基礎 CSS 選擇器

小孩子才做選擇,我全都要! -民明書房《我那被限制住的想像》

昨天我們把重複的 CSS 樣式收整在一起,然後再把所有想要套用這個樣式的標籤,都指定成 class = "gavagai"。

這樣是看起來清爽多了,不過,我們該怎麼告訴瀏覽器,這些樣式都屬於叫作 gavagai 的這個分類呢?熟悉集合論的阿嬤會知道,我們使用花括弧 {} 來把一堆東西打包起來,也可以直接寫出這堆東西都具備什麼性質。例如,我們可以定義人類這個分類:

人類 = {這樣的東西 | 這個東西有兩隻腳 而且 這個東西沒有長羽毛}

不過,在 CSS 當中的寫法比較簡單,我們在花括弧的前面加上這堆東西的類別名稱 (class name),再在類別名稱前面加上半型句點 ".",然後在花括弧內寫上屬性,就可以囉!以昨天的 4 個區塊為例,寫起來會看起來像這樣:

	.gavagai{
		margin:2px;
		height:100px; 
		width:100px; 
		background-color:red; 
		color:white; 
		text-align:center; 
		line-height:100px;
	}

為什麼我們需要在類別名稱前面加上半型句號 "." 呢?因為 CSS 樣式不只有類別 class 這種選擇要把樣式加到哪些標籤的方式。想想看,除了類別以外,我們還有哪些把標籤分堆的方式呢?沒錯,我們原本就有 p 標籤啊、h1 標籤啊、 span 標籤、div 標籤。因此,我們還有種把 CSS 樣式指定到一堆標籤的方式,也就是:

  • 標籤名稱 (tag name)。使用標籤名稱時,前面不用加上任何符號,直接使用就可以了。例如,當我們想把所有 span 標籤都指定文字為紅色的樣式時,就可以這樣寫:
	span{
		color: red;
	}

這時候,我們就會發現所有被 span 標籤包起來的文字,都會變成紅色囉!

由於這個放在花括弧前的分堆名稱,無論是類別名稱,或者標籤名稱,都可以將花括弧中的 CSS 樣式應該指定給哪堆 HTML 標籤,給選擇出來,因此,這個分堆的名稱格式,就稱作「CSS 選擇器」(CSS selector),那麼,我們還有哪些常見好用的 CSS 選擇器呢?

或許你會很意外,我們還可以指定標籤的

  • id喔!沒錯,我們可以給予 HTML 標籤身份證字號!就像人類的身分證字號那樣,給予 HTML 標籤的 id 應該要是獨一無二的。不過,即使我們發給 2 個以上的標籤同樣的 id,其實瀏覽器也不會爆炸,只是到時候自己會很不方便而已。使用 id 給定樣式時,我們的 CSS 選擇器格式,是在名稱前面加上井字號 "#"。使用 id 給定的 html 和 css 分別是這樣寫:
	<div id="Logos"></div>
	#Logos{
		height:100px;
		width:100px;
		baclground-color:gold;
	}

最後,假使我們想要無差別地指定所有標籤,該怎麼辦呢?還好我們有

  • 萬用選擇器 (universal selector)。既然是無差別地指定所有標籤,當然也就不會有任何名稱,而是使用星號 "*" 作為我們的萬用字元。萬用選擇器寫起來會是像這樣的:
*{
	background-color: purple
}

這樣,就會發現所有元件的背景顏色,都變成紫色囉!

不過,這些抽出來的 CSS 樣式應該放在哪裡呢?當然不是放在指定那個類別的 HTML 標籤中,因為我們就是不想重複寫行內樣式,才把 CSS 樣式另外用分類的方式拉出來寫吧!可是,我們也不太可能把 CSS 樣式寫在 HTML 標籤外,不然可能會被瀏覽器當成一般文字。那到底該怎麼辦呢?

我們的策略,是另外用一種特殊的 HTML 標籤來處理。這些特殊的 HTML 標籤本身不會被渲染出來,而是告訴瀏覽器怎麼渲染這些元件。至於我們應該使用哪個標籤,就留待明天介紹囉!


想一想:

  1. CSS 選擇器的功能是將標籤分堆,這對於日後我們學習使用 JavaScript 操縱網頁元件的時候,會有什麼幫助嗎?
  2. 各位阿嬤覺得上述這些基礎的 CSS 選擇器夠用嗎?還是會想要其他哪些選擇器,幫助我們更靈活地將標籤分堆呢?

上一篇
[Day 12] 阿嬤都看得懂的 CSS 收整與 DRY 策略
下一篇
[Day 14] 阿嬤都看得懂的 style 標籤怎麼用
系列文
你阿嬤成為網頁前端工程師的第一步30

尚未有邦友留言

立即登入留言