PHƯƠNG PHÁP VIẾT MÃ CSS

Chú thích cho mã CSS giúp người khác đọc file CSS sẽ biết thêm những thông tin cần thiết về file CSSnói riêng và về tác giả nói chung. Việc chú thích mã ở những ngôn ngữ khác quan trọng ra sao thì chúthích mã ở CSS cũng quan trọng như vậy. Sau đây là mẫu chú thích một đoạn mã CSS rất tốt;
Nội dung trích xuất từ tài liệu:
PHƯƠNG PHÁP VIẾT MÃ CSSST : http://conghung.com , http://conghung.com/forumPHƯƠNG PHÁP VIẾT MÃ CSSViệcviếtmãCSS(http://letunglam.com/category/css/)cũnggiốngnhưbạnlậptrìnhvớingônngữPHP(http://letunglam.com/category/laptrinhphp/),C#,...tấtcảđềucầncómộtbốcụckhoahọc,hệthốngđểdễdàngpháttriểncũngnhưkiểmtrapháthiệnlỗi(nếucó).DướiđâylàmộtvàihướngdẫngiúpbạnlàmviệcvớiCSSkhoahọchơn:1.ChúthíchchomãCSS:ChúthíchchomãCSSgiúpngườikhácđọcfileCSSsẽbiếtthêmnhữngthôngtincầnthiếtvềfileCSSnóiriêngvàvềtácgiảnóichung.ViệcchúthíchmãởnhữngngônngữkhácquantrọngrasaothìchúthíchmãởCSScũngquantrọngnhưvậy.SauđâylàmẫuchúthíchmộtđoạnmãCSSrấttốt;CSS:/*ScreenStylesheetversion:1.0date:01/03/07author:[youremail]email:[youatdomaindotcom]website:[yourdomain]versionhistory:[locationoffile]*/2.ChiaCSSrathànhnhiềuphầnNếumãCSScủabạngồmnhiềuphầnvàchonhiềutrangthìbạnnênchiathànhnhiềufileCSSđểdễquảnlívàcũngđểgiúpchofileCSScủabạnkhôngbịrối.Rấtnhiềuwebdeveloperchưanhậnthứcđượcđiềunày.HọgộptấtcảfileCSSvàolàmmột.Vàdĩnhiên,hệquảlàhọmấtnhiềuthờigianhơnchoviệcsửafileCSScủamình.ChiaCSSrathànhnhiềufilevàsửdụngchúngcùngvớiCSSchínhbằngphươngthứcsau:CSS:/*Importotherstylesheets*/@importurl(typography.css);Bêncạnhđó,phânchiangaychínhtrongfileCSScũngquantrọngkhôngkém.Hãygộpchungnhữngphầncócùng1đốitượng.CSS:/*Header*//*Navigation*//*Footer*//*Homepage*//*Yourtemplate 1*/XoácácđịnhdạngmặcđịnhĐâylàđiềucựckìcầnthiếtđốivớibấtkìWebdevelopernào.Nhưbạnđãbiếtthìmỗitrìnhduyệt(browser)đềuhiểnthịkhácnhau.Phầnlớnlàdođịnhdạngmặcđịnhởmỗibrowserlàkhácnhau.Vídụsausẽgiúpbạnxoáđịnhdạngmặcđịnh:CSS:*{margin:0;padding:0;border:0;}4.Địnhdạngcácđốitượngcơbản:Nhữngđốitượngcơbảnhayđượcsửdụngnhưh1,h2,h3,...form,table,cầnphảiđượcđịnhdạngtrướctiênkhibạnbắtđầuviếtmãCSS.Thóiquennàygiúpbạnđồngbộđượcgiaodiệncủacáctrangweb.[CSS:/*Forms*/input.text{padding:3px;border:1pxsolid#999999;}CSS:/*Tables*/table{borderspacing:0;bordercollapse:collapse;}td{textalign:left;fontweight:normal;}Chúý:đâykhôngphảilàmộtchuẩnmựcviếtmãCSS.Vìhiệntạichưacó1chuẩnnàochoviệcviếtCSS.DướiđâychỉlàcáchviếtmãCSSsaochokhoahọcđượctíchluỹtừnhữngngàythánglàmviệccùngvớiCSS.Hivọngđiềunàysẽbốíchchocácbạn.LẬPTRÌNHCSS1. Địnhdạngchữmàkhôngcầndùngđơnvịpixel. Đôikhi,bạntựhỏilàmsaonhữngngườithiếtkếweb(http://letunglam.com/category/thietkeweb/)lại dùngđơnvịemthayvìpx?Rấtđơngiản,chỉvớimộtthủthuậtnhỏbạncũngcóthểlàmđượcvớiđơn vịemthayvìpx.HãythêmđoạnmãsauvàoCSS(http://letunglam.com/category/css/). (http://letunglam.com/laptrinhweb/laptrinhvoicss/#) 2CSS:body{fontsize:62.5%}Vớiđoạnmãtrênthì1.0emsẽtươngđươngvới10pxvàsẽhoàntoàndễhơnchobạnkhitínhtoánkíchthướcfontchữhơn.Vàkhiđóbạncóthểđịnhdạngnhưsau:(http://letunglam.com/laptrinhweb/laptrinhvoicss/#)CSS:p{fontsize:1.2em;lineheight:1.5em;}2.TrìnhbàyCSSsángsủahơnTrìnhbàyCSSmộtcáchkhoahọcsẽgiúpviệcpháttriển,sửachữadễdànghơnbaogiờhết.Hãychiacácđịnhdạng(styles)rathànhcácblockriêngbiệtvàtrìnhbàychúngnhưnhữngngônngữlậptrìnhbạnvẫnthườnglàm.(http://letunglam.com/laptrinhweb/laptrinhvoicss/#)CSS:h1{}h1#logo{fontsize:2em;color:#000;}h2{}h2.title{fontsize:1.8em;fontweight:normal;}BạncóthểthamkhảochitiếthơnvềcáchvếtmãCSStạibàiviếtPhươngphápviếtmãCSS3.HạnchếdùngdivKhimớitiếpcậnvớiCSSviệclạmdụngdivthườnglàlỗimàcáclậptrìnhviêndễmắcphải.Hãydùngđúngchứcnăngcủamỗitag.Vídụ:hãydùngh1,h2,h3chotiêuđềthayvìdùngdivđểđịnhdạng.4.TốiưumãCSS.TốiưumãCSSởđâylàgiảmđộdàicủadònglệnhCSScũngcónghĩagiảmdunglượngvớifileCSS.Điềunàysẽgiúptrangwebđượctảivềnhanhhơn.SauđâylàmộtsốvídụgiúpbạnrútgọnmãCSScủamình.Thayvìdùng#000000bạncóthểdùng#000chođịnhdạngmàuđen.Trườnghợpkhácvới#ffffccbạncóthểdùng#ffc.CSS:fontsize: ...