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) 例如:

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

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

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

外部样式表通常有两种写法。

@import url("mystyle.css");

这是 CSS 内的 @import 语句,可以在一个 CSS 内引入其它 CSS。另一种引入样式表的方法是,使用 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>

显示为

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

樣式的優先順序(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)[编辑]

子孙选择器的形式为空格,水平制表符,换行等任何 ASCII 空白字符。例如在下面示例里,给 class 为 test 的任何 span 子元素设置 consolas 的字体:

    .test span {
       font-family:consolas;
    }

子選取項(Child)[编辑]

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

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

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

ID 選取項(ID)[编辑]

在網頁中指定元件的id屬性之後,就可以使用井字號(#)來設定ID選擇器,在語法中ID選擇器前可以指定網頁元素,但在實際使用時,因為建議網頁中不要有重複ID的元素,因此就沒有指定的必要了。舉例來說,有個識別選擇器p#example,然後在網頁中有兩個物件<p id="example">以及<table id="example">,則只有前者會起作用,但如果選擇器的名稱為#example,擇兩者均會起作用。

    #example {
       font-size: 10 pt;
       color: #0000AA;
    }

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

伪元素选择器指的是一种以双冒号 (::) ,或有时也使用单冒号分隔开,后连所选取的伪元素的选择器。是於CSS裡製造出來的假HTML元素。[1]目前共有 5 种

 :after /*或*/ ::after
 :before /*或*/ ::before
 :first-letter /*或*/ ::first-letter
 :first-line /*或*/ ::first-line
 ::selection

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

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

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

參考資料[编辑]

  1. w:CSS
  • 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
维基百科中的相关条目: