iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Modern Web

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

[Day 8] 阿嬤都看得懂的替 HTML 標籤穿上行內樣式

阿嬤都看得懂的替 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",但是全世界顏色這麼多,我們可能用文字把這些顏色給對應完嗎?假使不能,那我們該怎麼辦呢?

上一篇
[Day 7] 阿嬤都看得懂的文字標籤與語意化標籤
下一篇
[Day 9]阿嬤都看得懂的基礎 CSS 樣式-文字篇與標籤換行 bug
系列文
你阿嬤成為網頁前端工程師的第一步30

尚未有邦友留言

立即登入留言