在 2015 年 4 月至元智大學資訊傳播約系舉辦網站製作工作坊，讓參與的學員在 4 週內學會 HTML/CSS 基礎，並運用 Bootstrap 建置靜態網站。

1. 網站製作⼯工作坊
CSS 語法教學
2015/04/18 元智⼤大學資訊傳播學系 范聖佑

2. 單元主題
• 學習 CSS 基礎語法，包括：
- 在 HTML 裡引⼊入 CSS 的⽅方式
- 顏⾊色、背景
- ⽂文字、連結
- Box、邊框
- 基礎網⾴頁排版

3. CSS 基本概念

4. 現代網⾴頁組成
⽂文件內容
語意結構
⾴頁⾯面設計
顯⽰示元素
元件操作
感測互動 豐富內容的
現代網⾴頁

5. 各⾃自分⼯工、協同合作
• HTML、CSS、Javascript的關係
- HTML 只處理資料結構，如：⽂文字、圖⽚片、
內容層級
- CSS 專⾨門處理顯⽰示，如：⽂文字⼤大⼩小、顏⾊色、
排版
- Javascript 專⾨門處理互動，如：圖⽚片輪播、播
聲⾳音、播影⽚片

6. CSS 簡介
• CSS = Cascading Style Sheets
• 透過規則語法 (rules) 的設計，指定 (selector)
⺫⽬目標元素的樣式屬性 (property & value)，為
你的 HTML ⽂文件增加樣式
• CSS 對瀏覽器來說，就是⼀一條⼜又⼀一條的規
則，瀏覽器會逐步套⽤用
• 純⽂文字格式，副檔名為 .css

7. 引⼊入 CSS 的⽅方式
• External (外部引⼊入)
- 把 CSS 寫在外部的 .css 檔案
• Internal (內部引⼊入)
- 把 CSS 寫在 HTML Style Tag 區域內
• Inline (⾏行內引⼊入)
- 直接在某個 Tag 上增加 style 屬性，內嵌 CSS
語法

8. External CSS
• 在 HTML 內指定外部 CSS 檔案
• 只要在不同 HTML 引⼊入同⼀一個 CSS 檔案，樣
式即可共⽤用
• 本⼯工作坊所有⽰示範將會以此⽅方式進⾏行

9. Internal CSS
• 在 HTML 的 head 區塊內，使⽤用 style 標籤，
在標籤內撰寫 CSS 語法
• 此部份的語法，僅會套⽤用在同⼀一 HTML ⾴頁
⾯面，⾴頁⾯面間無法共⽤用

10. Inline CSS
• 直接在某個 HTML Tag 上增加 style 屬性，內
嵌 CSS 語法
• 此 CSS 語法僅作⽤用於該 HTML Tag，並不會影
響其他標籤

11. CSS 語法

12. CSS 語法
• 語法組成
- 選擇器 (selector)
- 宣告 (declaration) 組成
‣ 屬性 (property)
‣ 值 (value)

13. CSS 規則 (rules)
p
{
}
color:green;
選擇器 (selector) 宣告 (declaration)
指定段落⽂文字顏⾊色為綠⾊色
分號
屬性 (property) 值 (value)
冒號

14. 常⽤用 CSS 選擇器
• Type (Tag) Selector
• ID Selector
• Class Selector
• Child Selector
• Descendant Selector

15. Type (Tag) Selector
• 直接套⽤用在某⼀一種 HTML Tag 上
<p>段落⽂文字</p> p
{
color:
red;
}
HTML： CSS：

16. ID Selector
• 在 HTML 內⽤用 id 這個屬性取⼀一個唯⼀一的名
稱，在 CSS 裡即可使⽤用 #id 來選擇到該元素
<div
id="header">
</div>
#header
{
color:
red;
}
HTML： CSS：

17. Class Selector
• 在 CSS 定義⼀一個 .class 的分類後，在 HTML
裡設定 class 屬性後，即可套⽤用此類別
<div
class="new">
</div>
.new
{
color:
red;
}
HTML： CSS：

18. Child Selector
• 只要是某⼀一個元素的後代，即可被套⽤用這個
規則
<p>
<a>link</a>
</p>
p>a
{
color:
red;
}
HTML： CSS：

19. Descendant Selector
• 依選擇器的階層關係進⾏行選擇，只要符合條
件的都會被選取
<div>
<a>link1</a>
<p>
<a>link2</a>
</p>
</div>
div
a
{
color:
red;
}
HTML： CSS：

20. 語法特性
• CSS 無法單獨運作，⼀一定要搭配 HTML。且
CSS 僅控制樣式，無法改變 HTML 的結構
• CSS 是⼀一條⼀一條的規則，不論是⽤用哪⼀一種引
⼊入⽅方式，瀏覽器都會將所有規則逐⼀一套⽤用
• 顯⽰示屬性依 HTML 結構進⾏行繼承，若不同的
規則間若重複，則會依照權重進⾏行顯⽰示

21. 語法權重
• CSS 語法有串接 (cascade) 的概念。換句話
說，各元素設定是可以被覆寫的。
• 權重優先序：
- 後⾯面的規則覆寫前⾯面
- 特定指定的規則覆寫廣域指定的
- !important 覆寫所有其他的
⼝口訣：先聽 important、離我愈近就聽誰的

22. 顏⾊色

23. 前景顏⾊色
• ⽤用 CSS 設定段落的前景顏⾊色
<p>
Some
Text…
</p>
p
{
color:
green;
}
HTML： CSS：

24. 背景顏⾊色
• ⽤用 CSS 設定段落的背景顏⾊色
<p>
Some
Text…
</p>
p
{
color:
white;
background-­‐color:
black;
}
HTML： CSS：

25. ⾊色彩系統
• ⾊色彩名稱
-­‐ white,
green,
black,
yellow…
• HEX 顏⾊色代碼
-­‐ #ff0000
• RGB 顏⾊色數值
-­‐ rgb(255,
0,
0);

26. 透明度
• CSS 3 裡增加了對顏⾊色透明度的⽀支援，可以
⽤用 opacity 或 rgba 語法設定
<p>
Some
Text…
</p>
p
{
color:
rgba
(0,
0,
0,
0.5);
opacity:
0.5;
}
HTML： CSS：

27. 背景

28. 背景圖⽚片
• 透過 CSS 將圖⽚片放在任何元素當背景
<h1>
Website
Title
</h1>
h1
{
background-­‐image:
url("../img/bg.png");
}
HTML： CSS：

29. 設定圖⽚片重複排列
• 背景圖⽚片可以設定其重複排列的⽅方式 (repeat,
repeat-­‐x,
repeat-­‐y,
no-­‐repeat)
<h1>
Website
Title
</h1>
h1
{
background-­‐image:
url("../img/bg.png");
background-­‐repeat:
no-­‐repeat;
}
HTML： CSS：

30. 背景圖⽚片對⿑齊及位置
• 透過 CSS 設定背景圖⽚片的對⿑齊⽅方式或位置
<h1>
Website
Title
</h1>
h1
{
background-­‐image:
url("../img/bg.png");
background-­‐repeat:
no-­‐repeat;
background-­‐position:
left
center;
}
HTML： CSS：

31. 對⿑齊⽅方式圖解
left
top
left
center
left
bottom
center
top
center
center
center
bottom
right
top
right
center
right
bottom

32. ⽂文字與連結

33. 字型
• 設定⽂文字使⽤用的字型
<h1>
Website
Title
</h1>
h1
{
font-­‐family:
Arial,
Verdana,
sans-­‐serif;
}
HTML： CSS：

34. 字型種類
• Serif
- 襯線體 (明體類)
• Sans-Serif
- 無襯線體 (⿊黑體類)
• Monospace
- 等寬字體 (常⽤用於顯⽰示程式碼)

35. 字型套⽤用策略
• 如媒體特性⼀一節所述，使⽤用者的電腦內不⼀一
定有指定的字型。因此 CSS 在套⽤用字型時，
會依照指定的順序逐⼀一套⽤用，若還是找不到
時，就會使⽤用系統預設字型。
• 依以下策略設定字型：⾃自⼰己期望的顯⽰示字型
> 各平台替代字型 > 通⽤用字型
• 使⽤用 Web Font ⽅方案

36. ⽂文字樣式
• 設定⽂文字⼤大⼩小、粗細、斜體、底線、⼤大⼩小寫
<h1>
Website
Title
</h1>
h1
{
font-­‐family:
Arial,
Verdana,
sans-­‐serif;
font-­‐size:
20px;
font-­‐weight:
bold;
font-­‐style:
italic;
text-­‐decoration:
underline;
text-­‐transform:
uppercase;
}
HTML： CSS：

37. ⽂文字縮排
• 設定⽂文字縮排距離
<h1>
Website
Title
</h1>
h1
{
font-­‐family:
Arial,
Verdana,
sans-­‐serif;
font-­‐size:
20px;
font-­‐weight:
bold;
font-­‐style:
italic;
text-­‐decoration:
underline;
text-­‐transform:
uppercase;
text-­‐indent:
-­‐9999px;
}
HTML： CSS：

38. ⽂文字對⿑齊
• 設定⽂文字對⿑齊⽅方式
<p>
My
text...
</p>
p
{
text-­‐align:
center;
}
HTML： CSS：

39. 連結狀態與樣式
• 設定連結在不同狀態的樣式
<a
href="#">
paragraph…
</a>
a:link
{
/*
style
*/
}
a:visited
{
/*
style
*/
}
a:hover
{
/*
style
*/
}
a:active
{
/*
style
*/
}
⼝口訣：love
and
hate
HTML： CSS：

40. Box 與邊框

41. Box Model
• 所有的 HTML 元素都可以被視為⼀一個⽅方框
(Box)
• 在使⽤用 CSS 排版時，提到⼀一個 Box，包含了
四個區域：
- content
- padding
- borders
- margins

42. Box Model 圖解

43. Box Model 各區域空間
• Content - 被這個 HTML 元素包含的所有內
容，通常是⽂文字或影像
• Padding - 內容與邊框之間的距離，背景顏⾊色
也會延伸⾄至這個區域
• Border - Box 本⾝身的邊框，邊根內包含了
content和padding
• Margin - Box 外圍和其他 Box 之間的間距，
基本上是透明的，並包含背影顏⾊色

44. 了解 Box 的空間
• 還記得嗎？Google Chrome 有提供 Developer
Tool，當點選到不同的 DOM 元素時，它會
⾃自動把 Box 的空間畫出來給你看，從中了解
到該 Box 所佔有的空間為何？
• Brackets 也有對應的功能，在開始即時預覽
的狀態下，在 Brackets 裡點選 HTML 原始
碼，在 Google Chrome 的視窗裡也會把該元
素所佔 Box 繪製出來

45. 把 Box 畫出來
• 當然，我們也可以⾃自⼰己使⽤用 CSS 裡的 border
屬性，把每⼀一個元素的 Box 畫出來
*
{
border:
1px
solid
#ff0000;
}

46. *
{
border:
1px
solid
#ff0000;
}
border 屬性
• CSS 屬性內，設定 Box 邊框的語法
屬性
(property)
值 (value)
粗細 樣式 顏⾊色

47. padding 與 margin
• 設定 Box 的 padding 與 margin
<p>
paragraph...
</p>
p
{
padding:
10px;
margin:
10px;
}
HTML： CSS：

48. width 與 height
• 設定 Box 的寬與⾼高
<p>
paragraph...
</p>
p
{
width:
100px;
height:
20px;
max-­‐width:
120px;
min-­‐width:
80px;
max-­‐height:
30px;
max-­‐height:
15px;
}
HTML： CSS：

49. 當內容超出 Box 時
• 設定當內容超出 Box 時該怎麼顯⽰示？
(hidden or scroll)
<p>
paragraph...
</p>
p
{
width:
100px;
height:
20px;
overflow:
hidden;
}
HTML： CSS：

50. 排版

51. 網⾴頁排版基礎
• 先在 HTML 內，將各區塊的元件以 div 標籤
將其群組起來，並以 id 命名
header
navigation
sidebar
footer
content
logo

52. 鎖定寬度後置中
header
navigation
sidebar
footer
content
logo
固定 960px 寬容器最⼩小寬度
⾃自動均分⾃自動均分

53. 改變元素屬性
• 透過 display 的設定，可以改變元素先天的
屬性，常⽤用於排版技巧上
<ul>
<li>opt1</li>
<li>opt2</li>
</ul>
li
{
display:
inline;
}
HTML： CSS：

54. 設定 content 及 sidebar
• 設定 content 及 sidebar 的區塊，讓這兩塊分
別排在 main 區域內的左右
#content
{
width:
750px;
float:
left;
}
#sidebar
{
width:
200px;
float:
right;
}

55. float 屬性
• 讓指定元件以浮動的⽅方式進⾏行排版位置調整
#content
{
float:
left;
}
屬性 (property) 值 (value)
浮右 (right)
浮左 (left)

56. 調整 main 以免重疊
• 因為 content 和 sidebar 變成浮動，造成 main
內部空間為 0，透過設定 width 及
overflow 修正這個問題，並把 footer 往下
擠
#main
{
overflow:
auto;
width:
100%;
}

57. overflow 屬性
• 定義元素超過某個範圍的時候該如何呈現，
搭配 width:
100% 的設定，可以修正 float
造成容器⾼高度為 0 的問題
#main
{
overflow:
auto;
}
屬性 (property) 值 (value)
⾃自動 (auto)
隱藏 (hidden)
捲軸 (scroll)
顯⽰示 (visible)

58. CSS 的註解語法
• CSS 跟 HTML ⼀一樣有註解語法，設定為註解
的規則就不會被執⾏行
#header
{
/*
被註解掉的內容
*/
}

59. 成果⽰示意

60. Cheat Sheet
• 把所有常⽤用的語法整理成⼀一張表格，可在你
撰寫語法的同時，隨時查找！
• 可參考：
- http://www.cheatography.com/
- Google Search：css cheat sheet

61. 單元⼩小結
• 在這個單元裡，我們學會了基礎的 CSS 語
法，包括：
- 如何在 HTML 裡引⼊入 CSS？
- CSS 語法規則
- 如何⽤用 CSS 設定 HTML 元素的顯⽰示樣式，
並⽤用 CSS 進⾏行簡單的排版

62. 課後任務
• Wireframe 繪製練習
• 依照⾃自⼰己的網站架構圖，繪製每⼀一⾴頁的
Wireframe
• 參考今⽇日所學的 HTML、CSS 語法，完成
「我的第⼀一個網站」作業 (可參考作業⽰示範
完成練習)。練習過程中，請確認⾃自⼰己了解所
學的語法

63. 問與答
學員可開始練習、實作

64. 下週主題
• 主題：網站設計與前端框架
• 內容：
- 什麼是前端框架？
- 如何運⽤用前端框架來設計網站？
- Twitter Bootstrap 有哪些元件可以讓我們迅
速的網站網站樣板的製作？