Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自我介紹一下XD 張家鈞 | [email protected] 國立臺南大學數位學習科技學系 大學部四年級 資訊科技、數位學習、自然語言處理、數位藝術、人工智慧、 行動軟體、遊戲設計、電子商務、社群網站、程式設計...等 程式設計：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、 Google Sites 2

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

4

Slide 5

Slide 5 text

複習一下 5

Slide 6

Slide 6 text

哪裡有CSS ? 6

Slide 7

Slide 7 text

改改看 7

Slide 8

Slide 8 text

改改看 8

Slide 9

Slide 9 text

CSS初體驗
妳好CSS！
9

Slide 10

Slide 10 text

選顏色
妳好CSS！
妳好CSS！
10

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

改字體大小
妳好CSS！
12

Slide 13

Slide 13 text

改字體大小
妳好CSS！
妳好CSS！
妳好CSS！
13

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

DIV+DIV
妳好CSS！
哈嚕
15

Slide 16

Slide 16 text

SPAN
妳好CSS！ 哈嚕
16

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

ID + CLASS #bigdiv { color : rgb(255,0,0); font-size: 200%; } .smalldiv { color : rgb(255,0,0); font-size: 50%; } .bgcolor { background-color : yellow; } 23
妳好CSS！ 哈嚕
台南真棒！

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

不同種類的邊框 #bigdiv { border-style:dotted; } #bigdiv { border-style: solid ; } #bigdiv { border-style: inset ; } 25
妳好CSS！ 哈嚕
台南真棒！

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

盒子模式 (BOX MODEL) 29

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

指定位置 #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 { color : rgb(255,0,0); font-size: 50%; margin: 50px; } .bgcolor:hover { background-color : yellow; } 35
妳好CSS！
台南真棒！

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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