Stylin with CSS a Designer s Guide 2/e
Chapter 位元素04 定放棄在網頁版面中使用表格, 是 Web 標準的關鍵之一 其實表格使用的目的不在此, 它應該是用來顯示格狀資料, 就如同 Excel 的工作表一樣 不過, 在 CSS 發展以前, 我們習慣用表格來建立一個有格狀的網頁, 讓元素有組織的排列在上, 而且使用一些像間隔圖片 (spacer GIF) 斷行控制(line break), 以及不斷行空格 (non-breaking space) 等難看的外觀技巧在標記上, 以達成想要的版面 使用 CSS 後, 不需要在標記上增加外觀元素, 就可以精確的定位 XHTML 元素 善加應用 CSS 的屬性, 如邊界 (margin) 邊距(padding), 以及邊框 (border) 等, 以及 CSS 的技巧, 如浮動 (floating) 和清除 (clearing) 等, 便可以達到和以前相同甚至更好的結果 如此可保持標籤的精簡和結構的乾淨, 而且也可以將樣式表分享給類似的元素使用 這個可以讓整個網頁的標籤既簡單又容易閱讀
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 http://www.w3.org/tr/reccss2/box.html 100
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 101 04
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;} 4.4 4.3 4.4 box box ( ) ( ) 2pixel 102
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) ( ) 103 04
CSS Web bottom left top right top righ 0 0 {border:0 0 2px 4px;} Box box box box 4.5 4.5 (table cell padding) CSS Box ( ) 4.6 0 104
{margin:0; padding:0;} 0 left right pixel (navigation sidebar) top bottom em p {font-size:1em; margin:.75em 30px;} body pixel left right 5 4.6 105 04
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(50 + 30) 50pixels top bottom top 50 pixels( 4.7) (collapsing) 4.7 106
top bottom Box box CSS box box width box( box) p {width:400px;} box p {width:400px; background-color:#eee;} 4.8 400pixels 4.8 width body 107 04
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(6+20+400+20+6 = 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
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 109 04
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
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 111 04
CSS Web box CSS (floating) (clearing) float clear clear float img {float:left; margin:0 4px 4px 0;} ( 4.15) div div CSS 112
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;} 4.6 113 04
CSS Web ( CSS ) div container( ) 5 float clear ( ) 4.17 4.16 4.7 float Eric Meyer Cascading Style Sheets 2.0 Programmer s Reference (2001, McGraw-Hill Osborne Media) Eric ( ) CSS CSS 114
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;} 115 04
CSS Web CSS ( ) ( 4.18) 4. 8 ( ) CSS Aslett CSS CSS position clear both div ( ) left both right clear 116
Aslett 的清除方法 Aslett Tony Aslett (www.csscreator.com) 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 ( ) 117 04
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 1 2 4 static 3 property 3 specialpara ( ) position Static static ( 4.19) 4.9 position static 118
static static box position Relative 3 relative top left bottom right top left p#specialpara {position:relative; top:30px; left:20px;} 4.20 4.20 relative left right top 30pixels 20pixels static 4.19 30pixels margin-top 4 3 119 04
CSS Web Absolute absolute static relative relative absolute p#specialpara {position:absolute; top:30px; left:20px;} 4.21 4.2 absolute body 4.21 3 body (positioning context) body 4.21 top left top relative body body bod top left body 120
body 4 (fixed) Fixed ( ) 4.22 4.23 frameset IE7 position:fixed IE6(IDWIMIE) TagSoup.com (http://devnull.tagsoup.com/ fixed) IE6 4.22 4.23 121 04
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
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 123 04
CSS Web top div 50pixels 40pixels div position absolute body ( div) top left body 4.25 4.25 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 block inline Block nline a span img block inline p {display:inline;} a {display:block} CSS 125 04
CSS Web display none display none ( visibility visible hidden visibility hidden ) none block display JavaScript position display 2007 CSS icyou.com Benefitfocus.com 4.27 4.27 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. 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;} 4.28 127 04
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.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
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 129 04
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 www.xs4all.nl/~peterned/hovercraft.html CSS body {font:1em verdana, arial, sans-serif; behavior:url(css/ csshover.htc);} URL css csshover.htc URL 130
csshover.htc IE div position display CSS ccsshover.htc Stylin' Stylib CSS JavaScript 131 04