CSS超基礎入門張家鈞南台科技大學2012暑期推廣教育課程                     1
自我介紹一下XD張家鈞 | zjuajun@gmail.com國立臺南大學數位學習科技學系 大學部四年級資訊科技、數位學習、自然語言處理、數位藝術、人工智慧、行動軟體、遊戲設計、電子商務、社群網站、程式設計...等程式設計:C & C++ 、J...
3網址 : http://ppt.cc/EKRY
4
複習一下       5
哪裡有CSS ?           6
改改看      7
改改看      8
CSS初體驗<div style="color : red;" > 妳好CSS! </div>                                            9
選顏色<div style="color : red; “ > 妳好CSS! </div><div style="color : #FF0000; " > 妳好CSS! </div><div style="color : rgb(255,0,0...
色瑪選擇       網址 : http://ppt.cc/nJOP                          11
改字體大小<div style="color : rgb(255,0,0); font-size:100px" >妳好CSS!</div>                                                     ...
改字體大小<div style="color : rgb(255,0,0); font-size:100px" >妳好CSS!</div><div style="color : rgb(255,0,0); font-size: 500%" >妳...
字體大小單位相對單位px: pixels (預設)em: emex: x 字母的高度絕對單位in: 吋cm: 公分mm: 公厘pt: points, 1 pt = 1/72 吋pc: picas, 1 pc = 12 pt           ...
DIV+DIV<div style="color : rgb(255,0,0); font-size:200%" >妳好CSS!         <div style="font-size:200%" >         哈嚕         ...
SPAN<div style="color : rgb(255,0,0); font-size:200%" >妳好CSS!         <span style="font-size:200%" >         哈嚕         <s...
把CSS搬出來<style>div{           color : rgb(255,0,0);           font-size: 200%;                                   <div>}    ...
再多寫幾個<style>div{           color : rgb(255,0,0);           font-size: 200%;                                   <div>}      ...
CLASS<style>.bigdiv{            color : rgb(255,0,0);            font-size: 200%;}                                   <div ...
CLASS<style>.bigdiv{            color : rgb(255,0,0);            font-size: 200%;}                                   <div ...
ID:身分證字號<style>#bigdiv{            color : rgb(255,0,0);            font-size: 200%;                                    <d...
套用多個CLASS<style>#bigdiv{            color : rgb(255,0,0);            font-size: 200%;                                     ...
ID + CLASS<style>#bigdiv{            color : rgb(255,0,0);            font-size: 200%;                                    ...
邊框<style>#bigdiv{            color : rgb(255,0,0);            font-size: 200%;            border-style:dotted;            ...
不同種類的邊框#bigdiv{          border-style:dotted;}#bigdiv{          border-style: solid ;   <div class="smalldiv bgcolor">}   ...
調整一下DIV寬度<style>#bigdiv{             color : rgb(255,0,0);             font-size: 200%;             border-style:dotted;  ...
調整一下邊框寬度<style>#bigdiv{             color : rgb(255,0,0);             font-size: 200%;             border-style:dotted;   ...
個別調整邊框4個邊<style>#bigdiv{             color : rgb(255,0,0);             font-size: 200%;             border-style:dotted;  ...
盒子模式 (BOX MODEL)                   29
先清掉 <SPAN>哈嚕<style>#bigdiv{             color : rgb(255,0,0);             font-size: 200%;             border-style:dotted...
MARGIN<style>#bigdiv{             color : rgb(255,0,0);             font-size: 200%;             border-style:dotted;     ...
MARGIN<style>#bigdiv{             color : rgb(255,0,0);             font-size: 200%;             border-style:dotted;     ...
PADDING<style>#bigdiv{            color : rgb(255,0,0);            font-size: 200%;            border-style:dotted;       ...
滑鼠移過才變色<style>#bigdiv{            color : rgb(255,0,0);            font-size: 200%;            border-style:dotted;       ...
指定位置<style>#bigdiv{                 color : rgb(255,0,0);                 font-size: 200%;                 border-style:do...
學CSS最痛苦的事瀏覽器問題 http://ppt.cc/HcIU                      36
其他屬性參考/參考資料CSS 語法教學   http://ppt.cc/h2_q                                37
Upcoming SlideShare
Loading in …5
×

CSS超基礎入門

927 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
927
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

CSS超基礎入門

  1. 1. CSS超基礎入門張家鈞南台科技大學2012暑期推廣教育課程 1
  2. 2. 自我介紹一下XD張家鈞 | zjuajun@gmail.com國立臺南大學數位學習科技學系 大學部四年級資訊科技、數位學習、自然語言處理、數位藝術、人工智慧、行動軟體、遊戲設計、電子商務、社群網站、程式設計...等程式設計:C & C++ 、JAVA & J2ME、RFIDprograming、VB.NET/C#.NET、Google ChromeExtension、Processing網頁程式設計:HTML5、Javascript、CSS、PHP、MySQL、ASP.NET+MS-SQL、jQuery、Facebook API、Plurk API、 2Google Sites
  3. 3. 3網址 : http://ppt.cc/EKRY
  4. 4. 4
  5. 5. 複習一下 5
  6. 6. 哪裡有CSS ? 6
  7. 7. 改改看 7
  8. 8. 改改看 8
  9. 9. CSS初體驗<div style="color : red;" > 妳好CSS! </div> 9
  10. 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 11
  12. 12. 改字體大小<div style="color : rgb(255,0,0); font-size:100px" >妳好CSS!</div> 12
  13. 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. 14. 字體大小單位相對單位px: pixels (預設)em: emex: x 字母的高度絕對單位in: 吋cm: 公分mm: 公厘pt: points, 1 pt = 1/72 吋pc: picas, 1 pc = 12 pt 14
  15. 15. DIV+DIV<div style="color : rgb(255,0,0); font-size:200%" >妳好CSS! <div style="font-size:200%" > 哈嚕 </div></div> 15
  16. 16. SPAN<div style="color : rgb(255,0,0); font-size:200%" >妳好CSS! <span style="font-size:200%" > 哈嚕 <span></div> 16
  17. 17. 把CSS搬出來<style>div{ color : rgb(255,0,0); font-size: 200%; <div>} 妳好CSS! <span>span 哈嚕{ <span> font-size:200% </div>}</style> 17
  18. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 29. 盒子模式 (BOX MODEL) 29
  30. 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. 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. 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. 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. 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. 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. 36. 學CSS最痛苦的事瀏覽器問題 http://ppt.cc/HcIU 36
  37. 37. 其他屬性參考/參考資料CSS 語法教學 http://ppt.cc/h2_q 37

×