Vous êtes sur la page 1sur 9

Bn nn kt hp nhng thuc tnh.

V d, thit lp thuc tnh margin cho mt i tng, bn thng vit:


margin-top: 8px; margin-right: 4px; margin-bottom: 8px; margin-left: 4px; margin: 8px 4px 8px 4px;

Bn nht thit phi nh iu ny:Trn Phi Di Tri. y l th t set thuc tnh nhanh, khng ch ca margin m padding cng nh vy.
background-image: url(bk_main.jpg); background-repeat: repeat-x; background-color: #ccccff;

background: #ccccff url(bk_main.jpg) repeat-x;

list-style:none; b du chm u dng; Text-transform: uppercase; i cc ch thnh in hoa Display: inline; cho xut hin theo chiu ngang Background: url(header_bg.pmg) Repreat-x top left; lp theo chiu ngang t pha trn bn tri. Float ch yu dng cn chnh hnh nh sao cho ch s bao quanh hnh nh.
img {float: left;}

p {margin-left: 150px;background: #faf3c7;} img {float: left;}

Khi bn cho tm hnh float sang bn tri v on vn bn c l tri bng vi ln ca tm hnh, th hiu ng bao xung quanh hnh s mt i m thay vo bn c 2 ct song song vi nhau. y l nguyn l c bn nht to ra giao din c nhiu ct s dng float. Lun i chung vi Float l Clear. Clear thc cht ch l mt tnh nng chng khng cho on vn di trn ln trn lp vo ch trng. chng ta s thm mt th div trng vo di on vn th nht.
<div id='bao_quanh'> <img src="images/ball.png" alt="ball" /> <h3>Clear v Float</h3> <p><!--Ni dung b ct ngn --></p> <div class="clear"></div><!-- Th div trng vi class="clear"--> <img src="images/ball.png" alt="ball" /> <p><!--Ni dung b ct ngn --></p> </div><!--End #bao_quanh-->

Sau trong CSS, bn ch vic thm on code sau: .clear {clear: both;}

S dng clearfix
Bn copy on code sau v cho vo stylesheet 1 .clearfix:after { 1

2 visibility: hidden; 3 display: block; 4 font-size: 0; 5 content: " "; clear: both; 6 height: 0; 7 } 8 * html .clearfix { zoom: 1; } /* IE6 */ 9 *:first-child+html .clearfix { zoom: 1; } /* IE7 */ 10 By gi nu bn mun clear n th bn khng phi to mt th div trng na m ch vic khai bo class=clearfix vo th m cha cc thnh phn float. Trong v d trn bn thm vo phn sau
<div id="bao_quanh" class="clearfix">

Vi cch ny bn khng cn phi thm mt th div na m vn hin ngon lnh. Cho n by gi cch ny cng rt ph bin v n hin th tt trn mi trnh duyt.

Thuc tnh outline nh dng cc ng vin bao ngoi. (outline: gi tr;) Vi gi tr nh sau:

H1 { Colour: white; Font-size:1.8em; Font-family: tahoma, arial, sans-serif; lun kt thc l sans-serif Font-weight: normal; b in m mc nh ca h1 Text-align: center; } #header div#logo ul#small-nav li a { Border-right: 1px solid white; Padding-right: 5px; } #header div#logo ul#small-nav li: last-child a { Border: none; 3

}b gch ca border bn phi cui cng Margin: Padding A { Text-decoration: none;} A:hover { text-decoration: underline; } khi hover chut qua s c ng k bn di link Menu: <div id=header> <div id=navbar> <ul class=mainNav> <li><a href=#> Homepage</a></li> <ul><li><a href=#>Theme</a></li></ul> </ul> </div> </div> Kiu truyn id, class vo th div v css #header div#navbar ul.mainnav li { Float: left; Position: relative; } #header div#navbar ul.mainnav li a{ display:block; color: white; margin: 0px 0px; font-size:1.2em; } #header div#navbar Li ul{ positon: absolute; display: none; background:} div#navbar ul. mainnav Li ul li{ Width: 100%; Border-bottom: 1px dotted white; } #header div#navbar ul. mainnav Li:hover ul { Display:block; } Style cho th < input id=search-field type= name= value=search this site/> < input class=button type=submit name=submit /> Input#searche-field{ Width: 120px; Margin: 5px 0px; } .button{ Background: #007eff; Color: while; border: 1px solid #b4b5b0; padding: 3px; Cursor: pointer; hin hnh du tay khi a chut qua} .buttom: hover{ 4

Background: #ff6600; } Absolute Position trong Relative Position v d di y ti s dng Absolute Position nh v 3 th div nm trong th div ln l #wrapper.
<div id="wrapper"> <div id="left">&nbsp;</div> <div id="middle">&nbsp;</div> <div id="right">&nbsp;</div> </div>

Vi Absolute Position bn c th s dng cc gi tr: px, em v % v vi cc v tr: top, right, bottom v left. Tuy nhin trong thc t bn ch cn 2 gi tr l top v left (hoc right) th cng nh v mt thnh phn ri. Margin-top...

v d trn th div#wrapper c position: relative, n s ng vai tr lm thnh phn bao quanh cho 3 th div c position: absolute nm bn trong n. Nu ta b gi tr position: 5

relative th div#wrapper i th 3 th div trong s nh hu lc m v chy ton lon ht. Uhm! thc ra cng khng ton lon m n s nhn body lm m nui v nh v theo b m mi ny. Chnh v th iu quan trng nht trong khi s dng Absolute Position l xc nh thnh phn bao quanh v t position ca n thnh relative Block v Inline Khi cc thnh phn HTML c hin th trn trnh duyt n thng c 2 cch hin th l theo Block v Inline. Ni hnh tng bn d hiu th cc thnh phn Block ging nh mt bn c v cc thnh phn Inline l qun c. Cc qun c nm trong bn c v bn c th khng bao gi nm trong qun c. V d v Block Th <p> v <div> l hai thnh phn mc nh Block ph bin nht. Ch khi bn khai bo trong CSS v mun bin n thnh inline vi Property l Display: inline th n mi thnh inline. V d ti c mt th <div> nh sau: Bn s thy dng ch ny chim ht rng ca thnh phn m cha n v t ng xung hng mi Nu ti vit tip th dng mi s b y xung di d cho n c vit cng hng vi dng trn nm trong th <div> S khc bit gia thnh phn Inline v Block nh sau

Block Elements nh l: on vn bn, heading, danh sch c xp chng ln nhau khi hin th trn trnh duyt. Inline Elements l nhng thnh phn nh <a>, <span> v <img> c xp cnh nhau khi hin th trn trnh duyt. V n ch xung dng khi khng cn ch trng.

Display Property
Ci hay ca CSS l bn khng ch b p buc s dng gi tr mc nh ca tng thnh phn. M bn c th thay i cch hin th ca n theo mnh, chng ta c th bin Block Element thnh Inline Element v ngc li. V d mt thnh phn <li> theo mc nh l dng Inline nhng bn c th bin n thnh block vi CSS tng ng l Display: block. 1 p {display:inline;} 2 a {display:block}

y chnh l mt phn rt quan trng trong thit k giao din. N m ra mt chn tri mi vi cc cch sp xp thnh phn m ch b gii hn bng kh nng thit k ca bn. cho php bn bt mt thnh phn Inline phi lp y hp cha n, v rt hu dng khi bn to menu drop vi CSS. Mt gi tr na ca Display cng c s dng ph bin l none. Khi mt thnh phn no c gn gi tr none, th thnh phn v bt c ci g nm trong n s b bin mt khi trnh duyt, k c khong khng m n l ra phi chim nu c hin th cng b bin mt nh cha bao gi tng tn ti. Tnh nng ny c im khc vi Visibility Property vi hai gi tr l visible v hidden. Khi mt thnh phn c gn gi tr l hidden, n ch b n i v khng hin ra trn trnh duyt. Nhng khong khng n chim vn cn v khng b mt. 13.1. Thuc tnh float: Float (theo nh ngha ting Vit l th tri) l mt thuc tnh CSS dng c nh mt thnh phn web v bn tri hay bn phi khng gian bao quanh n. y l mt thuc tnh rt cn thit khi dn trang (nh to cc trang web 2 column layout hay 3 column layout), hin th vn bn thnh, hay thc hin vic nh v tr nh v text (nh mt s kiu text wrapping ca MS Word). r hn chng ta hy xem hnh minh ha sau v c ch hot ng ca float: Thuc tnh float c 3 gi tr: + Left: C nh phn t v bn tri. + Right: C nh phn t v bn phi. + None: Bnh thng. Nhn vo hnh minh ha trn chng ta thy l ban u trong box ln c hai thnh phn l Box B v phn Content. Lc u Box B nm bn trn v Content nm bn di, nhng khi chng ta t thuc tnh float cho Box B th Box B b c nh v bn tri v cha li khong trng bn tri n. Cn phn Content th vn nm bn di s t ng trn ln lp y khong trng do Box B to ra. v d sau, chng ta s thc hin float nh logo sang tri phn ni dung bn di trn ln nm cnh logo. #logo { float:left; 7

} Mt v d khc l chng ta s th dng float chia 2 ct vn bn. .column1, .column2 { width:45%; float:left; text-align:justify; padding:0 20px; } .column1 { border-right:1px solid #000 } 13.2. Thuc tnh clear: i cng vi thuc tnh float, trong CSS cn c mt thuc tnh l clear. Thuc tnh clear l mt thuc tnh thng c gn vo cc phn t lin quan ti phn t c float quyt nh hng x s ca phn t ny. v d trn, khi chng ta float tm nh qua tri th mc nhin vn bn s c trn ln lp vo ch trng. Nhng khi chng ta t vo vn bn thuc tnh clear th chng ta c quyn quyt nh xem phn vn bn c c trn ln hay khng. Thuc tnh clear c tt c 4 thuc tnh: left (trn bn tri), right (trn bn phi), both (khng trn) v none. Th dng thuc tnh clear vi cc gi tr khc nhau i vi on vn bn trong v d float nh logo trn. Trong CSS, box model (m hnh hp) m t cch m CSS nh dng khi khng gian bao quanh mt thnh phn. N bao gm padding (vng m), border (vin) v margin (canh l) v cc ty chn. Hnh bn di m t cu trc minh ha m hnh hp cho mt thnh phn web. Vi v d trn chng ta s khi qut c m hnh hp nh sau: