iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 2
9
Modern Web

金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎系列 第 2

Tag 元素選取器 - 網頁中最常用到的基本設定選取器 - 金魚都能懂了你還怕學不會嗎

本系列文章已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
讓我們好好善用CSS選取器吧


Tag 元素選取器是CSS選取器中最基本的選取器之一,先離題解釋一下 Tag 是什麼? 白話文就是 HTML 標籤統稱啦,一般來說我們在溝通時為了文字的精準度,有時候會捨棄中文來溝通,這是因為不同的英文是會可能出現相同的中文翻譯的,像是同樣翻譯成標籤的英文在 HTML中就有 Tag 與 Label 這兩個英文單字了,但這兩個單字卻有很明顯的意義落差,Tag 指的是統稱所有 HTML 標籤,而 Label 則僅是 HTML 中的一個語意標籤罷了,所以為了避免這樣的錯誤發生,所以我們這邊會使用 Tag 或標籤來稱呼這個選取器,請大家不要想成了表單的 label 標籤,講了一堆這樣還是不懂嗎?那...跳過!直接看下面的例子應該更簡單(那你講那麼多幹嘛?)。

CSS標籤選取器的設定方式

回到我們的 CSS 選取器來談,Tag 選取器的使用方式很單純,基本上就是你想針對哪個 Tag 設定就直接把它的 Tag name 寫出來就好了,就像下面這樣

h1{
  color: red;
}
p{
  color: gray;
}

在上面區塊中,Amos 針對了網頁的主標題 h1 標籤設定了文字色彩為紅色,對 p 段落標籤內的文字則設定了灰色。這表示頁面中 所有的 h1 跟 p 都會變色(怎麼這段描述看起來很像廢話),應用這樣的特性我們在網頁設計的實務中,經常會在 CSS reset 時利用這種選取器來將網頁瀏覽器中的差異設定到一致的外觀,此外也會在一般網站的內容頁內(像是新聞稿這種詳細內容頁面),利用此選取器做區域性的標籤設定,避免使用者因為不會處理網頁原始碼而導致畫面出現預期外的視覺狀態。

實際範例

上面有提到的 CSS reset 就是用這類選取器設定的,我們可以看看以下這一段出自 Eric A. and Kathryn S. Meyer. 網站的 CSS reset 原始碼

body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

在上面的例子中也可以看到另外一種選取器的撰寫方式,就是使用逗號做選取器的區隔,這部分 Amos 之後會再另外講解。

金魚都能懂的教學系列

鐵人雙主題挑戰中,歡迎訂閱一波

金魚都能懂的這個網頁畫面怎麼切

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
/images/emoticon/emoticon12.gif


上一篇
CSS 選取器是什麼?怎麼用?他能做些什麼事?
下一篇
CSS class 選取器 - 切版與前端框架最常使用的CSS選取器 - 金魚都能懂了你還怕學不會嗎
系列文
金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎30

1 則留言

0
thankuever
iT邦新手 5 級 ‧ 2021-01-28 20:40:30

不太懂這句話的意思

"一般網站的內容頁內(像是新聞稿這種詳細內容頁面),利用此選取器做區域性的標籤設定,避免使用者因為不會處理網頁原始碼而導致畫面出現預期外的視覺狀態。"

為什麼使用者會處理網頁原始碼?
利用Tag選取器做區域性的標籤設定是為何意?如何做?文章內容不諸多是p標籤?為什麼不用類別選取器或id來區隔?例如.header .footer
Tag另我感覺是一個大範圍的設定,不好區隔.

謝謝!

CSScoke iT邦新手 4 級 ‧ 2021-01-29 16:07:26 檢舉

舉個例子,雜誌社的文章,不會是同一個人去編輯網路上面的文章,所以通常會設計一個網站後台來讓眾多編輯可以去上稿,此時這些編輯不見得都很懂網頁,只會寫些固定的編輯方式,所以你也無法確定他們會很正確的在標題會內文上面套用正確的CSS CLASS

基本上開發方式很多不同的狀況跟情境跟使用者,所以其實對我來說,選取器的使用會看狀況,不會是永遠死板的做法,而有些情境還沒遇到時,其實也不容易體會。

文章內容不見得只有p標籤,如果引用別人的文章,你可能會用到 blockquote,如果是區段,你可能會用到 span ,若是特定區域,可能會用到 div ,如果是引用來源,可能會用到 cite,若是要區分章節可能會用到 section,HTML的世界對內文不會只有p標籤可以用喔

對於網頁的世界,有興趣的話可以看下面這幾個教學影片了解看看
金魚都能懂的網頁入門(HTML、CSS、Bootstrap、jQoery)
https://www.youtube.com/playlist?list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre

金魚都能懂的HTML教學1
https://youtu.be/uhLg6nVVTzY
金魚都能懂的HTML教學2
https://youtu.be/uFXweZepi1o
金魚都能懂的HTML教學3
https://youtu.be/AlLwsrTOAgU

我要留言

立即登入留言