Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS 基礎

CSS 基礎

教育訓練用

F830ec52d5bf72ee64fd1a43a6a82a49?s=128

大澤木小鐵

October 30, 2012
Tweet

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. 問題與討論