Mc lc

Contents
Contents...................................................................................................................................... 1

C bn v CSS
Trong bi m u ny chng ta s i tm hiu mt s khi nim v c t nh c!a "##$ m chng ta cn ch % trong sut &u trnh 'm vic v(i "##

I. CSS l g
"## )"asca*ing #ty'+ #h++ts, -.c hiu mt cch /n gi0n 1 ' cch m chng ta th2m cc kiu hin th3 )4ont ch5$ k ch th-(c$ mu s6c777, cho mt ti 'iu 8+b

II. Mt s c tnh c bn ca CSS

97 "## &uy 3nh cch hin th3 c!a cc th: ;T<= b>ng cch &uy 3nh cc thuc t nh c!a cc th: 1 )4ont ch5$ mu s6c,7 ? cho thu@n tin bAn c1 th t ton b cc thuc t nh c!a th: vo trong mt 4i'+ ri2ng c1 Bhn m rng ' C7cssC "## n1 Bh vD gi(i hAn trong thiEt kE 8+b$ bi chF cn mt 4i'+ "## c1 th cho BhGB bAn &u0n ' 3nh *Ang v 'ayout tr2n nhiHu trang khc nhau7 "c nh Bht trin 8+b c1 th 3nh nghIa sJn thuc t nh c!a mt s th: ;T<= no 1 v sau 1 n1 c1 th *Kng 'Ai tr2n nhiHu trang khc7 L7 "1 th khai bo "## b>ng nhiHu cch khc nhau7 MAn c1 th t oAn "## c!a bAn Bh a trong th: Nh+a*O777NPh+a*O$ hoc ghi n1 ra 4i'+ ri2ng v(i Bhn m rng C7cssC$ ngoi ra bAn cQn c1 th t chng trong tRng th: ;T<= ri2ng bit Tuy nhi2n tKy tRng cch t khc nhau m -u ti2n c!a n1 cSng khc nhau7 <Tc -u ti2n c!a "## s th+o thT tU sau7 97 #ty'+ t trong tRng th: ;T<= ri2ng bit L7 #ty'+ t trong Bhn Nh+a*O V7 #ty'+ t trong 4i'+ m rng 7css W7 #ty'+ mc 3nh c!a trnh *uyt <Tc -u ti2n s gi0m *n tR tr2n Xung *-(i7 V7 "## c1 t nh kE thRaY gi0 sZ r>ng bAn c1 mt th: N*iv i*[Cvi*uCO \ -.c khai bo u 4i'+ css v(i cc thuc t nh nh- sauY
4. #vidu { 5. width: 200px; 6. height: 300px; 7. }

] mt ch^ no 1 trong 4i'+ css bAn 'Ai khai bo mt 'n n5a th: N*iv i*[Cvi*uCO v(i cc thuc t nh7
#vidu { width: 400px; backgrou d!co"or: ###0000; }

#au oAn khai bo ny th th: N*iv i*[Cvi*uCO s c1 thuc t nhY

#vidu { width: 400px; $% &' "( khai b)o c* %$ height: 300px; backgrou d!co"or: ###0000; }

C php ca CSS
#au khi hiu ' n6m b6t -.c mt s c t nh c!a "## chng ta tiEB t_c i tm hiu vH c BhB v cch khai bo c!a cc th: "## " BhB c!a "## -.c chia 'm V Bhn7 Bhn th: ch`n )s+'+ctor,$ Bhn thuc t nh )BroB+rty,$ Bhn nh\n )va'u+,7
+e"ector {propert,: va"ue}

aEu nh\n c!a bAn c1 nhiHu tR bAn n2n t nh\n c!a bAn vo trong *bu nhy kGB
p {-o t!-a.i",: /+a + +eri-/}

Trong tr-cng h.B th: ch`n c!a bAn nhiHu thuc t nh th cc thuc t nh s -.c ngdn cch bi *bu )e,7
p {text!a"ig :ce ter;co"or:red}

fhi th: ch`n c1 nhiHu thuc t nh th chng ta n2n m^i thuc t nh tr2n mt *Qng ri2ng bit7
p { text!a"ig : ce ter; co"or: b"ack; -o t!-a.i",: aria" }

! sa" ch#n CSS v" t$"ng t$ang %&b

MAn \ c1 mt 4i'+ "## c!a bAn$ bgy gic chng vic tiEB th+o ' 'm thE no chin nh5ng oAn "## c!a bAn vo trong trang$ j X+m chng hoAt ng nh- thE no7 Trong Bhn ny chng ta s i tm hiu chi tiEt vH cch chin mt oAn sty'+ trong trang ;T<= hay 'i2n kEt t(i mt 4i'+ "## viEt sJn7 fhi trnh *uyt `c En "##$ th ton b 8+bsit+ s -.c 3nh *Ang th+o cc thuc t nh \ -.c khai bo trong Bhn "##7 "1 ba cch cho BhGB chng ta chin 3nh *Ang "## vo trong 8+bsit+7

'. CSS ()c *ha+ b" t$"ng ,+l& $+-ng.

Ton b m\ "## -.c chTa trong 4i'+ ri2ng c1 Bhn m rng 7css ' mt % t-ng -.c *Kng khi mt 4i'+ "## s -.c B *_ng cho nhiHu trang khc nhau7 MAn c1 th thay ki cch hin th3 c!a ton b sit+ m chF cn thay ki mt 4i'+ "##7 Trong cch ny th 4i'+ "## s -.c chin vo vdn b0n ;T<= thhng &ua th: N'inkO777NP'inkO7 Ta c1 c BhB nh- sauY
0ht."1 0head1 0"i k re"2/+t,"e+heet/ t,pe2/text$c++/ hre-2/.,+t,"e.c++/ .edia"2/a""/ $1 0$head1 0bod,1 0$bod,1 0$ht."1

Trnh *uyt s `c ton b cc 3nh *Ang -.c &uy 3nh trong 4i'+ mysty'+7css v 3nh *Ang cho vdn b0n ;T<=7 li'+ "## c1 th -.c soAn th0o b>ng mt s trnh *uyt khc nhau7 Trong 4i'+ khhng -.c chTa m\ ;T<=$ khi ghi 'Ai chng ta b6t buc Bh0i ghi 'Ai v(i Bhn m rng ' .css7 mi0 sZ chng trong 4i'+ mysty'+7css tr2n chTa oAn m\ sauY
hr {co"or: +ie a} p {.argi !"e-t: 20px} bod, {backgrou d!i.age: ur"3/i.age+$back40.gi-/4}

fhhng bao gic sZ *_ng kho0ng tr6ng trong nh\n$ gi0 sZ r>ng nEu bAn *Kng marginn'+4tY Lo BXe thay cho marginn'+4tY LoBXe th pqr s hiu cQn cc trnh *uyt nh- lir+4oX$ sB+ra s khhng hiu

.. Ch#n CSS t$"ng t+ l+/0 12M

"hin thtng "## trong ti 'iu -.c B *_ng trong tr-cng h.B nh5ng 3nh *Ang "## ny chF ginh ri2ng cho ti 'iu ;T<= 17 fhi bAn chin trUc tiEB th oAn m\ c!a bAn Bh0i t trong th: Nsty'+O v t trong Bhn Nh+a*O7
0head1 0+t,"e t,pe2/text$c++/1 hr {co"or: +ie a} p {.argi !"e-t: 20px} bod, {backgrou d!i.age: ur"3/i.age+$back40.gi-/4} 0$+t,"e1 0$head1

"1 mt s trnh *uyt cS s khhng hiu th: Nsty'+O$ n1 s bu &ua th: ny7 Tuy nhi2n th ni *ung trong th: Nsty'+O vvn hin th3 ra trang ;T<=7 j v@y m chng ta s Bh0i *Kng 3nh *Ang ch th ch trong ;T<= chTa Bhn ni *ung c!a th: Nsty'+O7
0head1 0+t,"e t,pe2/text$c++/1 05!! hr {co"or: +ie a} p {.argi !"e-t: 20px} bod, {backgrou d!i.age: ur"3/i.age+$back40.gi-/4}

!!1 0$+t,"e1 0$head1

3. Ch#n t$4c t+5p v" th6 ca 12M 7+nl+n& st8l&9

pn'in+ sty'+ -.c sZ *_ng nhiHu trong tr-cng h.B mt th: ;T<= no 1 cn c1 sty'+ ri2ng cho n17 pn'in+ sty'+ -.c B *_ng cho ch nh th: ;T<= 1$ cch ny s c1 -u ti2n '(n nhbt so v(i hai cch tr2n7 w-(i gy ' mt v *_ m chng ta *Kng pn'in+ sty'+
0p +t,"e2/co"or: +ie 6hi+ i+ a paragraph 0$p1 a; .argi !"e-t: 20px/1

:. ;h+0 St8l&sh&&t
Trong tr-cng h.B m c1 mt s th: c1 cKng 3nh *Ang$ chng ta c1 th gB chng 'Ai v(i nhau7 mi0 sZ nh- sauY
h78 h28 h3 { .argi !"e-t: 70px; -o t!+i9e: 750:; ... }

ming oAn m\ tr2n th c0 ba th: h9$ hL$ hV Hu c1 cKng V thuc t nh nh- tr2n7

Cc v<n v v=n bn v cch >nh ?@ng v=n bn

Thuc t nh "## t+Xt cho BhGB bAn hon ton c1 th &u0n ' -.c cc thuc t nh c!a vdn b0n$ bAn c1 th &u0n ' -.c sU xn hin c!a n1$ thay ki mu s6c$ tdng hoc gi0m kho0ng cch gi5a cc k% tU trong mt oAn$ cdn chFnh vic *1ng hng )a'ign,$777 "c thuc t nh c!a t+Xt m "## h^ tr.

At !0 ch" !t "@n v=n bn

? t mu cho mt oAn vdn b0n chng ta c1 th *Kng thuc t nhY c"l"$B C!D !0E
p { co"or: #333333; }

At !0 nn ch" "@n v=n bn.

MAn c1 th t mu nHn )backgroun*, cho oAn vdn b0n b>ng thuc t nh bac*g$"0n?Fc"l"$B C!D !0E
p { backgrou d!co"or: #;;;;00;

C=n chGnh *h"ng cch g+Ha cc *I t4.

fho0ng cch gi5a cc k% tU trong mt oAn vdn b0n c1 th -.c tdng hoc gi0m bi thuc t nh l&tt&$Fspac+ngB *h"ng cchE
h3 { "etter!+paci g: 2e.; } h7 { "etter!+paci g: !3e.; }

C=n chGnh *h"ng cch g+Ha cc ?Jng.

Thuc t nh l+n&Fh&+ghtB *h"ng cchE s giB bAn cdn chFnh kho0ng cch gi5a cc *Qng trong mt oAn vdn b0n7
p { "i e!height: 750:; $$ "i e!height: 75px; }

KLng hng
? gi1ng hng cho mt oAn vdn b0n chng ta s *Kng thuc t nh t&MtFal+gnB v> t$E
p { text!a"ig : "e-t; $% "e-t < ce ter < right %$ }

2$ang h"ng th-! ch" "@n v=n bn.

<t -cng gAch chgn hoc -cng gAch ngang *Qng vdn b0n s 'm cho oAn vdn b0n c!a bAn th2m sinh ng7 ? th im th2m cho oAn vdn b0n chng ta s *Kng thuc t nh t&MtF ?&c"$at+"nB th0c tnhE
h3 { text!decoratio : u der"i e; $% =>ch ch? } h2 { text!decoratio : "i e!through; $% =>ch } h7 { text!decoratio : over"i e; $% k@ tr( } %$ %$

ga g %$

ChGnh v> t$ ca "@n v=n bn 7+n?&nt9.

Thuc t nh t&MtF+n?&ntB v> t$E s cdn chFnh v3 tr c!a *Qng vdn b0n th+o chiHu ngang7
h7 { text!i de t: !2000px; $% text!i de t: 30px; %$

A+0 *+Nn cc *I t4 t$"ng !t "@n v=n bn.

MAn c1 th iHu khin ton b oAn vdn b0n ' ch5 hoa hay ch5 th-cng bi thuc t nh t&MtF t$ans,"$!B *+N0 chHE
p.upperca+e { text!tra -or.: upperca+e; } p."owerca+e { text!tra -or.: "owerca+e; } p.capita"i9e { text!tra -or.: capita"i9e; }

At h(Ong ch" "@n v=n bn.

;-(ng c!a oAn vdn b0n c1 th tR tri &ua Bh0i hay tR Bh0i &ua tri chng ta c1 th iHu khin bi thuc t nh *ir+ctionY h-(nge
div.rt" { directio : rt"; $% Aight to "e-t %$ } div."tr { directio : "tr; $% Be-t to right %$ }

2=ng *h"ng cch g+Ha cc tP.

fho0ng cch gi5a cc tR c1 th -.c tdng bi thuc t nh yor*nsBacingY kho0ng cche
word!+paci g: 30px;

! !<t tc ?ng ca (Qng ba" ca !t th6 12M .

? 'm mbt tc *_ng -cng bao c!a mt th: ;T<= chng ta *Kng thuc t nh Rh+t&Fspac&B g+ t$>E
p { white!+pace: } owrap;

Thuc t nh Rh+t&Fspac& s 'm cho ton b oAn vdn b0n tr2n mt *Qng7

Cc th0c tnh ca ,"nt chH v >nh nghSa ,"nt chH ch" v=n bn
"c thuc t nh vH 4ont ch5 s cho BhGB bAn thay ki h` 4ont )4ont 4ami'y,$ @m )bo'*n+ss,$ k ch th-(c )siz+, v kiu 4ont )sty'+,7 T' At ,"nt ch" "@n v=n bn. ? t mt 'oAi 4ont ch5 no 1 cho oAn vdn b0n th chng ta s sZ *_ng thuc t nh ,"ntF ,a!+l8B
p { -o t!-a.i",: Cria"8 6aho.a8 Derda a8 +a +!+eri-; }

Thhng th-cng bAn cn Bh0i khai bo h` c!a 4ont cui )trong v *_ tr2n th sansns+ri4 ' chF t(i 9 h` 4ont, trong tr-cng h.B my c!a ng-ci *uyt 8+b khhng c1 cc 4ont nh- mnh \ t th n1 s 'by 4ont mc 3nh c!a h` 4ont tr2n7 T. At "@n v=n bn sU ?ng ,"nt nhDn capt+"n.
p.captio { -o t: captio ; }

T3 At *ch th(Oc ,"nt ch" "@n v=n bn. fhi chng ta mun nh5ng oAn vdn b0n hoc ti2u H c1 k ch th-(c c!a ch5 khc nhau$ chng ta c1 th sZ *_ng thuc t nh ,"ntFs+V&B
h7 { -o t!+i9e: 20px; } h3 { -o t!+i9e: 72px; }

T: A>nh l@+ *ch th(Oc ,"nt bWng th0c tnh ,"ntFs+V&FaX0stB

p { -o t!+i9e!aEu+t: 0.60; }

TY At *+N0 ,"nt ch" "@n v=n bn. "h5 @m$ ch5 nghi2ng$777 -.c t v(i thuc t nh ,"ntFst8l&B
p { -o t!+t,"e: ita"ic; $% } or.a" < ita"ic < ob"iFue %$

or

<un hin th3 4ont *Ang sma''ncaBs hoc *Ang norma' th chng ta s sZ *_ng thuc t nh ,"ntFva$+ant7 Thuc t nh ny c1 hai gi tr3 norma' v sma''ncaBs
p { -o t!varia t: } or.a"; $% or.a" < +.a""!cap+ %$

TZ At [! nh@t ca ,"nt. fhi chng ta mun thay ki @m nhAt c!a vdn b0n chng ta s *Kng thuc t nh ,"ntFR&+ghtB7 "hng ta c1 th t gi V 'oAi gi tr3 cho thuc t nh ny 97 norma')bnh th-cng,$ L7 bo'*)@m,$ V7 Voo)t *Ang s,
h3 { -o t!weight: bo"d; }

T\ ]ha+ b" cc th0c tnh ,"nt ^ ?@ng sh"$than?.

p { -o t: ita"ic +.a""!cap+ G00 72px aria"; }

A(Qng v+n v cc th0c tnh ca (Qng v+n

"c thuc t nh c!a -cng viHn )bor*+r, s cho BhGB t cc gi tr3 c bit cho -cn viHn nhkiu -cng viHn$ k ch th-(c$ mu s6c7 Thuc t nh ny s -.c B *_ng cho cc th: ;T<= nhN*ivO$ N'iO$ Ntab'+O$777 Trong thuc t nh -cng viHn )bor*+r, chng ta c1 V gi tr3 c/ b0n 1 'Y 97 bor*+rnco'orY L7 bor*+rnyi*thY V7 bor*+rnsty'+Y o9Thuc t nh mu c!a -cng viHn ? t mu cho -cng viHn chng ta s t thhng s mu cho thuc t nh b"$?&$Fc"l"$B
div.co"or { border!co"or: ###0000; }

oL?t chiHu rng cho -cng viHn )bor*+r, aEu mun t chiHu rng c!a -cng viHn chng ta s t gi tr3 cho thuc t nh b"$?&$FR+?thB
div.borerwidth { border!width: 2px; }

S22 _+ t$> 9 thin L m+*ium V thick W '+ngth oV"h`n kiu c!a -cng viHn MAn c1 th sZ *_ng thuc t nh b"$?&$Fst8l& t kiu cho -cng viHn7 "hng ta c1 th gn cho thuc t nh ny { gi tr3 khc nhau t-/ng Tng v(i { kiu -cng viHn khc nhau7
div.border+t,"e { border!+t,"e: +o"id; }

S22 b"$?&$Fst8l& 9 non+ L hi**+n V *ott+* W *ash+* | so'i* r *oub'+ } groov+ ~ ri*g+ { ins+t 9o outs+t j(i W Bh a c!a i t-.ng ta c1 W thuc t nh bor*+r t-/ng TngY 97 bor*+rntoBY L7 bor*+rnrightY V7 bor*+rnbottomY W7 bor*+rn'+4tY ng v(i -cng viHn c!a m^i Bh a chng ta Hu c1 V gi tr3 )co'or$ yi*th$ sty'+, S22 9 L V W toB right bottom '+4t `ha 2h0c tnh bor*+rntoBnco'orY bor*+rntoBnyi*thY bor*+rntoBnsty'+Y bor*+rnrightnco'orY bor*+rnrightnyi*thY bor*+rnrightnsty'+Y bor*+rnbottomnco'orY bor*+rnbottomnyi*thY bor*+rnbottomnsty'+Y bor*+rn'+4tnco'orY bor*+rn'+4tnyi*thY bor*+rn'+4tnsty'+Y

"hng ta c1 th *Kng Bh-/ng BhB viEt m\ gi0n '-.c )shorthan*, viEt cc thuc t nh c!a -cng viHn g`n h/n7 mi0 sZ chng ta t thuc t nh bor*+r c!a th: N*ivO v(i rng b>ng 9$ kiu so'i* v mu ' ""oooo
div.border { border: 7px +o"id ###0000; }

Cc th0c tnh ca !a$g+n

Thuc t nh !a$g+n s 3nh nghIa kho0ng tr6ng bao &uanh mt Bhn tZ ;T<=7 a1 c1 th *Kng gi tr3 gm 'ng ni *ung vo v(i nhau7 T-/ng Tng v(i W Bh a c!a mt Bhn tZ chng ta c1 W thuc t nh t-/ng Tng7 <t khc viEt cho g`n chng ta cSng c1 th *Kng cch viEt gi0n '-.c 3nh nghIa cc gi tr3 cho thuc t nh !a$g+n7 ?i v(i cc trnh *uyt a+tcaB+ v pq th gi tr3 mc 3nh c!a thuc t nh !a$g+n ' ~BX7 ah-ng sB+ra th khhng h^ tr. nh- v@y7 ? cho thng nhbt chng ta c1 th t !a$g+n mc 3nh cho ton b cc Bhn tZ7 "c gi tr3 m thuc t nh !a$g+n c1 th nh@n -.c 1 'Y auto$ '+ngth$ 7 "hng ta t gi tr3 no ' tKy th ch cng v(i vic t-/ng Tng tF ' v(i cc Bhn tZ khc7 T-/ng Tng v(i W Bh a ta c1 W thuc t nhY 97 marginntoBY L7 marginnrightY V7 marginnbottomY W7 marginn'+4tY ? cho g`n chng ta cSng c1 th vit thuc t nh !a$g+n *-(i *Ang shorthan*
div..argi { .argi : 70px 4px 5px Gpx; $% top } < right < botto. < "e-t%$

2h0c tnh (Qng ba" ng"+ 7a0tl+n&9

Thuc t nh a0tl+n& s v mt -cng bao ngoi ton b mt Bhn tZ ;T<=$ i v(i Bhn tZ c1 -cng viHn )bor*+r, th -cng bao ny s bao tr`n -cng viHn c!a Bhn tZ 17 "Sng t-/ng tU nh- -cng viHn bAn c1 th t cho n1 cc thuc t nh vH mu sdc$ '(n v kiu7 "1 mt iHu cn ch % ' cc thuc t nh c!a -cng bao ny c1 th khhng -.c h^ tr. tr2n pq o9?t thuc mu cho -cng bao aEu mun t mu cho -cng bao chng ta c1 th sZ *_ng thuc t nh "0tl+n&Fc"l"$B
p { out"i e!co"or: ###0000; }

oL?t rng cho -cng bao7 T-/ng tU nh- -cng viHn$ t rng cho -cng bao chng ta t gi tr3 '(n cho thuc t nh "0tl+n&FR+?thB
p { out"i e!width: 2px; }

oV"h`n kiu -cng bao ? ch`n kiu cho -cng bao chng ta s t 'n '-.t cc gi tr3 cho thuc t nh "0tl+n&Fst8l&B
p { out"i e!+t,"e: dotted; }

S22 "0tl+n&Fst8l& 9 non+ L hi**+n V *ott+* W *ash+* | so'i* r *oub'+ } groov+ ~ ri*g+ { ins+t 9o outs+t ? cho g`n chng ta cSng c1 th viEt cc gi tr3 c!a thuc t nh a0tl+n& *-(i *Ang shorthan* nhsauY

div.out"i e { out"i e: 7px +o"id #000; }

CSS pa??+ng
"## Ba**ing s 3nh nghIa kho0ng trng gi5a mGB c!a cc Bhn tZ t(i cc Bhn tZ con hoc ni *ung b2n trong7 "hng ta khhng th gn gi tr3 gm cho thuc t nh ny7 "Sng ging nh- margin thuc t nh Ba**ing cSng t-/ng Tng v(i W Bh a c!a Bhn tZ7 T-/ng Tng v(i W Bh a c!a Bhn tZ chng ta c1 W thuc t nh pa??+ng t-/ng Tng 1 'Y 97 Ba**ingntoBY L7 Ba**ingnrightY V7 Ba**ingnbottomY W7 Ba**ingn'+4tY "c gi tr3 c1 th gn cho cc thuc t nh ny ' Y hoc '+ngth ? viEt cho g`n chng ta cSng c1 th viEt thuc t nh pa??+ng *-(i *Ang shorthan*7
div.paddi g { paddi g: 5px 3px 2px Hpx; }

! th6 ?+v cL thanh c0n 7sc$"llba$9 g+ng +b$a!&

Mi viEt *-(i gy s gi(i thiu v(i cc bAn cch 'm cho th: N*ivO c1 thanh cun ging khi ta sZ *_ng ilram+ 'oa* mt trang khc7 Tr-(c hEt chng ta c1 v *_ vH oAn m\ ;T<= nh- sauY
05IJ#6KLM ht." LNOBP# /!$$Q3#$$I6I RS6TB 7.0 Utrict$$MV/ /http:$$www.w3.org$6A$xht."7$I6I$xht."7!+trict.dtd/1 0ht." x." +2/http:$$www.w3.org$7GGG$xht."/ x.":"a g2/e / "a g2/e /1 0head1 0tit"e1exa.p"e page0$tit"e1 0$head1 0bod,1 0div id2/page/1 0h716it"e0$h71 0div id2/+cro""Wbox/1 0p1 Lut a "o g text i here. Pt wi"" be cro""ab"e.0br$1 Lut a "o g text i here. Pt wi"" be cro""ab"e.0br$1 Lut a "o g text i here. Pt wi"" be cro""ab"e.0br$1 Lut a "o g text i here. Pt wi"" be cro""ab"e.0br$1

Lut a Lut a Lut a 0$p1 0$div1 0p1 6hi+ co 0$p1 0$div1 0$bod,1 0$ht."1

"o g text i "o g text i "o g text i

here. Pt wi"" be cro""ab"e.0br$1 here. Pt wi"" be cro""ab"e.0br$1 here. Pt wi"" be cro""ab"e.0br$1

te t -o""ow+ a-ter the +cro""ab"e box.

Mgy gic chng ta tiEn hnh sty'+ cho th: N*ivO$ tr-(c hEt chng ta cn Bh0i t c 3nh chiHu rng v chiHu cao c!a cho th: N*ivO
#+cro""Wbox { height: 720px; width: 400px; ... }

? cho th: N*ivO hin th3 thanh cun chng ta s t thuc t nh ?+spla8 c!a th: N*ivO ' a0t"
#+cro""Wbox { height: 720px; width: 400px; di+p"a,: auto; border: 7px +o"id #######; .argi : 7e. 0; }

fhi bAn -a ni *ung *i h/n chiHu cao v chiHu rng c!a th: N*ivO th trnh *uyt s tU ng sinh ra thanh cuhn ngang v thanh cun *`c ging nh- ilram+7 f thu@t ny hin c1 kh nhiHu 8+bsit+ sZ *_ng c1 cch th hin ni *ung ri2ng bit c!a mnh7

St8l& !t *+N0 c0bbl& n gin

Thhng th-cng khi chng ta *uyt 8+b$ chng ta s khhng % t(i cch trnh by c!a trang 8+b 1$ m chF % En thhng tin c!a n17 ah-ng nEu chng ta % mt cht th nh@n thby r>ng$ nEu 8+bsit+ no biEt v@n *_ng cc kiu TyBograBhy h.B '% th s giB ng-ci `c Bhgn bit cc mTc thhng tin rbt nhanh7 ?iHu 1 s c1 tc ng tt i v(i ng-ci `c ? giB cc bAn c1 th1i &u+n B *_ng cc kiu TyBograBhy vo trong 8+bsit+ c!a mnh7 Trong bi viEt ny thi Xin h-(ng *vn cc bAn 'm mt kiEu bubb'+ /n gi0n wAng bubb'+ th-cng -.c sZ *_ng trong vic tr ch *vn 'ci n1i c!a mt tc gi0 no 1$ hoc trong cc 'ci bnh 'u@n trong cc bl"g7

'. A>nh ?@ng 12M

N*iv c'ass[Cbubb'+yraBB+rCO N*iv c'ass[Ccomm+ntCO ?gy ' v *_ c!a mt kiu bubb'+ /n gi0n$ cc bAn c1 th Tng *_ng chng vo ngay trong sit+

c!a mnh7 "hc cc bAn thnh chng NP*ivO N*iv c'ass[Ccomm+nt4oot+rCO NsBan c'ass[CauthorCOTc gi0YNPsBanO Na hr+4[Cyyy7cssy+ah7comC targ+t[Cb'ankC tit'+[CTc gi0CO"##+ah7comNPaO NP*ivO NP*ivO ? 'm kiu b0bll& /n gi0n ny chng ta s sZ *_ng hai th: N*ivO7 Th: N*iv c'ass[Ccomm+ntCO chTa 'ci bnh 'u@n$ cQn th: N*iv c'ass[C4oot+rcomm+ntCN s -.c *Kng chTa thhng tin tc gi07 Th: N*iv c'ass[Cbubb'+yraBB+rCO trong tr-cng h.B ny c1 tc *_ng gi(i hAn k ch th-(c cho hai th: N*ivO b2n trong7 fhi -a vo trong 8+bsit+ bAn c1 th thay ki k ch th-(c c!a n1 cho BhK h.B v(i ni *ung 8+bsit+7

.. A>nh ?@ng CSS

Ta c1 3nh *Ang "## c!a kiu b0bll& tr2n nh- sauY
#wrapper { width: 400px; .argi : 0 auto; paddi g: 0; } div.co..e t { .argi : 0; paddi g: 70px; backgrou d: #MHM#M;; } div.co..e t-ooter { paddi g: Hpx 0 0 22px; backgrou d: ur"3arrow!dow .gi-4 } +pa .author { paddi g!"e-t: 75px; backgrou d: ur"3author.gi-4 -o t!weight: bo"d; } div.co..e t-ooter a { co"or: ###0000; } div.co..e t-ooter a:hover8 div.co..e t-ooter a:active { text!decoratio : o e; }

o!repeat 20px 0 #;;;;;;;

o!repeat "e-t ce ter;

Trong Bhn ni *ung *o chng ta c1 th *Kng nhiHu 'n Ang b0bbl& ny$ *o v@y chng ta 3nh *Ang thuc t nh c'ass cho th: N*ivO

C=n bng v" g+Ha !n hnh.

Mnh th-cng th bAn mun t mt tab'+ c1 chiHu rng c 3nh vo gi5a mn hnh th bAn 'm thE no c1 Bh0i bAn t thuc t nh al+gndec&nt&$e vo trong th: Ntab'+O7 aEu bAn 'm nh- v@y th bAn chF -.c kEt &u0 ng nh- % bAn tr2n mt s trnh *uyt$ cQn mt s trnh *uyt s khhng th hin kEt &u0 nh- bAn mun7 #au gy thi mun gi(i thiu v(i bAn mt tiBs nhu trong "## t mt tab'+ c1 k ch th-(c c 3nh vo gi5a trang7 mi0 sZ r>ng bAn c1 mt tab'+ nh- sauY Ntab'+ c'ass[Cc+nt+rCO7 aEu bgy gic bAn mun t tab'+ 1 vo gi5a trang mn hnh bAn chF vic t cho hai thuc t nh !a$g+nFl&,t v !a$g+nF$+ght c!a tab'+ c1 gi tr3 b>ng a0t"7 "hng ta c1 m\ "## nh- sauY
tab"e.ce ter { width: 7H0px; .argi !"e-t: auto; .argi !right: auto; }

M&n0 ?@ng tab F `hfn I.

Trong chng ta thi gim ch6c r>ng khhng cQn t ng-ci vvn cQn mc c0m v(i nh5ng m+nu *Ang tab$ khhng Bh0i v n1 Xbu m 'uhn nghI r>ng 'm n1 kh1 v cbu trc c!a n1 rbt BhTc tAB7 "h nh b0n thgn thi tr-(c gy cSng nh- v@y7 ah-ng thUc ra c1 Bh0i nh- v@y khhng tr0 'ci cgu hui 1 bgy gic chng ta cKng nhau thZ #ty'+ cho mt kiu tab /n gi0n X+m n1 c1 thUc sU kh1 nhchng ta vvn th-cng nghI khhng7 Trong m+nu *Ang ny bao gic cSng gm L Bhn$ Bhn 9 chTa cc tab v Bhn thT hai ' Bhn chTa ni *ung c!a cc tab7 c1 hnh *ung r h/n chng ta s X+m hnh 0nh minh h`a *-(i gy7 ?u ti2n chng ta s 3nh *Ang cho Bhn khung c!a tab nh- sauY
div#wrapper { .argi : 50px; paddi g: 0; }

"hng ta s *Kng 3nh *Ang c!a th: No'O tAo '2n cc tab Bhn 97 jH nguy2n t6c th chng ta c1 th *Kng mt trong ba th: Nu'O$ No'O$ N*'O7 ah-ng tAi sao thi 'Ai *Kng th: No'O$ ' bi v mt '% *o no 1 m trnh *uyt c!a ng-ci X+m khhng t0i -.c "## tR 8+bsit+ c!a bAn th h` vvn hiu -.c cbu trc tab c!a bAn7 ?3nh *Ang c!a Bhn mt nh- sau
0o" c"a++2XtabX1 0"i c"a++2XactiveX16ra g chY0$"i1 0a hre-2Xgioithieu.ht."X tit"e2X=iZi thi[uX1=iZi thi[u0$a1 0a hre-2X+a pha..ht."X tit"e2XU\ ph].X1U\ ph].0$a1 0a hre-2Xti tuc.ht."X tit"e2X6i t^cX16i t^c0$a1

0a hre-2X"ie he.ht."X tit"e2XBi( 0$o"1

h[X1Bi(

h[0$a1

Mgy gic chng ta s 3nh *Ang sao cho cc tab n>m tr2n cKng mt hng v c1 hnh *ng c!a tab7
o".tab { backgrou d: ur"3..$dot.gi-4 repeat!x "e-t botto.; $% \ h 7px %$ "i+t!+t,"e: o e; .argi : 0; paddi g: 6px 0; po+itio : re"ative; } o".tab "i { backgrou d: #;2;5;C; border: 7px +o"id #I3IIMI; di+p"a,: i "i e; $% c)c th@ "i _ tr( .argi !right: 5px; paddi g: 0; }

.`t da g %$

Trong cch 3nh *Ang ny ta c1 sZ *_ng mt k thu@t nhu$ 1 ' chng ta c1 sZ *_ng mt 0nh 7gi4 c1 k ch th-(c 9BX X 9BX thay thE bor*+rnbottom c!a No'O fhi ang trong trang no 1 th tab c!a trang 1 s c1 mu khc v(i nh5ng tab khc$ *o v@y chng ta s t cho tab 1 mt c'ass ' act+v&7 j v@y chng ta cn Bh0i 3nh *Ang cho ri2ng cho cc tab act+v& nh- sauY
o".tab "i.active { backgrou d: #;;;; border!botto.: 7px +o"id #;;;; -o t!weight: bo"d; paddi g: 5px 70px; }

TiEB th+o chng ta s 3nh *Ang cho cc 'ink n>m trong th:
o".tab a { -o t!weight: bo"d; .argi : 0; paddi g: 5px 70px; }

"ui cKng bgy gic chng ta s 3nh *Ang Bhn chTa ni *ung c!a m^i tab7 hn ny chF /n gi0n ' chng ta 3nh *Ang cho th: N*ivO chTa ni *ung7
div#co te t { border: 7px +o"id #I3IIMI; border!top: o e; paddi g: 70px; }

]g th0[t l! chH h"a f0 ?Jng 7K$"p cap9

wroB caB ' mt trong nh5ng tyBograBhy hay -.c *Kng trong cc tAB ch tr2n giby cSng nh- cc tAB ch in tZ7 a1 th-cng -.c *Kng u m^i bi bo v(i 4ont ch5 '(n v mu s6c nki tri7 Th+o &uy 'u@t nhn c!a m6t nEu mt i t-.ng nki b@t h/n cc i t-.ng Xung &uanh$ nh n1 s c1 tc ng mAnh t(i th3 gic c!a ng-ci &uan st7 "h nh v '% *o 1 m ng-ci ta vvn th-cng *Kng cch ny cho cc bi bo nki b@t cn sU ch % cao7 Tuy nhi2n trong khuhn khk c!a 'Inh vUc nghi2n cTu chng ta s i tm hiu mt s k thu@t 'm ch5 hoa u *Qng )wroB caB,7

'. Cch thh nh<t

?u ti2n chng ta s i tm hiu cch 'm wroB caB ch nh thng7 Trong cch ny chng ta s sZ *_ng En k thu@t s+'+ctors trong "##7 c_ th ' chng ta s *Kng En thuc t nh B,+$stFl&tt&$7 Ta c1 3nh *Ang ;T<=Y
0p c"a++2/pdropcap/1Bore. ip+u. do"or +it a.et co +ectetuer at et Ce ea ac do"or. Bigu"a u""a ac id pede +it co +ectetuer ip+u. .a"e+uada co va""i+ habita t. VeFue at pe""e te+Fue pharetra Ce ea accu.+a orci Lroi "eo te""u+ eu. Iictu.+t P teger ut adipi+ci g porttitor do"or Torbi ut id "ore. auctor. Ta++a te""u+ Torbi e i. te""u+ pede ve" +u+cipit hac +apie #ra+. #ur+u+ ve"it he drerit "oborti+ e"it e"it +ed ut P .0$p1

?3nh *Ang "##Y

p.pdropcap:-ir+t!"etter { -"oat: "e-t; paddi g: 4px Hpx 0 0; di+p"a,: b"ock; co"or: #3366GG; -o t: 60px$50px =eorgia8 6i.e+8 +eri-; }

fEt &u0 hin th3Y =or+m iBsum *o'or sit am+t cons+ct+tu+r at +t +n+an ac *o'or7 =igu'a nu''a ac i* B+*+ sit cons+ct+tu+r iBsum ma'+sua*a conva''is habitant7 a+&u+ at B+''+nt+s&u+ Bhar+tra +n+an accumsan orci roin '+o t+''us +u7 wictumst pnt+g+r ut a*iBiscing Borttitor *o'or <orbi ut i* 'or+m auctor7 <assa t+''us <orbi +nim t+''us B+*+ v+' susciBit hac saBi+n "ras7 "ursus v+'it h+n*r+rit 'obortis +'it +'it s+* ut pn7 "hng ta cn Bh0i t class cho th: NB c'ass[CB*roBcaBCO nh>m m_c ch Bhgn bit n1 v(i cc th: NBO khc trong trang7 Trong tr-cng h.B bAn khhng t c'ass th ton b cc k% tU u *Qng c!a th: NBO trong trang s hin th3 3nh *Ang ch5 hoa$ m iHu 1 th khhng Bh0i ' iHu mong mun7

.. Cch thh ha+

Trong cch thT hai ny ta s *Kng th2m mt th: ispan classde?$"pcapej bao k% tU ch5 hoa u *Qng

?3nh *Ang ;T<=Y

0p10+pa c"a++2/pdropcap/1V0$+pa 1ore. ip+u. do"or +it a.et co +ectetuer at et Ce ea ac do"or. Bigu"a u""a ac id pede +it co +ectetuer ip+u. .a"e+uada co va""i+ habita t. VeFue at pe""e te+Fue pharetra Ce ea accu.+a orci Lroi "eo te""u+ eu. Iictu.+t P teger ut adipi+ci g porttitor do"or Torbi ut id "ore. auctor. Ta++a te""u+ Torbi e i. te""u+ pede ve" +u+cipit hac +apie #ra+. #ur+u+ ve"it he drerit "oborti+ e"it e"it +ed ut P .0$p1

?3nh *Ang "##Y

.dropcap { -"oat: "e-t; paddi g: 4px Hpx 0 0; di+p"a,: b"ock; co"or: #3366GG; -o t: 60px$50px =eorgia8 6i.e+8 +eri-; }

fEt &u0 hin th3Y aor+m iBsum *o'or sit am+t cons+ct+tu+r at +t +n+an ac *o'or7 =igu'a nu''a ac i* B+*+ sit cons+ct+tu+r iBsum ma'+sua*a conva''is habitant7 a+&u+ at B+''+nt+s&u+ Bhar+tra +n+an accumsan orci roin '+o t+''us +u7 wictumst pnt+g+r ut a*iBiscing Borttitor *o'or <orbi ut i* 'or+m auctor7 <assa t+''us <orbi +nim t+''us B+*+ v+' susciBit hac saBi+n "ras7 "ursus v+'it h+n*r+rit 'obortis +'it +'it s+* ut pn7 "ch ny c1 mt -u im ' k% tU hoa 1 c1 th t bbt cT gu trong bi viEt min ' chng ta th2m th: NsBan c'ass[C*roBcaBCO vo k% tU m ta mun chuyn thnh *ang *roB caB7 ? cho Bhong Bh chng ta cSng c1 th th2m mt s cc thuc t nh nh- mu nHn$ mu ch5$777 vo cho th2m sinh ng7 Ta c1 v *_ nh- sauY c *o'or7 =igu'a nu''a ac i* B+*+ sit cons+ct+tu+r iBsum ma'+sua*a conva''is habitant7 a+&u+ at B+''+nt+s&u+ Bhar+tra +n+an accumsan orci roin '+o t+''us +u7 wictumst pnt+g+r ut a*iBiscing Borttitor *o'or <orbi ut i* 'or+m auctor7 <assa t+''us <orbi +nim t+''us B+*+ v+' susciBit hac saBi+n "ras7 "ursus v+'it h+n*r+rit 'obortis +'it +'it s+* ut pn7

2$ang t$ ch" ?anh sch cL thh t4

<c 3nh hu hEt cc trnh *uyt )Mroys+r, Hu hin th3 ch5 s c!a *anh sch c1 thT tU )or*+r 'ist, th+o 4ont mc 3nh m chng ta sZ *_ng cho ni *ung sit+7 Trong bi chF *vn ng6n ny thi Xin h-(ng *vn cc bAn 'm thE no sZ *_ng hai th: No'O )or*+r'ist, v NBO th2m trang tr th2m cho *anh sch c1 thT tU or*+r'ist7 ? c1 hnh *ung r h/n cc bAn h\y nhn vo hnh v *-(i gyY

"hng ta s sZ *_ng 4ont cho cc ch5 s ' 4ont Cm+orgiaC$ cQn 4ont cho th: NBO ' 4ont ria'7 j(i hnh v tr2n chng ta c1 m\ ngun ;T<= nh- sauY
0o"1 0"i1 0p16hi+ i+ "i e o e0$p1 0$"i1 0"i1 0p1Sere i+ "i e two0$p1 0$"i1 0"i1 0p1C d "a+t "i e0$p1 0$"i1 0$o"1

w-(i gy ' m\ "## cho hai th: No'O v NBO

o" { -o t: ita"ic 7e. =eorgia8 6i.e+8 +eri-; co"or: #GGGGGG; } o" p { -o t: or.a" .He. Cria"8 Se"vetica8 +a +!+eri-; co"or: #000000; }

Mi viEt -.c tkng h.B tR %&b K&s+gn&$ %all

]g th0[t t+ nh t$(Oc bWng CSS

Trong 4i'+ "## c!a bAn c1 sZ *_ng En mt s 0nh bac*g$"0n?$ nh-ng nh5ng 0nh 1 s khhng -.c trnh *uyt t0i vH trong b m )cach+, tr2n my ngay tR u$ m khi no sZ *_ng En th n1 m(i -.c t0i vH7 "h nh v v@y hi khi n1 s sinh ra tr khi chng ta 'n u ti2n khi vo trang 8+b7 "hng ta 'by mt v *_ nh- sauY mi0 sZ r>ng trong th: NaO c!a bAn c1 sZ *_ng hai 0nh$ mt 0nh 'm *Kng hin th3 ngay tR u$ cQn mt 0nh khc sZ *_ng cho thuc t nh Bh"v&$7 f;i 'n u ti2n bAn vo 8+bsit+ khi h"v&$ chut '2n th: NaO 1 th n1 s khhng hin th3 anh thZ hai ngay m sau mt kho0ng thci gian kho0ng L En V gigy sau th m(i hin tKy th+o tc -cng truyHn7 ? kh6c Bh_c iHu 1 chng ta c1 mt th! thu@t )tiBs, nhu nh- sauY

?i v(i mt s 0nh m chng ta cn sZ *_ng 'm backgroun* trong 4i'+ css$ m chng ta khhng mun c1 tr nh- v *_ tr2n th chng ta cn c1 bin BhB t0i tr-(c nh5ng 0nh 1 vH my7 "hng ta s t ton b cc 0nh m mun t0i tr-(c vH vo trong mt th: "## nh- sauY
#preBoadP.age+ { width: 0px; height: 0px; backgrou d: ur"3..$i.age+$a h7.gi-4; backgrou d: ur"3..$i.age+$a h2.gi-4; backgrou d: ur"3..$i.age+$a h3.gi-4; ... }

MAn c1 th t oAn m\ "## tr2n vo trong 4i'+ "## c!a bAn$ hoc t vo trong th: Nh+a*O c!a trang7 j *_
0ht."1 0head1 0+t,"e t,pe2/text$c++/1 #preBoadP.age+ { width: 0px; height: 0px; backgrou d: ur"3..$i.age+$a h7.gi-4; backgrou d: ur"3..$i.age+$a h2.gi-4; backgrou d: ur"3..$i.age+$a h3.gi-4; ... } 0$+t,"e1 0$head1

#au 1 chng ta t oAn th: N*iv i*[CBr=oa*pmag+sCO tr2n vo ngay *-(i th: Nbo*yO c!a 8+bsit+ c!a bAn7 fhi trnh *uyt `c t(i th: N*ivO 1 n1 s 'oa* ton b nh5ng 0nh -.c 'it k2 trong *anh sch tr2n vo trong b m c!a trnh *uyt7
0bod,1 0div id2/preBoadP.age+/10$div1 ...

b+M !+nFh&+ght ch" Ik

;in tAi hu hEt cc trnh *uyt nh- lir+4oX$ sB+ra$ #a4ari$777 Hu hiu -.c thuc t nh !+nF h&+ghtB trong "##$ nh-ng pq 'Ai khhng th hiu -.c thuc t nh 17 "h nh v v@y m khi chng ta mun t !+nFh&+ght cho mt i t-.ng no 1 th chng ta cn Bh0i liX sao cho pq hin th3 -.c ging nh- nh5ng trnh *uyt khc7 mi0 sZ r>ng chng ta c1 mt th: N*iv c'ass[CboXCO chng ta mun t minnh+ight cho th: N*ivO ny7 fhi 1 chng Bh0i 'm nh- sauY
$% #ho tbt c\ c)c trc h du,[t %$ .box { width:20e.; paddi g:0.5e.; border:7px +o"id #000; .i !height:He.;

height:auto;

$% ;ix cho PM %$ $%d%$ % ht." .box { height: He.; } $%%$

B*at+ "hng ta cSng c1 th *Kng gi0i BhB nh- sauY

+e"ector { .i !height:500px; height:auto 5i.porta t; height:500px; }

wo pqr khhng hiu -.c thuc t nh !+nFh&+ght *o 1 chng ta Bh0i c 3nh chiHu cao cho n17 Trong tr-cng h.B ni *ung c1 chiHu cao '(n h/n h&+ght th chiHu cao trong pqr s tU ng kGo *i Xung cQn trong lir+4oX v mt s trnh *uyt khc s sZ *_ng thuc t nh h&+ghtB a0t"E7

At !+nFR+?th ch" Ikl

ah- chng ta \ biEt v(i sU Bht trin nhanh ch1ng c!a ngnh chng nghiB Bhn cTng$ ngy cng c1 nhiHu mn hnh c1 Bhgn gi0i cao7 a1 cho BhGB chng ta c1 mt khhng gian 'm vic rng h/n$ nh-ng hi khi n1 cSng ' vbn H bbt c@B i v(i 8+bsit+ c!a chng ta7 ?i v(i mt s 8+bsit+ vvn th-cng chiHu ngang ' auto th+o chiHu rng c!a mn hnh th bgy gic thi nghI r>ng cn c1 mt cht thay ki nhu7 "hng ta chF t chiHu rng 8+bsit+ c!a mnh auto t(i mt kho0ng nhbt 3nh )gi0 sZ r>ng t(i 9oLWBX$777, th chng ta s c 3nh chiHu rng c!a n17 ?iHu 1 s giB bAn ch! ng h/n trong vic thiEt kE giao *in h`a c!a mnh$ trnh tnh trAng 8+bsit+ s b3 vD khi chiHu ngang c!a mn hnh &u '(n7 ? thUc hin iHu 1 chng ta s sZ *_ng thuc t nh !aMFR+?th trong "##$ nh-ng c1 mt vvn H gy 1 ' cc trnh *uyt nh- lir+4oX$ sB+ra$ #a4ari$77 th hiu nh-ng ri2ng pqr 'Ai khhng th hiu -.c thuc t nh ny7 ? c1 th thUc hin iHu 1 tr2n pqr chng ta c1 mt gi0i BhB ' sZ *_ng cgu 'nh iHu kin c!a avascriBt v nhng vo "##Y cont+nt h+ightY }|BXe backgroun*nco'orY oooe co'orY 444e yi*thY +XBr+ssion)*ocum+nt7bo*y7c'i+nt8i*th N }WL C}WoBXC Y *ocum+nt7bo*y7c'i+nt8i*th O 9LoL C9LooBXC Y CautoC,e

minnyi*thY }WoBXe maXnyi*thY 9LooBXe

CSS 2$anspa$&nc8 t$-n t"n b cc t$nh ?08/t

Trong bi viEt C;in th3 0nh am tr2n pqC chng thi \ H c@B En vbn H 'm sao transBar+nt ton b 0nh am trong 8+bsit+ tr2n pq7 Trong bi viEt ny chng ta s H c@B H c@B En vbn H 'm cho transBar+nt backgroun* c!a mt th: no 1 m chng ta mun7 <t khc trong k thu@t ny chng ta /n thun *Kng k thu@t trong "##7 "hng ta s B *_ng cc thuc t nh sau cho mt Bhn tZ ;T<= no 1 mun transBar+nt7
.tra +pare tWc"a++ { -i"ter:a"pha3opacit,2504; !.o9!opacit,:0.5; !kht."!opacit,: 0.5; opacit,: 0.5; }

97 "pac+t8B T.YE ?gy ' mt thuc t nh rbt &uan tr`ng bi n1 ' mt thuc t nh chuxn c!a "##7 a1 s 'm vic tr2n hu hEt cc Bhi2n b0n c!a lir+4oX$ sB+ra v #a4ari7 Thuc t nh tr2n rbt cn thiEt cho nh5ng trnh *uyt h^ tr. cc thuc t nh chuxn c!a "##7 L7 ,+lt&$Balpha7"pac+t8dYT9E Thuc t nh tr2n -.c *Kng cho pq7 V7 F!"VF"pac+t8BT.YE a1 cn thiEt cho cc Bhi2n b0n cS c!a <ozi''a cSng nh- a+tscaB+ aavigator7 W7 F*ht!lF"pac+t8B T.YE ?-.c *Kng cho Bhi2n b0n cS c!a #a4ari )97X,7

c"$?&$ v nhHng +0 b@n ch(a bi5t

mi0 sZ r>ng thi c1 mt th: N*iv c'ass[Cbor*+rCO v(i 3nh *Ang "## nh- sauY
div.border { di+p"a,: b"ock; width: 7px; height: 7px; backgrou d: #;;;; border!top: 7px +o"id #;00; border!right: 7px +o"id #0;0; border!botto.: 7px +o"id #00;; border!"e-t: 7px +o"id #000; over-"ow: hidde ; }

"c bAn c1 nghI r>ng n1 s hin th3 ging nhau tr2n m`i trnh *uyt hay khhng "gu tr0 'ci c!a chng ta ' khhng$ iHu ny c1 th bAn khhng tin nh-ng 1 ' mt thUc tE v \ -.c kim trUc &ua thUc nghim7 aEu chng ta nhn thong &ua th s khhng thby iHu 1$ nh-ng

khi bAn c1 th Bh1ng to th: N*ivO nhiHu 'n th bAn s thby iHu 17 w-(i gy ' mt s kEt &u0 thby -.c khi X+m b>ng nhiHu trnh *uyt khc nhau7

?hi khi nh5ng iHu ny 'Ai 'm chng ta rbt au u trong vic 4iX cc '^i gi5a cc trnh *uyt7 fhi bAn gB tr-cng h.B thRa hoc thiEu mt BiX+' tr2n 'ayout c!a bAn th khi 1 bAn h\y nh( t(i bi viEt ny c!a chng thi7

]g th0[t (a footer xung c0+ t$ang

fhi chng ta thiEt kE 'ayout c!a trang 8+b *Ang b0ng )tab'+, th vic -a Bhn 4oot+r 'c no cSng Bh a *-(i ' mt vic hEt sTc /n gi0n7 ah-ng khi bAn 'm vic v(i 'ayout *Ang N*ivO th vic -a Bhn 4oot+r 'c no cSng Bh a *-(i ' mt iHu rbt kh1 khdn7 <c *K nh- v@y cc w+sign+r "## vvn nghI ra -.c cc th! thu@t )trick, thUc hin vic 17 #au gy chng ta s i chi tiEt vH th! thu@t nyY Tr-(c khi i vo chi tiEt c1 mt hnh *ung c_ th chng ta cKng X+m v *_ minh h`a sau7 t-ng ch! Ao c!a k thu@t ny ' chng ta s *Kng mt th: N*ivO c1 chiHu cao ' 9oo xy Bhn 4oot+r Xung Bh a *-(i$ khi 1 th Bhn 4oot+r s b3 xy ra ngoi BhAm vi c!a trang v khhng th nhn thby -.c7 ? c1 th nhn thby -.c Bhn 4oot+r chng ta s t thuc t nh !a$g+nFb"tt"! c!a Bhn yraBB+r b>ng gm v(i m_c ch ' gi0m chiHu cao c!a Bhn yraBB+r mt kho0ng ng b>ng chiHu cao c!a Bhn 4oot+r7 TR 1 chng ta c1 th hon ton nhn thby Bhn 4oot+r7 wUa tr2n % t-ng nh- v@y chng ta c1 3nh *Ang ;T<= nh- sauY
$% OM=PV: QACLLMA %$ 0div c"a++2/wrapper/1 0div c"a++2/header/1 0h71#UU Utick, ;ooter0$h71 0$div1 0div c"a++2/co te t/1 V`i du g co te t... 0$div1 0div c"a++2/pu+h/10$div1 0$div1 $% MVI: QACLLMA %$ $% OM=PV: ;JJ6MA %$ 0div c"a++2/-ooter/1 0p1V`i du g -ooter...0$p1 0$div1 $% MVI: ;JJ6MA%$

? cho Bhn R$app&$ c1 chiHu cao 9oo chng ta 3nh *Ang cc thuc t nh "## c!a n1 nhsauY
.wrapper { ... .i !height: 700:; $% ;ix cho -ire-ox %$ height: auto 5i.porta t; height: 700:; ... }

fhi 1 Bhn 4oot+r s b3 xy ra ngoi trang$ cho n1 c1 th nhn thby -.c ta cn Bh0i t !a$g+nFb"tt"! c!a Bhn yraBB+r b>ng gm7
.wrapper { ... .argi : 0 auto !4e.; ... }

hn margin gm ny Bh0i c1 chiHu cao ng b>ng chiHu cao c!a Bhn 4oot+r7 fhi 1 Bhn 4oot+r s -.c hin th3 hon ton7

At ?Jng t&Mt v" g+Ha 7 th&" ch+0 ca"9

TR tr-(c t(i gic khi bAn mun t mt *Qng ch5 )gi0 sZ nh-, ti2u H vo gi5a mt th: ;T<= c1 mt chiHu cao Xc 3nh th bAn 'm thE no Th+o truyHn thng *Kng Ntab'+O th chng ta chF vic t thuc t nh va'ign[Cmi**'+C vo trong mt th: Nt*O ' Xong7 ah-ng nEu 1 khhng Bh0i ' th: Nt*O th bAn s 'm thE no ?H tr0 'ci th6c m6c 1 sau gy thi Xin mch n-(c bAn mt th! thu@t nhu trong "##7 mi0 sZ r>ng bAn *Kng mt th: ;T<= *Ang khi )M'ock q'+m+nt, c1 chiHu cao Xc 3nh h+ightY 9ooBXe7 Mgy gic bAn mun t mt *Qng ti2u H c1 ni *ung Tin m(i nhbt vo gi5a )th+o chiHu cao, c!a th: ;T<= 17 MAn c1 th *Kng thuc t nh pa??+ng xy *Qng ch5 1 vo gi5a$ nh-ng 1 khhng Bh0i ' gi0i BhB ng 6n nhbt7 Trong tr-cng h.B ny thuc t nh 'in+nh+igh s ' mt gi0 BhB tt nhbt$ "hng ta s *Kng thuc t nh l+n&Fh&+ght cho th: ;T<= 17 j *_
div.textce ter { .argi : 0; paddi g: 0; height: 700px; "i e!height: 700px; border: 7px +o"id #######; }

1+Nn th> nh `;_ t$-n Ik

;in 3nh *Ang 0nh am chF -.c h^ tr. bi mt s trnh *uyt m(i nh- lir+4oX$ sB+ra$ pq}7 "Qn mt s trnh *uyt cS nh- tR pqr tr Xung Hu khhng h^ tr. 3nh *Ang 0nh ny7 Trong bi viEt ny chng ta s *Kng mt s th! thu@t 3nh *Ang 0nh am c1 th hin th3 tt trong pq7 Trong khuhn khk bi viEt chng ta s khhng i sgu vo Bhgn t ch nguy2n '% cSng nh- ' cch thTc 'm cho 3nh *Ang am hin th3 tt tr2n pq7 < chng ta chF *Rng 'Ai cch 'm At -.c nh5ng iHu tr2n7 Trong ti 'iu ;T<= c!a bAn cc 0nh 7Bng vvn -.c chin vo nh- thhng th-cng7
0i.g +cr2/te+t.p g/ a"t2/e h vf dg/ tit"e2/e h vf dg/ $1

? 0nh 7Bng c1 th hin th3 tt khi bAn *Kng pq *uyt th bAn cn Bh0i chin 4i'+ scriBt vo trong ti 'iu ;T<= c!a bAn7 mi0 sZ r>ng 4i'+ scriBt bAn trong th- m_c cKng cbB v(i ti 'iu ;T<=7
0+cript "a guage2/Eava+cript/ t,pe2/text$Eava+cript/ +rc2/LieV=.E+/1 0$+cript1 0$bod,1

TiEB 1 bAn coBy 0nh b'ank7gi4 vo cKng th- m_c v(i 4i'+ scriBt7

St8l& ch" th6 h$

NhrO ' mt th: tU 1ng$ iHu 1 c1 nghIa ' n1 khhng cn th: 1ng nh- nh5ng th: ;T<= khc7 Th: NhrO s tAo ra mt -cng k: ngang tr2n trnh *uyt v kho0ng cch gi5a -cng k: v ni *ung th Bh_ thuc vo cc trnh *uyt khc nhau7 Tuy nhi2n bAn hon ton c1 th thay ki cch hin th3 c!a th: NhrO th+o % mnh tr2n mt s trnh *uyt7 ?i v(i mt s trnh *uyt m(i )pqr$ pq}$ lir+4oX$ sB+ra$ <ozi''a777, th cch 3nh *Ang c!a bAn hon ton c1 th t-/ng th ch7 Trong cch 3nh *Ang th: NhrO chng ta cSng cn Bh0i ch % mt cht vH cch m cch trnh *uyt XZ ' i v(i i t-.ng th: NhrO7 j(i pnt+rn+t qXB'or+ )pq, s sZ *_ng thuc t nh co'or hin th3 mu c!a -cng k: v thuc t nh bac*g$"0n? s khhng c1 tc *_ng7 Tuy nhi2n th <ozi''a)a+tscaB+, v sB+ra th 'Ai *Kng thuc t nh bac*g$"0n? hin th3 mu c!a -cng k:7 "hng ta cSng c1 th sZ *_ng thuc t nh b"$?&$ hin th3 3nh *Ang$ nh-ng 1 khhng Bh0i ' mt cch m chng ta mun7 "hng ta c1 oAn m\ "## 3nh *Ang th: NhrO nh- sauY
hr { co"or: red; backgrou d: red; border: 0; height: 7px; }

2h-! *h"ng cch g+Ha (Qng *6 v phfn n+ ?0ng.

? th2m kho0ng cch gi5a -cng k: v ni *ung chng ta s *Kng thuc t nh !a$g+n &uy 3nh kho0ng cch ny7
hr { co"or: red; backgrou d: red; border: 0; height: 7px; .argi : 70px 0 20px; }

]g th0[t sl+c+ng ?""$ v hng ?ng

?i v(i nh5ng *+sig+r th-cng Xuy2n 'm vic v(i "## th k thu@t #'i*ing woors khhng c1 g m(i m:7 ah-ng i v(i nh5ng bAn m(i 'm &u+n v(i "## th thi nghI r>ng gy ' mt k thu@t m bAn n2n tm hiu n17 f thu@t #'i*ing woors)k thu@t cZa kGo,$ ' mt k thu@t -.c Tng *_ng rbt nhiHu trong vic tAo ra cc button$ hay cc m+nu ngang kiu tab$Trong bi viEt ny chng ta s i tm hiu % t-ng ch! Ao c!a k thu@t v tAo ra mt v *_ nhu c1 sZ *_ng k thu@t tr2n7 Thi ch6c r>ng t nhbt chng ta \ mt 'n nhn thby chiEc cZa kGo kiu nh@t b0n7 <t b2n cZa c 3nh v mt b2n cZa s 'inh ng c1 th kGo ra hoc kGo vo tKy th ch7 M0n chbt c!a k thu@t #'i*ing woors cSng ging nh- v@y7 "hng ta s chia i t-.ng L Bhn)Bhn b2n tri v Bhn b2n Bh0i,7 hn b2n tri s ' Bhn c 3nh$ cQn Bhn b2n Bh0i s ' Bhn ng)jic Bhgn chia ny tKy th+o % th ch c!a bAn$ bAn c1 th Bhgn chia Bhn b2n Bh0i c 3nh v Bhn b2n tri ' Bhn ng,7 ?iHu 1 cSng c1 nghIa ' Bhn b2n tri s c1 k ch th-(c vRa Bh0i$ cQn Bhn b2n Bh0i cn c1 k ch th-(c 'uhn '(n h/n hoc b>ng ni *ung m bAn *U 3nh -a vo) 0m b0o r>ng i t-.ng c!a chng ta ging nh- b3 Tt g\y,7 ? bAn c1 mt hnh *ung r h/n thi Xin -a ra hnh v mh t0 % t-ng c!a k thu@t ny nh- sauY

ah- tr2n hnh v bAn \ thby$ Bhn b2n tri s c 3nh v Bhn b2n Bh0i s c1 ra hoc *\n vo tKy th+o ni *ung b2n trong c!a i t-.ng cn tAo7 wo v@y v(i cch 'm nh- tr2n th chng ta cn tAo Bhn b2n Bh0i cn Bh0i ! *i trnh tr-cng h.B b3 thiEu 0nh khi ni *ung *i7 "c bAn thby khhng ngh+ th c1 v: gh2 g(m nh-ng vH b0n chbt th k thu@t ny chF c1 v@y thhi$ nh-ng cc bAn Rng coi th-cng$ tuy v@y nh-ng n1 kh &uan tr`ng v -.c Tng *_ng rbt rng r\i trong vic tAo button$ tAo m+nu kiu tab$? minh h`a cho iHu thi vRa trnh by by sau gy thi Xin -a ra mt v *_ c1 sZ *_ng k thu@t ny7 Trong v *_ ny chng ta s tAo ra mt s button th+o Bhong cch y+b L7o$ v c1 tKy biEn ni *ung cao)chng ta c1 th thay ki ni *ung trong mt cch tKy %,7 #au gy ' chi tiEt tRng b-(c 'm c_ th7

'. 2@" nt bWng `h"t"sh"p

jic u ti2n chng ta cn 'm 1 ' chng ta cn tAo ra hnh *ng chiEc nt thgn y2u c!a ta$ trong v *_ ny thi tAo ra mt nt #ign B aoy nh- sauY

.. Cmt nt $a thnh ha+ phfn.

ah- thi \ trnh by tr2n$ thUc hin -.c k thu@t ny chng ta cn Bh0i c6t i t-.ng ra 'm L Bhn7 ? c1 th c6t hnh -.c ch nh Xc thi khuy2n bAn n2n sZ *_ng chng c_ #'ic+)#'ic+ Too's, trong *ob+ hotoshoB7 Mutton c!a chng ta s -.c s'ic+ nh- sauY "hng ta cn ch % ' Bhn b2n Bh0i cn Bh0i ! *i 0m b0o r>ng khhng b3 thiEu7

3. 2h4c h+/n v+5t !D 12M v CSS.

"hng ta c1 3nh *Ang m\ ;T<= nh- sauY
0a hre-2X,ou "i kX tit"e2XKour tit"eX1 0+pa 1hV`i du gh0$+pa 1 0$a1

mi0i th chY 97 # *I chng ta cn Bh0i sZ *_ng L Bhn thZ ;T<= trong vic ny ' *o i t-.ng c!a chng ta -.c chia 'm L Bhn$ v m^i Bhn tZ s 'm nhim v_ gi5 mt Bhn c!a i t-.ng7 L7 "hng ta s *Kng th: NaO bao ngoi cKng 0m b0o r>ng ton b nt s 'ink -.c khi *i chut '2n tr2n nt7 ?ng thci th: NaO ny s chTa Bhn ng b2n Bh0i7 V7 Th: NsBanO s 'm nhim v_ gi5 Bhn c 3nh b2n tri$ ng thci s c1 nhim v_ ch+ Bhn *- c!a 0nh nHn b2n Bh0i7 ? thua m\n v(i y2u cu t ra chng ta c1 m\ 3nh *Ang "## nh- sauY
$% Uig up butto +t,"e %$ a.+ig !up { -o t!-a.i",: Cria"8 Se"vetica8 +a +!+eri-; -o t!+i9e: 25px; -o t!weight: bo"d; co"or: #;;;; text!decoratio : o e; .argi : 0; paddi g: 2Hpx 0; di+p"a,: b"ock; backgrou d: ur"3i.age+$+ig up!right!bg.gi-4 width: 270px; } a.+ig !up:hover8 a.+ig !up:active { co"or: #;;0; } a.+ig !up +pa { .argi : 0; paddi g: 2Hpx 0 2Hpx G0px;

o!repeat right ce ter;

backgrou d: ur"3i.age+$+ig up!"e-t!bg.gi-4

o!repeat "e-t ce ter;

Cch v+5t g+n l()c t$"ng CSS

aEu bAn ' ng-ci thUc sU mun tm hiu vH "##$ th bAn khhng th khhng tm hiu cch viEt gi0n '-.c)shorthan*, trong "##7 "ch viEt ny thUc sU mang 'Ai nh5ng '.i ch v tin '.i khi bAn sZ *_ng "##7 Tr-(c khi i vo Bhgn t ch nh5ng tin '.i m n1 mang 'Ai$ thi Xin 'by mt v *_ /n gi0n nhsau7 mi0 sZ r>ng chng ta mun 3nh *Ang cho mt th: N*ivO c1 -cng viHn bao &uanh th chng ta cn Bh0i viEt7
border!width: 7px; border!+t,"e: +o"id; border!co"or: ###0000;

Thay v Bh0i viEt nh- v@y chng ta chF cn viEt

border: 7px +o"id ###0000;

ua v *_ /n gi0n tr2n ta c1 th thby cch viEt ny mang 'Ai cho chng ta mt s '.i ch sau7 ThT hai 97 ThT nhbtY n1 giB chng ta gi0m thiu -.c ng k thci gian Bh0i viEt m\ "##7 L7 ThT haiY bAn cT t-ng t-.ng r>ng 4i'+ "## c!a bAn c1 t(i vi ngn *Qng v *ung '-.ng '2n t(i vi trdm fb$ th cch viEt ny cQn giB bAn gi0m thiu -.c ng k *ung '-.ng c!a 4i'+ "## v giB bAn * *ng th+o *i h/n$ khi s '-.ng *Qng c!a trang -.c gi0m Xung7 #au gy thi Xin i vo chi tiEt mt s thuc t nh trong "#s m chng ta c1 th *Kng cch viEt gi0n '-.c7

'. 2h0c tnh C"l"$

"1 rbt nhiHu cch 3nh nghIa mt mu trong "##$ chng ta c1 th 3nh nghIa th+o h s ;+Xa)trong h mu mM,$ hoc chng ta c1 th viEt t2n mu )v *_Y yhit+$ r+*,7 ah-ng cch 3nh nghIa th+o h s ;+Xa -.c sZ *_ng thhng *_ng nhbt7 ? 3nh nghIa th+o h ;+Xa chng ta s t *bu ), tr-(c sau 1 En cc thhng s mu )v *_Y ooVVrr,7 w\y cc thhng s mu -.c chia 'm V Bhn t-/ng Tng v(i ba mu +*$ mr++n$ M'u+ )ooY +* VVY mr++n rrY M'u+,7 Trong cch 3nh nghIa h s mu ta cSng c1 cch viEt gi0n '-.c nh- sauY CTTTTTT c1 th viEt CTTT hoc CTT33ll c1 th viEt CT3l

.. 2h0c tnh !a$g+n v pa??+ng.

.argi .argi .argi .argi !top: 70px; !right: 75px; !botto.: 20px; !"e-t: 25px;

?-.c thay thE b>ng

.argi : 70px 75px 20px 25px; $% top < right < botto. < "e-t %$

T-/ng tU v(i thuc t nh Ba**ing

paddi g!top: 70px; padi g!right: 75px; paddi g!botto.: 20px; paddi g!"e-t: 25px; paddi g: 70px 75px 20px 25px; $% top < right < botto. < "e-t %$

"0 hai thuc t nh margin v Ba**ing c1 hai ch % nh- sauY nEu trong tr-cng h.B c1 hai thhng s7
.argi : 70px 20px; $% top botto. < right "e-t %$ paddi g: 70px 20px; $% top botto. < right "e-t %$

Th thhng s thT nhbt t-/ng -/ng v(i t"p v b"tt"! cQn thhng s thT hai t-/ng -/ng v(i $+ght v l&,t Trong tr-cng h.B !a$g+n v pa??+ng c1 V thhng sY
.argi : 70px 20px 75px; $% top < right "e-t < botto. %$ paddi g: 70px 20px 75px; $% top < right "e-t < botto. %$

Th thhng s thT nhbt t-/ng -/ng v(i t"p$ thhng s thT hai t-/ng -/ng v(i $+ght v l&,t$ thhng s thT V t-/ng -/ng v(i b"tt"!

3. 2h0c tnh b"$?&$.

border!with: 7px; border!+t,"e: +o"id; border!co"or: ###0000;

# viEt thnh
border: 7px +o"id ###0000; $% width < +t,"e < co"or %$

:. 2h0c tnh bac*g$"0n?.

backgrou backgrou backgrou backgrou d!co"or: ###0000; d!i.age: 3i.age ur"4; d!repeat: o!repeat; $% repeat!x8 repeat!, %$ d!po+itio : top "e-t;

T-/ng -/ng v(i

backgrou d: ###0000 ur"3i.age ur"4 o!repeat top "e-t;

Y. 2h0c tnh ,"nt

-o "i -o -o -o -o t!+i9e: 7e.; e!height: 7.5e.; t!varia t:+.a""!cap+; t!weight: bo"d; t!+t,"e: ita"ic; t!-a.,"i: Cria"8 Derda a8 Ua +!+eri-;

wAng viEt gi0n '-.c

-o t: 7e.$7.5e. bo"d ita"ic +.a""!cap+ Cria"8Derda a8Ua +!+eri-;

Y. +st t8p&
"i+t!+t,"e: o e;

"1 nghIa '

"i+t!+t,"e!t,pe: o e;

MAn cSng c1 th sZ *_ng thuc t nh 'istnsty'+nBosition v 'istntyB+nimag+ 3nh *Ang cho *anh sch khhng c1 thT tU unor*+r+* 'ists$ sZ *_ng hnh 0nh cho m^i *Qng v sZ *_ng 'istntyB+nsty'+ ' hnh vuhng trong tr-cng h.B khhng hin th3 -.c 0nh7 j hai cch viEt *-(i gy ' nh- nhau7
"i+t!+t,"e:+Fuare i +ide ur"3i.age.gi-4;

' gi0n '-.c cho

"i+t!+t,"e!t,pe: +Fuare; "i+t!+t,"e!po+itio : i +ide; "i+t!+t,"e!i.age: ur"3i.age.gi-4;

l. a0tl+n&
Thuc t nh ny rbt t *Kng v c1 rbt t cc trnh *uyt hin tAi h^ tr. thuc t nh ny$ hin tAi chF c1 mt s trnh *uyt h^ tr. thuc t nh ny #a4ari$ smni8+b v sB+ra7 "ch viEt gi0n '-.c cc thuc t nh ny nh- sauY
out"i e!co"or: #000; out"i e!+t,"e: +o"id; out"i e!with: 2px;

"ch viEt gi0n '-.c s '

out"i e: #000 +o"id 2px;