設置Eng | 中
網頁開發基本班
CSS 導論
編著: Dexter Leung, 2017年09月24日

CSS 導論

CSS 的全名是層疊樣式表(Cascading Style Sheet)。一份樣式表可以用來描述如HTML文件般標記文件的設計外貌。CSS 的語法、屬性、值等標準同樣是由W3C所定義的。

很多時候，我們會另外把 CSS 樣式表寫在另一個純文字檔案 .css 中，但好要記下這檔案的全部內容都要跟隨 CSS 語法喔。在第二章時討論過，HTML 文件可以有一個 <link> 元素，來導入相關的 CSS 設計資訊，而連結的檔案內容，就是負責樣式化本網頁的 CSS 層疊樣式表，例：
<link rel="stylesheet" href="/stylesheet.css" type="text/css" />

CSS 語法

CSS 規則

CSS 規則就是你要怎樣設計某個/某種 HTML 元素，所以，你需要在一個規則裡頭，列明一個選擇器 (哪個/哪些元素將會套用設計樣式)，和一組細則 (什麼的設計效果將會被套用)。在一個規則中，我們會先寫下選擇器，而一組細則則會以一對大括號{}包含著。

範例 1
CSS 規則
CSS
複製全部
#ele1 { color: green; background-color: black; }
.class1 {
font-weight: 800;
color: #ff0000;
}

在第 1 行和第 3 行分別列出 2 道規則，而這兩種寫法是非常常見的：
細則 1：選擇器和一組細則是並排在同一行中。
細則 2：細則組在選擇器同行開始，但橫號多行。

CSS 規則中，選擇器和細則組是否在同一行是隨你決定的。不過，在選擇器完結後，則一定需要跟隨一個空格或新行，才接下一組細則。同樣地，在一組細則過後，要開始新一個規則並寫下選擇器前，請加入最少一個空格或新行。

元素分類類列表 (Class List) & 編號 (ID)

在討論 CSS 選擇器前，讓我們先再瞭解多一點 HTML 元素。之前提過，所有需要向使用者顯示的元素都須放在 <body> 元素裡頭。所以，CSS 選擇器亦只會選擇這些元素，或是 <body>自己。

我們是使用標籤名稱來記認 HTML 元素的種類和 W3C 定義的其用途。
不過，當要為不同元素進行樣式化時，我們可能會把元素再自行界定不同分類，而各自的分類是看上去相似的，亦有可能把一些獨特的元素添上特別的效果或格式。所以,所有元素都可以有以下兩個屬性：分類- class 和編號 - id 。若然以標籤名稱選擇元素，這範圍未免太廣，亦只能按其功能性定義。剛好分類和編號這些屬性可以讓我們以更多群組方式指定某些元素。

class屬性中，可以填寫多個一個分類名稱，而每一個名稱則需要以空格分隔。這亦同時指出一個分類名稱不可以包含空格。例子： <p class="passageParagragh highlighted">
這個元素屬於兩個分類：passageParagragh 和 highlighted 。我們可以因應不同的元素種類來設計不同的共用樣式。

因為元素種類有其功能性定義，雖然不同的元素種類可以屬於同一組分類，但卻顯得毫無意義。

id屬性只可以有一個值，而每一個值是需要在整頁 HTML 文件中唯一獨特的。一個 ID 同樣地是不可包含空格的。因為 id是純粹用來指定單一個元素，所以我們很少會把body 或 main這類元素放置 ID (這些元素種類按定義只能在同一文件中包含一個)。

CSS 選擇器

以下是數款基本的選擇器你可要認識喔：

  1. tagName
    如果你純料在選擇器中寫名稱，這是表達了標籤名稱，接下來的那組細則將套用至所有這個種類的元素。
  2. .className
    如果這個字是由一點 (.) 起始，這代表了分類名稱，接下來的那組細則將套用至所有屬於這個分類的元素。
  3. #elementID
    如果這個字是由井號 (#) 起始，這是表達了元素的 ID 標籤，接下來的那組細則將套用至有這個 ID 的元素。

有時候，你的選取或需要包括多種標籤名稱 / 種類名稱 / ID標籤。

  1. 和 (符合兩個或更多的選取)
    有時候，你需要選取的個案或如「p 元素種類且他的分類需要屬於highlighted 」或「一些元素同時在highlighted和temporary 分類當中」。這時候，你需要以沒有空格或隔行地，把所需要的選擇器連接地來。以上述兩個例子，他們組成新的選擇器，分別是： p.highlighted 和 .highlighted.temporary。
    如果，所有相關元素需要符合組成了的個別選擇器，才會被接下來的細則組樣式化。
  2. 或 (符合某一選取)
    有時候，你需要選取的個案或如「p 或 article 種類的元素都要被樣式化」或「所有元素只要屬於分類 important 或 urgent 都要被樣式化」，你可以使用一個逗號 (,) 去分隔各選擇器。以上述兩個例子，他們組成新的選擇器，分別是： p, article 和 .important, .urgent。
    就是如此，所有元素只要符合某一選擇器就會被接下來的細則組樣式化。

正如之前討論過，HTML 元素可是層遞包含的，一些元素可以成為另一個元素的子元素 (children)。這樣的話，我們可否跟據這種從屬關係去選取元素，如選擇某一元素下的子元素呢？

  1. 直屬子元素
    可以使用大於箭頭 (>) 來描述兩個選擇器的關係，而結果就是要選取前面的選擇器直屬子元素中的後面的選擇器。
    舉例來說： p.highlighted > span 將會選取所有 p 元素的任何屬於分類highlighted 的 span 直屬子元素。
  2. 後代元素
    有時候，你可能需要選取更深層的元素。> 只可讓你選取直屬子元素 (下一代)，但當你選用空格時，則可標註一種任何下層後代的關係。
    例子：article .highlighted 能選取所有article 元素下，任何屬於分類 highlighted 的後代元素。

最後，CSS 亦提供一種選擇器去選取「所有」元素：

  • 所有 (*)
    使用一個星號 (*) 可選取所有元素。
    例如： #info > * 會選取 ID 編號為info元素的所有直屬子元素。
範例 2
CSS 選擇器
HTML
複製全部
<ol>
<li>下載 Emoji Viewer</li>
<li class="important highlighted">開啟應用程式</li>
<li>觀看 Emoji</li>
</ol>
<p>
想在夏日喝一杯特飲？這是<span class="highlighted">我的食譜</span>：
</p>
<ul>
<li class="important">鳳梨粒 - 6oz</li>
<li>椰子肉 - <span class="highlighted">3oz</span></li>
<li class="important">鮮奶 - 12oz</li>
</ul>
互動範例

嘗試點選下列其中一個選擇器，或自行輸入你設定的選擇器，去選取以上的元素：

li ul > li .important .important.highlighted ul, .highlighted p, li.highlighted ul *
  1. 下載 Emoji Viewer
  2. 開啟應用程式
  3. 觀看 Emoji

想在夏日喝一杯特飲？這是我的食譜：

  • 鳳梨粒 - 6oz
  • 椰子肉 - 3oz
  • 鮮奶 - 12oz

樣式化細則

我們可以在一組細則的大括號{} 內列出多項細則，而每項細則是由性質和值構成相關效果。寫上性質後，跟著放置一個冒號: ，然後就可以放置相關的值。每項細則是需要以分號;來區隔的，所以你可以習慣每寫完一項細則後，接著加上一個分號以防錯誤。

註釋

就如 HTML 文件，我們可以在 CSS 文檔中加入註釋去詳寫一些我們不是用來作實際效果但與文檔內容相關的註解。每個註解可以由 /* 開始並由 */ 結束，而當中可以橫跨多行的。

範例 3
CSS 細則和註解
CSS
複製全部
/* 一個 CSS 規則列在下面 */
.highlighted {
font-weight: 800;
background-color: yellow; /* 如螢光筆一樣，把背景塗上黃色 */
}

在這個範例中，我們設定了兩項細則去設定屬於highlighted分類的樣式化格式。
第一行的細則指出一個性質font-weight(字體粗幼)需要設定值為800。
第二行的細則指出一個性質background-color(背景色彩)需要設定值為yellow(黃色)。

我們將會在之後的章節講解在設計我們的 HTML 頁面時，有 CSS 細則可以設定什麼性質，而每個細則可以放置什麼值。

選擇器的遺傳性

所有子元素都會預設遺傳其父元素的 CSS 細則。換言之，除非後代元素有特別的細則，一個元素的 CSS 細則會通用至所有後代元素。

選擇器的有效性 - 規則次序

若是在 CSS 檔案中有多過一個同一樣的 CSS 選擇器，而描述的 CSS 細則又是一樣的時候，生效的決定因素就是規則次序。最後的 CSS 細則將會是那些元素的設計結果。

選擇器的特殊性

不同的 CSS 選擇器有時候會有一部分的元素是一樣的。這樣的話，最終生效的樣式會以選擇器的特殊性來決定，而特殊性就有以下的高低分別，決定於這個選擇器中有：

  1. 多少個 ID 編號選擇器
  2. 多少個分類選擇器 (及屬性 / 偽類選擇器 - 會在以後的章節介紹)
  3. 多少個元素種類選擇器
範例 4
CSS 特殊性
HTML
複製全部
<div class="uncle">
<div id="hiUncle">嗨，大叔!</div>
<div class="uncleSay">
<p id="hiApple">嗨，蘋果!</p>
<p id="hiPineapple">嗨，鳳梨!</p>
<div id="bye">掰!</div>
</div>
</div>
範例 4
CSS 特殊性
CSS
複製全部
.uncle .uncleSay { background-color: black ; color: white ; }
.uncle .uncleSay { background-color: white ; color: black ; }
/* 同樣的選擇器的話，則會以後者為準：
所以最後會以白色背景和黑色字呈現。 */
.uncle>div { color: red ; }
/* 這項的特殊性比第 2 行低，
所以，這只會應用到第一個 div ，即是沒有 .uncleSay 的那個，並設為紅字。*/
/* 嘗試自行理解下列的規則 */
.uncleSay p { background-color: palegreen ; color: darkblue ; }
.uncle .uncleSay p { background-color: pink ; }
#hiPineapple { background-color: yellow ; }
示範
嗨，大叔!

嗨，蘋果!

嗨，鳳梨!

掰!

值和函數

常見的值

在討論更多有關 CSS 的性質和值時，我們先瞭解更多有關「什麼是值」。值就是對當項性質的指定資訊，而每款 CSS 性質都根據不同的定義需要不同種類的值，而以下是 CSS 值常見的類別：

  1. <String> (字串)
    這需要填上一些文字，而文字前後都應用雙引號("")來括起。一些性質如font-family(字型)、content(內容)，等都可能需要使用這類的值。
    例子："Times New Roman"
  2. <Integer> (整數)
    這純粹是一個整數，並不需要包括任何單位。z-index(z向序數)、column-count(行數) 等性質或會用上。
    例子：8, 29
  3. <Number> (數字)
    這純粹是一個數字，並不需要包括任何單位。很有趣地大部分 CSS 值都不需要數字 (因為多數都需要單位的) ，但一部分函數則需要數字作為參數 (將在稍後詳述)。
    例子: 8.29, 12.28
  4. <Percentage> (分數)
    這純粹是一個分數，並需要以%結束的。同樣地，大部分 CSS 值都不需要分數，但一部分functions則需要分數作為參數 (將在稍後詳述)。
    例子: 100%, 50%
  5. <Length> (長度)
    長度是設計的性質中常用的值類別，而長度的結尾都必須要是一款正確的單位 (將會在其他章節提及)。一些性質如width(長度)、font-size(字體大小)等都會用上的。
    例子: 8px, 1.5em

函數

一個函數就是通過某種運算後而給你的值。要展開這個動作，你先要寫下需要的函數名稱，並緊接跟隨一對括號 (不要在括號前加入空格或新行在中間) 。在括號內，你可以加入參數，而這些就是輸入的變數，會影響這個函數回饋不同的值 (結果)。

函數怎樣表達呢？他們通常是這樣子的：函數名稱(變數1, 變數2, 變數3 ... )。 在 CSS 中，這裡有不同的函數可被使用，而他們的名稱和相關定義都是由 W3C 定義的。所以，你或需要去參考一下有什麼函數可以使用，他們需要什麼的參數，而每個函數會回饋怎樣的值。

表達值的定義

為了更清楚向你們表達一個性質需要有什麼值的種類，我將會跟隨W3C 的方法去表達相關的定義。每種值的類別將會在一對大小號中 <值的類別>。

有時候，一個性質只允許填上某些值。這些值會以單直線分隔，即是你可以從當中選取其一作為這個性質的值。
例如，normal|italic|oblique： 在討論相關 CSS 性質時，你可以從這 3 個值中選取其中一個作為你要指定的值，如normal。

有時候，一個性質可以填上多個值。這些值會以雙直線分隔，而當你填寫這些值時，你則需要以空格分隔。
例如，<length>||<length>：在討論相關 CSS 性質時，你需要填寫兩個長度值，如3px 2px。

有時候，這些定義的表達方式可能會組合起來或需要重覆。每一組都會以中括號 [] 圍起；而如果相關項目需要重覆，這會跟隨著一個井號 # ，相關的 CSS 值則需要以逗號分隔。
在不同的值定義下，還會有很多不同的情況，你則需要按個別性質定義指導而填寫值。
例如，[normal|italic|oblique]||<length>： 你可以這樣地填寫值：normal 15cm.

欲要參考有關更多值定義的表達方式，你可以參考：W3C Value Definition Specification和W3C 提供的更多例子。