狠狠撸

CSS 菜鳥救星 clayliao@ June 10, 2011

Agenda 背景知識 CSS 初體驗 CSS Selector CSS Box Model 表格與 <div> 排版技巧精进前端技能范例实作

About Ying-Hsiang, Liao @clayliao Yahoo! Asia Search Front End Engineer blog

前端工程師撰寫 HTML/CSS/JavaScript 告訴瀏覽器該做什麼所有「檢視原始碼 (View Source) 」看得到的範圍

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 搜尋引擎優化 (SEO) Accessibility Screen reader Yahoo! 盲人工程師蕭煌奇的 Blog

網站架構網站架構簡單區分為「前端」與「後端」：前端：網頁長相及使用者介面技術： HTML, CSS, JavaScript, Flash 執行環境：瀏覽器後端：處理前端請求、計算與儲存資料技術： PHP, ASP, Java… 執行環境：伺服器

認識 HTML <!doctype html> <html> <head> <title> 網頁標題 </title> </head> <body> <h1> 這是大標題 </h1> <p> 這是段落 </p> <a href=“http://tw.yahoo.com/” > 這是超連結 </a> </body> </html>

有了 CSS ，網頁是彩色的

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

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

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

在 HTML 檔案中使用 CSS 在 HTML 標籤屬性指定樣式 <font size=“5” family=“arial”> 文字 </font> 可讀性、可攜性都很差，非常不建議使用。

在 HTML 檔案中使用 CSS 利用 HTML style 屬性指定樣式 <span style=“font-family:arial” > 文字 </span> 較符合標準，但無法重覆利用，建議少用。

CSS 寫在哪裡？在 HTML 檔案中，插入 <style> 標籤定義樣式： <style type="text/css"> h1 { ? font-size: 16px; ? color: red; } </style> 所有的 <h1> 標籤樣式變成： 16px 的文字大小顏色變成紅色

引用外部 CSS 除了在 HTML 中直接插入 <style> 改變樣式外，還有其他使用外部 CSS 檔案的方法：用 <link> 標籤 <link rel="stylesheet" type="text/css" href="/slideshow/css101-for-beginner/8261800/xxx.css" /> 在 <style> 標籤中使用 @import <style type="text/css"> @import url(/slideshow/css101-for-beginner/8261800/&); </style>

引用 CSS 的順序樣式定義的方式有 4 種：使用 <link> 標籤 ( 建議使用 ) 在 <style> 中用 @import 引入寫在 <style> 裡 ( 建議使用 ) 寫在標籤的 style 屬性裡優先順序為： 4 > 3 > 2 > 1

CSS Selector 選擇要被定義的對象不同瀏覽器對於 CSS 選擇器的支援性各有巧妙基本有三種： HTML 標籤 #id .class

標籤選擇器直接用 HTML 標籤名稱作選擇，所下的定義會套用到所有相同名稱的標籤 strong { ? font-weight: normal; ? color: red; } 所有的 <strong> 標籤樣式變成：正常粗細顏色變成紅色

#ID 選擇器在同一張 HTML 中，理論上一個 id 只能出現在一個標籤內，首先定義 id = “title” ： <p id="title" >This is title!</p> 如此一來，便可以在 CSS 的定義中，以定義 #title 的方式來改變 id 為 title 的標籤樣式： #title { ??? font-size: 22px; }

.class 選擇器不同於 id, class 可以重複出現，且同一個標籤允許同時套用多個 class ： <span class=“msg req” > 文字 </span> 在樣式定義中，則以「 .class 名稱」的方式來定義： .req { color: red; } .msg { font-style: italic; }

群組選擇器如果同時要讓很多個標籤、 id 或 class 共用同一個樣式，可以用群組的方式來定義： h1, h2, h3, h4, h5, h6 { ??? font-size: 100%; color: #FF0000; margin: 0; padding: 0; }

後代 (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; }

假類別 (pseudo-class) 選擇器 CSS 中預先定義了一些類別，使用 ” :” 指定 a { text-decoration: none; } a:visited { color: #0000FF; } a:hover { text-decoration: underline; } a:active { color: #00FFFF; } 注意跨瀏覽器支援

單位文字 px : pixel % : 百分比色彩 #RRGGBB: 16-bit 的 RGB 值 #RGB: 8-bit RGB 值色彩名稱： red, green... 如何選擇顏色 YUI 色票工具 CSS color name 更多 CSS 顏色

範例：設定字型基本語法連續技 #foo { ? font-size: 12px; ? font-family: Arial, “ 標楷體” , sans-serif; ? font-weight: bold; } #foo { ? font: bold 12px Arial, “ 標楷體” , sans-serif; } 更多 CSS 屬性

範例：設定背景背景色彩： background-color: 色彩值 ; 背景圖片： background-image: url(/slideshow/css101-for-beginner/8261800/xxx.png); 背景位置： background-position: (x) (y); 連續技： div { background: url(/slideshow/css101-for-beginner/8261800/xxx.png) #FFF repeat-y left top; }

邊框邊框樣式： border-style: style {trbl}; border-color: color {trbl};

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>

網頁排版傳統 <table> 工法

<Table> 排版傳統做法最多數人的做法優點：在多數瀏覽器長相一致缺點：彈性差，若更改設計需大幅修改程式碼範例：總統府網站

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

Box Model div { width: 300px; height: 200px; padding: 10px; border-size: 1px; margin: 15px; } 整個方塊的實際大小為： 352 * 252

邊緣留白 margin: 上右下左 ( 順時針方向 ) margin: 2px 3px 1px 4px; 可以分開指定，兩者效果相同： margin-top: 2px; margin-right: 3px; margin-bottom: 1px; margin-left: 4px;

元素位置 (position) position: static | absolute | relative | fixed static 預設值，瀏覽器自動判斷位置 absolute 絕對位置，從所在的 block 起算，根據 left 及 top 的值決定位置 relative 相對位置，以上一層 DOM 起算，將 left 及 top 的值視為相對位移決定位置 fixed 固定位置，類似 absolute ，不同的是， fixed 是相對於瀏覽器的畫面，而 absolute 則是相對於它所在的 block

浮動 (float) float: left | right | none; 浮動的位置根據 HTML 的順序而定注意 block 重疊的現象，可使用 clear 屬性解決

背景知識 HTML CSS 選擇器範例：設定字型與背景 CSS 排版藝術定位 position 浮動 float CSS 方塊模型 (Box model) 开发工具跨瀏覽器的 CSS CSS hack YUI Grid CSS foundation <div /> <html /> <html /> <html /> ...

开发工具 - Firebug Firebug

效能調校 - YSlow Yahoo! YSlow

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

范例实作 2: 進階思考 A ：如何做才能將側邊欄移到右邊，並將新聞內容移到左邊？ B ：如果使用表格排版，會有不同嗎？

Reference 文字編輯器 Notepad++ W3school CSS Tutorial (en) CSS 語法教學 ( 中文 ) CSS 假類別列表

狠狠撸

CSS 菜鳥救星

Recommended

More Related Content

What's hot (7)

Viewers also liked (12)

Similar to CSS 菜鳥救星 (20)

Recently uploaded (9)

CSS 菜鳥救星