BàiGiảngMônThiếtKếWeb Phần3:NgônNgữĐịnhDạngCSS Biênsọan:DươngThànhPhết Trang70 2.Nhậndạngphầntửvớiid: CũngvớiđoạnHTMLnhưvídụvềclass.NhưngyêucầuđặtralàHàNộisẽcómàuđỏ sậm,TP.HồChíMinhmàuđỏ,ĐàNẵngmàuđỏtươicòncáctỉnhmàuxanhdatrời. ĐểgiảiquyếtvấnđềnàychúngtasẽsửdụngthuộctínhHTMLlàidđểnhậndạngmỗi thànhphốvàdùngclassđểnhómcáctỉnh.ĐoạnHTMLcủachúngtabâygiờsẽlà: <p>DanhSáchCácTỉnh,ThànhPhốCủaViệtNam</p> <ul> <liid=”hanoi”>HàN ội</li> <liid=”hcmc”>TP.H ồChíMinh</li> <liid=”danang”> ĐàNẵng</li> <liclass=”tinh”>Th ừaThiênHuế</li> <liclass=”tinh”>KhánhHòa</li> <liclass=”tinh”>QuãngNinh</li> <liclass=”tinh”>Ti ềnGiang</li> </ul> VàđoạnCSScầndùngsẽlà: #hanoi{color:#790000} #hcmc{color:#FF0000} #danang{color:#FF00FF} .tinh{color:#0000FF} 3.Nhómphầntửvớithẻ<span> Thẻ<span>trongHTMLlàmộtthẻtrunghòa,nókhôngthêmhaybớtbấtcứmộtthứgì vàomộttàiliệuHTML.Nhưngchínhnhờtínhchấttrunghòanàymànólạilàmộtcôngcụđánh dấutuyệtvờiđểquađóchúngtacóthểviếtCSSđịnhdạngchocácphầntửmongmuốn. Vídụ:ChúngtacóđoạnHTMLsautríchdẫncâunóicủachủtịchHồChíMinh <p>Khôngcógìquýhơnđộclập,tựdo.</p> YêucầuởđâylàchúngtahãydùngCSStôđậm2từđộclập,tựdo.Đểgiảiquyếtvấnđề này,chúngtasẽthêmthẻ<span>vàođoạnHTMLnhưsau: <p>Khôngcógìquýhơn<spanclass=”nhanmanh”>độclập</span>, <spanclass=”nhanmanh”>tựdo</span>. VàbâygiờchúngtacóthểviếtCSSchoyêucầutrên: .nhanmanh{font-weight:bold} 4.Nhómkhốiphầntửvớithẻ<div> Cũngnhư<span>,<div>cũnglàmộtthẻtrunghòavàđượcthêmvàotàiliệuHTMLvới mụcđínhnhómcácphầntửlạichomụcđíchđịnhdạngbằngCSS.Tuynhiên,điểmkhácbiệtlà <span>dùngđểnhómmộtkhốiphầntửtrongkhiđó<div>cóthểnhómmộthoặcnhiềukhối phầntử. Trởlạivídụvềdanhsáchtỉnh,thànhtrongphầnclassbàitrướcchúngtasẽgiảiquyết vấnđềbằngcáchnhómcácphầntửvới<div>nhưsau: <html> <head><title>Vídụ</title> <linkrel="stylesheet"type="text/css"href="div.css"/> </head> This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb Phần3:NgônNgữĐịnhDạngCSS Biênsọan:DươngThànhPhết Trang71 <body> <p>DanhSáchCácT ỉnh,ThànhPhốCủaViệtNam</p> <ul><divid="tp"> <li>HàN ội</li> <li>TP.H ồChíMinh</li> <li> ĐàNẵng</li> </div> <divid="tinh"> <li>Th ừaThiênHuế</li> <li>KhánhHòa</li> <li>QuãngNinh</li> <li>Ti ềnGiang</li> </div> </ul> </body> </html> VàđoạnCSSchomụcđíchnàysẽlà: #tp{color:#FF0000} #tinh{color:0000FF} V.BOXMODEL TrongCSS,boxmodel(môhìnhhộp)môtảcáchmàCSSđịnhdạngkhốikhônggianbao quanhmộtthànhphần.Nóbaogồmpadding(vùngđệm),border(viền)vàmargin(canhlề)và cáctùychọn.Hìnhbêndướimôtảcấutrúcminhhọamôhìnhhộpchomộtthànhphầnweb. Môhìnhhộptrênchỉlàmộtmôhìnhlýthuyếtlýtưởng.Bêndướiđâychúngtasẽxétmô hìnhhộpcủamộtđốitượngwebcụthể: Vídụ:ChúngtacómộtđoạnHTMLsau <p>TrongCSS,boxmodel(môhìnhhộp)môtảcáchmàCSSđịnhdạngkhốikhônggian baoquanhmộtthànhphần.</p> PhầnCSSchođoạnHTMLtrên: p{width:200px;margin:30px20px;padding:20px10px;border:1pxsolid#000;text-align:justify} Vớivídụtrênchúngtasẽkháiquátđượcmôhìnhhộpnhưsau: This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb Phần3:NgônNgữĐịnhDạngCSS Biênsọan:DươngThànhPhết Trang72 VI.MARGIN&PADDING 1.Thuộctínhmargin: ThuộctínhmargintrongCSScũngđượcdùngđểcanhlềchocảtrangwebhaymộtthành phầnwebnàyvớicácthànhphầnwebkháchayvớiviềntrang.Vídụsausẽchỉchochúngta biếtcáchcanhlềchomộttrangweb. body{margin-top:80px;margin-bottom:40px;margin-left:50px;margin-right:30px; border:1pxdotted#FF0000} Hoặcgọnhơnchúngtasẽviếtnhưsau: body{margin:80px30px40px50px;border:1pxdotted#FF0000} Cúphápnhưsau: margin:<margin-top>|<margin-right>|<margin-bottom>|<margin-left> Hoặc: margin:<value1>|<value2> vớivalue1làgiátrịmargin-topvàmargin-bottomvàvalue2làgiátrịmargin-leftvàmargin-right. Kếtquảcủavídụtrênsẽđượcmôhìnhhóanhưsau: Vídụkếtiếpsẽthểhiệnrõhơnvềviệcdùngmarginđểcanhlềchocácđốitượngtrong trangweb.Cácbạnhãyquansátcácđườngviềnvànhậnxét. body{margin:80px30px40px50px;border:1pxsolid#FF0000} #box1{margin:50px30px20px40px;border:1pxsolid#00FF00} #box2{margin:50px30px20px40px;border:1pxsolid#0000FF} 2.Thuộctínhpadding Paddingcóthểhiểunhưlàmộtthuộctínhđệm.Paddingkhôngảnhhưởngtớikhoảng cácgiữacáccácđốitượngnhưmarginmànóchỉquyđịnhkhoảngcáchgiữaphầnnộidungvà viềncủamộtđốitượng(xemlạiảnhminhhọavềboxmodel). Cúpháp:Tươngtựmargin. Padding:<padding-top>|<padding-right>|<padding-bottom>|<padding-left> Thựchiệnlạivídụnhưngthaymarginbằngpadding,vàquansátvịtríđườngviền. This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb Phần3:NgônNgữĐịnhDạngCSS Biênsọan:DươngThànhPhết Trang73 VII.KHUNGVIỀN-BORDER Borderlàmộtthànhphầnquantrọngtrongmộttrangweb.Nóthườngđượcdùngtrong trangtrí,đóngkhungchomộtđốitượngcầnnhấnmạnh,phâncáchcácđốitượnggiúptrang webtrôngdễnhìnhơn,…. 1.Thuộctínhborder-width Border-widthlàmộtthuộctínhCSSquyđịnhđộrộngchoviềncủamộtđốitượngweb. Thuộctínhnàycócácgiátrị:thin(mảnh),medium(vừa),thick(dày),haylàmộtgiátrịđocụthể nhưpixels. 2.Thuộctínhborder-color Border-colorlàthuộctínhCSSquyđịnhmàuviềnchomộtđốitượngweb.Thuộctínhnày nhậntấtcảđơnvịmàuCSShỗtrợ. 3.Thuộctínhborder-style Border-stylelàthuộctínhCSSquyđịnhkiểuviềnthểhiệncủamộtđốitượngweb.CSS cungcấptấtcả8kiểuviềntươngứngvới8giátrị:dotted,dashed,solid,double,groove,ridge, insetvàoutset.Đểhiểurõhơn,chúngtahãyxemhìnhminhhọadướiđây. Vídụsausẽđịnhviềncho3thànhphầnh1,h2,pnhưsau: h1{border-width:thin;border-color:#FF0000;border-style:solid} h2{border-width:thick;border-color:#CCC;border-style:dotted} p{border-width:5px;border-color:#FF00FF;border-style:double} Ngoàira,chúngtacũngcóthểdùngriêngcácthuộctínhborder-top,border-right,border- bottomhayborder-leftđểchỉđịnhviềnriêngchocácđốitượng. Vídụ: h1{ border-top-width:thin;border-top-color:#FF0000;border-top-style:solid; border-right-width:thick;border-right-color:#AFAFAF;border-right-style:dotted; border-bottom-width:2px;border-bottom-color:blue;border-bottom-style:double; border-left-width:5px;border-left-color:violet;border-left-style:groove} ThuộctínhborderrútgọnsửdụngcấutrúcrútgọncủaCSSnhưsau: Border:<border-width>|<border-color>|<border-style> VIII.HEIGHT&WIDTH 1.Thuộctínhwidth: WidthlàmộtthuộctínhCSSdùngđểquyđịnhchiềurộngchomộtthànhphầnweb.Vídụ sauchúngtasẽđịnhchiềurộngchothànhphầnpcủamộttrangweb. p{width:700px;} 2.Thuộctínhmax-width: Max-widthlàthuộctínhCSSdùngđểquyđịnhchiềurộngtốiđachomộtthànhphầnweb. 3.Thuộctínhmin-width: Min-widthlàthuộctínhCSSdùngđểquyđịnhchiềurộngtốithiểucho1thànhphầnweb. This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb Phần3:NgônNgữĐịnhDạngCSS Biênsọan:DươngThànhPhết Trang74 4.Thuộctínhheight: HeightlàmộtthuộctínhCSSdùngđểquyđịnhchiềucaochomộtthànhphầnweb. Vídụsauchúngtasẽđịnhchiềucaochothànhphầnpcủamộttrangweb. p{height:300px} 5.Thuộctínhmax-height: Max-heightlàthuộctínhCSSdùngđểquyđịnhchiềucaotốiđachomộtthànhphầnweb. 6.Thuộctínhmin-height: Min-heightlàthuộctínhCSSdùngđểquyđịnhchiềucaotốithiểucho1thànhphầnweb. Lưuý:Thôngthườngchiềucaomộtthànhphầnwebdovănbảntrongtrangwebđóquyết định.Việcđịnhchiềucaochínhxácchomộtthànhphầnsẽtạothanhcuộnvănbảnnếuchiều cao văn bản lớn hơn chiều cao đã định. Các thuộc tính max/min-width/height được sử dụng trongnhữngtrườnghợpbạnkhôngchắcgiátrịchínhxácchowidth,heightcảmộtthànhphần. Vídụ,bạnvùngchứabàipostcủamộtforumcóbềngang500px,bạncóthểđịnhmax- width:500pxchophầnhìnhảnhtrongphầnđóđểtránhnhữngảnhlớnbịlệchrangoài. This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb Phần3:NgônNgữĐịnhDạngCSS Biênsọan:DươngThànhPhết Trang75 Chương03 CÁCTHUỘCTÍNHKHÁC Float&Clear Position Layers WebStandard I.FLOAT&CLEAR 1.Thuộctínhfloat: Float(theonhưnghĩatiếngViệtlàthảtrôi)làmộtthuộctínhCSSdùngđểcốđịnhmột thànhphầnwebvềbêntráihaybênphảikhônggianbaoquanhnó.Đâylàmộtthuộctínhrấtcần thiếtkhidàntrang(nhưtạocáctrangweb2columnlayouthay3columnlayout),hiểnthịvănbản thànhcột(giốngnhưkiểuFormat>ColumnstrongMSWordvậy),haythựchiệnviệcđịnhvịtrí ảnhvàtext(nhưmộtsốkiểutextwrappingcủaMSWord). Đểrõhơnchúngtahãyxemhìnhminhhọasauvềcơchếhoạtđộngcủafloat: Thuộctínhfloatcó3giátrị: +Left:Cốđịnhphầntửvềbêntrái. +Right:Cốđịnhphầntửvềbênphải. +None:Bìnhthường. Nhìnvàohìnhminhhọatrênchúngtathấylàbanđầutrongboxlớncóhaithànhphầnlà BoxBvàphầnContent. LúcđầuBoxBnằmbêntrênvàContentnằmbêndưới,nhưngkhichúngtađặtthuộctính floatchoBoxBthìBoxBbịcốđịnhvềbêntráivàchừalạikhoảngtrốngbêntráinó.Cònphần ContentthìvốnnằmbêndướisẽtựđộngtrànlênđểlắpđầykhoảngtrốngdoBoxBtạora. Ởvídụsau,chúngtasẽthựchiệnfloatảnhlogosangtráiđểphầnnộidungbêndưới trànlênnằmcạnhlogo. #logo{float:left;} Mộtvídụkháclàchúngtasẽthửdùngfloatđểchia2cộtvănbản. .column1,.column2{width:45%;float:left;text-align:justify;padding:020px;} .column1{border-right:1pxsolid#000} 2.Thuộctínhclear: Thuộctínhclearlàmộtthuộctínhthườngđượcgánvàocácphầntửliênquantớiphầntử đãđượcfloatđểquyếtđịnhhướngxửsựcủaphầntửnày. Ởvídụtrên,khichúngtafloattấmảnhquatráithìmặcnhiênvănbảnsẽđượctrànlên đểlắpvàochỗtrống.Nhưngkhichúngtađặtvàovănbảnthuộctínhclearthìchúngtacóquyền quyếtđịnhxemphầnvănbảnđócóđượctrànlênhaykhông.Thuộctínhclearcótấtcả4thuộc tính:left(trànbêntrái),right(trànbênphải),both(khôngtràn)vànone. This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb Phần3:NgônNgữĐịnhDạngCSS Biênsọan:DươngThànhPhết Trang76 II.POSITION 1.Nguyênlýhoạtđộngcủaposition Hãytưởngtượngcửasổtrìnhduyệtcủabạngiốngnhưmộthệtọađộvàvớipositionbạn cóthểđặtmộtđốitượngwebởbấtcứvịtrínàotrênhệtọađộnày. Giảsửchúngtamuốnđịnhvịmộtảnhởvịtrí70pxcáchđỉnhvà90pxtừbêntráitàiliệu, chúngtasẽviếtCSSnhưsau: img{position:absolute;top:70px;left:90px} Nhưbạnđãthấy,sựđịnhvịbằngCSSlàmộtcôngnghệchínhxácđểđịnhvịmộtthành phần.Nódễdànghơnsovớiviệcdùngbảng. 2.Absoluteposition: Địnhvịtuyệtđốilàsựđịnhvịmàtrongđócácthànhphầnđượcđịnhvịkhôngđểlạibất cứmộtkhoảngtrốngnàotrongtàiliệu.Mộtthànhphầnđượcđịnhvịtuyệtđốisẽnhậngiátrị positionlàabsolute.Cácđốitượngđãđịnhvịtuyệtđốisẽdùngkếthợpvớicácthuộctínhtop, left,right,bottomđểxácđịnhtọađộ.Vídụsausẽchỉchochúngtacáchđặtbốnảnhởbốngóc tàiliệubằngđịnhvịtuyệtđối. #logo1{position:absolute;top:50px;left:70px} #logo2{position:absolute;top:0;right:0} #logo3{position:absolute;bottom:0;left:0} #logo4{position:absolute;bottom:70px;right:50px} 3.Relativeposition Sựđịnhvịtươngđốichomộtthànhphầnlàsựđịnhvịđượctínhtừvịtrígốctrongtàiliệu. Cácthànhphầnđãđượcđịnhvịtươngđốisẽđểlạikhoảngkhôngtrongtàiliệu.Cácthànhphần đượcđịnhvịtươngđốisẽnhậngiátrịpositionlàrelative. Chúngtahãylàmlạivídụtrênnhưngthayabsolutethànhrelative.Cácbạnghinhậnlạivị trí4ảnhlogolúcápdụngthuộctínhpositionlànone,absolutevàrelativerồirútranhậnxét. III.LAYERS Layerlàthuộctínhgiúptađặtmộtthànhphầnnàylêntrênmộtthànhphầnkhác.Vớimục đíchnày,bạnsẽgánchomỗiphầntửmộtconsố.Theođó,phầntửcósốcaohơnsẽnằmtrên, phầntửcósốthấphơnsẽnằmdưới.Vídụsauchúngtasẽđặt5bứcảnhlogoở5lớp. #logo1{position:absolute;top:70px;left:50px;z-index:1} This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb Phần3:NgônNgữĐịnhDạngCSS Biênsọan:DươngThànhPhết Trang77 #logo2{position:absolute;top:140px;left:100px;z-index:2} #logo3{position:absolute;top:210px;left:150px;z-index:3} #logo4{position:absolute;top:280px;left:200px;z-index:4} #logo5{position:absolute;top:350px;left:250px;z-index:5} Vớitranghtmllà: <html> <head> <title>VíD ụVềLayers</title> <linkrel="stylesheet"type="text/css"href="layer.css"/> </head> <body> <imgid="logo1"src="Logo1.jpg"> <imgid="logo2"src="Logo2.jpg"> <imgid="logo3"src="Logo3.jpg"> <imgid="logo4"src="Logo4.jpg"> <imgid="logo5"src="Logo5.jpg"> </body> </html> IV.WEBSTANDARDS Trongcôngviệcthiếtkếwebthìmộttrongnhữngvấnđềquantrọngđólàlàmsaođảm bảotrangwebcủabạncóthểhiểnthịtốttrênhầuhếtcáctrìnhduyệt.HiểurõvấnđềnàyW3C (WorldWideWebConsortium)–mộttổchứccónhiệmvụquảnlývàđặcracáctiêuchuẩnweb cùngvớicácđốitáckhácnhưMicrosof,MozillaFoundation,…đãđặtracáctiêuchuẩnvềmã choweb.Nóchophépnhàpháttriểnwebcóthểtựtinhơnkhithựchiệndựáncũngnhưđảm bảochocáctrangwebthỏamãntiêuchuẩncóthểhiểnthịtốtởnhiềutrìnhduyệt.Đểdễdàng hơn.TrongCSS,W3CđãtạoramộtcôngcụgọilàCSSValidatorđểđọcvàthẩmđịnhtínhhợp chuẩnchoCSScủabạn. Đầutiên,cácbạntruycậpvàođịachỉsau:http://jigsaw.w3.org/css-validator/.Đặturlfile CSScủabạnởôurlrồinhấnnút“clicktocheckstylesheet”đểchươngtrìnhđọcfileCSScủa bạn.Saukhiđọcxong,nếufileCSScủabạnkhôngphùhợptiêuchuẩn,chươngtrìnhsẽhiểnthị danhsáchlỗi.NếufileCSScủabạnhợpchuẩnthìchươngtrìnhsẽhiệnrabứcảnhchứngnhận. Bạncóthểđặtbứcảnhđótrêntrangwebcủabạnđểthểhiệnnóđãđượcxâydựngtrêncácmã chuẩn. This is trial version www.adultpdf.com . Trang76 II.POSITION 1.Nguyênlýhoạtđộngcủaposition Hãytưởngtượngcửasổtrìnhduyệtcủabạngiốngnhưmộthệtọađộvàvớipositionbạn cóthểđặtmộtđốitượng web ởbấtcứvịtrínàotrênhệtọađộnày. Giảsửchúngtamuốnđịnhvịmộtảnhởvịtrí70pxcáchđỉnhvà90pxtừbêntráitàiliệu, chúngtasẽviếtCSSnhưsau: img{position:absolute;top:70px;left:90px} Nhưbạnđãthấy,sựđịnhvịbằngCSSlàmộtcôngnghệchínhxácđểđịnhvịmộtthành phần.Nódễdànghơnsovớiviệcdùngbảng. 2.Absoluteposition: Địnhvịtuyệtđốilàsựđịnhvịmàtrongđócácthànhphầnđượcđịnhvịkhôngđểlạibất cứmộtkhoảngtrốngnàotrongtàiliệu.Mộtthànhphầnđượcđịnhvịtuyệtđốisẽnhậngiátrị positionlàabsolute.Cácđốitượngđãđịnhvịtuyệtđốisẽdùngkếthợpvớicácthuộctínhtop, left,right,bottomđểxácđịnhtọađộ.Vídụsausẽchỉchochúngtacáchđặtbốnảnhởbốngóc tàiliệubằngđịnhvịtuyệtđối. #logo1{position:absolute;top :50 px;left:70px} #logo2{position:absolute;top:0;right:0} #logo3{position:absolute;bottom:0;left:0} #logo4{position:absolute;bottom:70px;right :50 px} 3.Relativeposition Sựđịnhvịtươngđốichomộtthànhphầnlàsựđịnhvịđượctínhtừvịtrígốctrongtàiliệu. Cácthànhphầnđãđượcđịnhvịtươngđốisẽđểlạikhoảngkhôngtrongtàiliệu.Cácthànhphần đượcđịnhvịtươngđốisẽnhậngiátrịpositionlàrelative. Chúngtahãylàmlạivídụtrênnhưngthayabsolutethànhrelative.Cácbạnghinhậnlạivị trí4ảnhlogolúcápdụngthuộctínhpositionlànone,absolutevàrelativerồirútranhậnxét. III.LAYERS Layerlàthuộctínhgiúptađặtmộtthànhphầnnàylêntrênmộtthànhphầnkhác.Vớimục đíchnày,bạnsẽgánchomỗiphầntửmộtconsố.Theođó,phầntửcósốcaohơnsẽnằmtrên, phầntửcósốthấphơnsẽnằmdưới.Vídụsauchúngtasẽđặt 5 bứcảnhlogoở 5 lớp. #logo1{position:absolute;top:70px;left :50 px;z-index:1} This is trial version www.adultpdf.com Bài Giảng Môn Thiết Kế Web Phần3:NgônNgữĐịnhDạngCSS Biênsọan:DươngThànhPhết. Trang73 VII.KHUNGVIỀN-BORDER Borderlàmộtthànhphầnquantrọngtrongmộttrang web. Nóthườngđượcdùngtrong trangtrí,đóngkhungchomộtđốitượngcầnnhấnmạnh,phâncáchcácđốitượnggiúptrang web trôngdễnhìnhơn,…. 1.Thuộctínhborder-width Border-widthlàmộtthuộctínhCSSquyđịnhđộrộngchoviềncủamộtđốitượng web. Thuộctínhnàycócácgiátrị:thin(mảnh),medium(vừa),thick(dày),haylàmộtgiátrịđocụthể nhưpixels. 2.Thuộctínhborder-color Border-colorlàthuộctínhCSSquyđịnhmàuviềnchomộtđốitượng web. Thuộctínhnày nhậntấtcảđơnvịmàuCSShỗtrợ. 3.Thuộctínhborder-style Border-stylelàthuộctínhCSSquyđịnhkiểuviềnthểhiệncủamộtđốitượng web. CSS cungcấptấtcả8kiểuviềntươngứngvới8giátrị:dotted,dashed,solid,double,groove,ridge, insetvàoutset.Đểhiểurõhơn,chúngtahãyxemhìnhminhhọadướiđây. Vídụsausẽđịnhviềncho3thànhphầnh1,h2,pnhưsau: h1{border-width:thin;border-color:#FF0000;border-style:solid} h2{border-width:thick;border-color:#CCC;border-style:dotted} p{border-width:5px;border-color:#FF00FF;border-style:double} Ngoàira,chúngtacũngcóthểdùngriêngcácthuộctínhborder-top,border-right,border- bottomhayborder-leftđểchỉđịnhviềnriêngchocácđốitượng. Vídụ: h1{ border-top-width:thin;border-top-color:#FF0000;border-top-style:solid; border-right-width:thick;border-right-color:#AFAFAF;border-right-style:dotted; border-bottom-width:2px;border-bottom-color:blue;border-bottom-style:double; border-left-width:5px;border-left-color:violet;border-left-style:groove} ThuộctínhborderrútgọnsửdụngcấutrúcrútgọncủaCSSnhưsau: Border:<border-width>|<border-color>|<border-style> VIII.HEIGHT&WIDTH 1.Thuộctínhwidth: WidthlàmộtthuộctínhCSSdùngđểquyđịnhchiềurộngchomộtthànhphần web. Vídụ sauchúngtasẽđịnhchiềurộngchothànhphầnpcủamộttrang web. p{width:700px;} 2.Thuộctínhmax-width: Max-widthlàthuộctínhCSSdùngđểquyđịnhchiềurộngtốiđachomộtthànhphần web. 3.Thuộctínhmin-width: Min-widthlàthuộctínhCSSdùngđểquyđịnhchiềurộngtốithiểucho1thànhphần web. This is trial version www.adultpdf.com Bài Giảng Môn Thiết Kế Web . dụng trongnhữngtrườnghợpbạnkhôngchắcgiátrịchínhxácchowidth,heightcảmộtthànhphần. Vídụ,bạnvùngchứa bài postcủamộtforumcóbềngang 50 0px,bạncóthểđịnhmax- width :50 0pxchophầnhìnhảnhtrongphầnđóđểtránhnhữngảnhlớnbịlệchrangoài. This is trial version www.adultpdf.com Bài Giảng Môn Thiết Kế Web Phần3:NgônNgữĐịnhDạngCSS Biênsọan:DươngThànhPhết Trang 75 Chương03 CÁCTHUỘCTÍNHKHÁC Float&Clear