iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
Modern Web

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

[Day 14] 阿嬤都看得懂的 style 標籤怎麼用

阿嬤都看得懂的 style 標籤怎麼用

昨天我們介紹了 CSS 選擇器,所以終於知道該怎麼把獨立收整出來的 CSS 樣式,藉由 CSS 選擇器,指定到特定一堆的標籤了。不過,我們接下來就面臨了這個問題:這樣我要把 CSS 樣式放在哪邊呢?

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

我們需要一些特殊的 HTML 標籤,來告訴瀏覽器,這些標籤包夾範圍內的文字不是一般文字,不用渲染在畫面中。在這裡,我們需要的 HTML 標籤是 style,不太意外,對吧?因此,我們會這樣寫:

<style>
	.gavagai{
		display:inline-block;
		margin:2px;
		height:100px; 
		width:100px; 
		background-color:red; 
		color:white; 
		text-align:center; 
		line-height:100px;
	}
</style>
<div>
	<div class="gavagai">區塊一</div>
	<div class="gavagai">區塊二</div>
	<div class="gavagai">區塊三</div>
	<div class="gavagai">區塊四</div>
</div>

讓我們把這個檔案存成 gavagai.html ,再開啟它,我們就得到 4 個紅色的區塊囉!

等等,你會問,可是我想把區塊二變成紫羅蘭色啊!也沒關係,我們剛剛說,只要說區塊二是個紫羅蘭色的 gavagai 就可以了。因此,讓我們把區塊二的 HTML 標籤改成

	<div class="gavagai" style="background-color:violet">區塊二</div>

就能夠讓區塊二變色了!

這邊必須提醒大家,想修改 .html 檔,不能使用點擊兩下的方式喔,這樣會直接把檔案點開。我們必須對著檔案按右鍵後,點選開啟檔案,再用記事本開啟。

看起來很棒,不過,讓我們重新看看這整個檔案的寫法。這個思路,完全是按照上面提到的故事,我先告訴你 gavagai 指什麼,然後再告訴你這邊有個東西是 gavagai,所以你會知道這個東西長怎樣。換句話說,我們會先用 style 標籤告訴瀏覽器某個分類的樣式,才使用其他 HTML 標籤,告訴瀏覽器哪些元件屬於這個分類。

那麼,如果我們把 style 標籤移到後面,先告訴瀏覽器有個元件,它的分類是 gavagai,在後面才告訴瀏覽器, gavagai 分類裡有哪些屬性,這樣可以嗎?也就是說,我們現在把檔案改成這樣,讓 style 標籤放在最後:

<div>
	<div class="gavagai">區塊一</div>
	<div class="gavagai" style="background-color:violet">區塊二</div>
	<div class="gavagai">區塊三</div>
	<div class="gavagai">區塊四</div>
</div>
<style>
	.gavagai{
		display:inline-block;
		margin:2px;
		height:100px; 
		width:100px; 
		background-color:red; 
		color:white; 
		text-align:center; 
		line-height:100px;
	}
</style>

瀏覽器是個很聰明的東西,所以可以。當瀏覽器讀到某個 HTML 標籤,裡面的分類它沒被事先告知,瀏覽器會很困惑地一直往下讀,直到讀到某個 style 標籤終於幫它解惑,原來這個分類被指定了這些樣式啊!再很開心地跑回前面,把剛剛那個不知道在幹嘛的元件畫出來。因此,瀏覽器不會爆炸,但是在這一來一回的動作中,就會拖慢瀏覽器畫出網頁的速度。所以,我們還是乖乖把 style 標籤寫在前面比較好喔!

另外,我們可以設想,如果在一個檔案中,style 樣式東一個西一個,一下 style 一下其他標籤,當我們要回去找某個分類被指定哪些樣式的時候,就會很想死!我們可能滾輪滾上滾下,最後才確定,啊,原來這分類我寫在這!

工程師都、很、懶!千萬別這樣做!比較好的方式,是把所有樣式都集中在一起,然後寫在整個檔案的最前面。這樣不但讓瀏覽器在渲染的時候,可以先知道哪些分類要用哪些樣式,也讓作為人類的工程師,容易查找和修改這些樣式。

可是,把整個樣式都寫在一起,放在檔案最前面是很好,但是我在對照某個標籤屬於某個分類,因此是某個樣式的時候,也要滾上滾下,這樣也很累耶!那我們應該怎麼辦呢?

我們會將整個 style 標籤抽出來,變成一個 .css 檔案喔!咦咦,這一下子變得太高級了吧?我還沒有心理準備啊太太!沒關係,我們就留待明天,來寫第一支 .css 檔案囉!


想一想:我們在使用 style 標籤指定 4 個區塊的 CSS 樣式以後,再用行內樣式指定了區塊二的顏色,結果是區塊二的渲染方式,是遵照了行內樣式。這表示瀏覽器在面對重複的指定樣式時,好像有個預先決定好的先後順序。在這個案例中,這個先後順序是什麼呢?


上一篇
[Day 13] 阿嬤都看得懂的基礎 CSS 選擇器
下一篇
[Day 15] 阿嬤都看得懂的開始寫第一支 .css 檔案囉!
系列文
你阿嬤成為網頁前端工程師的第一步30

尚未有邦友留言

立即登入留言