樣式表（Cascading style sheet）

出自臺灣 CSA 協會
於 2023年9月19日 (二) 19:16 由 Gaintai（留言 | 貢獻） 所做的修訂
(差異) ←上個修訂 | 最新修訂 (差異) | 下個修訂→ (差異)

CSS（中文完整的翻譯為「階層式樣式表」）用來設定網頁的樣式及佈局，例如：改變字體、顏色、尺寸以及擺放內容的位置、拆分為多欄，或是添加動畫效果和其它裝飾的特性。

在學習 CSS 之前，您應該具備：

  1. 基本熟悉電腦的操作，以及網路的使用（即：在網路查資料，看看內容）。
  2. 設定好一個基本的工作環境（參考安裝基本軟體單元），並知道如何建立以及開啟網頁。
  3. 對 HTML 有基本的認識。

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

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

為何使用 CSS?/Why CSS?

  • 原始碼容易閱讀：除去層層的 <tag>，原始碼乾淨俐落，很容易閱讀。
  • 自訂風格
  • 增加下載的速度：同一份 style sheet 可供多個網頁使用，試想若有 100,000 個網頁每次都用 1k 的容量來定義格式，那麼100M 的容量就泡湯了！使用 CSS 的檔案幾乎只用純用 HTML 的一半大小。
  • 容易維護：修改一系列文件某部分的格式，你只要修改單一檔案，不必打開每個檔案進行修改。
  • 專業分工

網路單純化的運動 / Web purifying movement

瀏覽器廠商為了讓網頁更美觀、更吸引人，紛紛創造出種種的標籤，使得網際網路以及 HTML 成了混亂的戰場，各種格式標籤和鑽漏洞的方式層出不窮。

1992年，Hakon Lie 和 Bert Bos 提出他們所創造的一種標準，叫做串接格式化表單第一級建議（Cascading Style Sheet Level 1 Recommandation, CSS1）。之後又在1998年5月，又發表了第二級串接格式化表單（Cascading Style Sheet Level 2, CSS2）。

先統一辭彙

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

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

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

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

而 inline 的標籤有：

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

Cascading Style Sheet : CSS

何謂樣式表（Style Sheets）樣式表？

自有印刷技術時就已經存在
在手動設定樣式的時代，出版社都是先寫好一些指示，其中說明原稿要使用的樣式，然後交由印刷廠按照指定的樣式印出來
現今幾乎所有文書處理器都能讓使用者產生自己的樣式表。
事實上，你每天用排版軟體（Microsoft word, Acrobat, Dreamweaver...）當你去改變字體的大小顏色，或是跳行插入圖形等等這些動作，事實上你已經建立了某種樣式表，而這份樣式表也一同以二進位的方式與你所建立的文件儲存在一起。

串接式（Cascading）？

一個文件，可以同時擁有許多的樣式表文件（或定義），不同定義方式的樣式，其優先級為：

  1. inline 指定的 style，優先於
  2. id 指定的 style，優先於
  3. class 指定的 style，優先於
  4. 通過 html tag 指定的 style。

因此，我們稱呼它為 Cascading（層級式樣式表）。

規則（Rules）

  • 規則::=選擇器 { 宣告 } / rule::=selector {declaration}
  • 宣告::=屬性名稱:屬性值 / declaration::=property name:value

例子： 

body {color:#aa0000;}

上面的「::=」這個符號代表的是「定義」，它是網際網路聯盟（World Wide Web Consortium, W3C）的規格書文件裡面，用來定義一個詞的寫法，是從數學上抄過來的用法。

註解符號 (Commenting)

在程式語言裡面，我們時常需要寫一些人類可以閱讀的註解的文字，讓自己或者以後維護程式的人，可以比較輕鬆的理解程式撰寫的邏輯或者當時時空背景下的考量…。這些註解文字必須與程式碼加以分別，這樣程式的運作才能順暢。在 CSS 裡面，註解符號長成這樣： 

/*……*/ ... 是註解的文字，這些文字，電腦不會處理。

範例： 

/* 本文件修改者＆修改時間：Gaintai（討論） 2021年6月14日 (一) 19:48 (MDT) */

規則的形式（Form of rules）

一個規則就代表對網頁當中一個或多個樣式設定他們所應該呈現的樣貌或是運作。

檔案:Form-of-rules.png
一個「規則」的長相

多個或一組選擇器 / Multiple or Group Selectors 

h1, h2, h3 {
font-size:24px;
color:#aa0000;}

多個參數值的屬性 / Properties with Multiple Values 

p {
font-style:italic;
font-weight:bold;
font-size:12pt;}

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

內部樣式表（Internal Style Sheet）

又稱內嵌式樣式表(Embedded style sheet)，意思就是把樣式表直接寫在網頁裡面。 


<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=big5">
<title>Chientai's Homepage</title>

<style media="screen" type="text/css">
<!--
H2 {
 font-size: 50px;
 margin-left: 30%; }

body {
 font-size: 10px;
 font-family: Verdana; }
-->
</style>

</head>

<body>
……
</body>
</html>

外部樣式表（External Style Sheet）

使用<link> ：瀏覽器需要時才向所連結的樣式檔索取樣式 / Browser refers to the linked style sheet when it is needed 

<head>...
<link rel="stylesheet" type="text/css" media="screen" href="../css/itricss2.css" />
…...
</head>

使用「@import」：瀏覽器在讀取 HTML 的時候會將樣式表複製一份到HTML文件內 / Browser will copy all the styles to HTML file
 

<style media="screen" type="text/css">
<!--
@import ‘../css/itricss1.css’;
@import url(‘../css/itricss2.css’);
body {
	background-color:#fffffa;}
@import url(‘itricss3.css’);
-->
</style>


  • 可以import 多個樣式表，行末要加上分號(;)
  • @import 要置於所有格式化表單的規則之前，如上面的 itricss3.css 是無效的
  • @import is not supported by Netscape 4.x

同軸樣式表（Inline Style Sheet）

<div style=“background-color:blue; color:red”>
 ……
 </div>

樣式的優先順序（Priority rules）

這個問題，我們先前有稍微提到，在介紹過不同樣式表放置地點後，在回頭談談會比較有概念。

首先，你會發現，原來一個網頁可以有很多樣式表，包括：

  • User agent（瀏覽器）既有的格式化表單、
  • 內部的格式化表單、
  • 使用 <link> 加入的格式化表單（含 @import）
  • 同軸格式化表單。
它們被採用的優先順序：

依序從上到下，最後一個讀到的有最高優先權（使用 !important 除外）

!important 規則
div {font-size:20pt !important}

繼承的問題（Inheritance）

容器（Container） 

<div></div>, <em></em> ...

我們通常把一對標籤稱為容器，一個容器可以包含另一個容器，第一個容器又稱「父元素」，第二個容器就是「子元素」...

當第一個容器包含第二個容器，則這第二個容器就繼承了第一個容器的屬性（因此，屬性有分成可繼承與不可繼承兩種）。

字型（font-family）是可繼承的屬性；background 是不可繼承的屬性。

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

檔案:Document-tree.png
一個簡單的文件樹
  1. 下載HTML檔 / Download HTML file
  2. 建立文件樹 / Create the document tree
  3. 製造元素物件 / Create elements objects
  4. 元素名稱、元素的索引數目、元素的父集、
元素子陣列、屬性陣列...
  5. 將物件格式化 / Styling the objects
  6. 瀏覽器將每個物件套上樣式
  7. 讓物件成為流動物件 / Form flow objects

流動物件

定義：
  • 當一文件印出或顯示時，是由上到下、由左到右的顯示方式
  • 每個呈現的文件內容都是流動物件，最小的是字元，然後是詞、句子、段落，最後是整份文件
  • 瀏覽器會計算出這些物間之間的關係，然後轉成流動物件
  • 如果網頁上的元素改變，全部的頁面便重新整理

參考資料

取自「https://www.csa.tw:443/wiki/index.php?title=樣式表（Cascading_style_sheet）&oldid=730」