ST : http://conghung.com , http://conghung.

com/forum

PHNG PHP VIT M CSS

Vic vit m CSS (http://letunglam.com/category/css/) cng ging nh bn lp trnh vi ngn ng PHP (http://letunglam.com/category/lap-trinh-php/), C#,... tt c u cn c mt b cc khoa hc, h thng d dng pht trin cng nh kim tra pht hin li (nu c). Di y l mt vi hng dn gip bn lm vic vi CSS khoa hc hn: 1. Ch thch cho m CSS: Ch thch cho m CSS gip ngi khc c file CSS s bit thm nhng thng tin cn thit v file CSS ni ring v v tc gi ni chung. Vic ch thch m nhng ngn ng khc quan trng ra sao th ch thch m CSS cng quan trng nh vy. Sau y l mu ch thch mt on m CSS rt tt; CSS: /*-----------------------Screen Stylesheet version: 1.0 date: 01/03/07 author: [your email] email: [you at domain dot com] website: [your domain] version history: [location of file] ---------------------*/ 2. Chia CSS ra thnh nhiu phn Nu m CSS ca bn gm nhiu phn v cho nhiu trang th bn nn chia thnh nhiu file CSS d qun l v cng gip cho file CSS ca bn khng b ri. Rt nhiu web developer cha nhn thc c iu ny. H gp tt c file CSS vo lm mt. V d nhin, h qu l h mt nhiu thi gian hn cho vic sa file CSS ca mnh. Chia CSS ra thnh nhiu file v s dng chng cng vi CSS chnh bng phng thc sau: CSS: /* Import other stylesheets ---------------------------------------*/ @import url("typography.css"); Bn cnh , phn chia ngay chnh trong file CSS cng quan trng khng km. Hy gp chung nhng phn c cng 1 i tng. CSS: /* Header ---------------------------------------*/ /* Navigation ---------------------------------------*/ /* Footer ---------------------------------------*/ /* Homepage ---------------------------------------*/ /* Your template ---------------------------------------*/ Xo cc nh dng mc nh y l iu cc k cn thit i vi bt k Web developer no. Nh bn bit th mi trnh duyt (browser) u hin th khc nhau. Phn ln l do nh dng mc nh mi browser l khc nhau. V d sau s gip bn xo nh dng mc nh: CSS: *{margin: 0;padding: 0;border: 0;}

4. nh dng cc i tng c bn: Nhng i tng c bn hay c s dng nh h1, h2, h3, ... form, table, cn phi c nh dng trc tin khi bn bt u vit m CSS. Thi quen ny gip bn ng b c giao din ca cc trang web.[ CSS: /* Forms ---------------------------------------*/ input.text { padding: 3px; border: 1px solid #999999; } CSS: /* Tables ---------------------------------------*/ table { border-spacing: 0; border-collapse: collapse; } td { text-align: left; font-weight: normal; } Ch : y khng phi l mt chun mc vit m CSS. V hin ti cha c 1 chun no cho vic vit CSS. Di y ch l cch vit m CSS sao cho khoa hc c tch lu t nhng ngy thng lm vic cng vi CSS. Hi vng iu ny s b ch cho cc bn.

LP TRNH CSS
1. nh dng ch m khng cn dng n v pixel. i khi, bn t hi lm sao nhng ngi thit k web (http://letunglam.com/category/thiet-ke-web/) li dng n v em thay v px? Rt n gin, ch vi mt th thut nh bn cng c th lm c vi n v em thay v px. Hy thm on m sau vo CSS (http://letunglam.com/category/css/). (http://letunglam.com/lap-trinh-web/lap-trinh-voi-css/#) CSS: body { font-size: 62.5% } Vi on m trn th 1.0em s tng ng vi 10px v s hon ton d hn cho bn khi tnh ton kch thc font ch hn. V khi bn c th nh dng nh sau: (http://letunglam.com/lap-trinh-web/lap-trinh-voi-css/#) CSS: p { font-size: 1.2em; line-height: 1.5em; } 2. Trnh by CSS sng sa hn Trnh by CSS mt cch khoa hc s gip vic pht trin, sa cha d dng hn bao gi ht. Hy chia cc nh dng (styles) ra thnh cc block ring bit v trnh by chng nh nhng ngn ng lp trnh bn vn thng lm. (http://letunglam.com/lap-trinh-web/lap-trinh-voi-css/#) CSS:

h1 {} h1#logo { font-size: 2em; color: #000; } h2 {} h2.title { font-size: 1.8em; font-weight: normal; } Bn c th tham kho chi tit hn v cch vt m CSS ti bi vit Phng php vit m CSS 3. Hn ch dng div Khi mi tip cn vi CSS vic lm dng div thng l li m cc lp trnh vin d mc phi. Hy dng ng chc nng ca mi tag.V d: hy dng h1, h2, h3 cho tiu thay v dng div nh dng. 4. Ti u m CSS. Ti u m CSS y l gim di ca dng lnh CSS cng c ngha gim dung lng vi file CSS. iu ny s gip trang web c ti v nhanh hn. Sau y l mt s v d gip bn rt gn m CSS ca mnh. Thay v dng #000000 bn c th dng #000 cho nh dng mu en. Trng hp khc vi #ffffcc bn c th dng #ffc. CSS: font-size: 1em; font-family: Arial, Helvetica, Sans-Serif; line-height: 1.5em; font-weight: bold; on m trn gip nh dng font v on cho ton trang web. Nhng bn c th dng on m sau thay th: (http://letunglam.com/lap-trinh-web/lap-trinh-voi-css/#) CSS: body { font: 1em/1.5em bold Helvetica, Arial, Sans-serif; } Hoc vi trng hp: (http://letunglam.com/lap-trinh-web/lap-trinh-voi-css/#) CSS: margin-top: 5px; margin-left: 5px; margin-bottom: 0; margin-right: 0; Bn c dng on m ngn gn hn rt nhiu: (http://letunglam.com/lap-trinh-web/lap-trinh-voi-css/#) CSS: body { margin: 5px 0 0 5px; } C php ca hm margin nh sau: (http://letunglam.com/lap-trinh-web/lap-trinh-voi-css/#) CSS: margin: [top] [right] [bottom] [left] 2. hoc trong trng hp l trn di v tri phi bng nhau, bn c th dng c php sau: CSS: margin: [top/bottom] [left/right] (http://letunglam.com/lap-trinh-web/lap-trinh-voicss/#) Trng hp khc, ngay trong chnh mt bi vit (http://letunglam.com/css/lam-viec-tot-

voi-cac-browser/) ca mnh, xin cm n Sonny (http://sonnymotives.com/) v Quietman gi mt cch lp trnh CSS khoa hc. l bn c th dng (http://letunglam.com/lap-trinh-web/lap-trinh-voi-css/#) CSS: * { margin:0; padding:0; } thay v phi dng on m di l th sau: (http://letunglam.com/lap-trinh-web/lap-trinh-voi-css/#) CSS: body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { margin: 0; padding: 0; }

NHNG IU CN BIT KHI VIT M CSS

Nh chng ta bit bi vit trc (http://letunglam.com/css/lam-viec-tot-voi-cacbrowser/) mnh c ln cp n vn "lm vic tt vi cc trnh duyt (browser)" bng cch s dng CSS (http://letunglam.com/category/css/) xa i nhng nh dng mc nh ca tng browser. Ln ny, cc bn s c bit n nhng iu cn trnh trong khi vit m HTML v CSS nu bn mun website ca mnh hin th tt hu ht cc browser. 1. Khng bao gi s dng padding cho cc i tng c rng c nh (fixed width) y l nguyn tc c bn v cch cn l ca Internet Explorer khc vi cc trnh duyt khc v cng l 1 li ca trnh duyt ny. Li ny c gi l "Box Model Bug (http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug)" hnh di l mt hnh nh minh ha cho li ny. http://letunglam.com/wp-content/uploads/box-model-bug.png Bn c th thy rng rng ca i tng "c" cng thm khi hin th IE nu nh c padding. Vy n gin l khng dng padding cho cc i tng c rng c nh (fixed width). 2. C nh c ch bng n v % v em Thng thng cc browser hin th c ch theo cch khc nhau nu nh bn cha nh c cho chng. Khi mi bt u hc CSS, chng ta thng nh dng c ch theo cch sau: (http://letunglam.com/lap-trinh-web/can-biet-khi-viet-ma-css/#) CSS: h1 {font-size:18px;} h2 {font-size:16px; Dng m l cch c bn, nhng vn l IE ngi xem s khng th thay i c ch. iu ny rt cn thit vi nhng ngi phn gii cao. Nhng bn ng lo, c mt gii php khc tt hn, hy dng % v em nh dng c ch nh sau: (http://letunglam.com/lap-trinh-web/can-biet-khi-viet-ma-css/#) CSS: body {font-size:62.5%;} h1 {font-size:1.8em;} h2 {font-size: 1.6em;} 3. Khng nn dng n v 100% S dng 100% cn chiu rng ca mt i tng rt d gp ri ro trong vic b tr kt cu ca website v mi trnh duyt hin th chiu rng 100% rt khc bit. Theo kinh nghim bn thn th nhng ln th nh v 100% th gn nh rt kh c th t c kt qu tt nht. Hy chn mt con s khc c th l nh hn 100% (95% c th s tt hn).

Hoc n gin hn l hy... c nh n. 4. Khng dng 0px nh chiu cao Cc browser khng thch vic bn chn 0px nh chiu cao cho i tng v thng hin th n theo cch bn... khng mun cht no. Nu c th hy thay n bng 1px s tt hn rt nhiu. (http://letunglam.com/lap-trinh-web/can-biet-khi-viet-ma-css/#) CSS: height:1px 5. Khng dng ">" trong CSS Mnh tng thy c ngi, thm ch rt nhiu ngi vit m CSS nh sau: (http://letunglam.com/lap-trinh-web/can-biet-khi-viet-ma-css/#) CSS: #menubar>a {color:#cccccc;} Vi dng m CSS nh trn IE6 s khng hiu v khng th hin th c nh dng trn. Hy dng on m di y, s an ton hn rt nhiu. (http://letunglam.com/lap-trinh-web/can-biet-khi-viet-ma-css/#) CSS: #menubar a {color:#cccccc;}

CSS LM VIC TT VI CC TRNH DUYT

Mt iu au u vi nhng ngi lm vic vi CSS (http://letunglam.com/category/css/) l vic cc trnh duyt (browser) hin th website theo cch khng h ging nhau. iu ny l do cc nh dng mc nh (default styles) ca mi browser khc nhau. Vy, lm sao hn ch c thp nht cc vn c th ny sinh vi browser khi lm vic vi CSS. C th, bn c la chn ca mnh, y s c thm 1 la chn na cho bn. Vi on m CSS di y, bn s loi b c gn nh hon ton nhng nh dng mc nh ca cc browser. (http://letunglam.com/css/lam-viec-tot-voi-cac-browser/#) CSS: /* Normalize padding and margins */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { margin: 0; padding: 0; } /* Normalize header sizes */ h1, h2, h3, h4, h5, h6 { font-size: 100%; } /* Normalize list styles */ ol, ul { list-style: none; } /* Normalize font style and weight on odd elements */ address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; } /* Normalize table borders */ table { border-collapse: collapse;

border-spacing: 0; } /* Normalize other borders */ fieldset, img { border: 0; } /* Normalize text-alignment */ caption, th { text-align: left; } /* Normalize (remove) quotation marks */ q:before, q:after { content: ''; } Ch : Vi on m trn ch gip bn trnh c nhiu vn gp phi vi CSS, nhng khng phi tt c. V th, khi gp nhng vn lin quan n CSS, c l Google (http://letunglam.com/category/google/) l ngi tr gip tt nht.

NH DNG 1 BNG N GIN BNG CSS

Nh chng ta bit nh dng mt bng(table) i vi mt s chng trnh pht trin Web nh Dreamwaver, Fontpage,th ht sc n gin bi cc chng trnh ny cung cp cho chng ta cch thc thay i cc thng s ca bng mt cch trc quan. Nhng hu ht cc chng trnh ny sau khi nh dng s sinh ra cc m nh dng ca bng ngay trong m ngun ca trang HTML, vi mi bng cc chng trnh ny s sinh ra cc m nh dng ring cho tng bng . Nh vy s c mt s vn bt cp. Nu chng ta c 10 bng ging nhau th chng ta phi nh dng ti 10 ln. iu s mt rt nhiu thi gian ca chng ta. Khi chng ta nh dng nhiu bng ging nhau nh vy, m mi bng li sinh ra mt lot m nh dng cho ring mnh. iu ng ngha vi vic s c rt nhiu cc on m d tha trong trang HTML ca chng ta. khc phc c nhng bt cp trn sau y ti xin trnh by vi cc bn mt k thut n gin nh dng mt bng d liu n gin. nh dng c trong CSS chng ta s thm cho bng cn nh dng mt thuc tnh class=tablelist <table class=tablelist> <tr> <th>S th t</th> <th>H v tn</th> <th>Gii tnh</th> </tr> <tr> <td>1</td> <td>Nguyn Quang Th</td> <td>Nam</td> </tr> <tr> <td>2</td> <td>Trn Mai Dung</td> <td>N</td> </tr> </table>Tip theo bn thm on m sau vo trong file CSS. .tablelist {

font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0; padding: 0; border-collapse: collapse; border-spacing: 0px; border: 1px solid #EBDDBC; } .tablelist th { margin: 0; padding: 4px 6px; border: 1px solid #EBDDBC; background-color: #F1EFD8; } .tablelist td { margin: 0; padding: 4px; border: 1px solid #EBDDBC; }Nu bn c nhiu bng c nh dng ging nhau th bn ch vic thm thuc tnh class=tablelist vo trong th <table class=tablelist>.

THIT K TAB N GIN VI CSS

Trong chng ta ti gim chc rng khng cn t ngi vn cn mc cm vi nhng menu dng tab, khng phi v n xu m lun ngh rng lm n kh v cu trc ca n rt phc tp. Chnh bn thn ti trc y cng nh vy. Nhng thc ra c phi nh vy khng? tr li cu hi by gi chng ta cng nhau th Style cho mt kiu tab n gin xem n c thc s kh nh chng ta vn thng ngh khng?. Trong menu dng ny bao gi cng gm 2 phn, phn 1 cha cc tab v phn th hai l phn cha ni dung ca cc tab. c hnh dung r hn chng ta s xem hnh nh minh ha di y. http://www.cssyeah.com/images/content/sample-tab.gif u tin chng ta s nh dng cho phn khung ca tab nh sau: div#wrapper { margin: 50px; padding: 0; } Chng ta s dng nh dng ca th <ol> to ln cc tab phn 1. V nguyn tc th chng ta c th dng mt trong ba th <ul>, <ol>, <dl>. Nhng ti sao ti li dng th <ol>, l bi v mt l do no m trnh duyt ca ngi xem khng ti c CSS t Website ca bn th h vn hiu c cu trc tab ca bn. nh dng ca phn mt nh sau <ol class=tab> <li class=active>Trang ch</li> <a href=gioithieu.html title=Gii thiu>Gii thiu</a> <a href=sanpham.html title=Sn phm>Sn phm</a> <a href=tintuc.html title=Tin tc>Tin tc</a> <a href=lienhe.html title=Lin h>Lin h</a> </ol> By gi chng ta s nh dng sao cho cc tab nm trn cng mt hng v c hnh dng ca tab. ol.tab { background: url(../dot.gif) repeat-x left bottom; /* nh 1px */ list-style: none;

margin: 0; padding: 6px 0; position: relative; } ol.tab li { background: #F2F5FA; border: 1px solid #D3DDED; display: inline; /* cc th li trn mt dng */ margin-right: 5px; padding: 0; } Trong cch nh dng ny ta c s dng mt k thut nh, l chng ta c s dng mt n

CCH VIT GIN LT TRONG CSS

Nu bn l ngi thc s mun tm hiu v CSS, th bn khng th khng tm hiu cch vit gin lc(shorthand) trong CSS. Cch vit ny thc s mang li nhng li ch v tin li khi bn s dng CSS. Trc khi i vo phn tch nhng tin li m n mang li, ti xin ly mt v d n gin nh sau. Gi s rng chng ta mun nh dng cho mt th <div> c ng vin bao quanh th chng ta cn phi vit. border-width: 1px; border-style: solid; border-color: #CC0000;Thay v phi vit nh vy chng ta ch cn vit border: 1px solid #CC0000;Qua v d n gin trn ta c th thy cch vit ny mang li cho chng ta mt s li ch sau. Th hai Th nht: n gip chng ta gim thiu c ng k thi gian phi vit m CSS. Th hai: bn c tng tng rng file CSS ca bn c ti vi ngn dng v dung lng ln ti vi trm Kb, th cch vit ny cn gip bn gim thiu c ng k dung lng ca file CSS v gip bn d dng theo di hn, khi s lng dng ca trang c gim xung.Sau y ti xin i vo chi tit mt s thuc tnh trong CSs m chng ta c th dng cch vit gin lc. 1. Thuc tnh Color C rt nhiu cch nh ngha mt mu trong CSS, chng ta c th nh ngha theo h s Hexa(trong h mu RGB), hoc chng ta c th vit tn mu (v d: white, red). Nhng cch nh ngha theo h s Hexa c s dng thng dng nht. nh ngha theo h Hexa chng ta s t du (#) trc sau n cc thng s mu (v d: #003366). Dy cc thng s mu c chia lm 3 phn tng ng vi ba mu Red, Green, Blue (00: Red | 33: Green | 66: Blue). Trong cch nh ngha h s mu ta cng c cch vit gin lc nh sau: #000000 c th vit #000 hoc #003366 c th vit #036 2. Thuc tnh margin v padding. margin-top: 10px; margin-right: 15px; margin-bottom: 20px; margin-left: 25px;c thay th bng margin: 10px 15px 20px 25px; /* top | right | bottom | left */Tng t vi thuc tnh padding padding-top: 10px; pading-right: 15px; padding-bottom: 20px; padding-left: 25px; padding: 10px 15px 20px 25px; /* top | right | bottom | left */C hai thuc tnh margin v

padding c hai ch nh sau: nu trong trng hp c hai thng s. margin: 10px 20px; /* top bottom | right left */ padding: 10px 20px; /* top bottom | right left */Th thng s th nht tng ng vi top v bottom cn thng s th hai tng ng vi right v left Trong trng hp margin v padding c 3 thng s: margin: 10px 20px 15px; /* top | right left | bottom */ padding: 10px 20px 15px; /* top | right left | bottom */Th thng s th nht tng ng vi top, thng s th hai tng ng vi right v left, thng s th 3 tng ng vi bottom 3. Thuc tnh border. border-with: 1px; border-style: solid; border-color: #CC0000;S vit thnh border: 1px solid #CC0000; /* border-width | border-style | border-color */4. Thuc tnh background. background-color: #CC0000; background-image: (image url); background-repeat: no-repeat; /* repeat-x, repeat-y */ background-position: top left;Tng ng vi background: #CC0000 url(image url) no-repeat top left;5. Thuc tnh font font-size: 1em; line-height: 1.5em; font-variant:small-caps; font-weight: bold; font-style: italic; font-famyli: Arial, Verdana, Sans-serif;Dng vit gin lc font: 1em/1.5em bold italic small-caps Arial,Verdana,Sans-serif;5. List type list-style: none;C ngha l list-style-type: none;Bn cng c th s dng thuc tnh list-style-position v list-typeimage nh dng cho danh sch khng c th t unordered lists, s dng hnh nh cho mi dng v s dng list-type-style l hnh vung trong trng hp khng hin th c nh. V hai cch vit di y l nh nhau. list-style:square inside url(image.gif);l gin lc cho list-style-type: square; list-style-position: inside; list-style-image: url(image.gif);6. Outline Thuc tnh ny rt t dng v c rt t cc trnh duyt hin ti h tr thuc tnh ny, hin ti ch c mt s trnh duyt h tr thuc tnh ny Safari, OmniWeb v Opera. Cch vit gin lc cc thuc tnh ny nh sau: outline-color: #000; outline-style: solid; outline-with: 2px;Cch vit gin lc s l outline: #000 solid 2px;

K THUT TI NH TRC TRONG CSS (PRELOADER IMAGES)

Khi Website ca bn c t trn my ch (Server) v my ngi dng (Client), cc trnh

duyt Web s c theo th t tng phn t HTML c trong trang ca bn. Trong trnh duyt s u tin d liu di dng vn bn (Text), sau n nh dng <img> k tip l cc nh nn (background). Do vy trong trng hp ng truyn mng ca bn c vn , th c mt s hiu ng m bn s dng dng nh nn (Background) s khng thc hin c ng nh bn mong mun (Khng hin th c nh). khc phc c vn ny ta c th s dng k thut ti trc hnh nn trong CSS. Hy t on code CSS ny vo trong file CSS ca bn. #preloadImages { width: 0px; height: 0px; display: inline; background-image: background-image: background-image: background-image: }

url(images/anh1.jpg); url(images/anh2.png); url(images/anh3.gif); url();

K THUT SLIDING DOORS V NG DNG

i vi nhng desiger thng xuyn lm vic vi CSS th k thut Sliding Doors khng c g mi m. Nhng i vi nhng bn mi lm quen vi CSS th ti ngh rng y l mt k thut m bn nn tm hiu n. K thut Sliding Doors(k thut ca ko), l mt k thut c ng dng rt nhiu trong vic to ra cc button, hay cc menu ngang kiu tab,Trong bi vit ny chng ta s i tm hiu tng ch o ca k thut v to ra mt v d nh c s dng k thut trn. Ti chc rng t nht chng ta mt ln nhn thy chic ca ko kiu nht bn. Mt bn ca c nh v mt bn ca s linh ng c th ko ra hoc ko vo ty thch. Bn cht ca k thut Sliding Doors cng ging nh vy. Chng ta s chia i tng 2 phn(phn bn tri v phn bn phi). Phn bn tri s l phn c nh, cn phn bn phi s l phn ng(Vic phn chia ny ty theo thch ca bn, bn c th phn chia phn bn phi c nh v phn bn tri l phn ng). iu cng c ngha l phn bn tri s c kch thc va phi, cn phn bn phi cn c kch thc lun ln hn hoc bng ni dung m bn d nh a vo( m bo rng i tng ca chng ta ging nh b t gy). bn c mt hnh dung r hn ti xin a ra hnh v m t tng ca k thut ny nh sau: http://www.cssyeah.com/images/content/sliding-doors.png K thut Sliding Doors. Nh trn hnh v bn thy, phn bn tri s c nh v phn bn phi s c ra hoc dn vo ty theo ni dung bn trong ca i tng cn to. Do vy vi cch lm nh trn th chng ta cn to phn bn phi cn phi di trnh trng hp b thiu nh khi ni dung di. Cc bn thy khng nghe th c v gh gm nhng v bn cht th k thut ny ch c vy thi, nhng cc bn ng coi thng, tuy vy nhng n kh quan trng v c ng dng rt rng ri trong vic to button, to menu kiu tab, minh ha cho iu ti va trnh by by sau y ti xin a ra mt v d c s dng k thut ny. Trong v d ny chng ta s to ra mt s button theo phong cch web 2.0, v c ty bin ni dung cao(chng ta c th thay i ni dung trong mt cch ty ). Sau y l chi tit tng bc lm c th. 1. To nt bng Photoshop Vic u tin chng ta cn lm l chng ta cn to ra hnh dng chic nt thn yu ca ta, trong v d ny ti to ra mt nt Sign Up Now! nh sau: http://www.cssyeah.com/images/content/button.gif To button bng Photoshop 2. Ct nt ra thnh hai phn.

10

Nh ti trnh by trn, thc hin c k thut ny chng ta cn phi ct i tng ra lm 2 phn. c th ct hnh c chnh xc ti khuyn bn nn s dng cng c Slice(Slice Tools) trong Adobe Photoshop. Button ca chng ta s c slice nh sau: http://www.cssyeah.com/images/content/button-slice.gif Slice thnh hai phn. Chng ta cn ch l phn bn phi cn phi di m bo rng khng b thiu. 3. Thc hin vit m HTML v CSS. Chng ta c nh dng m HTML nh sau: <a href=you link title=Your title> <span>Ni dung</span> </a>Gii thch: S d chng ta cn phi s dng 2 phn th HTML trong vic ny l do i tng ca chng ta c chia lm 2 phn, v mi phn t s lm nhim v gi mt phn ca i tng. Chng ta s dng th <a> bao ngoi cng m bo rng ton b nt s link c khi di chut ln trn nt. ng thi th <a> ny s cha phn ng bn phi. Th <span> s lm nhim v gi phn c nh bn tri, ng thi s c nhim v che phn d ca nh nn bn phi. tha mn vi yu cu t ra chng ta c m nh dng CSS nh sau: /* Sign up button style */ a.sign-up { font-family: Arial, Helvetica, sans-serif; font-size: 25px; font-weight: bold; color: #FFF; text-decoration: none; margin: 0; padding: 28px 0; display: block; background: url(images/signup-right-bg.gif) no-repeat right center; width: 270px; } a.sign-up:hover, a.sign-up:active { color: #FF0; } a.sign-up span { margin: 0; padding: 28px 0 28px 90px; background: url(images/signup-left-bg.gif) no-repeat left center; }V kt qu chng ta c mt button rt p nh nh trong thit k: M ngun (http://www.cssyeah.com/?dl=2)

MT VI CCH STYLE CHO ON TRCH DN

Trong bi vit ny ti xin trnh by vi cc bn mt s cch nh dng cho on trch dn(blockquote). lm cho on trch dn ca bn ni bt trong phn ni dung v gy s ch i vi ngi c, chng ta c th thm mt s yu t vo trong nh font ch, mu sc, hnh nh Nh tiu bi vit nu, trong bi ny chng ta s i su vo cc cch nh dng cho on trch dn, ch khng i su vo phn hnh thc ca n. Bi mi ngi s c mt cch trnh by khc nhau v s th hin n theo cch ca mnh. C rt nhiu cch nh dng cho th <blockquote>, nhng trong bi ny ti xin trnh by bn cch c bn. 1. Cch th nht u tin chng ta s i t ci n gin nht l thm mt du nhy m vo u ca on trch dn.V d minh ha (http://www.cssyeah.com/sample/quote/quote.html) M HTML:

11

<blockquote> Ni dung on trch dn </blockquote> M CSS: blockquote { margin: 0; padding-left: 40px; background: url(openquote.gif) left top no-repeat; font: 130% Times New Roman, Arial, Verdana; font-style: italic; text-align: left; } 2. Cch th hai Trong cch th 2 ny chng ta s c c du m v du ng. Ta s dng thuc tnh :firstletter thm du nhy kp vo u on trch dn.V d minh ha (http://www.cssyeah.com/sample/quote/quote.html) <blockquote class=quote-style2> Ni dung on trch dn </blockquote>M CSS: .quote-style2 { line-height:140%; background: url(closequote.gif) no-repeat bottom right !important; padding:0px 25px 5px 0px; font: 130% Times New Roman, Arial, Verdana; } .quote-style2:first-letter { background: url(openquote.gif) no-repeat left top !important; padding:5px 2px 10px 35px!important; } 3. Cch th ba Ging nh vi cch th hai on trch dn ca ta vn c hai du nhy kp ng v m. Trong cch ny chng ta s dng mt th <span> bao k t cui cng ca on trch dn. Th <span> ny s cha du nhy ng ca on trch dn, V d minh ha (http://www.cssyeah.com/sample/quote/quote.html). Ta c nh dng HTML ca kiu ny nh sau: <blockquote class=quote-style3 Ni dung on trch dn..<span>.</span> </blockquote>nh dng CSS blockquote { margin: 0; padding-left: 40px; background: url(openquote.gif) left top no-repeat; font: 130% Times New Roman, Arial, Verdana; font-style: italic; text-align: left; } .quote-style3 span { margin: 0; padding: 10px 40px 10px 0; background: url(closequote.gif) no-repeat right center; } 4. Cch th t V hnh thc th on trch dn ca chng ta ging nh kiu 2 v kiu 3 nhng cch thm du nhy ng ca kiu ny hi khc. Chng ta s dng th <div> hoc th <p> thm

12

du nhy ng cho on trch dn, V d minh ha (http://www.cssyeah.com/sample/quote/quote.html). Di dy l nh dng HTML v CSS ca kiu ny. nh dng HTML <blockquote> <p class=quote> Ni dung on trch dn </p> </blockquote>nh dng CSS blockquote { margin: 0; padding-left: 40px; background: url(openquote.gif) left top no-repeat; font: 130% Times New Roman, Arial, Verdana; font-style: italic; text-align: left; } .quote { margin: 0; padding-right: 20px; background: url(closequote.gif) no-repeat right bottom; }Cc bn c th ti m ngun ti y: M ngun (http://www.cssyeah.com/?dl=1)

THM BACKGROUND V DANH SCH C TH T (ORDER LIST)

lm phong ph cch trnh by vn bn (Typography) trn Website ca bn, bn c th thm nh nn vo trong phn s ca danh sch c th t (Order list). Chng ta thm thuc tnh class=bigol vo trong th <ol>. <ol class=bigol> <li><span>Th nht</span></li> <li><span>Th hai</span></li> <li><span>Th ba</span></li> </ol>Thm on m CSS sau vo trong file CSS ol.bigol { padding: 0px 0px 0px 27px; background: url(images/list_disc.png) 0 0 repeat-y; } ol.bigol li { padding: 0px 0px 6px 12px; font-weight: bold; color: #ffffff; line-height: 28px; } ol.bigol li span { color: #646464; }Xem v d (http://www.cssyeah.com/Sample/olbackground/sample.html)

A NGHCH VI CC THUC TNH CA CSS

Trong khi blog vn cha i vo phn chnh ca n "Questions" (v qu t ngi quan tm n CSS), cc bn tm thi chi vi CSS bng link ny: http://www.qrone.org/cssdesigner.html (http://www.qrone.org/cssdesigner.html)

13

Hi vng khi nghch ngm vi cc thuc tnh CSS bn s hiu hn v n. Nh bn thy, CSS ko c qu nhiu "thuc tnh", khong 58 bc thi. Dn dn bn s bit cn p dng thuc tnh no trong trng hp no http://my.opera.com/community/graphics/smilies/smile.gif, v c phn x tt hn v layout. List: color : black transparent background-color : transparent border-width : px = pixels pt = 1/72in em = font-size ex = x-height of font pc = 12pt cm mm in % border-top-width : px = pixels pt = 1/72in em = font-size ex = x-height of font pc = 12pt cm mm in % border-left-width : px = pixels pt = 1/72in em = font-size ex = x-height of font pc = 12pt cm mm in % border-right-width : px = pixels pt = 1/72in em = font-size ex = x-height of font pc = 12pt cm mm in % border-bottom-width : px = pixels pt = 1/72in em = font-size ex = x-height of font pc = 12pt cm mm in % border-color : transparent border-top-color : transparent border-left-color : transparent border-right-color : transparent border-bottom-color : transparent border-style : none solid double groove ridge inset outset dashed dotted border-top-style : none solid double groove ridge inset outset dashed dotted border-left-style : none solid double groove ridge inset outset dashed dotted border-right-style : none solid double groove ridge inset outset dashed dotted border-bottom-style : none solid double groove ridge inset outset dashed dotted width : px = pixels pt = 1/72in em = font-size ex = x-height of font pc = 12pt cm mm in % height : px = pixels pt = 1/72in em = font-size ex = x-height of font pc = 12pt cm mm in % overflow : visible hidden scroll auto padding : px = pixels pt = 1/72in em = font-size ex = x-height of font pc = 12pt cm mm in % padding-top : px = pixels pt = 1/72in em = font-size ex = x-height of font pc = 12pt cm mm in % padding-left : px = pixels pt = 1/72in em = font-size ex = x-height of font pc = 12pt cm mm in % padding-right : px = pixels pt = 1/72in em = font-size ex = x-height of font pc = 12pt cm mm in % padding-bottom : px = pixels pt = 1/72in em = font-size ex = x-height of font pc = 12pt cm mm in % margin : px = pixels pt = 1/72in em = font-size ex = x-height of font pc = 12pt cm mm in % margin-top : px = pixels pt = 1/72in em = font-size ex = x-height of font pc = 12pt cm mm in % margin-left : px = pixels pt = 1/72in em = font-size ex = x-height of font pc = 12pt cm mm in % margin-right : px = pixels pt = 1/72in em = font-size ex = x-height of font pc = 12pt cm mm in % margin-bottom : px = pixels pt = 1/72in em = font-size ex = x-height of font pc = 12pt cm mm in % font-family : serif sans-serif cursive fantasy monospace font-size : 9pt 10pt 12pt 14pt 16pt xx-small x-small small large x-large xx-large font-weight : normal bold 600 900 font-style : normal italic oblique font-variant : normal small-caps

14

line-height : px = pixels pt = 1/72in em = font-size ex = x-height of font pc = 12pt cm mm in % clear : left right both none float : left right none text-align : left right center justify text-decoration : none underline overline underline overline line-through blink text-indent : px = pixels pt = 1/72in em = font-size ex = x-height of font pc = 12pt cm mm in % letter-spacing : px = pixels pt = 1/72in em = font-size ex = x-height of font pc = 12pt cm mm in % word-spacing : px = pixels pt = 1/72in em = font-size ex = x-height of font pc = 12pt cm mm in % text-transform : none capitalize lowercase uppercase vertical-align : baseline top middle bottom text-top text-bottom super sub 3em 30% background-image : url(qrx/resize-box.gif) background-repeat : repeat repeat-x repeat-y no-repeat background-position : left right top left top right bottom 30% 50% background-attachment : fixed scroll display : none block inline run-in compact list-item marker visibility : visible hidden position : static relative absolute fixed top : px = pixels pt = 1/72in em = font-size ex = x-height of font pc = 12pt cm mm in % left : px = pixels pt = 1/72in em = font-size ex = x-height of font pc = 12pt cm mm in % right : px = pixels pt = 1/72in em = font-size ex = x-height of font pc = 12pt cm mm in % bottom : px = pixels pt = 1/72in em = font-size ex = x-height of font pc = 12pt cm mm in % z-index : cursor :

6 GIAI ON CA NGI HC CSS

T 1 bi vit ca pcdinh trn ddth (http://ddth.com/showpost.php? p=756429&postcount=6) v bi vit trn friendlybit (http://friendlybit.com/css/levels-ofcss-knowledge/) t tng hp thnh bi vit ny: bn bao gi tham gia 1 chat room v CSS cha? (kiu nh #CSS trn EFNet) bn thn ti th cha? ni chung i khi ngi hc CSS c my mc sau: 1) Giai on quan nim: Bn cn ang t m v CSS. Cu ni c trng: CSS l g nh? Mt video game ? c phi Counter Strike ko? 2) Giai on th nghim: 2a + Bn bt u nghch ngm CSS bng cch view source 1 s website dng CSS v bt u dng CSS vo nhng trang web m trc y bn ton dng HTML, thng l ch vi nhng g m bn khng th dng HTML c (m ch CSS lm c). Cu ni c trng: i khi mnh cng b ci gch chn di link i 2b ++ Thay v ch nghch ngm vi HTML, bn hiu nhiu v c php HTML v thng dng table to layout cho web, gi bn mun tm hiu cch to layout m ko dng table. Thm ch bn bit kh r v c php CSS nhng bn vn thy vic to layout bng CSS l kh. Cu ni c trng: Ti khng thch div, dng table d hn. 3) Giai on tri nghim:Bn thc c li ch ca CSS v bit kh r v CSS cng nh th dng n lm layout cho web, nhng c v layout ca bn v tung khi dng vi IE hoc nhng trnh duyt c. Cu ni c trng: Ti bit l dng c li y, nhng ti khng th dng n , v .... 4) Giai on kim nghim:Bn kh rnh cch dng div, v bn bt u sng to v th nghim nhng kin thc ca mnh, (do site ca bn lm ra trong giai on ny kh t

15

hi http://my.opera.com/community/graphics/smilies/frown.gif v cc bn nn nhanh chng chuyn sang giai on sau http://my.opera.com/community/graphics/smilies/frown.gif nu ko mun khch hng phin lng) Cu ni c trng: CSS? Oh, Yes! Ti lun dng div to layout. 5) Giai on chie^m nghim:Sau 1 qu trnh di c sch, c nhng bi vit ca ngi khc v t suy ngh rt nhiu cng nh bn lun nhiu v CSS, bn c nhng hiu bit su sc v CSS. Lc ny bn c th dng CSS vo cng vic ca mnh v bit c bn nn dng ci g, v sao (tt nhin lc bn ko cn hi nhng cu nh l: v sao div dng cho layout tt hn table hoc l lc no dng %, lc no dng pixel). Lc ny bn cng lm quen vi cc hack v filter ca CSS (v cng ch nn lm quen vi chng giai on ny - kin ca ti) Cu ni c trng: Ti dng CSS to layout, n tt hn dng table v nhng im sau: .... 6) Giai on sng to:Ok, by gi th bn l CSS master roi, i vi bn th "bit how to do it & why to do it" vn cha . Bn bt u i su hn vo bn cht CSS, thm ch bn dnh thi gian c ton b W3C specification v CSS, v bn bit r thuc tnh CSS no c h tr bi nhng trnh duyt no. Bn bt u bit lm nhng vic m t ngi ngh rng c th lm c vi CSS (http://www.cssplay.co.uk/) v c th tham gia vo d n chun web (http://webstandards.org/) . Thm ch khi ai thy li trn site ca bn th bn cng c th gii thch ti sao. Cu ni c trng: Phin bn no ca CSS? , ti lm y. Cu c quyn xxxCSSyyy ca ti cha? Bn ang giai on no? (bn thn ti giai on 2 thi. Ngc nhin cha http://my.opera.com/community/graphics/smilies/bigsmile.gif). M hnh nh hc bt k ci g cng tri qua 6 giai on th ny nh??? He he Tuy nhin d giai on no i na th bn cng nn bit Ctrl+F , viewsoure v google, nu khng th ti cng btay ko bit nn ni g vi bn na.

8 TH THUT V CSS
Bi ny mnh copy t quantrimang (http://www.quantrimang.com/view.asp? Cat_ID=3&Cat_Sub_ID=0&news_id=566), cn chng r bn quantrimang dch t ngun no http://my.opera.com/community/graphics/smilies/bigsmile.gif (hay h t vit) Tm tt: 01. Cc v d mu http://www.bluerobot.com/web/layouts (http://www.bluerobot.com/web/layouts) http://www.thenoodleincident.com (http://www.thenoodleincident.com/) http://www.glish.com/css (http://www.glish.com/css) 02. Lu tm ti cc trnh duyt c http://www.alistapart.com/stories/journey/5.html (http://www.alistapart.com/stories/journey/5.html) -> dead link, nhng d sao trang alistapart cng l mt trang ng c. 03. Th thut vi m hnh hin th dng hp (box-model) http://www.tantek.com/CSS/Examples/boxmodelhack.html (http://www.tantek.com/CSS/Examples/boxmodelhack.html) 04. iu khin in (ng ra l: "iu chnh font"???) 05. Chuyn i gia cc mu nh dng (ng ra l: "dng font thay th"???) http://www.alistapart.com/stories/alternate/ (http://www.alistapart.com/stories/alternate/) 06. Thm ng vin

16

07. on nh dng (on) kiu tp ch 08. Tu bin vi hnh nn (bng cch dng CSS).

8 IU MI L CHO NGI MI HC CSS

Vi iu m cc bn quen thit k web ch bng HTML c th khng bit v CSS: (nhng cu hi trong ngoc vung c th kh hiu, kh tr li hoc m h vi bn th bn c th tr li sau) div v span (c bit l div) l 2 loi tag thng c dng trong trang web s dng CSS. tag div v span c th coi nh nhng tag ngoi l. Trong khi nhng tag khc mi tag u c 1 chc nng ring (nh tag h1, h2..to tiu , tag b to ch m ...) th tag div v span li c cch dng rt linh ng. bn c th thay i chc nng vn c ca cc tag bng cch s dng CSS (v d: tag a thng lm link c gch chn, bn c th dng CSS lm mt gch chn i; tag b vn dng lm ch in m, bn c th dng CSS bt n lm ch gch chn). [bn c bit lm iu ny ko?] bn c th dng tag div v tag span cng vi CSS lm thay chc nng ca hu ht cc tag khc (v d: dng tag span lm ch in m...). [bn c bit lm iu ny ko? ti sao ngi ta vn dng cac tag khc nh h1, h2, p, i, a ... m ko s dng ton div vi li span] ngi ta s dng id hoc class ch nh tag s c p dng CSS. [bn c bit lc no dng id, lc no dng class khng? nu chng ta khng khai bo id hoc class m vn vit css cho id hoc class th iu g s xy ra?] tag div tun theo box-model (tm dch l m hnh hp) v thng dng to layout cho web [sao li ko dng tag khc, nh tag p, tag ul, chng hn, d nhng tag cng tun theo box-model?] tag span dng nh dng (mark up) cho text [ti sao li rt t web dng tag span?] chc nng vn c ca cc tag v cch lm vic ca CSS trn cc trnh duyt khc nhau c th rt khc nhau.

CSS CURVES
Bn mun ch chy p theo thn ca bc nh? nu nh ca bn l hnh vung th iu khng c g kh , ch cn dng thuc tnh foat l xong nhng nu nh ca bn nh hnh di y: Chng ta phi lm sao? Hm nay ti xin gii thiu vi cc bn 1 k thut Css n gin, dng ch c th chy theo hnh nh nh trn. u tin ta c 1 on m HTML: <div id="wrapper"> <span id="curve1" class="curve"></span> <span id="curve2" class="curve"></span> <span id="curve3" class="curve"></span> <span id="curve4" class="curve"></span> <span id="curve5"class="curve"></span> <span id="curve6" class="curve"></span> <span id="curve7" class="curve"></span> <span id="curve8" class="curve"></span> <span id="curve9" class="curve"></span> <span id="curve10" class="curve"></span>

17

<span id="curve11" class="curve"></span> <span id="curve12" class="curve"></span> <span id="curve13" class="curve"></span> </div> http://i81.photobucket.com/albums/j239/hunterkhoa/12.gif V css nh sau: #wrapper { text-align: left; width: 500px; margin: 30px auto; border: 1px solid #c00; padding: 15px 15px 5px 15px; background: url(redCurve.gif) 0 0 no-repeat; } /* RED CURVES */ .curve { float: left; display: block; height: 16px; clear: left; } #curve1 { width: 230px; } #curve2 { width: 225px; } #curve3 { width: 220px; } #curve4 { width: 215px; } #curve5 { width: 210px; } #curve6 { width: 198px; } #curve7 { width: 180px; } #curve8 { width: 170px; } #curve9 { width: 160px; } #curve10 { width: 160px; } #curve11 { width: 140px; } #curve12 { width: 120px; } #curve13 { width: 80px; }

CSS STRICKS MIN HEIGHT

Khi thit k 1 layout i lc chng ta phi kh chu vi s khc nhau gia cc trnh duyt, trn FF th ny trn IE th kia, ri trn nhng trnh duyt khc th....~_~ Tht l nhc u phi khng , i lc ti cng phi tht ln rng :" tri sanh ra IE ; sao cn to ra FF" . ac Hm nay ti xin cp n 1 vn l chn thuc tnh min-height cho IE, v khi chng ta chn thuc tnh min-height cho 1 <div> no chn hn th FF v Safari v.v u hiu v chy tt, cn trn ie th li khng hiu c thuc tnh min-height. Vy lm sao IE c th hiu c thuc tnh ny? rt n gin, chng ta ch cn thm vo 1 on css nh th IE s hiu v chy tt nh nhng trnh duyt khc ngay: /* Cho tt c cc trnh duyt */ .box { width:20em; padding:0.5em; border:1px solid #000; min-height:8em; height:auto; } /* Fix cho IE */ /*\*/ * html .box {

18

height: 8em; } /**/ ^_^ th l xongXem thm ti y (http://www.medizai.com/Medizai,Entry,AT00231Number159ChuyenMucCss.aspx) ngun www.Medizai.com (http://www.Medizai.com)

19