1. CSS 快速上手
上官林傑 (ericsk)

2. 課程大綱
引言
什麼是 CSS? 為什麼要用 CSS?
如何使用 CSS？
CSS 選擇器
常用的 CSS 屬性（文字及排版）
範例實作

3. 在開始之前...
網站架構主要區分為「前端」及「後端」：
前端： 主要是呈現內容、處理使用者操作介面等。
技術： HTML, CSS, JavaScript, Flash, ... etc.
執行者： 瀏覽器
後端： 處理前端或遠端送到伺服器上的請求、連結資料庫運算
或儲存資料。
技術： PHP, ASP, Java EE, Ruby, Python, ... etc.
執行者： 伺服器

4. 在 HTML 檔案中使用 CSS

5. 網頁樣式
雖然瀏覽器會根據 HTML 標籤來決定內容的樣式，但開發網
頁者仍然可以改變標籤的樣式。
用 HTML 標籤指定樣式：
<font size=quot;3quot; family=quot;serifquot;>我是文字</font>
可讀性、可攜性都很差
利用 style 屬性
<span style=quot;font-family:serifquot;>我是文字</span>
較符合標準，但無法重覆利用。

6. 有沒有聰明的作法？
重新定義標籤的樣式
可以套用到所有標籤
給標籤 id，定義該 id 的樣式
不限定標籤，套用該 id 即可使用該樣式
定義樣式類別 (class)，讓標籤套用
類似 id，但是 id 只能讓一個標籤使用，class 沒問題

7. <style> 標籤
在你的 HTML 檔案中，插入 <style> 標籤來定義樣式。
<style type=quot;text/cssquot;>
h1 {
font-size: 12px;
color: blue;
}
</style>
上述定義將所有的 <h1> 標籤樣式改為：
12px 的文字大小
前景顏色改為藍色。

8. 除了直接寫 <style> 之外...
除了在 HTML 中直接插入一段 <style> 來改變樣式之外，也可以
另外把這些樣式的定義寫在檔案中再引入 HTML 檔案：
用 <link> 標籤引入
<link rel=quot;stylesheetquot; type=quot;text/cssquot; href=quot;xxx.cssquot;/>
在 <style> 標籤中以 @import 引入
<style type=quot;text/cssquot;>
@import url('xxx.css');
....
</style>

9. 樣式定義的優先順序
可以引入樣式定義的方式有 4 種：
1. 用 <link> 標籤
2. 在 <style> 中用 @import 引入
3. 寫在 <style> 裡
4. 直接寫在標籤的 style 屬性裡
優先順序為： 4 > 3 > 2 > 1

10. CSS 選擇器

11. 什麼是 CSS 選擇器？
既然要定義樣式，重要的是指明要定義誰？所以利用 CSS 選
擇器來選擇要被定義的對象。
目前 CSS 標準已經到版本 3，不過各瀏覽器對於 CSS 選擇器
的支援性各有不同。
Safari 3、Firefox 3 對於 CSS 3 標準目前是最好。
最多人使用的 IE 6 則是連 CSS 2.1 都支援得不太好。
選擇器皆可以組合使用。

12. 標籤選擇器
顧名思義，就是直接用「標籤名稱」作為選擇器，所下的定義會
套用到所有相同名稱的標籤。如：
b{
font-weight: normal;
color: red;
}
上述的定義會讓所有的 <b> 內容都不會出現粗體，而且文字
會變成紅色。
所有瀏覽器都支援（廢話！），但是一旦定義了就會影響所有標
籤。

13. #id 選擇器
一個 HTML 中，理論上一個 id 只會出現在一個標籤內，定義
了 #id 的樣式，被設定為該 #id 的標籤就會被套用。
定義 id 的方式：
<span id=quot;titlequot;>Chapter 1</span>
如此一來，便可以在 CSS 的定義中，以定義 #title 的方式
來改變 id 為 title 的標籤樣式：
#title {
font-size: 22px;
}
也可以寫成 span#title

14. .class 選擇器
不同於 id，一個 class 可以在一 HTML 檔中多次出現 ，而且同
一個標籤還可以同時套用不同的 class 。
為標籤套用 class 的方式：
<span class=quot;msg reqquot;>必填欄位</span>
在樣式定義中，則以「 .class 名稱」的方式來定義：
.req { color: red; }
.msg { font-style: italic; }
當然也可以加入標籤限定選擇。

15. 群組選擇器
如果同時要讓很多個標籤、 id 或 class 共用同一個樣式，可以
用群組的方式來定義：
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}

16. 後代 (descendant) 選擇器
HTML 的內容會視為樹狀結構的模型，所以也可以利用標籤間的
階層關係來作選擇。
語法： elem1 elem2 { ... }
<ul> ul li {
<li>abc</li>
color: #999999;
<li>def
}
<ol>
<li>123</li>
</ol>
abc, def, 123 的顏色，都會被改
</li>
成 #999999
</ul>
因為它們都在 ul 的階層之下。

17. 子 (child) 選擇器
語法：elem1 > elem2 則只會選擇往下一層的元素。所以上
個例子若是寫成
ul > li {
color: #999999;
}
則只有 abc, def 的顏色會被改成 #999999。
123 是在第二層，所以沒被選擇到。
IE 系列，IE 7 才開始支援。

18. 鄰族 (adjacent sibling) 選擇器
語法： elem1 + elem2 { ... }
用來選擇同一階層的緊鄰在後的元素
h3 + div { color: red; }
若套用至
<h3>hello</h3>
<div>Paragraph 1</div>
<div>Paragraph 2</div>
只有 Paragraph 1 的顏色會被改成紅色。
IE系列，IE 7才開始支援此語法。

19. 同族 (general sibling) 選擇器
語法： elem1 ~ elem2 { ... }
CSS 3 才有的語法，不同鄰族選擇器，此選擇器會選擇同階層
中符合條件的。
上個例子中，若是用了同族選擇器，則 Paragraph 1 及
Paragraph 2 都會被改成紅色。
目前瀏覽器支援度普遍不佳（Firefox, Opera 全系列支援, Safari
3 以後支援, IE 7 雖支援但有小 bug）

20. 屬性 (attribute) 選擇器
語法： elem[attr op quot;valuequot;] { ... }
用標籤的屬性來選擇
input[type=quot;textquot;] {
font-family: sans-serif;
}
屬性可以不設值，則會選擇所有含有該屬性的標籤
屬性值的運算子：
= : 完全相同
~= : 含有該值
|= : 以該值為開頭，並帶有 - 的值

21. 假類別 (pseudo-class) 選擇器
在 CSS 中預先定義了一些類別，在選擇器後以 : 指定。
範例：
a { text-decoration: none; }
a:hover { text-decoration: underline; }
CSS2 及 CSS3 定義的假類別列表：
http://reference.sitepoint.com/css/pseudoclasses
瀏覽器支援度要注意。

22. 假元素 (pseudo-element) 選擇器
類似假類別，只是針對選擇標籤的特定位置。
div:after {
content: 'end';
}
假元素列表：
http://reference.sitepoint.com/css/pseudoelements
瀏覽器的支援度最差，要小心使用。不過一些排版上的困難可
以以此解決。

23. 全（universal）選擇器
顧名思義，就是會套用至全部的標籤。
語法： * { ... }
*{
margin: 0;
padding: 0;
}
在 IE 系列會有一些小 bug，比方說 * html 不應該選擇到任何
一個標籤，但是在 IE6 中則會自動省略掉 *。

24. 文字

25. CSS 支援的單位
文字
px: pixel
pt: point，根據螢幕解析度決定 point 大小
cm, mm, in
pc: 1pc == 12pt
em: 字型大小
%: 百分比
色彩
#RRGGBB: 16-bit 的 RGB 值 (hex)
#RGB: 8-bit RGB 值 (hex)
rgb(r, g, b): rgb 數值
色彩名稱

26. 定義字型
語法： font-family: 字型名稱列表;
範例：
div#heading {
font-family: Georgia, 'Times New Roman', times, serif;
}
div#paragraph {
font-family: Verdana, Helvetica, Arial, sans-serif;
}

27. 文字粗、斜體及變異
粗體：
語法： font-weight: bold;
可帶入的值有 bold, normal, border, lighter, 100~900。
斜體：
語法： font-style: italic;
可帶入的值有 italic, oblique, normal。
變異：
語法： font-variant: small-caps | normal;

28. 字型大小
語法： font-size: 值;
絕對大小：10px, 16px, 12pt, 15mm, etc.
相對大小：50%, 120%, 1em, 1.5em
關鍵字：
CSS2 CSS1
xx-small 5px 9px
x-small 7px 11px
small 11px 13px
medium 16px 16px
large 24px 19px
x-larg 36px 23px
xx-larg 54px 28px

29. 設定字型的快捷屬性
語法：
font: (style)|(variant)|(weight) (size)/(line-height) (family)
#foo {
font-size: 12px;
line-height: 1.5em;
font-family: Georgia, serif;
font-weight: bold;
}
#foo {
font: bold 12px/1.5em Georgia, serif;
}

30. 文字縮排
語法： text-indent: 大小;
整個段落首行的縮排，若帶入的值是負數，則為凸排。
text-indent: 2em;
text-indent: -2em;

31. 文字段落對齊、間距
語法： text-align: left | right | center | justify;
向左、向右、置中、兩邊對齊。
行高： line-height: 大小;
用來指定每行文字的間距
字距：
word-spacing: 大小;
letter-spacing: 大小;
用來指定文字之間的間隔

32. 色彩與背景

33. 前景色彩 (foreground color)
語法： color: 色彩;
前景色彩，主要是定義文字的顏色。
如果有一元素僅定義了邊框樣式而無邊框顏色的話，會採
用 color 的值。
表單元素(input, select等)不僅是文字的顏色會改變。

34. 背景
背景色彩語法：
background-color: 色彩 值;
背景圖片語法：
background-image: url(xxx.png);
url() 內的位址，是與 CSS 檔案相對的路徑，如果開頭加上 / 則為整個網
站的相對路徑。
背景重覆方式：
background-repeat: repeat | repeat-x | repeat-y | no-repeat;

35. 背景 (續)
背景位置：
background-position: (x) (y);
位置的值可以是：
top, bottom, center, letf, right
絕對大小或相對大小
背景黏著：
background-attachment: scroll | fixed;
背景是否會跟著捲動（預設是 scroll）

36. 設定背景的快捷屬性
語法：
background: (color) (img) (repeat) (attachment) (position);
這個屬性彈性很高，因為各個設定的順序可以自己決定。下列的
寫法是一樣的：
div { background: url(xxx.png) #fff repeat-y left top; }
div { background: #fff url(xxx.png) left top repeat-y; }

37. 透明度
在 Firefox/Safari/Opera 等瀏覽器中可以使用：
opactiy: 0.0~1.0;
來指定透明度。而 IE 系列則需使用：
filter: alpha(opacity=0~100);
來定義。

38. 用 CSS 排版

39. CSS 方塊模型 (Box Model)
div {
width: 300px;
height: 200px;
padding: 10px;
border-size: 1px;
margin: 15px;
}
整個方塊的大小為 352 * 252
在 IE5.5，width/height 包含 border 及 padding，上述的方
塊會變成 330 * 230

40. 方塊邊緣留白
語法： margin: 上 右 下 左
margin: 2px 3px 1px 4px;
可以分別指定：
margin-top: ...
margin-right: ...
margin-bottom: ...
margin-left: ...
指定順序的記憶法：T(op)R(ight)B(ottom)L(eft)
trbl --> trouble

41. 方塊邊緣留白 (續)
margin 指定的效果：
上右下左全部都 2px */
margin: 2px; /*
上下 2px, 左右 3px */
margin: 2px 3px; /*
上 2px, 下 4px, 左右 3px */
margin: 2px 3px 4px; /*
讓瀏覽器自行計算留白 */
margin: auto; /*
（註：水平置中的效果）

42. 方塊 內留白 (padding)
語法： padding: 上 右 下 左
padding: 2px 3px 1px 4px;
可以分別指定：
padding-top: 大小;
padding-right: 大小;
padding-bottom: 大小;
padding-left: 大小;
語法與 margin 完全相同，特性也是一樣。唯一需要注意的就是
在 IE5.5 的 box model 與其它瀏覽器不同。

43. 邊框 (border)
邊框樣式：
border-style: style {trbl};
border-top-style: style ; border-right-style: style ;
border-bottom-style: style ; border-left-style: style ;
樣式：

44. 邊框 -- 寬度
邊框寬度：
border-width: size {trbl};
border-top-width, border-right-width,
border-bottom-width, border-left-width
除了 絕對或相對大小數值之外，也可以使用 thin, medium,
thick 三種關鍵字。

45. 邊框 -- 顏色
邊框顏色：
border-color: color {trbl};
border-top-color, border-right-color,
border-bottom-color, border-left-color
用來定義邊框的顏色。

46. 設定邊框的快捷屬性
語法：
border: (size) (style) (color); /* 全方向 */
border-top, border-right, border-bottom, border-left
範例：
h1 {
border: 5px double #888;
border-top: none;
border-left: none;
}

47. 元素呈現模式 (display)
HTML 的元素呈現樣式大致可區分為 inline 及 block 兩種
inline: 不會換行（如：a, span, img, ...）
block: 會換行（如：p, div, form...）
利用定義 display 屬性的方式可以改變元素的呈現樣式。
可以定義 display: none; 讓某元素不要顯示（也不會佔空
間）
visiblity: hidden; 則是不會顯示，但會佔空間。
除了 inline, block 之外，也有其它的值可以設定（如：
inline-block, list-item, table, ... 等）但這些值在不同瀏
覽器間差異度高，要小心使用。

48. 浮動 (floating)
語法： float: left|right|none;
透過設定元素的 float 屬性，將元素擺到所在 block 的左側或
右側。
利用 text-align 只是元素內的文字、圖片對齊方式，並不
是整個元素在本身 block 中的對齊方式
浮動的位置會根據 HTML 的順序而定。
如果整個 block 都是 float 的元素，那 block 不會佔有空間，所
以會有下方 block 重疊的現象。
所以要注意 block 填滿及大小計算的問題。
利用 clear 屬性。

49. 浮動的效果
先擺一個 float: left , 後面才接文字
先擺一個 float: right , 後面才接文字

50. 浮動的效果 (續)
先是文字 , 後面才擺一個 float: left
先是文字 , 後面才擺一個 float: right

51. 浮動的效果 (續)
相簿範例（介紹 float 的效果）
當整個 container 都是浮動元素時，如何把 container 「撐
開」？

52. 元素位置
語法： position: static | absolute | relative | fixed
用來決定元素擺放在頁面或是所在 block 中的位置。
static
預設值，根據現有的 CSS 及文件模型決定位置。
absolute
絕對位置，根據 left 及 top 的值來決定位置。
relative
將 left 及 top 的值視為位移來決定位置。
fixed
類似 absolute，不同於 absolute 的是，fixed 是相對於瀏覽器的畫面，
而 absolute 則是相對於它所在的 block。

53. z-index
語法： z-index: 數字;
決定元素在同一位置上的「上下」順序。
有名的 IE select z-index bug:
在 IE 下，select 元素用正常手段是蓋
不起來的

54. 還有很多....
CSS 能定義的樣式非常多，這份教材僅提及有興趣的人可以自行
參考市面販售的書籍或是網站，下列是個人推荐的書籍或網站：
CSS: The Definitive Guide (O'Reilly)
CSS AND HTML Web Design (Grannel)
Google Doctype
http://code.google.com/doctype
SitePoint CSS Referense
http://reference.sitepoint.com/css

55. 範例討論與實作

56. 範例1: 水平置中一個區塊
情境： 假設我有一個 760px 的 box 要水平置中於畫面上，該如何
做？
提示：
1. 利用 margin: auto;

57. 範例2: Box Model 的陷阱
情境： 假設有個寬度為 500px 的 div，邊框上下左右皆為 1px，裡面會有一些文字，
希望有留有 10px 的 padding。
問題： 如果這樣寫，那麼這個 div 真實的寬度會是 522px (why?)
#box {
width: 500px;
border: 1px solid black;
padding: 10px;
}
如果就要固定這個 #box 一定要是 500px，如何做？
提示：
1. 想一下 Box Model
2. 再使用一個 div 來解決。

58. 範例3: 請丟掉 table 排版
情境： 在同一水平線上，希望擺上三個區塊 (div)，大小分別是25%,
50%, 25%。
提示：
1. 使用 float

59. 範例4: 固定版位
情境： 在一個 760px 的區塊中，打算採用雙欄式設計，左側 #main
為 500px，而右側的 #sidebar 為 200px，其餘空間作為留白。
提示：
1. 利用 float
2. 利用 margin

60. 範例5: 用背景圖片作為項目圖像
情境： 選單上有幾個選項，想要為這些選項前面加上 icon，但不得直接使
用 <img>，而是利用 css 的 background-image 來作。
問題： 因為有時 css 可能是放在網路上的某個位址，不一定跟網頁在同
一位址，若換 theme 時，採用此法較為方便。
提示：
1. background-image 的 repeat 及 位置
2. 選項的 padding