CSS課程簡報

簡報版本：Overview.html
講義版本：all.htm

講者：朱孝國 (peterju在pchome點com點tw)

2005/08/03 立新國小自由軟體應用研習

講者個人網頁：

http://chinyi.ncit.edu.tw/~peterju/

內容與外觀分開處理

追求美麗, 可能也是一種錯誤

如果方法正確, 追求美麗, 可以不是錯誤

那一種方式有助於文件外觀的一致性?
那一種方式比較省力? 如果有 500 篇網頁, 要製作 10 種版本 (炫麗版, 無障礙版, pda 版, wap 版, 聲音版, ...) 500*10 或 500+10?
那一種方式有利於應變? 如果那天長官的審美觀突然改變, 希望所有文件的標題都改用另一種字體... 改 500 個檔案或改 1 個檔案?
這就是內容與外觀分開處理 Separation of Content from Presentation 的好處。
何不考慮全面改用 html 取代文書處理與簡報? 讓教育訓練資源的投資, 也發揮相乘的效果!

延伸閱讀：

內容與外觀分開處理

HTML發展的瓶頸

1995 年的RFC 1866( HTML 2.0 ) 僅定義結構化的標記，如h1 到 h6、p、pre、address、blockquote、ol、ul、dir、menu、dl、b、i、cite、code、em、strong、tt 等，沒有外觀呈現的標記。
Microsoft 與 Nescape的瀏覽器大戰創造了許多與外觀而非結構的標籤，像是 font、marquee(IE 的跑馬燈)、Netscape 的 blink 等等，以及一些顏色相關的屬性，原本簡單的 HTML 突然間複雜了起來，實際可用的資訊與外觀呈現有關的標記數量相較之下令人驚訝。(由font組成的標題僅有外觀上的意義而無結構上的意義)
<font size="+3" face="細明體" color="red">標題文字</font>
1997 年的 HTML 3.2 也因此較之前的版本要多出了許多的標籤和屬性，這樣文章內容與呈現的標籤混雜在一起，造成了不少編寫網頁上的困難(尤指外觀風格的統一)。

延伸閱讀：

HTML的回歸本質

沒有結構化標記的網頁會使得內容的檢索非常困難，搜尋引擎、解譯程式、語音合成瀏覽器等要如何得知網頁標題，章節與段落，重點與提示？
W3C 組織在 1998 年訂定 HTML 4.0 標準時，便將樣式的概念引入了 HTML，以簡化網頁設計的複雜度，讓文章的內容和格式交給 HTML，而讓文章的外觀呈現交給 CSS(Cascading Style Sheets，串接樣式表)，如此使得網站不但易於維護，且讓不同平台與裝置存取網頁更為簡易。
HTML 4.01要求依據文章的「標題」或「段落」等結構進行標示，視覺性的設計可於最後透過樣式表加以控制，所以許多與視覺有關的標籤和屬性已經 Deprecated (棄置)，像是 font、strike、center 標籤，以及 align、bgcolor、body 的 text link vlink alink 屬性等，而用 CSS 來取代它們原有的功能。
W3C還希望以CSS取代HTML的表格版面與框架等配置版面的方法。
W3C引進XML作為創造新標記語言的工具，但不希望放棄目前HTML的知識工具以及技術等架構，因此創造出XHTML這個與HTML4.01相當接近的標記語言，成為邁向XML重要的第一步。

延伸閱讀：

從Web標準計畫看CSS

Web標準計畫(Web Standards Project,WaSP)肇始於1998年，目的在於說服Netscape與Microsoft等瀏覽器廠商，共同支援由W3C與其它標準化組織所共同制訂的標準，藉此降低網頁開發的成本與複雜度，並確保網頁的可讀性(Accessibility)，其計畫也擴及如Macromedia等開發工具廠商與網站開發人員。

結構語言(Structural Languages)

XHTML 1.0(延伸式超文件標記語言)
XHTML 1.1
XML 1.0(可擴充標記語言)

物件模型(Object Models)

腳本語言(Scripting Languages)

ECMAScript 262 (JavaScript的標準化版本)

表現語言(Presentation Languages)

CSS Level 1(串接樣式表)
CSS Level 2
CSS Level 3
Mathematical Markup Language (MathML) 1.01(數學標記語言)
MathML 2.0
Scalable Vector Graphics (SVG) 1.0(可縮放向量圖形)

延伸閱讀：

CSS的應用實例

內容與外觀分離：風格多變(相同的 XHTML ＋不同的樣式)
- W3Schools的樣式套用範例 : http://www.w3schools.com/css/demo_default.htm
- 單純的html->套用樣式1->顯示結果1
  　　　　　 ->套用樣式2->顯示結果2
- 樣式表禪意花園的樣式套用範例 :http://www.csszengarden.com/tr/chinese/
內容與外觀分離：風格一致(不同的 XHTML ＋相同的樣式)
- MozTW.org: http://moztw.org/
CSS簡報：Eric Meyer 的 S5(A Simple Standards-Based Slide Show System)
CSS選單：http://www.netcorridor.yellowpipe.com/sample_css_menu.php

延伸閱讀：

CSS規則(rule)

樣式規則(rule) = 選擇子+宣告
h1, h2 { color: red; /* 宣告 = 屬性 : 值; */ background-color: yellow; font: large/150% sans-serif; border:1px dotted #2f6fab; }
選擇子(Selector)：通常為文件中的元素(element)，如html中的body, p, strong等標籤，多個選擇子可以逗號隔開。
屬性(property)：CSS1 / CSS2 / CSS3規定了許多的屬性，目的在控制選擇子的樣式。
值(value)：指屬性接受的設定值，可由各種關鍵字(keyword)組成，多個關鍵字時大都以空格隔開。
要針對指定範圍進行樣式設定時，可利用<div>或<span>標籤。
CSS的屬性參考：http://www.htmlhelp.com/reference/css/properties.html
CSS的樣式效果範例 : http://style-sheet.info/

延伸閱讀：

內嵌樣式(embedding style sheet)宣告

為了能重複利用設定好的排版樣式，可以如程式語言定義巨集一般的方式，先將會用到的外觀樣式定義在<head></head>標籤中，舉例如下：
<head>
<style type="text/css">  /* 新版瀏覽器會忽略此註解 */ </style>
: </head> : <strong>強調</strong>
上述樣式又因為是內嵌在文件中，又稱之為文件樣式(document style sheet)，其雖可達到單一網頁享有重複利用定義樣式的目的，但是無法讓多網頁共享樣式設定，多用於獨立網頁或測試樣式時使用。

延伸閱讀：

在HTML的HEAD處進行宣告

實作練習1

請將下列html改寫為內嵌CSS的html(要求:網頁底色為黃色,標題1為紅色置中,標題2為藍色下加底線,段落為綠色首行縮排2個字)
<html>
<head><title>CSS改寫練習</title></head>
<body>
<h1>DIV與SPAN標籤</h1>
<p>被<DIV>或<SPAN>標籤包起來的文字、圖片...任何東西，瀏覽器都會將之視作一個物件。</p>
<h2><DIV>標籤</h2>
<p>DIV標籤是一種區塊標籤(block-level element)，自己用新的一行來顯示，也就是說DIV標籤前後會換</p>
<h2><SPAN>標籤</h2>
<p>SPAN標籤是一種行內標籤(inline element)，自己會接在其他標籤後顯示，也就是說SPAN標籤前後不換行</p>
</body>
</html>

外部樣式(external style sheet)宣告

為了能重複利用設定好的排版樣式，可以如程式語言定義函數一般的方式，先將會用到的外觀樣式定義在外部檔案中，然後在<head></head>標籤中宣告，有2種方式舉例如下：
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
: </head>

<head> <style type="text/css"></style> : </head>

延伸閱讀：

從外部引入樣式檔（*.css）至HTML文件中

行內樣式(inline style sheet)宣告

過去使用粗體紅字表示「強調」的作法：強調
<b><font color="red">強調</font></b>
改用CSS表示「強調」的作法：強調
<span style='color:red;font-weight:bold'>強調</span>

<strong style='color:red'>強調</strong>
行內樣式雖可享有CSS本身豐富的版面設定功能，但無法重複利用這個樣式設定，缺點與單單指定font標籤一樣，建議減少使用。

延伸閱讀：

在HTML的標籤中套用樣式

選擇子(Selector)的種類

類別選擇子(class selector)
p.important {color:red;} /* <p class="important">限定套用</p> */ p.note {color:green;} /* <p class="note">限定套用</p> */ .warning { color:#4b0082; /* <h1 class="warning">不限套用</h1> */ text-decoration:blink;} /* <dfn class="warning">不限套用</dfn> */
識別選擇子(ID selector)
#content {margin: 0 auto; /* 每一個網頁只能有一個唯一的ID可以套用樣式 */ width: 760px; /* <div id="content"> */ text-align: left; /* ID selector多用於版面配置或搭配程式 */ } /* </div> */
脈絡選擇子(contextual selector)
ul ol em { /* <ul><li>選擇子種類<ol><li>脈絡選擇子 */ color: gray; /* <em>依指定的樹狀架構套用樣式</em> */ } /* </li></ol></li></ul> */

延伸閱讀：

「類別 class」與「本我 id」

實作練習2

練習:請將實作練習1的內嵌樣式改寫為外部樣式
練習:請將實作練習1的內嵌樣式改寫為行內樣式
練習:請將實作練習1的CSS宣告修改為h1與h2的樣式可以快速互換
練習:請將實作練習1的CSS宣告修改為h1與h2的段落(P)顏色不一樣
練習:試寫出下列html的可能的樣式宣告
<p>CSS保證班</p>

CSS保證班

虛擬類別

樣式的應用並非基於文件的結構，而是基於某種狀態或事件，如拜訪過的錨點或滑鼠滑過這個動作。
舊式表示法
<body link="purple" vlink="red" alink="yellow">
CSS表示法
a:link {color:purple;} a:visited {color:red;} a:active {color:yellow;}

延伸閱讀：

CSS Tutorial Traditional Chinese

虛擬元素

樣式的應用並非基於文件的結構，而是基於事件，特別是某些無法事先預測的短暫情境。
瀏覽器實作虛擬元素的情況不一，使用時須特別注意。
首行虛擬元素
p:first-line {font-weight:bold; }
首字母虛擬元素
p:first-letter {font-sizet:300%; }
列印時顯示錨點的連結位址(IE不支援)
#content a:link:after, #content a:visited:after {content: " (" attr(href) ") "; }

CSS的繼承與具體值

CSS的屬性設定以後通常具有繼承特性但border等方塊屬性除外。
元素的樣式顯示因串接的順序或繼承的關係而顯得有些複雜，因此使用具體值(specificity)來決定優先權。

CSS的優點

CSS使網頁結構單純，符合無障礙網頁規範，有效的減少網頁中與外觀有關的標籤與屬性。
CSS符合W3C標準，統一了網頁外觀的排版方式，可讓更多平台與瀏覽器皆能存取網頁。。
CSS集中控制外觀的呈現方式，縮短開發與維護的時間。
減小網頁體積(尤其是重複使用的font標籤)，加快載入網頁的速度，整體網頁的縮減也節省伺服器的頻寬負荷，降低營運成本。

瀏覽器的相容問題

各家新式的瀏覽器如何決定依照舊有網頁處理原則，還是遵循W3C規格解釋網頁呢？
正確使用DOCTYPE宣告能讓各家瀏覽器進入所謂「標準模式」，統一以W3C推薦書中闡述的方式處理網頁，而不需依靠瀏覽器偵測技術，判斷瀏覽器廠牌作不同的處理。
對於不宣告DOCTYPE的網頁，瀏覽器會進入所謂「Quirks模式」以與舊版回溯相容為目標，仿照過去瀏覽器的幾種行為來處理網頁，這可能會讓符合 W3C 推薦書的文件以不符規格的方式顯現。
IE 5 / 5.5 時對於CSS的Box Model的解譯有錯誤。
IE 系列皆不支援 blink 閃爍功能
網頁儘量能以不同瀏覽器來檢視
- IE的不同版本(綠色軟體)：http://www.skyzyx.com/downloads/
- 文字瀏覽器檢視(Lynx Viewer)：http://www.delorie.com/web/lynxview.html
- 使用Gecko解譯核心的FireFox瀏覽器：http://moztw.org/

延伸閱讀：

CSS進階

CSS的box model
CSS的float屬性
CSS的position屬性
CSS的列印樣式：宣告CSS的媒體類型，利用media="print"，套用適合列印時使用的樣式。

CSS排版

以DIV配合ID selector進行雙欄與三欄版面配置取代表格與Frame。
與內容無關僅為美化版面而作的圖片應該置放於CSS中的background屬性中，以方便快速更換圖片。

延伸閱讀：

CSS簡報

簡報製作若使用了封閉檔案格式，代表了不使用指定的工具(PowerPoint 或 PowerPoint Viewer)就無法存取內容，且工具並非每個作業平台都有。
簡報的重點在傳達講者的想法，而非花俏的效果與工具的使用，因此使用開放的檔案格式(html)與自由或免費的製作工具，可以幫助我們節省時間與成本，專注在內容上
- W3C Slidemaker Tool
- 中研院張錦堂改寫的ASCC版slidemaker工具
- Eric Meyer 的 S5(A Simple Standards-Based Slide Show System)
- Jedi的outline2html

延伸閱讀：

CSS資源

網站

書籍