Chapter 位元素04 定放棄在網頁版面中使用表格, 是 Web 標準的關鍵之一其實表格使用的目的不在此, 它應該是用來顯示格狀資料, 就如同 Excel 的工作表一樣不過, 在 CSS 發展以前, 我們習慣用表格來建立一個有格狀的網頁, 讓元素有組織的排列在上, 而且使用一些像間隔圖片 (

Size: px

Start display at page:

Download "Chapter 位元素04 定放棄在網頁版面中使用表格, 是 Web 標準的關鍵之一其實表格使用的目的不在此, 它應該是用來顯示格狀資料, 就如同 Excel 的工作表一樣不過, 在 CSS 發展以前, 我們習慣用表格來建立一個有格狀的網頁, 讓元素有組織的排列在上, 而且使用一些像間隔圖片 ("

岛庄
6 years ago
Views:

1 Stylin with CSS a Designer s Guide 2/e

2 Chapter 位元素04 定放棄在網頁版面中使用表格, 是 Web 標準的關鍵之一其實表格使用的目的不在此, 它應該是用來顯示格狀資料, 就如同 Excel 的工作表一樣不過, 在 CSS 發展以前, 我們習慣用表格來建立一個有格狀的網頁, 讓元素有組織的排列在上, 而且使用一些像間隔圖片 (spacer GIF) 斷行控制(line break), 以及不斷行空格 (non-breaking space) 等難看的外觀技巧在標記上, 以達成想要的版面使用 CSS 後, 不需要在標記上增加外觀元素, 就可以精確的定位 XHTML 元素善加應用 CSS 的屬性, 如邊界 (margin) 邊距(padding), 以及邊框 (border) 等, 以及 CSS 的技巧, 如浮動 (floating) 和清除 (clearing) 等, 便可以達到和以前相同甚至更好的結果如此可保持標籤的精簡和結構的乾淨, 而且也可以將樣式表分享給類似的元素使用這個可以讓整個網頁的標籤既簡單又容易閱讀

3 CSS Web box position display Box Position display box box XHTML box box box box box CSS ( 4.1) 4. ( ) box XHTML box box box ( 4.2) box 100

4 CSS 4.2 box XHTML box XHTML CSS CSS box (Border) (Margin) box (Padding) box box 4 top right bottom left Box Border Width thin medium thick (ems px % ) thin medium thick CSS solid CSS

warning {border:4px solid #F33; padding:2px} warning 4 pixel 4.3 border border border-width p.

5 CSS Web Style none hidden dotted dashed solid double groove ridge inset outset Color ( RGB hex ) box p.warning {border-width:4px} p.warning {border-style:solid} p.warning {border-color:#f33;} border p.warning {border:4px solid #F33; padding:2px} warning 4 pixel 4.3 border border border-width p.warning {border:solid #F33; padding:2px;} p.warning {border-width:4px 2px 2px 4px;} box box ( ) ( ) 2pixel 102

6 box margin padding box medium none black none box box p {border:solid;} box box box box 樣式的簡寫 CSS (top) (right) (bottom) (left) TRouBLe 1 12 {margin-top:5px; margin-right:10px; margin-bottom:12px; marginleft:8px;} {margin:5px 10px 12px 8px;} {margin:12px 10px 6px;} left left right 10px {margin:12px 10px;} top right bottom left 12px 10px {margin:12px;} 1 (Trouble) ( )

7 CSS Web bottom left top right top righ 0 0 {border:0 0 2px 4px;} Box box box box (table cell padding) CSS Box ( )

8 {margin:0; padding:0;} 0 left right pixel (navigation sidebar) top bottom em p {font-size:1em; margin:.75em 30px;} body pixel left right

9 CSS Web (collapsing) p {width:400px; height:50px; border:1px solid #000; margin-top:50px; margin-bottom:30px; background-color:#ccc;} bottom top 80 pixels( ) 50pixels top bottom top 50 pixels( 4.7) (collapsing)

10 top bottom Box box CSS box box width box( box) p {width:400px;} box p {width:400px; background-color:#eee;} pixels 4.8 width body

9 box box 6pixels right left p {width:400px; margin: 0; padding:0 20px; border:#000 solid; border-width: 0 6px 0 6px;

11 CSS Web box 20pixels p {width:400px; background-color:#eee; padding:0 20px;} 400pixels box 40pixels 360pixels box 40pixels( 4.9) 4.9 box box 6pixels right left p {width:400px; margin: 0; padding:0 20px; border:#000 solid; border-width: 0 6px 0 6px; background-color:#ccc;} box 12pixels ( 4.10) 400pixels box 452pixels( = 452) 4.0 box right left ( 4.11) p {width:400px; margin: 0 30px; padding:0 20px; border:#000 solid; border-width: 0 6px 0 6px; background-color:#ccc;} 108

12 4. 30pixels box box box (floated layouts) div ( ) ( ) 170pixels div <div id="column"> <h4>an h4 heading</h4> <p>the heading and this...</p> </div> div CSS div#column {width:170px;} box #1 box ( ) box width box box

13 CSS Web CSS ( 4.12) auto ( ) 4.2 box ( ) 4. 3 b o x box b o x 90pixels div div ( 4.13) div#column {width:170px; padding:10px;} 10pixels 190pixels div 170pixels box (10+10=20 pixels) 150pixels box #2 ( ) 110

$..</p> </div> div div#column {width:170px; padding:10px;} div#inner_column {padding:10px;} ( 4.14) 4.$

14 div div <div id="column"> </div> <div id="column_inner"> <h4>an h4 heading</h4> <p>the heading and this...</p> </div> div div#column {width:170px; padding:10px;} div#inner_column {padding:10px;} ( 4.14) 4.4 div div div box #2 div

15 CSS Web box CSS (floating) (clearing) float clear clear float img {float:left; margin:0 4px 4px 0;} ( 4.15) div div CSS 112

16 4.5 <img /> <p> the paragraph text </p> ( body) (float:right ) ( 4.15 ) ( 4.16) p {float:left; width:200px; margin:0;} img {float:left; margin:0 4px 4px 0;}

CSS Web ( CSS ) div container( ) 5 float clear ( ) 4.17 4.16 4.

17 CSS Web ( CSS ) div container( ) 5 float clear ( ) float Eric Meyer Cascading Style Sheets 2.0 Programmer s Reference (2001, McGraw-Hill Osborne Media) Eric ( ) CSS CSS 114

18 XHTML ( ) <img src="../images/dartmoor-view.jpg" /> <p> Here's a lovely picture of Dartmoor... </p> <img src="../images/english-cottage.jpg" /> <p> My sister lived in this delightful cottage... </p> <img src="../images/winsor-castle_walls.jpg" /> <p> The Queen of England...</p> CSS p {margin:0 0 10px 0;} img {float:left; margin:0 4px 4px 0;} 4.17 clear (non-floated element) div <img src="../images/dartmoor-view.jpg" /> <p> Here's a lovely picture of Dartmoor... </p> <img src="../images/english-cottage.jpg" /> <p> My sister lived in this delightful cottage... </p> <div class="clearthefloats"></div> <img src="../images/winsor-castle_walls.jpg" /> <p> The Queen of England...</p> CSS p {margin:0 0 10px 0;} img {fl oat:left; margin:0 4px 4px 0;}.clearthefloats {clear:both;}

19 CSS Web CSS ( ) ( 4.18) 4. 8 ( ) CSS Aslett CSS CSS position clear both div ( ) left both right clear 116

20 Aslett 的清除方法 Aslett Tony Aslett ( div CSS:after (.clearfix:after { content:. ; display: block; height: 0; clear: both; visibility: hidden; }.clearfix {display: inline-table;} /* backslash hack hides from IE mac \*/ * html.clearfi x {height: 1%;}.clearfi x {display: block;} /* end backslash hack */ ( text_n_colors.css ) clearfix <div class="clearfix"> 1. ( 5 ) clearfix div div div 2. div (wrapper) clearfix ( )

21 CSS Web div IE6 div IE6 Aslett Position Is Everything (www. positioniseverything.net/easyclearing.html) CSS position Position box Position static absolute fixed relative static static 3 property 3 specialpara ( ) position Static static ( 4.19) 4.9 position static 118

22 static static box position Relative 3 relative top left bottom right top left p#specialpara {position:relative; top:30px; left:20px;} relative left right top 30pixels 20pixels static pixels margin-top

CSS Web Absolute absolute static relative relative absolute p#specialpara {position:absolute; top:30px; left:20px;} 4.

23 CSS Web Absolute absolute static relative relative absolute p#specialpara {position:absolute; top:30px; left:20px;} absolute body body (positioning context) body 4.21 top left top relative body body bod top left body 120

24 body 4 (fixed) Fixed ( ) frameset IE7 position:fixed IE6(IDWIMIE) TagSoup.com ( fixed) IE

25 CSS Web (Contextual Positioning) top left right bottom Absolute body body position relative <body> <div id="outer">the outer div <div id="inner">this is some text...</div> </div> </body> CSS div#outer_div {width:250px; margin:50px 40px; border-top:3px solid red;} div#inner_div {top:10px; left:20px; background:#aaa;} 122

$position absolute div#outer_div {width:250px; margin:50px 40px; border-top:3px solid red;} div#inner_div {position:absolute; top:10px; left:20px; background:#aaa;} body div$

26 4.24 div top (#AAA) div div (static) top left div(inner div) 10pixels 20pixels div(outer div) (top-left) div static div relative absolute fixed top left right bottom div position absolute div#outer_div {width:250px; margin:50px 40px; border-top:3px solid red;} div#inner_div {position:absolute; top:10px; left:20px; background:#aaa;} body div

CSS Web top div 50pixels 40pixels div position absolute body ( div) top left body 4.25 4.

27 CSS Web top div 50pixels 40pixels div position absolute body ( div) top left body div( ) div( top ) relative body div position relative div( ) div 4.26 div top left div div div left top 0 div div( ) static CSS position static 124

4. 2 6 d i v relative top left display position position display display block inline display

28 d i v relative top left display position position display display block inline display block inline Block nline a span img block inline p {display:inline;} a {display:block} CSS

29 CSS Web display none display none ( visibility visible hidden visibility hidden ) none block display JavaScript position display 2007 CSS icyou.com Benefitfocus.com icyou.com 126

<div class="video_selection"> <a href="#"><img src="../images/23_diabetes_testimonial- 1.jpg" alt="blood pressure video" /></a> <p> Bobby is a #2 Diabetic who weighed 274 pounds.

30 <div class="video_selection"> <a href="#"><img src="../images/23_diabetes_testimonial- 1.jpg" alt="blood pressure video" /></a> <p> Bobby is a #2 Diabetic who weighed 274 pounds. After a change in diet he is no longer on medication. Runtime: 46 sec.</p> <h2><a href="#">living with Diabetes; Bobby's story</a></h2> </div> 4.28 ( 4.29) div {width:92px; border:2px solid #069; padding:5px;} h2, p {font-size:.7em; font-family:arial, sans-serif; margin:0;} p {width:80px; border:1px solid gray; padding:.3em; background-color:#ffd;}

CSS Web 4.29 div ( div ) div 106pixels(92 + 2 + 2 + 5 + 5 = 106) h2 paragraph p box p absolute p div relative p( ) div p ( 4.

31 CSS Web 4.29 div ( div ) div 106pixels( = 106) h2 paragraph p box p absolute p div relative p( ) div p ( 4.30) div {position:relative; width:92px; border:2px solid #069; padding:5px;} h2, p {font-size:.7em; font-family:arial, sans-serif;} p {position:absolute; left:96px; top:15px; width:80px; border:1px solid gray; padding:.3em; background-color:#ffd;} TechSmith's Snag-It 128

32 4.30 p( ) left top ( p) div :hover ( 4.31A B) div {position:relative; width:92px; border:2px solid #069; padding:5px;} h2, p {font-size:.7em; font-family:arial, sans-serif; margin:0;} p {position:absolute; display:none; width:80px; left:96px; top:15px; border:1px solid gray; padding:.3em; backgroundcolor:# FFD;} div:hover p, p:hover {display:block;} 4.3A 4.3B :hover div

33 CSS Web p display none p div ( p div p ) p div p CSS IDWIMIE IE6 a( ) :hover csshover.htc JavaScript IE IE ( Internet Explorer 6 ) body {behavior:url(csshover.htc);} csshover.htc XHTML JavaScript JavaScript Internet Explorer 6 反應滑鼠移過的行為 CSS2 :hover hover div div div#respond {background-color:blue;} div#respond:hover {background-color:red;} CSS IE6 a Peter Nederlof IE csshover.htc CSS body {font:1em verdana, arial, sans-serif; behavior:url(css/ csshover.htc);} URL css csshover.htc URL 130

34 csshover.htc IE div position display CSS ccsshover.htc Stylin' Stylib CSS JavaScript

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05