CSS 是什麼?

CSS (階層式樣式表)可以讓您建立出好看的網頁,但是它背後是怎麼運作的?在這個主題裡,藉由簡單的語法範例來說明 CSS 是什麼,以及含蓋這個語言的一些關鍵項目。

先備知識: 基本的電腦概念、能夠安裝基本軟體,基本與各種檔案打交道的能力,以及 HTML 的基礎(由HTML 入門學到)。
學習目標: 學到 CSS 是什麼。

HTML 入門單元中,我們含蓋了什麼是 HTML 以及它是如何被用來標記文件。這些文件能夠被瀏覽器讀取,標題的文字會看起來比一般段落更大,段落之間會換行並帶有間隔。連結會帶有顏色及底線,讓它與其它一般的文字有區別。您所看到的這些是瀏覽器的預設樣式,用來確保當作者沒有指定任何樣式的狀況下,仍有一些非常基本的樣式被套用上,好讓內容基本上能夠被閱讀(如下圖所示)。

The default styles used by a browser

然而,如果所有的網站都長這個樣子,網路世界將是個很無趣的地方。您能使用 CSS 對 HTML 元件的樣子作更多控制,將這些標記以任何您喜歡的設計作調整。

看看下面的影片,了解更多關於瀏覽器預設樣式(可開 CC 字幕並自動翻譯為中文)。

CSS 是作什麼用的?

如同我們前面所提到的, CSS 是一種用來指定文件該用什麼方式呈現的語言,可以定義它們的樣式、布局…等。

文件通常指的是使用標記語言的文字檔案,HTML 是其中最常見的,但是您也可能遇到其它例如 SVGXML 的標記語言。

所謂的呈現文件,指的是將文件轉換為你的讀者可用的形式。像是 FirefoxChrome 或 Edge 這類的瀏灠器,是設計來將文件視覺化,再呈現電腦螢幕、投影機上或是由列表機列印出來。

注意:瀏覽器有時候被稱為 user agent(用戶終端),它基本上泛指電腦裡安裝的應用軟體。雖然並不是唯一,當我們在討論 CSS 的時候,用戶終端主要指的是瀏覽器。至於其它的用戶終端,有些能夠將 HTML 和 CSS 轉換為 PDF 再列印出來。

CSS 可以用在很基本文字樣式上頭,像是改變標題和連結的顏色尺寸。它可以用在建立布局,像是將原本單欄的文字內容加入布局,劃分出主要的內容以及包含相關資訊的側邊欄。它甚至可以用在建立動畫效果。點進上面的連結,看看相關的例子。

CSS 語法

CSS 是一種基於規則的語言,您對網頁裡特定或一群元素指定一系列的規則。舉例來說:「我要讓頁面裡的主標題,以紅色且大號的字體呈現」。

下面這段語法是為了實現上面的需求,用簡單 CSS 規則示範:

h1 {
    color: red;
    font-size: 5em;
}

樣式規則以一個選擇器開始。它選擇了您預計改變樣式的 HTML 元素。在這個例子中,我們要調整的是第一級的標題元素(<h1>)。

接著我們跟著一組花括號 { },裡面是一到多個聲明,它的形式是一對一對屬性名稱屬性內容的組合。每一對聲明會將我們選中元素的屬性,付予我們所想要設定的內容(或數值)。

在冒號(:)前面的是屬性的名稱,後面的是屬性內容(值)。CSS 的屬性依照其類型可以使用的值而有所不同。在我們的例子中,有個 color 屬性,它可以設定各種顏色值。而 font-size 屬性則可以採用不同尺寸單位的值。

一個 CSS 樣式表包含了許多這樣子的規則,一個接著一個。

h1 {
    color: red;
    font-size: 5em;
}

p {
    color: black;
}

你將會發些有些值很容易學會,而另一些則需要查資料確認。MDN 上有各個屬性的獨立頁面讓您能查到屬性及其可使用的值,在你忘記了或是想知道其它可能用法的時候提供一個快速的路徑。

注意: 您可以在 MDN 的 CSS 參考資源找到所有的 CSS 屬性(以及其它 CSS 特性)頁面的連結。 另外,當您需要得到某個 CSS 特性的更多資訊,應該去習慣使用「mdn 特性名稱」的方式在您喜歡搜尋引擊上搜尋。舉例來說,嘗試以「mdn color」和「mdn font-size」作關鍵字搜尋!

CSS 的各個主題(單元)

由於 CSS 有太多的項目可以進行設定,因此將這個語言依不同主題切分出單元。您將會在探索 MDN 的時候看到這些單元,並發現許多文章是圍繞著特定單元所組織的。舉例來說,您可以在 MDN 關於背景與邊框的單元裡,看到它的目的,以及其包含了哪些不同的屬性及特性。 您也將在文末發現到相關 CSS 規範的連結。

在這裡不用太煩惱 CSS 的架構,可以讓尋找資訊變得簡單一些。例如說,當你知道某個屬性可能用在其它類似的東西上,因此它們可能被放在同一個規範(單元)裡。

舉個特別的例子,讓我們回到背景與邊框的單元中,您可能會認為在邏輯上 background-colorborder-color 會在同一個單元裡被定義。所以您猜對了。

CSS 規範

所有網路標準技術(HTML、CSS、JavaScript…等)都被定義在稱為定義(specifications 或簡稱 specs)巨型文件中,由像是 W3CWHATWGECMAKhronos 之類的標準組織所發布,並且很精確地定義這些技術的行為方式。

CSS 並沒有什麼不同,它由 W3C 一個被稱為 CSS 工作組的團體所發展。這個團體是由對 CSS 感興趣的瀏覽器供應商和其它公司的代表所組成。還有其它被稱為邀請專家的人,與其它的成員組織無關,可以獨立的發聲。

新的 CSS 特性被 CSS 工作組所發展、定義。有時候是因為特定瀏覽器對某個功能有興趣,而有時候是因為網站設計師與開發人員的要求,還有一些時候是工作組本身定義的需求。CSS 正不斷發展,新的可用特性正在出現。然而,每個人很努力達到的 CSS 重要方針,是不要往會破壞舊網站的方向進行改變。一個在 2000 年建立的網站,使用了當時能用的 CSS 特性,應該到今天仍能夠在瀏覽器上使用。

作為一個 CSS 新手,你會發現 CSS 的規範不勝枚舉,它們是用來給開發用戶端程式的開發者實作功能所使用,而不是讓網站開發人員閱讀來了解 CSS。許多經驗的豐富的開發者,寧願看 MDN 上的文件或其它指引。然而,知道規範的存在還是有價值的,可以了解它們與您正使用的 CSS 之間的關係,瀏覽器支援(如下)以及相關定義。

瀏覽器支援

被定義好的 CSS 特性,只有被一個或更多瀏覽器實作出來之後,才會在我們開發網頁上面有所幫助。這意味著已經編寫了程式,可以將 CSS 檔案裡的設定轉換為輸出在畫面上的結果。我們將在 CSS 工作原理中詳細介紹這個過程。一個(新)特性被所有瀏覽器同時實作出來是不常見的,通常會缺了幾個,CSS 某些部分您可以在某些瀏覽器上使用,然而在其它瀏覽器人則沒有作用。基於這個原因,確認特性被實作的狀況是有用的。在每個 MDN 的資源頁面上,您可以看到感興趣的屬性現在的狀態,因此您可以確定能不能把它使用在網站上。

以下是 CSS font-family 屬性的支援狀態表。

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
font-familyChrome Full support 1Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Not supported on option elements. See bug 1536148.
IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
system-uiChrome Full support 56Edge Full support 79Firefox No support No
No support No
Full support 43
Notes Alternate Name
Notes Supported on macOS only.
Alternate Name Uses the non-standard name: -apple-system
IE No support NoOpera Full support 43Safari Full support 9
Notes Alternate Name
Full support 9
Notes Alternate Name
Notes Supported since macOS 10.11.
Alternate Name Uses the non-standard name: -apple-system
WebView Android Full support 56Chrome Android Full support 56Firefox Android No support NoOpera Android Full support 43Safari iOS Full support 9
Alternate Name
Full support 9
Alternate Name
Alternate Name Uses the non-standard name: -apple-system
Samsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.

下一步…

現在您已經知卜 CSS 是什麼,接著移動到 CSS 入門單元,您可以在這裡開始寫一些 CSS。

在這個單元中

  1. CSS 是什麼?
  2. CSS 入門
  3. CSS 的結構
  4. CSS 工作原理
  5. 使用您的新知識