• Like
  • Save
CSS 菜鳥救星
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

CSS 菜鳥救星

  • 4,882 views
Published

 

Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,882
On SlideShare
0
From Embeds
0
Number of Embeds
9

Actions

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