CSS

狀態

備忘錄：正在寫書本的大綱階段。

本書的內容

這本書唯一的主題就是 CSS，因此，這本書不會告訴你 CSS 的歷史，也不會著墨於 CSS 的好處與優點，因為在網路上已經有很豐富的資料。然而我鼓勵讀者若是時間許可，應該花些時間了解為什麼網頁技術怎麼從 HTML 開始，後來衍生出 CSS，而最後又冒出 XHTML 。關於 CSS 的歷史，你可參考 Who created CSS? CSS Early History，至於 CSS 的好處與優點，用了你就會了解。

雖然我會在適當的地方加入參考資料或是連結，但是基本上，沒有閱讀這些參考資料與連結並不會影響你學習 CSS。因此，除了自己動手作停下來之外，盡量別讓其他的事情中斷你的閱讀。

CSS 3 增加了对圆角^[1]、阴影的直接支持，有助于简化开发。在以前要完成基本的边框圆角效果非常麻烦，需要自己提前制作好图片，无法仅借助CSS直接实现^[1]。

先統一辭彙

Cascading Style Sheet (CSS) 的中文翻譯一直沒有定調，有人稱他為「层叠样式表」，也有稱「串接樣式表」，我想，我在這裡不為 CSS 的中文譯名正名，往後的文章中，中文一律用「樣式表」來稱呼 CSS，不過我寧可多用英文，以免造成誤解。

還有一個重要的詞彙「selector」，中文有「選擇器」與「選取項」兩種翻譯，本書我採用後者。

前言：一個網頁的構成

底下的說明，對於任何數位的文件來說，都會成立，但是我仍然將數位文件侷限在網頁這個範圍，這樣會讓問題單純一些。

從產生（或是製作）的過程來看，網頁可以區分為：

內容（contents）
呈現（presentation）

兩大元素。簡單的說，我們會依照不同的重要性、不同的性質（屬性）與意圖，將網頁的內容結構化，之後，再依據這個架構，給予各個部份合適的呈現方式。這就是我們最後看到的網頁。

概述

不同性質的內容

我們先試著從不同的角度來看一分網頁，先從瀏覽器呈現出來的畫面，再到原始碼，最後看看有沒有什麼遺漏的內容。

從瀏覽器看到的成品

大家可以回想一下你曾經看過或是作過的網頁，從瀏覽器前端看得到的組成元素不外乎底下的幾個要素：

標題（heading）: 網頁的第一級標題、第二級標題、第三級 ... 標題。
段落（paragraph）: 指的是一段意義完整的圖、文。
表格（table）: 例如價目表、行事曆等等，由行、列組成的資料。
清單（list）: 有序的清單、無序清單與定義式清單。
圖片（image）: 各種可以被瀏覽器讀取的格式的圖檔。
超連結（hyperlink）: 超連結是網頁有別於一般文件的一個很重大的分野，因此，我也把它當作是網頁的一個要素。
表單（form）: 有按鈕、單選選項（raido）、複選選項（check box）、輸入欄位（text field）、輸入文字區塊（text area）等等。
多媒體（multimedia）: 影片、音樂或是 flash。

反觀網頁原始碼

若是你熟悉原始碼，上面我提到的每一個要素，你一定可以立刻對應到某個 HTML 的標籤（tag），但是在原始碼裡面，你會發現更多東西，例如：

Javascript
meta 標籤
style 標籤
...

事實上，在原始碼裡面，我們還要提供許多很關鍵的資訊給瀏覽器或是搜尋引擎，這些資訊並不會呈現在使用者眼前，但是卻與網頁的呈現正確與否息息相關。這些資訊包括：利用 meta 標籤告訴瀏覽器你的網頁所使用的編碼，例如：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

其他

若是你細心一點，你一定會發現，一個網頁所包含的元素裡面，我們漏提了許多的東西，例如：

關於整個版面的

前景、背景顏色
邊界
間距

關於字體的

字型、字級與顏色
行高

HTML 與 CSS 的分工

談到這裡，我想你一定感覺到了，原來所謂的「標記語言（markup language）」確實是要替文件的內容加上註記，讓一個文件的結構清晰、層次分明。熟悉 HTML 的人會說，HTML 的標籤裡面還是有一些用來作格式化（也就是定義呈現方式）的標籤，如：、，但是，總體來說，HTML 最大的用途乃是用來描述文件的架構，讓文件本身在結構上具有意義，甚至更進一步的讓文件具有語義。

至於樣式表的角色呢？它是用來告訴瀏覽器，如何裝扮每一個 HTML 標籤所標示的內容。所以，任何談到樣式表與 HTML 的文章都會說：「藉由 CSS，我們讓文件的內容與呈現可以分離。」沒錯，這就是學習 CSS 的目的，你應該開始想像，在不更動任何 HTML 原始碼的狀況下，藉由修改樣式表，你的網頁將呈現各種風格迥異的面貌。

HTML 簡單介紹（A Brief of HTML）

在真正提到 CSS 之前，弄清楚下列幾個 HTML 的基本觀念，可以讓你更快掌握 CSS，也可以幫助你將來比較容易閱讀其他相關文件，另外，用合適的術語表達概念，有助於與其他設計師的溝通。

標籤與元素 (Tags and Elements)

File:Tag-n-element.png

標籤與元素

標籤（tag）

介於左右三角括弧 (angled brackets) 的文字，如：<body>
通常標籤是成對的，分別成為「起始標籤（opening tag）」與「結束標籤（closing tag）」，我們將內容在兩個標籤之中。
一般而言，標籤用來告訴瀏覽器採取什麼處理方式：起始標籤告訴瀏覽器開始某個處理方式，結束標籤告訴瀏覽器終止該處理方式。

元素 (elements)

由起始標籤、結束標籤和其間的內容所構成，例如：This is bold text

屬性 (Attribute)

我們以實際的例子來說明：

<img src="images/foo.gif" alt="範例" width="100" height="50" />

這是一個 img 標籤，在原始碼中，標示這裡要放入一張圖，圖片來源（source, src）是 image/foo.gif 這個檔案，萬一圖片無法顯示時，替代的（alternative, alt）文字是 "範例"，而這張圖的寬度（width）是 100 像素（pixels），高度（height）是 50 像素。

我們稱呼：

src
alt
width
height

為 img 標籤的屬性，而等號（=）後面用雙引號括起來的稱為屬性的「值（value）」。

不同的標籤有不同的屬性，數量也不一樣。

區塊標籤（Block-level Tags）與同軸標籤（Inline Tags）

我們先看一個例子，再來解釋什麼是 block-level 什麼是 inline。

HTML 原始碼

呈現

<p>
這是用來說明
<b>區塊標籤（block-level tags）</b>與
<b>同軸標籤（inline tags）</b>的例子。
</p>
<p>
你注意到例子中，兩個標籤一個會造成換行，一個卻沒有
</p>

這是用來說明區塊標籤（block-level tags）與同軸標籤（inline tags）的例子。

你注意到例子中，兩個標籤一個會造成換行，一個卻沒有

在上面的例子當中， 標籤所形成的元素，會自成一個區塊（也就是會換行）， 標籤所形成的元素，並不會這樣，它僅在同一行裡作用。在 HTML 裡面，常看到的 block-level 的標籤有：

blockquote - 引用的區塊
center - 區塊置中
div - 通用的 block-level 標籤
h1 - 第一級標題
h2 - 第二級標題
h3 - 第三級標題
h4 - 第四級標題
h5 - 第五級標題
h6 - 第六級標題
hr - 水平線
p - 段落
pre - 保留文字格式

而 inline 的標籤有：

a - 錨點（超連結標籤）
br - 段行
iframe - 同軸框架（Inline frame）
img - 圖片
q - 簡短的引用
script - 用戶端 script
span - 通用的 inline 標籤
sub - 下標（subscript）
sup - 上標（superscript）

格式化表單的位置(Where to place Style Sheet?)

主页面：把CSS应用到HTML

內部格式化表單(Internal Style Sheet)

又稱內嵌式格式化表單（Embedded style sheet）例如：

<style type="text/css">
/*CSS goes here...*/
</style>

其中 style 标签内为放置 CSS 代码的地方。

外部格式化表單(External Style Sheet)

CSS 内可用 @import 语句，在一个 CSS 内引入其它 CSS：

@import url("mystyle.css");

在html文件中，引入样式表的方法可用 link 标签，如下所示。

<link rel="stylesheet" href="mystyle.css" type="text/css" />

外部样式表的好处是令结构和表现完全分离。

内联样式表 (Inline Style Sheet)

如下所示是一个使用内联样式表的示例。通过 style 属性，可以为元素添加样式。它无法做到结构与表现的分离，但在无法引入外部样式表或 style 标签时（如维基百科）时仍然有用。

<div style="color:red; background:yellow; font-weight:bold;">
這個段落會被顯示為黃底紅字粗體。
</div>

显示为

這個段落會被顯示為黃底紅字粗體。

CSS结构

语法

主页面：语法

@rule argument(s) {
	selector {
		property: argument(s);
		another-property: argument(s);
		property-the-third: argument(s);
		fourth-property: argument(s);
	}
}

註解符號 (Commenting)

/* comment contents */

樣式的優先順序(Priority rules)

CSS不同定义方式的样式，其优先级为：内联指定的style > 通过id指定的style > 通过class指定的style > 通过html tag指定的style

故得名Cascading

瀏覽器如何工作？( How browsers work?)

方框的基本介紹 (Introduce to Box)

在CSS中，瀏覽器將每個標籤用Box方式呈現，並分為行內Box以及區塊Box。每個Box區塊使用Box模式（Box model）呈現，以外距、邊線、內距、內容四種屬性（由外而內）的順序組成一個Box。

幾個特別的性質(properties)

注意

有時一個網頁的作者會濫用CSS。有些習慣於只使用HTML的作者可能會忽視CSS提供的可能性。比如有些習慣於使用HTML的顯示元素的作者可能會在所有的HTML文件內加入CSS樣式。這比將HTML顯示和結構指令混在一起是一個進步，但它還是有許多同樣的缺點，而且維護時的工作量與混合使用差不多。

CSS與其他程式語言有著一些共同的陷阱。尤其在命名CSS的id和class時，CSS作者常選擇一個比較有說明性的名稱而使用顯示特徵作為它們的名稱。比如一個作者可能使用「big-red」來命名一個用大紅字體的突出顯示的字節。在當時，對作者來說這個名稱可能是很直覺的，但假如後來作者決定突出顯示的字節應該使用綠色，而不是紅色的話，他的命名就有毛病了。在上面這個例子中，一個更合適的名稱應該是「emphasized」（強調），它描寫的是這個「class」的用意，而不是它是如何被顯示的。

另一個毛病是未記錄的、未定義的和往往會被遺忘的名稱。一個網頁作者可能會選擇上百個名稱。名稱如footer、footnote或者explanation、note、info、more可能是指同一回事。這樣許多重複的名稱就出現了。有時一個複雜的網站的設計者可能會結合HTML和CSS來解決這個問題，但這樣一來他又把內容與顯示黏有一起了，而且這樣一來這個文件就只適合於某一媒體了。（外部樣式表的一個大優點就是它是跨媒體的，因為不同的樣式可以特別適用於不同的輸出媒體。）

HTML本身的複雜性是另一個困難處。雖然大部分使用CSS的文件比傳統的使用表格的文件要整潔，但過分使用class和過於細膩的結構層次同樣使HTML變得繁庸。此外有的作者過分使用div元素。

另一個陷阱是為了解決常見的瀏覽器錯誤而引入特別的CSS樣式，這些樣式當然是為了除錯而引入的，但它們使一個CSS文件的維護性能降低，有時這樣的CSS文件的維護量甚至比過去的HTML文件的維護量還大。常見的特別CSS樣式多是針對Internet Explorer（尤其IE 6、IE 7等舊版本）的顯示錯誤而額外編寫。

有時一個作者可能會過度地使用CSS來決定他的文件應該怎樣被顯示，如：一個作者會決定隱藏超連結底下的橫線，這很容易做到，但對瀏覽者來說這可能會帶來不便。

有些新的CSS3樣式尚未成為標準，因此在使用時需要加上前綴（Prefix），使其可以在採用不同排版引擎的瀏覽器中正確顯示。但于Internet Explorer 10 Release Preview起, transform, transition, animation和gradient渐变等属性均可不加前缀。^[2]^[3]例如使用transition時，需要額外撰寫四行編碼：

-webkit-transition: height 0.2s linear;　/* 針對使用WebKit排版引擎的瀏覽器，如Google Chrome、Apple Safari */
-moz-transition: height 0.2s linear;　/* 針對使用Gecko排版引擎的瀏覽器，如Mozilla Firefox */
-o-transition: height 0.2s linear;　/* 針對使用Presto排版引擎的瀏覽器，如Opera */
-ms-transition: height 0.2s linear;　/* MSIE，但Release Preview起可以不用前缀*/
transition: height 0.2s linear;　/* CSS3標準，放最後*/

CSS的大小因此增大，到這些CSS樣式不需前綴時，又需要額外花時間把它們刪除。

參考資料

文内引用

↑ ^1.0 ^1.1 见莫振杰《HTML与CSS进阶教程》第172页(位于第11章“CSS图形”第3节“圆”)。
↑ Unprefixed CSS3 Gradients in IE10
↑ Moving the Stable Web Forward in IE10 Release Preview

补充来源

莫振杰. HTML与CSS进阶教程 1. 中国北京: 人民邮电出版社. 2016年. ISBN 978-7-115-43295-7 （中文（中国大陆））.

其它资料

Cascading Style Sheets, Level 2
Code Style Media monitor
CSS - Cascading Style Sheets
CSS Bugs and Workarounds
CSS Panic Guide
CSS Reference Table
css-bug info
glish.com CSS layout techniques
glish.com
Guide to Cascading Style Sheets
Little Boxes
Pixellated! DesignDevelopDeliver
RichInStyle.com - Style sheet master class part 1 - writing perfect style sheets
Tableless layout HOWTO
The Layout Reservoir - BlueRobot
Web Nouveau Table-less sites list-1
Webmonkey Reference Stylesheets Guide
Working with CSS - Introduction to CSS Layout

[莫振杰_进阶_p172-1] 1.0 ^1.1 见莫振杰《HTML与CSS进阶教程》第172页(位于第11章“CSS图形”第3节“圆”)。

[2] Unprefixed CSS3 Gradients in IE10

[3] Moving the Stable Web Forward in IE10 Release Preview

[1]

[2]

[3]

CSS

狀態