1. CSS超基礎入門
張家鈞
南台科技大學2012暑期推廣教育課程
1

2. 自我介紹一下XD
張家鈞 | zjuajun@gmail.com
國立臺南大學數位學習科技學系 大學部四年級
資訊科技、數位學習、自然語言處理、數位藝術、人工智慧、
行動軟體、遊戲設計、電子商務、社群網站、程式設計...等
程式設計：C & C++ 、JAVA & J2ME、RFID
programing、VB.NET/C#.NET、Google Chrome
Extension、Processing
網頁程式設計：HTML5、Javascript、CSS、PHP、MySQL、
ASP.NET+MS-SQL、jQuery、Facebook API、Plurk API、
2
Google Sites

3. 3
網址 : http://ppt.cc/EKRY

4. 4

5. 複習一下
5

6. 哪裡有CSS ?
6

7. 改改看
7

8. 改改看
8

9. CSS初體驗
<div style="color : red;" > 妳好CSS！ </div>
9

10. 選顏色
<div style="color : red; “ > 妳好CSS！ </div>
<div style="color : #FF0000; " > 妳好CSS！ </div>
<div style="color : rgb(255,0,0); " > 妳好CSS！ </div>
10

11. 色瑪選擇
網址 : http://ppt.cc/nJOP
11

12. 改字體大小
<div style="color : rgb(255,0,0); font-size:100px" >
妳好CSS！
</div>
12

13. 改字體大小
<div style="color : rgb(255,0,0); font-size:100px" >
妳好CSS！
</div>
<div style="color : rgb(255,0,0); font-size: 500%" >
妳好CSS！
</div>
<div style="color : rgb(255,0,0); font-size:100pt" >
妳好CSS！
</div>
13

14. 字體大小單位
相對單位
px: pixels (預設)
em: em
ex: x 字母的高度
絕對單位
in: 吋
cm: 公分
mm: 公厘
pt: points, 1 pt = 1/72 吋
pc: picas, 1 pc = 12 pt
14

15. DIV+DIV
<div style="color : rgb(255,0,0); font-size:200%" >
妳好CSS！
<div style="font-size:200%" >
哈嚕
</div>
</div>
15

16. SPAN
<div style="color : rgb(255,0,0); font-size:200%" >
妳好CSS！
<span style="font-size:200%" >
哈嚕
<span>
</div>
16

17. 把CSS搬出來
<style>
div
{
color : rgb(255,0,0);
font-size: 200%;
<div>
}
妳好CSS！
<span>
span 哈嚕
{ <span>
font-size:200% </div>
}
</style>
17

18. 再多寫幾個
<style>
div
{
color : rgb(255,0,0);
font-size: 200%;
<div>
}
妳好CSS！
<span>
span 哈嚕
{ <span>
font-size:200% </div>
}
<div>
</style> 台南真棒！
</div>
18

19. CLASS
<style>
.bigdiv
{
color : rgb(255,0,0);
font-size: 200%;
} <div class="smalldiv">
.smalldiv 妳好CSS！
<span>
{
哈嚕
color : rgb(255,0,0); <span>
font-size: 50%; </div>
}
span
<div class="bigdiv">
台南真棒！
{
</div>
font-size:200%
}
19
</style>

20. CLASS
<style>
.bigdiv
{
color : rgb(255,0,0);
font-size: 200%;
} <div class="smalldiv">
.smalldiv 妳好CSS！
<span class="smalldiv">
{
哈嚕
color : rgb(255,0,0); <span>
font-size: 50%; </div>
} <div class="bigdiv">
span
台南真棒！
</div>
{
font-size:200%
}
20
</style>

21. ID:身分證字號
<style>
#bigdiv
{
color : rgb(255,0,0);
font-size: 200%;
<div class="smalldiv">
}
妳好CSS！
.smalldiv <span class="smalldiv">
{ 哈嚕
color : rgb(255,0,0); <span>
font-size: 50%;
</div>
<div id="bigdiv">
}
台南真棒！
span </div>
{
font-size:200%
21
}
</style>

22. 套用多個CLASS
<style>
#bigdiv
{
color : rgb(255,0,0);
font-size: 200%;
<div class="smalldiv bgcolor">
}
妳好CSS！
.smalldiv <span class="smalldiv">
{ 哈嚕
color : rgb(255,0,0); <span>
font-size: 50%;
</div>
}
<div id="bigdiv">
.bgcolor 台南真棒！
{ </div>
background-color : yellow;
22
}
</style>

23. ID + CLASS
<style>
#bigdiv
{
color : rgb(255,0,0);
font-size: 200%;
<div class="smalldiv bgcolor">
}
妳好CSS！
.smalldiv <span class="smalldiv">
{ 哈嚕
color : rgb(255,0,0); <span>
font-size: 50%;
</div>
}
<div id="bigdiv" class="bgcolor">
.bgcolor 台南真棒！
{ </div>
background-color : yellow;
23
}
</style>

24. 邊框
<style>
#bigdiv
{
color : rgb(255,0,0);
font-size: 200%;
border-style:dotted;
<div class="smalldiv bgcolor">
}
妳好CSS！
.smalldiv <span class="smalldiv">
{ 哈嚕
color : rgb(255,0,0); <span>
</div>
font-size: 50%;
} <div id="bigdiv" class="bgcolor">
.bgcolor 台南真棒！
{ </div>
background-color : yellow;
24
}
</style>

25. 不同種類的邊框
#bigdiv
{
border-style:dotted;
}
#bigdiv
{
border-style: solid ; <div class="smalldiv bgcolor">
} 妳好CSS！
<span class="smalldiv">
哈嚕
#bigdiv <span>
</div>
{
border-style: inset ; <div id="bigdiv" class="bgcolor">
台南真棒！
25
}
</div>

26. 調整一下DIV寬度
<style>
#bigdiv
{
color : rgb(255,0,0);
font-size: 200%;
border-style:dotted;
<div class="smalldiv bgcolor">
width:200px;
妳好CSS！
} <span class="smalldiv">
.smalldiv 哈嚕
{ <span>
</div>
color : rgb(255,0,0);
font-size: 50%; <div id="bigdiv" class="bgcolor">
} 台南真棒！
.bgcolor </div>
{
26
background-color : yellow;
} </style>

27. 調整一下邊框寬度
<style>
#bigdiv
{
color : rgb(255,0,0);
font-size: 200%;
border-style:dotted;
<div class="smalldiv bgcolor">
border-width:10px;
妳好CSS！
width:200px; <span class="smalldiv">
} 哈嚕
.smalldiv <span>
{ </div>
color : rgb(255,0,0);
font-size: 50%; <div id="bigdiv" class="bgcolor">
} 台南真棒！
.bgcolor </div>
{
background-color : yellow;
27
} </style>

28. 個別調整邊框4個邊
<style>
#bigdiv
{
color : rgb(255,0,0);
font-size: 200%;
border-style:dotted;
border-top-width:10px; top , left , bottom , right
width:200px;
}
<div class="smalldiv bgcolor">
.smalldiv
妳好CSS！
{
<span class="smalldiv">
color : rgb(255,0,0);
哈嚕
font-size: 50%;
<span>
}
</div>
.bgcolor
{
<div id="bigdiv" class="bgcolor">
background-color : yellow;
台南真棒！
28
} </style>
</div>

29. 盒子模式 (BOX MODEL)
29

30. 先清掉 <SPAN>哈嚕
<style>
#bigdiv
{
color : rgb(255,0,0);
font-size: 200%;
border-style:dotted;
border-top-width:10px;
width:200px;
}
<div class="smalldiv bgcolor">
.smalldiv
妳好CSS！
{
</div>
color : rgb(255,0,0);
font-size: 50%;
<div id="bigdiv" class="bgcolor">
}
台南真棒！
.bgcolor
</div>
{
background-color : yellow;
30
} </style>

31. MARGIN
<style>
#bigdiv
{
color : rgb(255,0,0);
font-size: 200%;
border-style:dotted;
border-top-width:10px;
width:200px;
}
.smalldiv
<div class="smalldiv bgcolor">
{
妳好CSS！
color : rgb(255,0,0);
</div>
font-size: 50%;
margin: 50px; <div id="bigdiv" class="bgcolor">
} 台南真棒！
.bgcolor </div>
{
31
background-color : yellow;
} </style>

32. MARGIN
<style>
#bigdiv
{
color : rgb(255,0,0);
font-size: 200%;
border-style:dotted;
border-top-width:10px;
width:200px;
}
.smalldiv
<div class="smalldiv bgcolor">
{
妳好CSS！
color : rgb(255,0,0);
</div>
font-size: 50%;
margin: 50px; <div id="bigdiv" class="bgcolor">
} 台南真棒！
.bgcolor </div>
{
32
background-color : yellow;
} </style>

33. PADDING
<style>
#bigdiv
{
color : rgb(255,0,0);
font-size: 200%;
border-style:dotted;
border-top-width:10px;
width:200px;
padding: 50px;
}
.smalldiv
{ <div class="smalldiv bgcolor">
color : rgb(255,0,0);
妳好CSS！
font-size: 50%;
</div>
margin: 50px;
}
<div id="bigdiv" class="bgcolor">
.bgcolor
台南真棒！
{
</div>
background-color : yellow;
33
}
</style>

34. 滑鼠移過才變色
<style>
#bigdiv
{
color : rgb(255,0,0);
font-size: 200%;
border-style:dotted;
border-top-width:10px;
width:200px;
padding: 50px;
}
.smalldiv
{
<div class="smalldiv bgcolor">
color : rgb(255,0,0);
妳好CSS！
font-size: 50%;
</div>
margin: 50px;
}
<div id="bigdiv" class="bgcolor">
.bgcolor:hover
台南真棒！
{ </div>
background-color : yellow;
34
}
</style>

35. 指定位置
<style>
#bigdiv
{
color : rgb(255,0,0);
font-size: 200%;
border-style:dotted;
border-top-width:10px;
width:200px;
padding: 50px;
position: absolute;
left: 200px;
top:250px;
}
.smalldiv
{
<div class="smalldiv bgcolor">
color : rgb(255,0,0); 妳好CSS！
font-size: 50%;
margin: 50px;
</div>
}
.bgcolor:hover
{
<div id="bigdiv" class="bgcolor">
台南真棒！
35
background-color : yellow;
}
</style>
</div>

36. 學CSS
最痛苦
的事
瀏覽器
問題
http://ppt.cc/HcIU
36

37. 其他屬性參考/參考資料
CSS 語法教學 http://ppt.cc/h2_q
37