CSS 是什麼？

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

文件通常指的是使用標記語言的文字檔案，HTML 是其中最常見的，但是你也可能遇到其它例如 SVG 或 XML (en-US) 的標記語言。

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

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

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

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

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

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

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

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

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

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

p {
  color: black;
}

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

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

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

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

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

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

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

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

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

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

• 概述：CSS 入門
• 次頁