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

CSS 基礎

CSS 基礎

教育訓練用

大澤木小鐵

October 30, 2012
Tweet

More Decks by 大澤木小鐵

Other Decks in Programming

Transcript

  1. .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>
  2. CSS 概念 1994 CSS 2.0 1998 CSS 2.1 2011 W3C

    正式接⼿手 1997 History of CSS CSS 1.0 1996.12 CSS 3
  3. <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/
  4. <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
  5. <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
  6. 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; }
  7. 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/
  8. ‧外部字體 ‧方盒模型 ‧背景 ‧多欄排版 ‧2D 漸變 ‧3D 漸變 ‧媒體偵測 ‧進階選擇器

    CSS3 Modules 其他還有很多... http://www.css3.info/modules/ http://www.w3schools.com/css3/
  9. -moz- /* Firefox */ -webkit- /* Safari, Chrome */ -o-

    /* Opera */ -ms- /* Internet Explorer */ Vendor Prefix http://css-snippets.com/browser-prefix/
  10. .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/
  11. • CSS3 buttons • 3D CSS Cube • Image Gallery

    • 秋⼭山澪 http://webdesignerwall.com/trends/47-amazing-css3-animation-demos