Loading...

網頁設計,仰賴 HTML 和 CSS 兩種不同的語言。HTML 處理內容,CSS 則定義內容呈現,各司其職。而在現代網頁設計工作、如一個大型開發專案中,我們通常也會看到有工程師專注處理網站內容與結構、設計師則處理網站的設計與呈現。本文將協助你開始使用 CSS、理解 CSS 怎麼連結 HTML 文件、認識 CSS 語法規則;也瞭解怎麼開始練基本功,踏出網頁設計的第一步。

系統學習 HTML/CSS/JavaScript,3 分鐘小測驗,找到你的學習起點

CSS 和 HTML 分工前

CSS 問世前(-1996),網頁開發者其實偏好用 HTML 標籤的屬性來指派樣式。例如:

<p><font size="+3" color="red"><b>一段文字</b></font></p>

這樣做衍生不少問題,例如讓網頁內容包覆過多的標籤、程式碼變得不好閱讀。這對人或搜尋引擎都不友善,但其中最大的影響,是讓網站維護變得非常困難。

試想想以下這個例子:我們的網頁裡有 10 個 <h4> 大小的副標題。</h4>

<h4><font size="+3" color="blue"><b>副標題一</b></font></h4>…<h4>

<font size="+3" color="blue"><b>副標題二</b></font></h4>………<h4><font size="+3" color="blue"><b>副標題十</b></font></h4>

但若我們有天覺得副標題用藍色(blue)不夠搶眼,想改成橘色,那我們就要把那 10 個副標題一個個找出來修改。這種反覆的修改工作,容易出錯,也會嚴重影響到工程師的生活水平。

CSS 和 HTML 的分工

CSS 是專為定義網頁版面設計(layout)而發明,透過 CSS,我們能指定文件中各項 HTML 元件的視覺樣式。CSS 全名是 Cascading Style Sheets,階層樣式表。階層式 (cascading)指的是,我們可在同一個元件上套用不同樣式,而樣式與樣式間則存在相對的階層關係。

由於 CSS 專注在外貌的設定,使得 HTML 能專注於文件結構,最能讓網頁原始碼文件乾淨俐落。CSS 和 HTML 的分工,是現代網路開發流行的設計原則(Separation of presentation and content)之一。

你可以想像一下 HTML、CSS 和瀏覽器之間的對話。HTML 會說:「這是一個標題。」而 CSS 會和瀏覽器則會補充:「這個標題很大,請放在正中間、請使用顯眼的黑色。」

接下來,我們一起來瞭解,如何用 CSS 輕鬆的把所有的副標都改好。

認識HTML、CSS 是什麼,快速了解網頁設計入門

CSS 語法規則

以這段 CSS 為例:

h1 {
 color: #ff6600;
}

這段是一個 CSS 宣告的長相:

  • 選擇器 (selector) 定義你的樣式對誰有作用,它對應的可能是 HTML 標籤名稱或者是 class 和 id 屬性,我們在後面會再介紹選擇器。
  • { }:大括號包圍了一個宣告區域,任何寫在這個區域裡的設定,會對文件裡所有的 <h1> 標籤起作用。</h1>
  • 屬性與值:在圖例中,我們宣告選擇器,也就是 <h1> 的「文字顏色」(color) 屬性的值是 #ff6600。請注意 CSS 是用冒號 ( : ) 而非等號 (=) 來設定。</h1>
  • 每條宣告用分號 ( ; ) 隔開

小插曲:#ff6600 是一種顏色編碼,就是程式設計師向電腦表達不同顏色的方法之一。以下是一些顏色的範例。完整的顏色編碼可以參考這個網站

Source:https://www.toodoo.com/db/color.html

套用方式

那這段 CSS 宣告要放在哪裡呢?

最好的方式,是獨立在另一個叫「style.css」的檔案裡,再將檔案引入 HTML 文件,我們建議你總是使用這種方式來處理你的樣式表,但在這裡我們還是和你做完整的介紹:

內嵌於 style 屬性

<p style="color: red; font-size: 10pt;">一段文字</p>

這種宣告方式只會影響到這一個標籤,而不是所有的 <p>。這是一個很簡便的作法,但 CSS 宣告混合在 HTML 結構中,無法進行管理。你可能會在寫 blog 時偶爾不得不這麼做(因為你無法在別人家的平台上開新檔案)。</p>

在 HTML 內嵌 STYLE 標籤,其效果比較可以從下圖看得出來,左邊是用 Sublime 編輯器在 HTML 裡先寫好,文字是紅色與文字 30pt 大。

標頭裡的 style 標籤

<head></head>
<title></title>CSS 宣告
<style></style>
p { color: black; font-size: 10pt;}

這樣做會讓你影響到這份 HTML 文件裡所有的 <p>,如果你的網站真的只有一張,這不失為一個快速的方法。然而,這樣做同樣有讓語法變得冗長,以及在檔案變多時維護困難的問題。當前的趨勢是將 HTML 和 CSS 分開維護,因此,請你習慣建立外部檔案來管理你的 CSS 樣式表。</p>

外部檔案 (建議方法)

透過這個作法,你可以將整個網站的樣式,統合到 style.css 這份文件裡。然後在所有的 HTML 文件標頭裡加上 <link rel="stylesheet" href="style.css">。再次強調,這種作法是業界的當前趨勢。

讓我們來認識一下引入外部檔案的 HTML 標籤:

  • <link> 是一種「後設元素」(meta element)只能放在標頭裡,他可以載入外部檔案。所以瀏覽器讀取到這一行時,就會自動載入 CSS 文件的全部內容。
  • rel='stylesheet' 告訴文件載入的資源是樣式表,所以瀏覽器就知道要用讀 CSS 的方式去處理載入的內容。
  • href='style.css' href 屬性和 <a> 標籤時的用法一樣,描述路徑,讓瀏覽器找得到檔案。</a>

註解 (Comment)

要小心 CSS 的註解方式跟 HTML 不一樣,CSS 的註解是用 /* 與 */ 來包圍:

body {
 color: #FF6600;    /* 這是 Alpha Camp 最喜歡的橘紅色 */
}

多重選擇

你可以連結宣告多個 CSS 設定:

h1 {
 font-family: "Helvetica", "Arial", sans-serif;  /* 指定字型 */
 color: green;
}

h2 {
 font-family: "Helvetica", "Arial", sans-serif;
 color: blue;
}

font-family 指定字型的意思,這邊設定的字型要以大多瀏覽器都相容支援的字型為主

但在這裡,有沒有發現字型 (font) 那一行重覆在 h1 和 h2 出現?也就是說,<h1> 與 <h2> 的字型其實是一樣,只有文字顏色 (font color) 不一樣。如果你總是這樣寫,當我們需要改變 <h1> 與 <h2> 的字型是,很容易就會改了這邊、漏了那邊。所以,你需要學習做整理和合併:</h2></h1></h2></h1>

h1, h2 {
 font-family: "Helvetica", "Arial", sans-serif;
}

h1 {
 color: green;
}

h2 {
 color: blue;
}

如此一來你就能統一管理 h1 和 h2 的字型了!

零基礎有效實作學會HTML和CSS,最適合新手的程式設計入門

CSS 基本功:理解瀏覽器預設樣式

很多人會覺得學 CSS 就是要寫出很多厲害的樣式。但其實,每家瀏覽器都有提供的預設樣式,所以也不用太過擔心。只是,基礎簡樸的網頁早已不能滿足現在人的需求,所以我們會需要漸漸開發更多的 CSS 屬性和撰寫技巧。

我們寫的 HTML/CSS 是在瀏覽器裡,在你撰寫任何樣式表之前,Blink、 Gecko、 WebKit 等各大瀏覽器引擎都有在 W3C 定義的標準 之上,提供預設樣式 ( 下圖截取自 Browser Default Styles 網站)。

https://uploads-ssl.webflow.com/60d29cc33f302e8be91cf0e2/619c4d604fa60c946fb0d20e_ExportedContentImage_00.png

故在鑽研更多切版技巧前,一定要先理解瀏覽器的預設樣式。例如,認識各 HTML 元素在瀏覽器裡的預設行為,瞭解:div 會佔掉一整列、 span 乖乖包覆內容、ul 前面會有一個黑圓點等等。這才能更加理解,我們正學習的屬性是在修改什麼、前端工程師為什麼需要面對跨瀏覽器兼容性問題。

CSS 基本功:「由大到小,由外而內」的架構

「看一招、學一招」是 CSS 能力養成中普遍的路徑,然而這也會讓部分學習者感受到學習似乎有些零碎、鬆散或容易迷失在玲瑯滿目的屬性裡。以下歸納出 CSS 的學習與實作架構。

https://uploads-ssl.webflow.com/60d29cc33f302e8be91cf0e2/619c4d6153bd8f8631adf0df_ExportedContentImage_01.png

此框架的核心理念是將頁面「由大而小、由外而內」地降維拆分,並基本上將頁面拆分成四個層級:

  • 排版層級
  • 區塊層級
  • 內容層級
  • 動畫層級

雖然動畫層級的特效往往令人更目眩神迷,不過紮實的 CSS 學習應從基本的元素排版定位開始掌握。這四個層級基本上可以涵蓋一個頁面樣式所需要的所有 CSS 屬性類型。

總結

CSS 看似容易入手,我們好像可以在第一天就學完所有東西了。但這就是 CSS 易學難精的特質。CSS 非常需要學習者一次一次地刻意練習、累積經驗,才能撥雲見日,摸清楚這門知識。希望這篇文章提供的 CSS 學習方法與架構,能幫助你更有效地累積知識,建立基礎與系統化的概念,並在這條修煉之路上,走得更遠、更穩健。

更多技術學習資源
前端 JavaScript | HTML /CSS| Bootstrap | RWD | DOM | API | AJAX | Postman | jQuery
後端 HTTP / HTTPS | Node.js | MongoDB | Git | SQL / NoSQL | Docker
其他 VSCode | Web App | Leetcode