[分享] 我們該如何想像 HTML/CSS?用生動比喻、滿滿範例帶你入門

我們要怎麼樣去想像 HTML/CSS?

既然人腦「無法用未知去解釋未知」,我們不仿先暫時把 HTML 語法想像成是一個「工廠」,而我們可以利用這個工廠,也就是 HTML 語法,去決定生產特定形狀的零件。這些零件組合起來,就是一我們要的「網頁的結構」

  • 在這座工廠裡,我們需要「標籤(tag)」才能下指示,告訴廠長要生產什麼型號的零件。像是給他 <h1> 的標籤,廠長就知道要生產的是:大標題(Heading 1)。

  • 只指定樣式是不夠的,萬一廠長把工廠裡所有素材都作成特大標題就慘了,對吧?所以我們要講清楚、說明白,明確定義:從哪裡開始作、到何處停止。這也是為什麼 在 HTML 中有「開始標籤(start tag)」「結束標籤(end tag)」

那 CSS 是什麼角色?要區別 HTML 跟 CSS,我們再來想像一下:HTML 工廠很懂生產,但設計能力近乎於零。因此,想要零件漂漂亮亮的話,我們就得向外聘請名為 CSS 的「設計團隊」,讓這個團隊去專門負責「網頁視覺」。也就是,讓 CSS 設計師們去決定「樣貌」,再交給 HTML 工廠,讓工廠拿去套用在零件上。

div 與 span 的不同

「塊級元素」和「行內元素」聽起來還是很抽象,不如我們這樣想:工廠生產出一大堆零件:大大小小的標題、段落、按鈕,接下來要怎麼組裝跟加工?我們需要兩種方式:

<div> </div>:塊級元素。
<span> </span>:行內元素。

假如目標是製造一架機器人(EVA 初號機),當工廠把零件都搞定了,我們接下來就可以把零件整理成幾個大區塊:手臂、腳、身軀、頭,然後各個區塊可能會有一定上色或是拼接方式,就可以針對該區塊一次加工!這就是 <div> </div> 的功用。

既然 <div> </div> 是處理大區塊,自然需要較大的工作空間,也因此帶有「換行特性」。在顯示上會前後多空一行。

那麼,如果我們只想針對一個小細節去作加工,我們要怎麼處理呢?殺雞焉用牛刀,我們不需要用到 <div> </div> ,而且 <div> </div> 後,前後會多一個空行,這樣也未免太突兀了。<span> </span> 恰恰好符合我們的需求,讓我們可以鎖定一個小範圍作調整,而且不會讓排版因為這個調整而亂掉。

class 與 id 的不同

如同開頭提到的:讓 CSS 設計團隊去設計樣式,再交給 HTML 工廠套用。那麼,當同樣的設計樣式要用很多次、用在很多不同地方,最方便的方法把這個樣式建成一個「模子」,未來要用到時,用模子產出就快多了!而這也就是「屬性(class)」的概念。以下圖為例, 我們把名為 .so_green 的 class 交給 HTML 工廠,HTML 會把它套用在區塊跟行內元素上。

注意:我們交給工廠的是一個模子,至於這塊模外觀長什麼模樣,就要仰賴 CSS 團隊的設計了。同樣以下圖為例,CSS 定義了:字要擺中間、綠的背景跟白的字、從字算起留 2px 的空白間距。

我們也可以再把 class 定義得更詳細一點,像是只能給區塊元素(<div> </div>)使用的 class,或是(<span> </span>)專用。

既然有了 class 可以作模,那我們為什麼還需要 id?

網路上搜尋到這麼一段解釋:

「相信應該有不少人曾經重覆使用 ID 來套版吧!畫面一樣套的美美的,哪會有什麼問題,對,若只單單拿來套版的話,不會因為重復使用 ID 而使得此樣式無法使用的狀況,但今天若使用 Javascript 或 ASP.NET 時,當 ID 重覆時,程式則無法正確的判斷出,誰才是正身。」

如果今天我們要請不只一個設計團隊,我們還想另請 Javascript 呢?假設這兩個團隊設計不同的東西,但在命名上偷懶,不約而同取名為「樣式 A」,那工廠是不是就會傻傻分不清楚了?所以我們會需要 id,讓樣式有唯一性。

p 與 br 的不同

換行、連續換行、連續空格,在 HTML 中都會被視為是「一個空格」。如下圖:

不管我們空了幾行或是幾個空格,因為沒有標籤,工廠通通當作一個空格處理。因此,當我們要幫文字排版,斷行、空一行、段落等等,我們會需要專門的標籤,也就是:

<p> </p>:定義段落
<br/>:插入換行

如何使用 table 排版

當有若干筆資料要排版成「表格(table)」,以下圖的表格為例,我們可以照著以下步驟作:

  1. <table> </table> 標籤定義「表格」。
  2. 依序插入表格的第 1、2、3 行。HTML 中,「行」是由 <tr> </tr> 定義("tr" 為 "table row" 的縮寫)。
  3. 每一行由若干筆「資料」組成,一筆資料為一「格」,所以我們要在每一行(也就是 <tr></tr> 之間)依序放入資料。每一格資料使用<td> </td> 定義("td" 表示 "table data")。

Comments

comments powered by Disqus