CSS

维基教科书，自由的教学读本

跳转到： 导航, 搜索

目录

[编辑] 狀態

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

[编辑] 本書的內容

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

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

[编辑] 先統一辭彙

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)

標籤與元素
標籤（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）的例子。

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

在上面的例子當中，<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）

[编辑] Cascading Style Sheet : CSS

[编辑] 串接式 (Cascading)?

[编辑] 規則(Rules)

[编辑] 註解符號 (Commenting)

[编辑] 規則的形式 (Form of rules)

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

[编辑] 內部格式化表單(Internal Style Sheet)

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

[编辑] 外部格式化表單(External Style Sheet)

[编辑] 同軸格式化表單(Inline Style Sheet)

[编辑] 樣式的優先順序(Priority rules)

[编辑] 繼承的問題(Inheritance)

[编辑] 瀏覽器如何工作？( How browsers work?)

[编辑] 選取項(Selector)

[编辑] 選取項的語法(Syntax of selector)

  • 一般選取項（Universal）
  • 型態選取項（Type）
  • 群組選取項（Grouped）
  • 子孫選取項（Descendant）
  • 子選取項（Child）
  • 比鄰選取項 (Adjacent)
  • 屬性選取項（Attribute）
  • 類別選取項（Class）
  • ID 選取項（ID）
  • 擬元素選取項（Pseudo-element）
  • 擬類別選取項（Pseudo-classes）

[编辑] 一般選取項(Universal)

所謂的廣域選擇器指的是以星號（*）的方式來決定選取的範圍，實際上，*通常代表的是不特定範圍的選取，因此在CSS中以*設定廣域選取器時，將交由瀏覽器來自行決定範圍

    * { color: #FF0000; }

[编辑] 型態選取項(Type)

型態選擇器會是大家最常用到的選擇器之一，所指定的型態名稱會找尋文件中相同的實體元素配合，實際上，我們所使用的『標籤』語法就是一種型態選擇器。

    body { 
   background-color: #999999;
   color: #FFFFFF;
   }

如果有一樣的樣式想要同時作用在好幾個標籤上的話，可以使用逗號（,）作分隔。

    a, p, h1 {
   font-size: 10 pt;
   color: #0000AA;
   }

[编辑] 群組選取項(Grouped)

[编辑] 子孫選取項(Descendant)

[编辑] 子選取項(Child)

[编辑] 比鄰選取項 (Adjacent)

[编辑] 屬性選取項(Attribute)

[编辑] 類別選取項(Class)

[编辑] ID 選取項(ID)

在網頁中指定元件的id屬性之後，就可以使用井字號（#）來設定ID選擇器，在語法中ID選擇器前可以指定網頁元素，但在實際使用時，因為建議網頁中不要有重複ID的元素，因此就沒有指定的必要了。舉例來說，有個識別選擇器p#example，然後在網頁中有兩個物件

以及

，則只有前者會起作用，但如果選擇器的名稱為#example，擇兩者均會起作用。 #example { font-size: 10 pt; color: #0000AA; }

[编辑] 擬元素選取項(Pseudo-element)

[编辑] 擬類別選取項(Pseudo-classes)

[编辑] 方框的基本介紹 (Introduce to Box)

[编辑] 幾個特別的性質(properties)

[编辑] 參考資料

  • 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
Wikipedia-logo.png
维基百科中的相关条目：
CSS
取自“http://zh.wikibooks.org/wiki/CSS”