Your SlideShare is downloading. ×
0
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
CSS 菜鳥救星
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS 菜鳥救星

5,175

Published on

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

No Downloads
Views
Total Views
5,175
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
0
Comments
0
Likes
12
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSS 菜鳥救星 clayliao@ June 10, 2011
  • 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. 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. 前端工程師 <ul><li>撰寫 HTML/CSS/JavaScript </li></ul><ul><li>告訴瀏覽器該做什麼 </li></ul><ul><li>所有「檢視原始碼 (View Source) 」看得到的範圍 </li></ul>
  • 5. 複雜的執行環境
  • 6. Graded Browser Support Source
  • 7. usability , internationalization, localization, visual design, accessibility , information architecture, security, build process, performance , benchmarking, device, portability
  • 8. 舉例來說
  • 9. 如果沒有 JavaScript 怎麼辦?
  • 10. 版面是否禁得起放大縮小?
  • 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. 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. Yahoo! 盲人工程師
  • 14. 網頁基礎知識
  • 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. 認識 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. 認識 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. 有了 CSS ,網頁是 彩 色 的
  • 19. CSS 之於網頁就如同化妝品之於女生 素顏 正妹 
  • 20. 好害羞素顏照
  • 21. 自信上妝照 http:// tw.search.yahoo.com /
  • 22. 很久很久以前, 人們是這樣做網站的…
  • 23. 在 HTML 檔案中使用 CSS <ul><li>在 HTML 標籤屬性指定樣式 </li></ul><font size=“5” family=“arial”> 文字 </font> 可讀性、可攜性都很差,非常不建議使用。
  • 24. 在 HTML 檔案中使用 CSS <ul><li>利用 HTML style 屬性指定樣式 </li></ul><span style=“font-family:arial” > 文字 </span> 較符合標準,但無法重覆利用,建議少用。
  • 25. 現在大家都改用 CSS
  • 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. 引用外部 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. 引用 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. 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. 標籤選擇器 <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. #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. .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. 群組選擇器 <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. 後代 (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. 假類別 (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. 判斷合適的選擇器
  • 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. 範例:設定字型 <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. 範例:設定背景 <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. 邊框 <ul><li>邊框樣式: </li></ul><ul><li>border-style: style {trbl}; border-color: color {trbl}; </li></ul>
  • 41. 表格與排版技巧
  • 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. 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. 網頁排版 傳統 <table> 工法
  • 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. 千年傳統 全新體驗 <div> 排版
  • 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. 邊緣留白 <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. 元素位置 (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. 浮動 (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. 精進前端技能
  • 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. 開發工具 - Firebug Firebug
  • 54. 效能調校 - YSlow Yahoo! YSlow
  • 55. 網頁前端的 MVC 架構 V IEW M odel C ontroller JavaScript 行為層 CSS 表現層 HTML 資料結構
  • 56. 範例實作
  • 57. 範例實作 1
  • 58. 範例實作 1
  • 59. 範例實作 2
  • 60. 範例實作 2
  • 61. 範例實作 2: 進階思考 <ul><li>A :如何做才能將側邊欄移到右邊,並將新聞內容移到左邊? </li></ul><ul><li>B :如果使用表格排版,會有不同嗎? </li></ul>
  • 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. Questions?

×