SlideShare a Scribd company logo
1 of 20
Download to read offline
CSS 排版 - 基礎觀念篇

 如何掌握 CSS 排版技巧
CSS 排版的優點
    有組織的 HTML 結構
•
    易於讓搜尋引擎剖析
•
    版面容易調整
•
    容易套版
•
    DOM 操作便利
•
    不需為不同平台設計不同頁面
•
面臨的挑戰
    瀏覽器的不一致性
•
    沒有可靠的視覺化編輯器
•
    模型難以理解
•
    時程的壓力
•
DOCTYPE
• DOCTYPE 會切換瀏覽器的標準模式
  (Standards Mode) 、近乎標準模式
  (Almost Standards Mode) 與怪癖模式
  (Quirks Mode) 。
 (http://hsivonen.iki.fi/doctype/)

• 標準模式和近乎標準模式差在表格的處理。
• 怪癖模式是為了相容於舊瀏覽器。
• 標準模式和怪癖模式差在 Box Model 的呈
  現方式。
• 目前最佳選擇: XHTML 1.0 Transitional 。
正確的 HTML 結構
• 選擇正確語意的標籤。
• 用適當的 div 標籤定義結構區塊。
• 不可以有錯誤的嵌套階層結構。
 (http://tinyurl.com/akonjc)

• 除了空標籤 (hr, br, img, input, meta,
  link, …) ,其他都要成對,不論有沒有值
  (div, script, …) 。
• 不要用 frameset 。
• 標籤的 id 在同一頁中只能有唯一的一個。
• 用 W3C Markup Validation Service 驗證。
 (http://validator.w3.org/)
BOX MODEL
• width(content) + padding + border + margin 。
  (http://www.jaceju.net/blog/?p=17)

• padding 會擠壓沒有設定寬度的內容。
• border 也會佔有寬度。
• margin 可以有負值。
POSITION
position 參數
                 absolute      relative              static(預設值)           fixed
/ 參數說明

中文意義             絕對位置          相對位置                  靜態位置                  固定位置
                                                                           不指定:原
                                                                           本應該在的
                                                                           位置
畫面位置參考基 父元素內容
                               原本應該在的位置              不變                    指定:視窗
準       區邊界
                                                                           最大可視範
                                                                           圍邊界 (或框
                                                                           架邊界)

                                                                           視窗最大可
移動參考基準           文件            文件                    文件
                                                                           視範圍

可改變顯示位置 是                      是                     否                     是

                               display 為 block :是    display 為 block :是
可調整大小            是                                                         是
                               display 為 inline :否   display 為 inline :否

從顯示流程中去
        是                      否                     否                     是
除
(http://www.jaceju.net/blog/?p=15)
BLOCK & INLINE
• block 可設定寬高, inline 不能設定。
• 元素有預設的 display 屬性。
 (http://tinyurl.com/akonjc)

• 我們可以用 CSS 改變元素的 display 屬性。
 (http://tinyurl.com/hfqu)

• 小技巧:利用 line-height 來調整 inline 元
  素的單行高度,讓文字可以垂直置中。
FLOAT
• float 可視為特殊的 inline-block 。
 (http://www.jaceju.net/blog/?p=18)

• float 向右浮動時會改變元素呈現順序。
• 利用 float 排版時,要考慮寬度問題。寬度
  太大,其他元素會被排擠。
• 利用 clear: both; 來解除 float 。
範例:固定寬度置中的二欄版型
• 利用 Markup Maker 製作 HTML 頁面。
    (http://tinyurl.com/dhjgwn)

• 透過 #wrapper 將頁面固定寬度並置中。
    (http://www.jaceju.net/blog/?p=20)

    定義 header 與 footer 的高度。
•
    利用 float 對內容區與邊欄區做排版。
•
    利用負邊界來調整邊欄。
•
    處理 IE 的問題。
•
範例:水平目錄
利用清單來製作水平目錄。
•
    去除 ul 預設的樣式。
•
    方法1: 將 li 設為 display: inline; 。
•
    方法2: 將 li 設為 float: left; 。
•
下次進階課程大綱
    Image Replacement (圖片置換)
•
    IE Conditional Comments
•
    Reset CSS
•
    CSS Hack
•
    CSS Sprites
•
    Body ID 的妙用
•
    書籍推薦
•

More Related Content

What's hot

資料庫可以為你做那些事(二)
資料庫可以為你做那些事(二)資料庫可以為你做那些事(二)
資料庫可以為你做那些事(二)Frontier Foundation
 
361 Ch
361 Ch361 Ch
361 Chanjaan
 
碳酸会 图片列表讨论
碳酸会 图片列表讨论碳酸会 图片列表讨论
碳酸会 图片列表讨论碳酸饮料会
 
Bai Giang 5
Bai Giang 5Bai Giang 5
Bai Giang 5nbb3i
 
用Pootle翻譯OLPC專案
用Pootle翻譯OLPC專案用Pootle翻譯OLPC專案
用Pootle翻譯OLPC專案Bob Chao
 
期貨籌碼表0512
期貨籌碼表0512期貨籌碼表0512
期貨籌碼表0512guesta0da80
 
Kiepvesau loi nguyenngocthien
Kiepvesau loi nguyenngocthienKiepvesau loi nguyenngocthien
Kiepvesau loi nguyenngocthienCherry Yêu Quái
 
Ag Portal Gioi Thieu Quy Trinh
Ag Portal   Gioi Thieu Quy TrinhAg Portal   Gioi Thieu Quy Trinh
Ag Portal Gioi Thieu Quy TrinhPham Ngoc Quang
 
第2回PHP懇親会発表資料
第2回PHP懇親会発表資料第2回PHP懇親会発表資料
第2回PHP懇親会発表資料Masahiko Sakamoto
 
376 Ch
376 Ch376 Ch
376 Chanjaan
 
Code Refactoring Javaeye Rails1.X 2.X
Code Refactoring Javaeye Rails1.X 2.XCode Refactoring Javaeye Rails1.X 2.X
Code Refactoring Javaeye Rails1.X 2.Xwear
 
E Learning Implementation Model Comparison
E Learning Implementation Model ComparisonE Learning Implementation Model Comparison
E Learning Implementation Model ComparisonTim Lu
 
Web技術勉強会9回目(Slideshare用)
Web技術勉強会9回目(Slideshare用)Web技術勉強会9回目(Slideshare用)
Web技術勉強会9回目(Slideshare用)龍一 田中
 

What's hot (20)

Life In Whatever 2.0
Life In Whatever 2.0Life In Whatever 2.0
Life In Whatever 2.0
 
資料庫可以為你做那些事(二)
資料庫可以為你做那些事(二)資料庫可以為你做那些事(二)
資料庫可以為你做那些事(二)
 
361 Ch
361 Ch361 Ch
361 Ch
 
碳酸会 图片列表讨论
碳酸会 图片列表讨论碳酸会 图片列表讨论
碳酸会 图片列表讨论
 
Bai Giang 5
Bai Giang 5Bai Giang 5
Bai Giang 5
 
用Pootle翻譯OLPC專案
用Pootle翻譯OLPC專案用Pootle翻譯OLPC專案
用Pootle翻譯OLPC專案
 
just a test
just a testjust a test
just a test
 
期貨籌碼表0512
期貨籌碼表0512期貨籌碼表0512
期貨籌碼表0512
 
MSICC
MSICCMSICC
MSICC
 
Kiepvesau loi nguyenngocthien
Kiepvesau loi nguyenngocthienKiepvesau loi nguyenngocthien
Kiepvesau loi nguyenngocthien
 
Ag Portal Gioi Thieu Quy Trinh
Ag Portal   Gioi Thieu Quy TrinhAg Portal   Gioi Thieu Quy Trinh
Ag Portal Gioi Thieu Quy Trinh
 
第2回PHP懇親会発表資料
第2回PHP懇親会発表資料第2回PHP懇親会発表資料
第2回PHP懇親会発表資料
 
376 Ch
376 Ch376 Ch
376 Ch
 
Code Refactoring Javaeye Rails1.X 2.X
Code Refactoring Javaeye Rails1.X 2.XCode Refactoring Javaeye Rails1.X 2.X
Code Refactoring Javaeye Rails1.X 2.X
 
lectureinfo site for xmu
lectureinfo site for xmulectureinfo site for xmu
lectureinfo site for xmu
 
E Learning Implementation Model Comparison
E Learning Implementation Model ComparisonE Learning Implementation Model Comparison
E Learning Implementation Model Comparison
 
Pseudo Perl
Pseudo PerlPseudo Perl
Pseudo Perl
 
Mac玩家特區X目錄
Mac玩家特區X目錄Mac玩家特區X目錄
Mac玩家特區X目錄
 
Test 134
Test 134Test 134
Test 134
 
Web技術勉強会9回目(Slideshare用)
Web技術勉強会9回目(Slideshare用)Web技術勉強会9回目(Slideshare用)
Web技術勉強会9回目(Slideshare用)
 

More from Jace Ju

What happens in laravel 4 bootstraping
What happens in laravel 4 bootstrapingWhat happens in laravel 4 bootstraping
What happens in laravel 4 bootstrapingJace Ju
 
Advanced php testing in action
Advanced php testing in actionAdvanced php testing in action
Advanced php testing in actionJace Ju
 
Beginning PHPUnit
Beginning PHPUnitBeginning PHPUnit
Beginning PHPUnitJace Ju
 
深入淺出 MVC
深入淺出 MVC深入淺出 MVC
深入淺出 MVCJace Ju
 
如何打造 WebMVC Framework - 基礎概念篇
如何打造 WebMVC Framework - 基礎概念篇如何打造 WebMVC Framework - 基礎概念篇
如何打造 WebMVC Framework - 基礎概念篇Jace Ju
 
Refactoring with Patterns in PHP
Refactoring with Patterns in PHPRefactoring with Patterns in PHP
Refactoring with Patterns in PHPJace Ju
 
Patterns in Library Design (套件設計裡的模式)
Patterns in Library Design (套件設計裡的模式)Patterns in Library Design (套件設計裡的模式)
Patterns in Library Design (套件設計裡的模式)Jace Ju
 
購物車程式架構簡介
購物車程式架構簡介購物車程式架構簡介
購物車程式架構簡介Jace Ju
 
Patterns in Zend Framework
Patterns in Zend FrameworkPatterns in Zend Framework
Patterns in Zend FrameworkJace Ju
 
Head First Zend Framework - Part 1 Project & Application
Head First Zend Framework - Part 1 Project & ApplicationHead First Zend Framework - Part 1 Project & Application
Head First Zend Framework - Part 1 Project & ApplicationJace Ju
 
常見設計模式介紹
常見設計模式介紹常見設計模式介紹
常見設計模式介紹Jace Ju
 
PHPUnit 入門介紹
PHPUnit 入門介紹PHPUnit 入門介紹
PHPUnit 入門介紹Jace Ju
 
jQuery 實戰經驗講座
jQuery 實戰經驗講座jQuery 實戰經驗講座
jQuery 實戰經驗講座Jace Ju
 

More from Jace Ju (13)

What happens in laravel 4 bootstraping
What happens in laravel 4 bootstrapingWhat happens in laravel 4 bootstraping
What happens in laravel 4 bootstraping
 
Advanced php testing in action
Advanced php testing in actionAdvanced php testing in action
Advanced php testing in action
 
Beginning PHPUnit
Beginning PHPUnitBeginning PHPUnit
Beginning PHPUnit
 
深入淺出 MVC
深入淺出 MVC深入淺出 MVC
深入淺出 MVC
 
如何打造 WebMVC Framework - 基礎概念篇
如何打造 WebMVC Framework - 基礎概念篇如何打造 WebMVC Framework - 基礎概念篇
如何打造 WebMVC Framework - 基礎概念篇
 
Refactoring with Patterns in PHP
Refactoring with Patterns in PHPRefactoring with Patterns in PHP
Refactoring with Patterns in PHP
 
Patterns in Library Design (套件設計裡的模式)
Patterns in Library Design (套件設計裡的模式)Patterns in Library Design (套件設計裡的模式)
Patterns in Library Design (套件設計裡的模式)
 
購物車程式架構簡介
購物車程式架構簡介購物車程式架構簡介
購物車程式架構簡介
 
Patterns in Zend Framework
Patterns in Zend FrameworkPatterns in Zend Framework
Patterns in Zend Framework
 
Head First Zend Framework - Part 1 Project & Application
Head First Zend Framework - Part 1 Project & ApplicationHead First Zend Framework - Part 1 Project & Application
Head First Zend Framework - Part 1 Project & Application
 
常見設計模式介紹
常見設計模式介紹常見設計模式介紹
常見設計模式介紹
 
PHPUnit 入門介紹
PHPUnit 入門介紹PHPUnit 入門介紹
PHPUnit 入門介紹
 
jQuery 實戰經驗講座
jQuery 實戰經驗講座jQuery 實戰經驗講座
jQuery 實戰經驗講座
 

CSS 排版 - 基礎觀念篇

  • 1. CSS 排版 - 基礎觀念篇 如何掌握 CSS 排版技巧
  • 2. CSS 排版的優點 有組織的 HTML 結構 • 易於讓搜尋引擎剖析 • 版面容易調整 • 容易套版 • DOM 操作便利 • 不需為不同平台設計不同頁面 •
  • 3. 面臨的挑戰 瀏覽器的不一致性 • 沒有可靠的視覺化編輯器 • 模型難以理解 • 時程的壓力 •
  • 5. • DOCTYPE 會切換瀏覽器的標準模式 (Standards Mode) 、近乎標準模式 (Almost Standards Mode) 與怪癖模式 (Quirks Mode) 。 (http://hsivonen.iki.fi/doctype/) • 標準模式和近乎標準模式差在表格的處理。 • 怪癖模式是為了相容於舊瀏覽器。 • 標準模式和怪癖模式差在 Box Model 的呈 現方式。 • 目前最佳選擇: XHTML 1.0 Transitional 。
  • 7. • 選擇正確語意的標籤。 • 用適當的 div 標籤定義結構區塊。 • 不可以有錯誤的嵌套階層結構。 (http://tinyurl.com/akonjc) • 除了空標籤 (hr, br, img, input, meta, link, …) ,其他都要成對,不論有沒有值 (div, script, …) 。 • 不要用 frameset 。 • 標籤的 id 在同一頁中只能有唯一的一個。 • 用 W3C Markup Validation Service 驗證。 (http://validator.w3.org/)
  • 9. • width(content) + padding + border + margin 。 (http://www.jaceju.net/blog/?p=17) • padding 會擠壓沒有設定寬度的內容。 • border 也會佔有寬度。 • margin 可以有負值。
  • 11. position 參數 absolute relative static(預設值) fixed / 參數說明 中文意義 絕對位置 相對位置 靜態位置 固定位置 不指定:原 本應該在的 位置 畫面位置參考基 父元素內容 原本應該在的位置 不變 指定:視窗 準 區邊界 最大可視範 圍邊界 (或框 架邊界) 視窗最大可 移動參考基準 文件 文件 文件 視範圍 可改變顯示位置 是 是 否 是 display 為 block :是 display 為 block :是 可調整大小 是 是 display 為 inline :否 display 為 inline :否 從顯示流程中去 是 否 否 是 除 (http://www.jaceju.net/blog/?p=15)
  • 13. • block 可設定寬高, inline 不能設定。 • 元素有預設的 display 屬性。 (http://tinyurl.com/akonjc) • 我們可以用 CSS 改變元素的 display 屬性。 (http://tinyurl.com/hfqu) • 小技巧:利用 line-height 來調整 inline 元 素的單行高度,讓文字可以垂直置中。
  • 14. FLOAT
  • 15. • float 可視為特殊的 inline-block 。 (http://www.jaceju.net/blog/?p=18) • float 向右浮動時會改變元素呈現順序。 • 利用 float 排版時,要考慮寬度問題。寬度 太大,其他元素會被排擠。 • 利用 clear: both; 來解除 float 。
  • 17. • 利用 Markup Maker 製作 HTML 頁面。 (http://tinyurl.com/dhjgwn) • 透過 #wrapper 將頁面固定寬度並置中。 (http://www.jaceju.net/blog/?p=20) 定義 header 與 footer 的高度。 • 利用 float 對內容區與邊欄區做排版。 • 利用負邊界來調整邊欄。 • 處理 IE 的問題。 •
  • 19. 利用清單來製作水平目錄。 • 去除 ul 預設的樣式。 • 方法1: 將 li 設為 display: inline; 。 • 方法2: 將 li 設為 float: left; 。 •
  • 20. 下次進階課程大綱 Image Replacement (圖片置換) • IE Conditional Comments • Reset CSS • CSS Hack • CSS Sprites • Body ID 的妙用 • 書籍推薦 •