Loading...

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

HTML 和 CSS 的分工

HTML 和 CSS 是兩種不同的語言,HTML 處理內容,而 CSS 定義了內容的呈現,也可以說是「網頁的設計」,兩者的分工是現代網路開發流行的設計原則 (design principle) 之一。英文稱之為「Separation of presentation and content」。

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

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

這樣的作為衍生不少問題,例如讓網頁內容包覆過多的標籤,讓程式碼變得不好閱讀——對人與搜尋引擎都是。其中最重要的,是讓網站維護變得非常困難。試想想以下這個例子:我們的網頁裡有十個 <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) 不夠搶眼,要改成橘色,那我們就的把那十個副標題一個一個找出來修改。這種反覆的修改工作,會容易發生打錯字這種人為錯誤,更嚴重影響到工程師的生活水平。

在大型專案裡,一般有專屬的設計師 (designer) 去設計網站的呈現,而工程師會專注在內容與結構。所以「內容與呈現的分工」可以讓設計師與工程師的分工跟清楚,不用擔心干擾到對方。

接下來我們會講解如何用 CSS 來輕鬆的把所有副標都改好。

CSS 的全名是 Cascading Style Sheets,譯為「階層式樣式表」,他專注在外貌的設定上,讓 HTML 專注於文件的結構,因此讓網頁原始碼回歸成乾淨俐落的文件。

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


本文的目標是協助你開始使用 CSS,並理解 CSS 怎麼和 HTML 文件連結。

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

CSS 語法規則

以這段 CSS 為例:

h1 {
 color: #ff6600;
}

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


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

小插曲:#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 時偶爾不得不這麼做(因為你無法在別人家的平台上開新檔案)。

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


標頭裡的 style 標籤

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

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

外部檔案 (建議方法)

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


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

  • <link> 是一種「後設元素」(meta element)只能放在標頭裡,他可以載入外部檔案。所以瀏覽器讀取到這一行時,就會自動載入 CSS 文件的全部內容。
  • rel='stylesheet' 告訴文件載入的資源是樣式表,所以瀏覽器就知道要用讀 CSS 的方式去處理載入的內容。
  • href='style.css' href 屬性和 <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> 的字型是,很容易就會改了這邊、漏了那邊。所以,你需要學習做整理和合併:

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

h1 {
 color: green;
}

h2 {
 color: blue;
}

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

認識 box 及其排列方式

你已經有了 HTML 和 CSS 的基礎,隨著未來的練習,你很快就會熟悉語法。接下來,為了能讓你能真正應用 HTML 與 CSS 進行版面配置 (layout),你需要學會「盒子模型」(box model) 的概念,以及學會利用 CSS 去改變「盒子」的各種屬性,如此一來,你能夠大幅提升你對網頁元素的操控能力。

每個網頁元素都是一個「盒子」

Box model,直譯是「盒子」,更多時候稱為「容器」。在接下來的內容中,當我們使用 box model 的概念時,我們會視情況用「盒子」或「容器」來稱呼。

不管肉眼看起來是什麼樣子,HTML 宣告出來的網頁元素都是一個矩形的「盒子」。下圖是 ALPHA Camp 新加坡官網的課程介紹,我們試著用色塊和虛線把「盒子」描繪出來:


以下和你說明這張圖的標示:

  • 做為主要內容的圖示、標題、文字簡介,以淺藍底色的「盒子」標示。
  • 三個淺藍色盒子,又被放進一個由黃色虛線標示的「盒子」裡。
  • 三個黃色虛線的容器,又被放到一個綠色虛線的「盒子」裡。

網頁的組成,其實就是一個又一個「盒子」的堆疊,只要你把內容用同一個「盒子」封裝起來,你就可以利用 CSS 去選擇一整個容器,一口氣改變整個盒子的樣式、定位或排列方式,因而呈現千萬變化的版面配置。

用 div 和 span 來宣告「容器」

到目前為止,你用到的 HTML 都會有預設樣式,例如<h1>已經帶有字體大小的設定、<a>標籤已經帶有字體顏色與底線,但如果我不想要改變任何樣式,我只是想把網頁內容打造成一個 box,要怎麼做呢?

你需要一個「容器」(container),這個容器能打包內容,方便你加上 CSS 設定,這就是<div>和<span>的功能。

div

例如下方網頁,很明顯有 3 個內容區塊:

你可能就會用<div>來宣告出一塊區域,並且使用 id 或 class 來為每個<div>命名:

<div id="about">I am Myra Chen</div>

<div id="my-work">This is my works</div>

<div id="contact-me">Contact me</div>

關於 id 和 class 的作用,在下一節會繼續介紹,目前請你單純當成識別用的名字來理解。

把內容一口氣包起來,你就可以針對單獨的<div>去做定位、邊界、對齊等排版調整,在下一單元【操作盒子的屬性】,你會開始學到相關的操作語法。

span

另一些時候,你只是想改變很局部的樣式,例如:

<p>我想要對「<span>被 span 標籤包圍的文字</span>」追加樣式</p>

這種情況很常在修改 blog 文章時用到(因為去找 Blog 平台的 CSS 文件很麻煩),你有可能會使用內嵌 style 屬性的方式,直接把樣式寫在<span>標籤裡,例如:

<p>我想要對「<span style="color: red">被 span 標籤包圍的文字</span>」追加樣式</p>

盒子的排列方式:inline v.s. block

網頁元素排列在一起,視覺上形成一張完成的網頁,而排列的方式有「行內」(inline) 和「區塊」(block) 兩種。

現在讓我們來實際操作看看,請打開你的 Sublime 編輯器,宣告一個新文件 boxing.html,輸入以下 HTML 語法:


為了方便你觀察 HTML 和 CSS 的互動,我們將 CSS 寫在 <head> 的 <style> 標籤裡。

請你觀察一下我們在 <body> 裡宣告的 HTML 元素們,其中 <h1> 和 <p> 是 block 的排列方式,而 <em> 和 <strong> 則是行內元素。如果你用瀏覽器打開,那就更加明顯了。


background-color 屬性填滿了 border 以內的盒子空間,讓你可以更清楚看見網頁的佈局。現在你能否區分 block 和 inline 的重大差異?

block 盒子特性

  • Block 盒子佔滿一整個橫列,也就是說 block 盒子的寬度和瀏覽器視窗一樣寬。
  • Block 盒子後面的元素,將另起新的一行。
  • Block 盒子的高度預設和內容一樣,如果你把視窗拉小,由於 <h1> 的內容被擠到下一行,盒子的高度也隨之調整。
  • Block 盒子的高度和寬度都可以用 CSS 控制。

Inline 盒子特性

  • Inline 盒子的尺寸取決於內容,不可隨意改變。
  • Inline 盒子緊鄰前一個物件,不會另起新行。


Block 與 Inline 的差別

兩者的差異我們可以透過下面的動畫來了解。下面網頁的文字原本預設是display:block ,也就是文字都會各佔據一行。透過開發者工具 ( Developer Tools ),修改css樣式,插入display:inline 後,可以看到網頁的文字,通通往上跑擠在一起了。這就是兩者的差別。




常見的 block 元素:<h1>, <p>, <div>

常見的 inline 元素:<span>, <em>, <strong>, <img>, <a>

改變盒子的 display 屬性

雖然每個元素都有他預設的排列方式,但你可以透過 CSS 重新指定。

接下來要講的 display 屬性堪稱 CSS 版面配置中非常重要的屬性之一,當你想調整 box model 的形式,你需要從設定 display 屬性開始。

接下來,讓我們使用 display 屬性來做一些練習:

  1. 把 block 元素改為 inline
  2. 讓個別 HTML 元素從網頁上消失

把 inline 元素改為 block

請你回到 boxing.html,<em> 和 <a>的排列方式預設為 inline,現在,讓我們把他的 display 行為重新指定為 block:

em, a {
 background-color: pink;
 display: block;         /* 透過 CSS 重新定義元素的排列方式 */
}

刷新瀏覽器,看看有什麼不同:


大家都變成一次佔滿一行的區塊元素了!


讓個別 HTML 元素從網頁上消失

另一個常見的用法是 display: none,我們來試試看:

em, a {
 background-color: pink;
 display: none;         /* 透過 CSS 重新定義元素的排列方式 */
}

刷新瀏覽器——em 和 a 元素都不見了!


等到你的網頁工具箱變得更充實以後,你可以用 display: none 做出各式各樣的效果,例如先將網頁內容設定為隱形,觸發某個事件後,再改變 display 屬性讓元素顯示。

在這裡我們只先比較了 block 和 inline 的差別,隨著網頁排版需求的改變,display 屬性可以達到的事情,也會不斷變多,在實作的時候我們還會用到其他的 display 屬性,會在後面的單元示範。

你可以在 MDNW3C 查看 display 的功能列表。

三分鐘小測驗,找到你學習HTML、CSS、JavaScript網頁開發的入口

成為企業渴求的程式人才!

在家學會 JavaScript 網路開發

全新「全端 Web App 開發」課程,給你看得見的學習成效!
超過 90% 轉職成功,400 位來自亞洲各國的 ALPHA Camp 校友,畢業後達成轉職、創業、出國工作的夢想!

3 分鐘選課指南

給期待創新改變的你

前端x後端x全端 完整工程師技能樹

90% 學生轉職成功,職涯競爭力更上層樓
最專業的「全端 Web App 開發」課程,上班族邊工作也能同時培養第二專長!

3 分鐘選課指南

學期一|程式設計入門

零基礎也學得會的程式入門課!

開始學帶得走的技能,為自己未來的成長鋪路

學期二|掌握網頁開發

系統化學習 JavaScript

實作打好前後端基礎,成為扎實的網頁開發者