跳至內容

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」，中文有「選擇器」與「選取項」兩種翻譯，本書我採用後者。

前言：一個網頁的構成

[編輯]

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

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

  1. 內容（contents）
  2. 呈現（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 的標籤裏面還是有一些用來作格式化（也就是定義呈現方式）的標籤，如：<b>、<i>，但是，總體來說，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)
  • 由起始標籤、結束標籤和其間的內容所構成，例如：<b>This is bold text</b>

屬性 (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）的例子。

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

在上面的例子當中，<p> 標籤所形成的元素，會自成一個區塊（也就是會換行），<b> 標籤所形成的元素，並不會這樣，它僅在同一行裏作用。在 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);
	}
}

規則(Rules)

[編輯]
主頁面：定義樣式規則

長度和單位

[編輯]
主頁面：長度和單位

選取項(Selector)

[編輯]
主頁面：CSS/選擇器

繼承的問題(Inheritance)

[編輯]
主頁面：繼承規則

關鍵字Important

[編輯]
主頁面：CSS/Important

註解符號 (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. ↑ 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

補充來源

[編輯]
  • 莫振傑. 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
維基百科中的相關條目：
CSS
取自 "https://zh.wikibooks.org/w/index.php?title=CSS&oldid=168510"