CSS 菜鳥救星

6,322 views

Published on

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

No Downloads
Views
Total views
6,322
On SlideShare
0
From Embeds
0
Number of Embeds
1,538
Actions
Shares
0
Downloads
0
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

CSS 菜鳥救星

  1. 1. CSS 菜鳥救星 clayliao@ June 10, 2011
  2. 2. Agenda <ul><li>背景知識 </li></ul><ul><li>CSS 初體驗 </li></ul><ul><li>CSS Selector </li></ul><ul><li>CSS Box Model </li></ul><ul><li>表格與 <div> 排版技巧 </li></ul><ul><li>精進前端技能 </li></ul><ul><li>範例實作 </li></ul>
  3. 3. About <ul><li>Ying-Hsiang, Liao </li></ul><ul><li>@clayliao </li></ul><ul><li>Yahoo! Asia Search </li></ul><ul><li>Front End Engineer </li></ul><ul><li>blog </li></ul>
  4. 4. 前端工程師 <ul><li>撰寫 HTML/CSS/JavaScript </li></ul><ul><li>告訴瀏覽器該做什麼 </li></ul><ul><li>所有「檢視原始碼 (View Source) 」看得到的範圍 </li></ul>
  5. 5. 複雜的執行環境
  6. 6. Graded Browser Support Source
  7. 7. usability , internationalization, localization, visual design, accessibility , information architecture, security, build process, performance , benchmarking, device, portability
  8. 8. 舉例來說
  9. 9. 如果沒有 JavaScript 怎麼辦?
  10. 10. 版面是否禁得起放大縮小?
  11. 11. Performance Matters! source Amazon 100ms delay results in 1% sales loss. Yahoo! 400ms delay results in 5-9% drop in full page traffic. Google 500ms delay drop search traffic by 20%. Bing 1s delay result 4% drop in revenue. AOL Fastest 10% of users stay 50% longer than slowest 10%.
  12. 12. Semantic HTML <ul><li>搜尋引擎優化 (SEO) </li></ul><ul><li>Accessibility </li></ul><ul><ul><li>Screen reader </li></ul></ul><ul><ul><li>Yahoo! 盲人工程師 </li></ul></ul><ul><ul><li>蕭煌奇的 Blog </li></ul></ul>
  13. 13. Yahoo! 盲人工程師
  14. 14. 網頁基礎知識
  15. 15. 網站架構 <ul><li>網站架構簡單區分為「前端」與「後端」: </li></ul><ul><li>前端:網頁長相及使用者介面 </li></ul><ul><li>技術: HTML, CSS, JavaScript, Flash </li></ul><ul><li>執行環境:瀏覽器 </li></ul><ul><li>後端:處理前端請求、計算與儲存資料 </li></ul><ul><li>技術: PHP, ASP, Java… </li></ul><ul><li>執行環境:伺服器 </li></ul>
  16. 16. 認識 HTML <ul><li><!doctype html> </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> 網頁標題 </title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1> 這是大標題 </h1> </li></ul><ul><li><p> 這是段落 </p> </li></ul><ul><li><a href=“http://tw.yahoo.com/” > 這是超連結 </a> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  17. 17. 認識 HTML <ul><li><!doctype html> </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> 網頁標題 </title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1> 這是大標題 </h1> </li></ul><ul><li><p> 這是段落 </p> </li></ul><ul><li><a href=“http://tw.yahoo.com/” > 這是超連結 </a> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  18. 18. 有了 CSS ,網頁是 彩 色 的
  19. 19. CSS 之於網頁就如同化妝品之於女生 素顏 正妹 
  20. 20. 好害羞素顏照
  21. 21. 自信上妝照 http:// tw.search.yahoo.com /
  22. 22. 很久很久以前, 人們是這樣做網站的…
  23. 23. 在 HTML 檔案中使用 CSS <ul><li>在 HTML 標籤屬性指定樣式 </li></ul><font size=“5” family=“arial”> 文字 </font> 可讀性、可攜性都很差,非常不建議使用。
  24. 24. 在 HTML 檔案中使用 CSS <ul><li>利用 HTML style 屬性指定樣式 </li></ul><span style=“font-family:arial” > 文字 </span> 較符合標準,但無法重覆利用,建議少用。
  25. 25. 現在大家都改用 CSS
  26. 26. CSS 寫在哪裡? <ul><li>在 HTML 檔案中,插入 <style> 標籤定義樣式: </li></ul><style type=&quot;text/css&quot;> h1 {   font-size: 16px;   color: red; } </style> <ul><li>所有的 <h1> 標籤樣式變成: </li></ul><ul><li>16px 的文字大小 </li></ul><ul><li>顏色變成 紅色 </li></ul>
  27. 27. 引用外部 CSS <ul><li>除了在 HTML 中直接插入 <style> 改變樣式外,還有其他使用外部 CSS 檔案的方法: </li></ul><ul><ul><li>用 <link> 標籤 <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;xxx.css&quot; /> </li></ul></ul><ul><ul><li>在 <style> 標籤中使用 @import <style type=&quot;text/css&quot;> @import url('xxx.css'); </style> </li></ul></ul>
  28. 28. 引用 CSS 的順序 <ul><li>樣式定義的方式有 4 種: </li></ul><ul><ul><ul><li>使用 <link> 標籤 ( 建議使用 ) </li></ul></ul></ul><ul><ul><ul><li>在 <style> 中用 @import 引入 </li></ul></ul></ul><ul><ul><ul><li>寫在 <style> 裡 ( 建議使用 ) </li></ul></ul></ul><ul><ul><ul><li>寫在標籤的 style 屬性裡 </li></ul></ul></ul><ul><li>優先順序為: 4 > 3 > 2 > 1 </li></ul>
  29. 29. CSS Selector <ul><ul><li>選擇要被定義的對象 </li></ul></ul><ul><ul><li>不同瀏覽器對於 CSS 選擇器的支援性各有巧妙 </li></ul></ul><ul><ul><li>基本有三種: </li></ul></ul><ul><ul><ul><li>HTML 標籤 </li></ul></ul></ul><ul><ul><ul><li>#id </li></ul></ul></ul><ul><ul><ul><li>.class </li></ul></ul></ul>
  30. 30. 標籤選擇器 <ul><ul><li>直接用 HTML 標籤名稱作選擇,所下的定義會套用到所有相同名稱的標籤 </li></ul></ul><ul><ul><li>strong {   font-weight: normal;   color: red; } </li></ul></ul><ul><li>所有的 <strong> 標籤樣式變成: </li></ul><ul><li>正常粗細 </li></ul><ul><li>顏色變成 紅色 </li></ul>
  31. 31. #ID 選擇器 <ul><ul><li>在同一張 HTML 中,理論上一個 id 只能出現在一個標籤內,首先定義 id = “title” : </li></ul></ul><ul><ul><li><p id=&quot;title&quot; >This is title!</p> </li></ul></ul><ul><ul><li>如此一來,便可以在 CSS 的定義中,以定義 #title 的方式來改變 id 為 title 的標籤樣式 : </li></ul></ul><ul><ul><li>#title {     font-size: 22px; } </li></ul></ul>
  32. 32. .class 選擇器 <ul><ul><li>不同於 id, class 可以重複出現,且同一個標籤允許同時套用多個 class : </li></ul></ul><ul><ul><li><span class=“msg req” > 文字 </span> </li></ul></ul><ul><ul><li>在樣式定義中,則以「 .class 名稱」的方式來定義: </li></ul></ul><ul><ul><li>.req { color: red; } .msg { font-style: italic; } </li></ul></ul>
  33. 33. 群組選擇器 <ul><ul><li>如果同時要讓很多個標籤、 id 或 class 共用同一個樣式,可以用群組的方式來定義: </li></ul></ul><ul><ul><li>h1, h2, h3, h4, h5, h6 {     font-size: 100%; </li></ul></ul><ul><ul><li>color: #FF0000; </li></ul></ul><ul><ul><li>margin: 0; </li></ul></ul><ul><ul><li>padding: 0; } </li></ul></ul>
  34. 34. 後代 (descendant) 選擇器 <ul><li>利用標籤間的階層關係來作選擇 </li></ul><ul><li>elem1 elem2 { ... } </li></ul><ul>   <li> yahoo </li>   <li class=‘evil’ > Google     <ol>       <li> Bing </li>     </ol>   </li> </ul> <div class=‘evil’ > others </div> ul li {   color: #999999; } ul .evil {   color: #000000; }
  35. 35. 假類別 (pseudo-class) 選擇器 <ul><ul><li>CSS 中預先定義了一些類別,使用 ” :” 指定 </li></ul></ul><ul><ul><li>a { text-decoration: none; } </li></ul></ul><ul><ul><li>a:visited { color: #0000FF; } </li></ul></ul><ul><ul><li>a:hover { text-decoration: underline; } </li></ul></ul><ul><ul><li>a:active { color: #00FFFF; } </li></ul></ul><ul><ul><li>注意跨瀏覽器支援 </li></ul></ul>
  36. 36. 判斷合適的選擇器
  37. 37. 單位 <ul><ul><li>文字 </li></ul></ul><ul><ul><ul><li>px : pixel </li></ul></ul></ul><ul><ul><ul><li>% : 百分比 </li></ul></ul></ul><ul><ul><li>色彩 </li></ul></ul><ul><ul><ul><li>#RRGGBB: 16-bit 的 RGB 值 </li></ul></ul></ul><ul><ul><ul><li>#RGB: 8-bit RGB 值 </li></ul></ul></ul><ul><ul><ul><li>色彩名稱: red, green... </li></ul></ul></ul><ul><ul><li>如何選擇顏色 </li></ul></ul><ul><ul><ul><li>YUI 色票工具 </li></ul></ul></ul><ul><ul><ul><li>CSS color name </li></ul></ul></ul><ul><ul><ul><li>更多 CSS 顏色 </li></ul></ul></ul>
  38. 38. 範例:設定字型 <ul><li>基本語法 </li></ul><ul><li>連續技 </li></ul>#foo {   font-size: 12px;   font-family: Arial, “ 標楷體” , sans-serif;   font-weight: bold; } #foo {   font: bold 12px Arial, “ 標楷體” , sans-serif; } 更多 CSS 屬性
  39. 39. 範例:設定背景 <ul><ul><li>背景色彩: </li></ul></ul><ul><ul><ul><li>background-color: 色彩值 ; </li></ul></ul></ul><ul><ul><li>背景圖片: </li></ul></ul><ul><ul><ul><li>background-image: url(xxx.png); </li></ul></ul></ul><ul><ul><li>背景位置: </li></ul></ul><ul><ul><ul><li>background-position: (x) (y); </li></ul></ul></ul><ul><li>連續技: div { background: url(xxx.png) #FFF repeat-y left top; } </li></ul>
  40. 40. 邊框 <ul><li>邊框樣式: </li></ul><ul><li>border-style: style {trbl}; border-color: color {trbl}; </li></ul>
  41. 41. 表格與排版技巧
  42. 42. HTML 表格 <ul><li><!doctype html> </li></ul><ul><li><html> </li></ul><ul><li><head>...</head> </li></ul><ul><li><body> </li></ul><ul><li><table border=‘1’> </li></ul><ul><li><tr> </li></ul><ul><li><th> Name </th> </li></ul><ul><li><th> Homework </th> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><th> clayliao </th> </li></ul><ul><li><th> yes </th> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul><ul><li><ul> </li></ul><ul><li><li> 列表一 </li> </li></ul><ul><li><li> 列表二 </li> </li></ul><ul><li><li> 列表三 </li> </li></ul><ul><li></ul> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  43. 43. HTML 表格 <ul><li><!doctype html> </li></ul><ul><li><html> </li></ul><ul><li><head>...</head> </li></ul><ul><li><body> </li></ul><ul><li><table border=‘1’> </li></ul><ul><li><tr> </li></ul><ul><li><th> Name </th> </li></ul><ul><li><th> Homework </th> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><th> clayliao </th> </li></ul><ul><li><th> yes </th> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul><ul><li><ul> </li></ul><ul><li><li> 列表一 </li> </li></ul><ul><li><li> 列表二 </li> </li></ul><ul><li><li> 列表三 </li> </li></ul><ul><li></ul> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  44. 44. 網頁排版 傳統 <table> 工法
  45. 45. <Table> 排版 <ul><ul><li>傳統做法 </li></ul></ul><ul><ul><li>最多數人的做法 </li></ul></ul><ul><ul><li>優點:在多數瀏覽器長相一致 </li></ul></ul><ul><ul><li>缺點:彈性差,若更改設計需大幅修改程式碼 </li></ul></ul><ul><ul><li>範例: 總統府網站 </li></ul></ul>
  46. 46. 千年傳統 全新體驗 <div> 排版
  47. 47. Box Model <ul><li>div { width: 300px; height: 200px; padding: 10px; border-size: 1px; margin: 15px; </li></ul><ul><li>} </li></ul><ul><li>整個方塊的實際大小為: </li></ul><ul><li>352 * 252 </li></ul>
  48. 48. 邊緣留白 <ul><ul><li>margin: 上 右 下 左 ( 順時針方向 ) </li></ul></ul><ul><ul><li>margin: 2px 3px 1px 4px; </li></ul></ul><ul><ul><li>可以分開指定,兩者效果相同: </li></ul></ul><ul><ul><li>margin-top: 2px; margin-right: 3px; margin-bottom: 1px; margin-left: 4px; </li></ul></ul>
  49. 49. 元素位置 (position) <ul><li>position: static | absolute | relative | fixed </li></ul><ul><ul><li>static 預設值,瀏覽器自動判斷位置 </li></ul></ul><ul><ul><li>absolute 絕對位置,從所在的 block 起算,根據 left 及 top 的值決定位置 </li></ul></ul><ul><ul><li>relative 相對位置,以上一層 DOM 起算,將 left 及 top 的值視為相對位移決定位置 </li></ul></ul><ul><ul><li>fixed 固定位置,類似 absolute ,不同的是, fixed 是相對於瀏覽器的畫面,而 absolute 則是相對於它所在的 block </li></ul></ul>
  50. 50. 浮動 (float) <ul><ul><li>float: left | right | none; </li></ul></ul><ul><ul><li>浮動的位置根據 HTML 的順序而定 </li></ul></ul><ul><ul><li>注意 block 重疊的現象,可使用 clear 屬性解決 </li></ul></ul>
  51. 51. 精進前端技能
  52. 52. <ul><ul><li>背景知識 </li></ul></ul><ul><ul><li>HTML </li></ul></ul><ul><ul><li>CSS 選擇器 </li></ul></ul><ul><ul><li>範例:設定字型與背景 </li></ul></ul><ul><ul><li>CSS 排版藝術 </li></ul></ul><ul><ul><li>定位 position </li></ul></ul><ul><ul><li>浮動 float </li></ul></ul><ul><ul><li>CSS 方塊模型 (Box model) </li></ul></ul><ul><ul><li>開發工具 </li></ul></ul><ul><ul><li>跨瀏覽器的 CSS </li></ul></ul><ul><ul><li>CSS hack </li></ul></ul><ul><ul><li>YUI Grid </li></ul></ul><ul><ul><li>CSS foundation </li></ul></ul><div /> <html /> <html /> <html /> ...
  53. 53. 開發工具 - Firebug Firebug
  54. 54. 效能調校 - YSlow Yahoo! YSlow
  55. 55. 網頁前端的 MVC 架構 V IEW M odel C ontroller JavaScript 行為層 CSS 表現層 HTML 資料結構
  56. 56. 範例實作
  57. 57. 範例實作 1
  58. 58. 範例實作 1
  59. 59. 範例實作 2
  60. 60. 範例實作 2
  61. 61. 範例實作 2: 進階思考 <ul><li>A :如何做才能將側邊欄移到右邊,並將新聞內容移到左邊? </li></ul><ul><li>B :如果使用表格排版,會有不同嗎? </li></ul>
  62. 62. Reference <ul><li>文字編輯器 Notepad++ </li></ul><ul><li>W3school CSS Tutorial (en) </li></ul><ul><li>CSS 語法教學 ( 中文 ) </li></ul><ul><li>CSS 假類別列表 </li></ul>
  63. 63. Questions?

×