阿嬤都看得懂的替 HTML 標籤穿上 CSS 樣式

今天我們要來介紹排版的核心標籤－－div。

div 標籤應該是最常用、也最重要的標籤了，畢竟區塊這個元素很抽象，所以可以放入任何我們想要打包起來的元素。這張圖片想和這段說明文字固定放在一起？div 打包。剛剛這個圖片搭配圖說的文字想和標題固定放在一起？div 打包。

既然 div 這麼重要，就讓我們開始寫第一個 div 標籤吧！

<div></div>

很棒！這樣應該就會生出一個區塊了對吧？應該會是個胖娃娃長方形吧！
讓我們同樣存成 .html 檔點開來看看：

完全沒有畫面！完全沒有畫面！完全沒有畫面！

為什麼呢？道理很簡單，因為我們還沒跟瀏覽器說這個區塊的高度 (height)。就算指定了高度，也還沒指定背景顏色 (background-color)，所以也還是看不到喔！那麼，我們要怎麼指定高度和顏色這些呢？

還記得昨天我們刪除了蘋果網頁的 CSS，等同於剝光了美人的羽衣霓裳嗎？沒錯，這些樣式都是 CSS 決定的。所以我們要開始寫第一段 CSS，替我們的網頁編織第一件衣服囉！

可能會有點意外，不過我們現在還不需要開新的檔案。就好比我們無法想像滷肉飯的溫熱獨立於滷肉飯而存在，我們也無法想像 HTML 標籤的樣式獨立於 HTML 標籤而存在。因此，CSS 是可以直接寫在 HTML 標籤中的喔！那麼，會寫在哪呢？當然不會寫在左右角號之外，否則就會被當作一般文字囉。另外，並非每個 HTML 標籤都成對，因此，CSS 自然就是寫在開始標籤裡面囉。

也就是說，

• CSS 樣式是寫在 HTML 開始標籤的角號之內。
  由於是樣式，所以我們會
• 使用 style 這個英文詞彙來告訴瀏覽器，接下來要告訴瀏覽器這個元素的樣式囉！
  不過，在那之前，我們必須先想想，一個 HTML 標籤會有很多不同面向的樣式－－例如上面提到的，一個區塊可能有高度啊、背景顏色等等樣式。
• 這些面向我們稱作「屬性」(property)，而這些屬性會有我們給定的「值」(value)－－例如我們會將某個區塊元素給定高度 20%，或者給定背景顏色是粉紅色，這個 20% 和粉紅色，就是高度與背景顏色這兩個屬性的值。如果某個屬性有多個值，這些值之間用空白隔開。我們用冒號 ":" 來連結屬性與值，看起來會像這樣：

height: 20%

• 這些不同屬性與值間，會使用半型分號 ";" 隔開。
• 所有的屬性會用一對雙引號包裹起來，然後用等號 "=" 與前面的 style 連接。
  整個寫法看起來像是這樣：

<div style="width: 80%; height: 20%; background-color: pink"></div>

終於，我們看見可愛的粉紅色長方形區塊囉！

這個直接寫在 HTML 標籤中的 CSS 樣式寫法，我們稱作「行內樣式」(inline styles)。

CSS 提供的樣式屬性千變萬化、千奇百怪，而且針對不同類型的標籤，能夠使用的樣式屬性也不同。我們在明天 CSS 的介紹中，會介紹最常用、最核心的幾種共通樣式。期待嗎？那就明天見囉！

想一想：

1. 我們在給定寬度與高度時，使用的是百分比符號 %，可是，要有比例，就要有個對照的對象。我們不可能只是說「我要 2% 當獎金」，而必須說「我要我個人當月實收業績的 2% 當獎金」，或是「我要整間公司當月實收業績的 2% 當獎金」。那這裡的 %，是對照於什麼東西的比例呢？使用比例來給定寬度與高度，又有什麼好處或壞處呢？
2. 如果我們想決定絕對的寬度或高度，而不是相對比例的寬度或高度，又應該怎麼辦呢？
3. 指定背景顏色為粉紅色時，寫 background-color: pink 是很合理，畢竟粉紅色的英文詞彙就是 "pink"，但是全世界顏色這麼多，我們可能用文字把這些顏色給對應完嗎？假使不能，那我們該怎麼辦呢？