阿嬤都看得懂的 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 樣式以後，再用行內樣式指定了區塊二的顏色，結果是區塊二的渲染方式，是遵照了行內樣式。這表示瀏覽器在面對重複的指定樣式時，好像有個預先決定好的先後順序。在這個案例中，這個先後順序是什麼呢？