CSS 菜鳥救星

CSS 菜鳥救星 clayliao@ June 10, 2011

Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

About ,[object Object],[object Object],[object Object],[object Object],[object Object]

前端工程師 ,[object Object],[object Object],[object Object]

usability , internationalization, localization, visual design, accessibility , information architecture, security, build process, performance , benchmarking, device, portability

如果沒有 JavaScript 怎麼辦？

版面是否禁得起放大縮小？

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%.

Semantic HTML ,[object Object],[object Object],[object Object],[object Object],[object Object]

網站架構 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

認識 HTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

有了 CSS ，網頁是彩色的

CSS 之於網頁就如同化妝品之於女生素顏正妹 

自信上妝照 http:// tw.search.yahoo.com /

很久很久以前，人們是這樣做網站的…

在 HTML 檔案中使用 CSS ,[object Object],<font size=“5” family=“arial”> 文字 </font> 可讀性、可攜性都很差，非常不建議使用。

在 HTML 檔案中使用 CSS ,[object Object],<span style=“font-family:arial” > 文字 </span> 較符合標準，但無法重覆利用，建議少用。

CSS 寫在哪裡？ ,[object Object],<style type="text/css"> h1 { font-size: 16px; color: red; } </style> ,[object Object],[object Object],[object Object]

引用外部 CSS ,[object Object],[object Object],[object Object]

引用 CSS 的順序 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

CSS Selector ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

標籤選擇器 ,[object Object],[object Object],[object Object],[object Object],[object Object]

#ID 選擇器 ,[object Object],[object Object],[object Object],[object Object]

.class 選擇器 ,[object Object],[object Object],[object Object],[object Object]

群組選擇器 ,[object Object],[object Object],[object Object],[object Object],[object Object]

後代 (descendant) 選擇器 ,[object Object],[object Object],<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; }

假類別 (pseudo-class) 選擇器 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

單位 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

範例：設定字型 ,[object Object],[object Object],#foo { font-size: 12px; font-family: Arial, “ 標楷體” , sans-serif; font-weight: bold; } #foo { font: bold 12px Arial, “ 標楷體” , sans-serif; } 更多 CSS 屬性

範例：設定背景 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

邊框 ,[object Object],[object Object]

HTML 表格 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

網頁排版傳統 <table> 工法

<Table> 排版 ,[object Object],[object Object],[object Object],[object Object],[object Object]

千年傳統全新體驗 <div> 排版

Box Model ,[object Object],[object Object],[object Object],[object Object]

邊緣留白 ,[object Object],[object Object],[object Object],[object Object]

元素位置 (position) ,[object Object],[object Object],[object Object],[object Object],[object Object]

浮動 (float) ,[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<div /> <html /> <html /> <html /> ...

開發工具 - Firebug Firebug

效能調校 - YSlow Yahoo! YSlow

網頁前端的 MVC 架構 V IEW M odel C ontroller JavaScript 行為層 CSS 表現層 HTML 資料結構

範例實作 2: 進階思考 ,[object Object],[object Object]

Reference ,[object Object],[object Object],[object Object],[object Object]

CSS 菜鳥救星

Recommended

Recommended

More Related Content

What's hot

What's hot (7)

Viewers also liked

Viewers also liked (12)

Similar to CSS 菜鳥救星

Similar to CSS 菜鳥救星 (20)

CSS 菜鳥救星