CSS超基礎入門.pdf

Transcript

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、 Google Sites 2
3. 網址 : http://ppt.cc/EKRY 3
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. 色瑪選擇 11 網址 : http://ppt.cc/nJOP
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%; } span { font-size:200% } </style> 17 <div> 妳好CSS！ <span> 哈嚕 <span> </div>
18. 再多寫幾個 <style> div { color : rgb(255,0,0); font-size: 200%; } span { font-size:200% } </style> 18 <div> 妳好CSS！ <span> 哈嚕 <span> </div> <div> 台南真棒！ </div>
19. CLASS <style> .bigdiv { color : rgb(255,0,0); font-size: 200%; } .smalldiv { color : rgb(255,0,0); font-size: 50%; } span { font-size:200% } </style> 19 <div class="smalldiv"> 妳好CSS！ <span> 哈嚕 <span> </div> <div class="bigdiv"> 台南真棒！ </div>
20. CLASS <style> .bigdiv { color : rgb(255,0,0); font-size: 200%; } .smalldiv { color : rgb(255,0,0); font-size: 50%; } span { font-size:200% } </style> 20 <div class="smalldiv"> 妳好CSS！ <span class="smalldiv"> 哈嚕 <span> </div> <div class="bigdiv"> 台南真棒！ </div>
21. ID:身分證字號 <style> #bigdiv { color : rgb(255,0,0); font-size: 200%; } .smalldiv { color : rgb(255,0,0); font-size: 50%; } span { font-size:200% } </style> 21 <div class="smalldiv"> 妳好CSS！ <span class="smalldiv"> 哈嚕 <span> </div> <div id="bigdiv"> 台南真棒！ </div>
22. 套用多個CLASS <style> #bigdiv { color : rgb(255,0,0); font-size: 200%; } .smalldiv { color : rgb(255,0,0); font-size: 50%; } .bgcolor { background-color : yellow; } </style> 22 <div class="smalldiv bgcolor"> 妳好CSS！ <span class="smalldiv"> 哈嚕 <span> </div> <div id="bigdiv"> 台南真棒！ </div>
23. ID + CLASS <style> #bigdiv { color : rgb(255,0,0); font-size: 200%; } .smalldiv { color : rgb(255,0,0); font-size: 50%; } .bgcolor { background-color : yellow; } </style> 23 <div class="smalldiv bgcolor"> 妳好CSS！ <span class="smalldiv"> 哈嚕 <span> </div> <div id="bigdiv" class="bgcolor"> 台南真棒！ </div>
24. 邊框 <style> #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; } </style> 24 <div class="smalldiv bgcolor"> 妳好CSS！ <span class="smalldiv"> 哈嚕 <span> </div> <div id="bigdiv" class="bgcolor"> 台南真棒！ </div>
25. 不同種類的邊框 #bigdiv { border-style:dotted; } #bigdiv { border-style: solid ; } #bigdiv { border-style: inset ; } 25 <div class="smalldiv bgcolor"> 妳好CSS！ <span class="smalldiv"> 哈嚕 <span> </div> <div id="bigdiv" class="bgcolor"> 台南真棒！ </div>
26. 調整一下DIV寬度 <style> #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; } </style> 26 <div class="smalldiv bgcolor"> 妳好CSS！ <span class="smalldiv"> 哈嚕 <span> </div> <div id="bigdiv" class="bgcolor"> 台南真棒！ </div>
27. 調整一下邊框寬度 <style> #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; } </style> 27 <div class="smalldiv bgcolor"> 妳好CSS！ <span class="smalldiv"> 哈嚕 <span> </div> <div id="bigdiv" class="bgcolor"> 台南真棒！ </div>
28. 個別調整邊框4個邊 <style> #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; } </style> 28 <div class="smalldiv bgcolor"> 妳好CSS！ <span class="smalldiv"> 哈嚕 <span> </div> <div id="bigdiv" class="bgcolor"> 台南真棒！ </div> top , left , bottom , right
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; } .smalldiv { color : rgb(255,0,0); font-size: 50%; } .bgcolor { background-color : yellow; } </style> 30 <div class="smalldiv bgcolor"> 妳好CSS！ </div> <div id="bigdiv" class="bgcolor"> 台南真棒！ </div>
31. MARGIN <style> #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; } </style> 31 <div class="smalldiv bgcolor"> 妳好CSS！ </div> <div id="bigdiv" class="bgcolor"> 台南真棒！ </div>
32. MARGIN <style> #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; } </style> 32 <div class="smalldiv bgcolor"> 妳好CSS！ </div> <div id="bigdiv" class="bgcolor"> 台南真棒！ </div>
33. PADDING <style> #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; } </style> 33 <div class="smalldiv bgcolor"> 妳好CSS！ </div> <div id="bigdiv" class="bgcolor"> 台南真棒！ </div>
34. 滑鼠移過才變色 <style> #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; } </style> 34 <div class="smalldiv bgcolor"> 妳好CSS！ </div> <div id="bigdiv" class="bgcolor"> 台南真棒！ </div>
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 { color : rgb(255,0,0); font-size: 50%; margin: 50px; } .bgcolor:hover { background-color : yellow; } </style> 35 <div class="smalldiv bgcolor"> 妳好CSS！ </div> <div id="bigdiv" class="bgcolor"> 台南真棒！ </div>
36. 學CSS 最痛苦 的事 瀏覽器 問題 http://ppt.cc/HcIU 36
37. 其他屬性參考/參考資料 CSS 語法教學 http://ppt.cc/h2_q 37