CSS 基礎

教育訓練用

Transcript

1. Jace Ju @ Sina Taiwan 基礎 CSS
2. 什麼是 CSS 1
3. .COM 時代 <table width="100%" border="0" align="center" cellpadding="2" cellspacing="0" class="Bpadd"> <tr> <td bgcolor="#C8DDF1" class="text13b"><a href="/itadm/ category.php?cat=93"><font color="#000000">CIO</font></a></td> </tr> <tr> <td class="text13"><font color="#666666">&#8226;</ font> <a href="/itadm/article.php?c=76963" title="2012-10-29"> 集團打造零售四合⼀一計畫　⼀一年半內同時完成⼋八⼤大系統調整</a></td> </tr> <tr> <td class="text13"><font color="#666666">&#8226;</ font> <a href="/itadm/article.php?c=76880" title="2012-10-22">IT是台灣技術創新⽕火⾞車頭　從企業營運⾓角度評選新興科技 </a></td>
4. Cascading Styling Sheets 瀏覽器樣式 網⾴頁作者樣式 使⽤用者樣式
5. CSS 概念 1994 CSS 2.0 1998 CSS 2.1 2011 W3C 正式接⼿手 1997 History of CSS CSS 1.0 1996.12 CSS 3
6. CSS 能做些什麼 2
7. ⽤用以視覺化的 HTML 標籤 <p> <font face="Arial" size="3" color="red"> Text </font> </p>
8. CSS 樣式化 <p>Text</p> p { font-family: Arial; font-size: 3em; color: red; }
9. 選擇器 CSS 語法 p { font-size: 3em; color: red; }
10. 用大括號來包含樣式 CSS 語法 p { font-size: 3em; color: red; }
11. 屬性 CSS 語法 p { font-size: 3em; color: red; }
12. 值 CSS 語法 p { font-size: 3em; color: red; }
13. 分號後再加入下一組屬性 CSS 語法 p { font-size: 3em; color: red; }
14. CSS 檔案 p { font-family: Arial; font-size: 3em; color: red; } <p>Text</p> <p>Text</p> <p>Text</p>
15. 怎麼套⽤用 CSS 3
16. inline styling <p style="font-family: Arial; font-size: 3em; color: red;">Text</p>
17. Style Tag <style type="text/css"> p { font-family: Arial; font-size: 3em; color: red; } </style>
18. Link Tag <head> <link rel="stylesheet" href="theme.css"> </head>
19. 搭配 HTML 4
20. <p>Normal text</p> <p class="note">Some note</p> class
21. <p>Normal text</p> <p class="note">Some note</p> class p { font-family: Arial; font-size: 3em; color: black; } p.note { color: red; } http://jsfiddle.net/hkvBC/
22. Bad class p.big-red { font-family: Arial; font-size: 3em; color: red; }
23. Bad class p.big-red { font-family: Arial; font-size: 3em; color: blue; }
24. Bad class p.note { font-family: Arial; font-size: 3em; color: blue; }
25. <div id="header"> <h1>Title</h1> </div> id http://jsfiddle.net/hkvBC/
26. <div id="header"> <h1>Title</h1> </div> id #header { height: 80px; } http://jsfiddle.net/hkvBC/
27. CSS 排版 5
28. <table width="100%" border="0" align="center" cellpadding="2" cellspacing="0" class="Bpadd"> <tr> <td bgcolor="#C8DDF1" class="text13b"><a href="/itadm/ category.php?cat=93"><font color="#000000">CIO</font></a></td> </tr> <tr> <td class="text13"><font color="#666666">&#8226;</ font> <a href="/itadm/article.php?c=76963" title="2012-10-29"> 集團打造零售四合⼀一計畫　⼀一年半內同時完成⼋八⼤大系統調整</a></td> </tr> <tr> <td class="text13"><font color="#666666">&#8226;</ font> <a href="/itadm/article.php?c=76880" title="2012-10-22">IT是台灣技術創新⽕火⾞車頭　從企業營運⾓角度評選新興科技 </a></td> Table Layout
29. <body> <header id="header"><h1>...</h1></header> <div id="body" > <div id="wrapper" class="clearfix"> <section id="maincol"><h1>...</h1></section> <aside id="aside"><p>...</p></aside> </div> </div> <footer id="footer"><h2>Footer</h2><p>...</p></footer> </body> CSS Layout
30. CSS Layout #header { position:relative; height:80px; background-color:#FFFFFF; width:100%; display:block; overflow:auto; } #aside { width:240px; float:left; position:relative; } #main { background-color: #FFFFFF; position: relative; width:720px; float:right; } #footer { height:100px; background-color:#FFFFFF; clear:both; display:block; overflow:auto; }
31. IE must die! Problems ‧設計師必須學習 CSS 語法 ‧瀏覽器呈現不一致 ‧IE 舊版本不符合 Web 標準
32. CSS Reset ‧瀏覽器有預設樣式 ‧解法：將所有樣式去除 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, ... { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } http://meyerweb.com/eric/tools/css/reset/
33. CSS3 簡介 6
34. ‧外部字體 ‧方盒模型 ‧背景 ‧多欄排版 ‧2D 漸變 ‧3D 漸變 ‧媒體偵測 ‧進階選擇器 CSS3 Modules 其他還有很多... http://www.css3.info/modules/ http://www.w3schools.com/css3/
35. -moz- /* Firefox */ -webkit- /* Safari, Chrome */ -o- /* Opera */ -ms- /* Internet Explorer */ Vendor Prefix http://css-snippets.com/browser-prefix/
36. .box { border: 1px solid #ccc; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; } Vendor Prefix http://css-snippets.com/browser-prefix/
37. Graceful Degradation http://jonraasch.com/blog/graceful-degradation-with-css3 ⽀支援 CSS3 不⽀支援 CSS3
38. Examples 7
39. • CSS3 buttons • 3D CSS Cube • Image Gallery • 秋⼭山澪 http://webdesignerwall.com/trends/47-amazing-css3-animation-demos
40. 問題與討論