Simple CSS

Standard Edition

2008

Simple CSS Standard Edition

WallPearl

2008

Simple CSS
Standard Edition

By WallPearl

2008 WallPearlsBlog. All Rights Reserved.

Trang 2

Simple CSS Standard Edition

WallPearl

Mc Lc
Ni dung Trang
Li m u ................................................................................ 6 Bi 1: Gii thiu ........................................................................ 8
1.1. CSS l g? ......................................................................................... 8 1.2. Ti sao CSS? .................................................................................... 8 1.3. Hc CSS cn nhng g? ................................................................... 9

Bi 2: Mt s quy c v cch vit CSS................................... 10

2.1. C php CSS .................................................................................... 10 2.2. n v CSS ...................................................................................... 13 2.3. V tr t CSS ................................................................................... 14 2.4. S u tin ......................................................................................... 18

Bi 3: Mu ch v mu nn ...................................................... 21
3.1. Thuc tnh background-color........................................................... 21 3.2. Thuc tnh background-image ......................................................... 21 3.3. Thuc tnh background-repeat ......................................................... 22 3.4. Thuc tnh background-attachment ................................................. 23 3.5. Thuc tnh background-position ...................................................... 23

Bi 4: Font ch .......................................................................... 26
4.1. Thuc tnh font-family ..................................................................... 26 4.2. Thuc tnh font-style ........................................................................ 27

Trang 3

Simple CSS Standard Edition

WallPearl

4.3. Thuc tnh font-variant .................................................................... 27 4.4. Thuc tnh font-weight .................................................................... 28 4.5. Thuc tnh font-size ......................................................................... 28

Bi 5: Text ................................................................................. 30
5.1. Thuc tnh color ............................................................................... 30 5.2. Thuc tnh text-indent ...................................................................... 30 5.3. Thuc tnh text-align ........................................................................ 31 5.4. Thuc tnh letter-spacing ................................................................. 31 5.5. Thuc tnh text-decoration ............................................................... 32 5.6. Thuc tnh text-transform ................................................................ 32

Bi 6: Pseudo-classes for Links ................................................ 33 Bi 7: Class & id ....................................................................... 36

7.1. Nhm phn t vi class.................................................................... 36 7.2. Nhn dng phn t vi id ................................................................. 38

Bi 8: Span & div ...................................................................... 40

8.1. Nhm phn t vi <span> ............................................................... 40 8.2. Nhm phn t vi <div>.................................................................. 40

Bi 9: Box Model ...................................................................... 43 Bi 10: Margin & padding ........................................................ 45

10.1. Thuc tnh margin .......................................................................... 45 10.2. Thuc tnh padding ........................................................................ 47

Trang 4

Simple CSS Standard Edition

WallPearl

Bi 11: Border ........................................................................... 48

11.1. Thuc tnh border-width ................................................................ 48 11.2. Thuc tnh border-color ................................................................. 48 11.3. Thuc tnh border-style .................................................................. 48

Bi 12: Height & width ............................................................. 50

12.1. Thuc tnh width ............................................................................ 50 12.2. Thuc tnh max-width .................................................................... 50 12.3. Thuc tnh min-width .................................................................... 50 12.4. Thuc tnh height ........................................................................... 50 12.5. Thuc tnh max-height ................................................................... 51 12.6. Thuc tnh min-height.................................................................... 51

Bi 13: Float & clear ................................................................. 52

13.1. Thuc tnh float .............................................................................. 52 13.2. Thuc tnh clear ............................................................................. 53

Bi 14: Position ......................................................................... 54

14.1. Absolute position ........................................................................... 55 14.2. Relative position ............................................................................ 56

Bi 15: Layers............................................................................ 57 Bi 16: Web standard ................................................................ 59 Ph lc ....................................................................................... 60

Trang 5

Simple CSS Standard Edition

WallPearl

Li M u
u tin, Pearl xin tha vi tt c cc bn c gi (hay nhng bn no c quyn sch ny) l Pearl khng phi l mt chuyn gia v CSS m ch l mt tay ngang trong ngh m thi (c th l Pearl cng ch ln mng hc t cc ti liu ting Anh ch cng khng phi qua trng lp o to bi bn g c). Cn v quyn sch ny th phi ni t hi u thng 6 nm ri (ri chuyn th y, nhng ai quen Pearl u bit Pearl c tnh hay tng trnh vy m (smile)), Pearl vo blog anh Tn thy nh c dch my bi tut CSS t HTML.net m trong bi m u li c ghi tn cc cao th CSS trn Opera: ch Hin, ch Lin, Phm Lm, v c Pearl (cn ai na khng th qun ri, ti nh giu my bi ny ri). ng l ri chuyn tht, ch nh li i khiu ni ci chuyn Pearl ch l tay ngang thi sao. Thi th c ngi bo mnh l cao th cng c chu vy, nhng ngt ci c ting phi c ming ch, cc cao th kia th iu c vit tut, tip hng dn lm blog, sa skin c. Trong khi , mnh li ch vit g cho cng ng th u c c (khng phi Pearl li, ti my ngi kia vit ht ri ch, vi li Pearl cng khng thch vit tut, tip nh h, trng c nh cng thc nu n vy (big green)), nn Pearl mi nho v xin dch my bi coi nh l mnh ng gp t nh cho cng ng (c, cng l c d d cc cao th kia vo chia phn thi, c bao nhiu cao th nh th ny th c thm chc bi na cng 1 tun l xong (roll eyes) nh mng qu, cho dch 2 bi cui (chui, ngi ta ang mun lm ngay m, bo dch bi cui chng phi d d Pearl li bing sao, m k) Ti cui thng 6, nh v qu ngh h, v c ri th trn bit lun, Pearl cng qun mt lun ti thng 8 mi thy anh ln blog: khng rnh, lu lu v qun, cn thi gian vi gia nh (ai c blog anh ny cng bit ngi yu v ri) th Pearl dch tt cho xong ti trung tun thng 8, bt u dch, ngi hc d Anh vn m dch mau gh, dch hn 10 ngy l ht 16 tut lun nh thng 9, bin tp li ri pht hnh nh l th, nhng ti thng 9, Pearl ci li my 1 pht, ri lo lng sc, nhi nht phn mm, sch, nhc vo li cng, tn nhng hai tun, qun tp 2, my bi tut nh xp x tip Mi ti thng ri, c th l sau Ging Sinh 3 ngy, Pearl li li 16 bi dch ra bin tp li (hem phi ti sing t xut, m ti sp ht nm vi li y cng l hot ng k nim ngy thnh lp WallPearls Blog), bin ti, bin lui tn c tun mi xong. c li mi thy, 16 tut ca HTML dot net cn thiu nhiu ci lm. Th l li ly thm ti liu t W3 School b

Trang 6

Simple CSS Standard Edition

WallPearl

khuyt, ri li mun ly thm nhiu ti liu khc thm v, thm c CSS3 v, rt li trng n hn hp qu nn sau cng Pearl phn ra 2 bn: Bn Simple CSS Standard Edition: Bao gm ni dung ch yu t 16 tut ca HTML.Net, ch b sung 1 s ch v c php CSS v u tin ca CSS. Bn Simple CSS Advanced Edition: Bao gm ni dung ca HTML.Net trn vi W3 School c thm phn ph lc v CSS3 v nhiu th cn thit khc. Phn tng trnh ti y l kt thc. Chc chn l t c quyn sch no li c phn tng trnh nh quyn sch ny (ch t th khng c quyn sch in no li vit v ny). iu ny chng qua l Pearl d vn, khng vit un o, o l c, ch bit vit theo nhng g mnh ngh, theo nhng g mnh bit thi (smile) Do y l ln u tin Pearl thc hin mt quyn sch hng dn v mt ti tin hc, hn na do kh nng kin thc, kin vn hn hp nn chc chn quyn sch ny vn cn rt nhiu thiu st, nn Pearl rt mong nhn c kin nh gi ca mi ngi. Sau cng, Pearl xin chn thnh gi li cm n ti HTML.Net, W3 School, CSS3.Info v nhiu trang web khc cung cp ti liu Pearl hon thnh quyn sch ny. Cm n tt c cc bn blogger ng h, c v Pearl trong thi gian va qua. Mi kin ng gp c th post trc tip trn cc blog ca Pearl hoc qua a ch email wallpearl@gmail.com hoc wallpearl@inbox.com Thng 1, nm 2008 .:WallPearl:.

Trang 7

Simple CSS Standard Edition

WallPearl

Bi 1: Gii Thiu
1.1. CSS l g? Trong lnh vc xy dng, chng ta c trang tr ni tht; trong lnh vc thm m - lm p, chng ta c k thut make-up; cn trong lnh vc thit k web chng ta c CSS. y ch l mt nh ngha giu hnh nh ca Pearl thi (nhng cng thc t nh (smile). Cn CSS (Cascading Style Sheets m Pearl tm dch l t mu theo Style Sheets) l mt ngn ng quy nh cch trnh by cho cc ti liu vit bng HTML, XHTML, XML, SVG, hay UML, 1.2. Ti sao CSS?

Nu bn tng hc qua HTML th cng bit HTML cng h tr mt s thuc tnh nh dng c bn cho text, picture, table, nhng n khng tht s phong ph v chnh xc nh nhau trn mi h thng. CSS cung cp cho bn hng trm thuc tnh trnh by dnh cho cc i tng vi s sng to cao trong kt hp cc thuc tnh gip mang li hiu qu. Ngoi ra, hin ti CSS c h tr bi tt c cc trnh duyt, nn bn hon ton c th t tin trang web ca mnh c th hin th hu nh nh nhau d trn mt h thng s dng Windows, Linux hay trn mt my Mac min l bn ang s dng mt phin bn trnh duyt mi nht. S dng cc m nh dng trc tip trong HTML tn hao nhiu thi gian thit k cng nh dung lng lu tr trn a cng. Trong khi CSS a ra phng thc t mu ngoi gip p dng mt khun mu chun t mt file CSS ngoi. N tht s c hiu qu ng b khi bn to mt website c hng trm trang hay c khi bn mun thay i mt thuc tnh trnh by no . Hy th tng tng bn c mt website vi hng trm trang v bn mun thay i font ch hay mu ch cho mt thnh phn no . tht s s l mt cng vic bun chn v tn nhiu thi gian. Nhng vi vic s dng CSS vic l hon ton n gin cng nh l bn c mt tr ma thut no . Ngoi ra, CSS cn cho php bn p t nhng kiu trnh by thch hp hn cho cc phng tin khc nhau nh mn hnh my tnh, my in, in thoi,

Trang 8

Simple CSS Standard Edition

WallPearl

CSS c cp nht lin tc mang li cc trnh by phc tp v tinh vi hn. 1.3. Hc CSS cn nhng g?

Tht s khng c mt iu kin g c quy nh khi hc CSS. Nhng mt kha cnh no th mt s chun b cho mt cuc hnh trnh d l d nht vn khng tha v t nht n s gip bn lm tt hn. Hnh trang th nht m bn nn c l mt kin thc v HTML, n khng tht s cn thit nu bn ch dng CSS trnh by cho mt trang HTML c sn (nh lm skin cho blog chng hn), nhng bn vn cn bit ngha mt s th HTML, n s c ch khi bn vit CSS. Tuy nhin, nu bn mun t thit k, trnh by mt trang web ca ring mnh th ty theo quy m trang web, bn cn phi hc thm c HTML, XHMTL, Javascript v mt s ngn ng lp trnh web khc. Hnh trang th hai chnh l mt trnh son tho vn bn bn c th vit m CSS. y, Pearl khuyn bn nn s dng mt trnh son tho n gin nh Notepad, Wordpad trong Windows hay Pico trong Linux, Simple Text trong Mac. N s gip bn chc l code l ca bn v khng c bt k mt s can thit no t chng trnh nh khi dng DreamWeaver, FrontPage, Golive, Hnh trang th ba ca bn chnh l mt phin bn mi nht ca trnh duyt m bn thng dng. V mt iu na m Pearl mun ngh l cc bn hy dnh mt t thi gian thc hnh CSS sau mi bi hc n s tht s c ch cho bn. Thc hnh chng nhng gip bn vn dng nhun nhuyn cc bi hc m cn c tc dng explain ngc li nhng l thuyt m bn cha hiu. By gi nu bn tht s chun b chng ta hy chuyn qua chng tip theo tht s bc chn vo th gii CSS.

Trang 9

Simple CSS Standard Edition

WallPearl

Bi 2: Mt S Quy c V Cch Vit CSS

2.1. C php CSS: tm hiu c php CSS chng ta hy th xem mt v d sau. V d: nh mu nn cho mt trang web l xanh nht (light cyan) chng ta dng code sau: + Trong HTML: <body bgcolor=#00BFF3> + Trong CSS: body { background-color:#00BFF3; } Nhn qua v d trn t nhiu chng ta cng thy c mi tng ng gia cc thuc tnh trong HTML v CSS cho nn nu bn hc qua HTML th cng s rt d dng tip thu CSS. l mt cht li th ca cu chuyn hnh trnh m Pearl ni bi trc. Nhng khng sao c, by gi hy nhn vo v d ca chng ta v cc bn xem n c ging vi cu trc sau khng nh. C php CSS c bn: Selector { property:value; } Trong : + Selector: Cc i tng m chng ta s p dng cc thuc tnh trnh by. N l cc tag HTML, class hay id (chng ta s hc v 2 thnh phn ny bi hc sau). V d: body, h2, p, img, #title, #content, .username, Trong CSS ngoi vit tn selector theo tn tag, class, id. Chng ta cn c th vit tn selector theo phn cp nh ch cc nh trong #entry, chng ta vit selector l #entry img, nh vy th cc thuc tnh ch nh s ch p dng ring cho cc nh nm trong #entry. Khi vit tn cho class, i khi s c nhiu thnh phn c cng class , v d nh th img v th a cng c class tn vistors nhng y li l hai i tng khc nhau, 1 ci l nh ca ngi thm, 1 ci l lin kt ti trang ngi thm. Nn nu

Trang 10

Simple CSS Standard Edition

WallPearl

khi vit CSS ta ghi l .visitors { width:50 } th s nh hng ti c hai thnh phn. Nn trong trng hp ny, nu bn c dng CSS ch ring phn nh th ch nn ghi l img .visitors thi. Mt li vit tn selector na l da trn tn cc thuc tnh c trong HTML. V d trong HTML ta c on m nh vy: <input name=Search type=Text value=Key Word>. p dng thuc tnh CSS cho ring tm kim ny chng ta s dng selector input[name=Search]. Ngoi vic vit tn selector c th, chng ta cng c th dng mt selector i din nh * { color:red } s tc ng n tt c cc thnh phn c trn trang web lm cho chng c text mu . + Property: Chnh l cc thuc tnh quy nh cch trnh by. V d: backgroundcolor, font-family, color, padding, margin, Mi thuc tnh CSS phi c gn mt gi tr. Nu c nhiu hn mt thuc tnh cho mt selector th chng ta phi dng mt du ; (chm phy) phn cch cc thuc tnh. Tt c cc thuc tnh trong mt selector s c t trong mt cp ngoc nhn sau selector. V d: body { background:#FFF; color:#FF0000; font-size:14pt } d c hn, bn nn vit mi thuc tnh CSS mt dng. Tuy nhin, n s lm tng dung lng lu tr CSS ca bn. V d: body { background:#FFF; bolor:#FF0000; font-size:14pt } i vi mt trang web c nhiu thnh phn c cng mt s thuc tnh, chng ta c th thc hin gom gn li nh sau: h1 { color:#0000FF; text-transform:uppercase }

Trang 11

Simple CSS Standard Edition

h2 { color:#0000FF; text-transform:uppercase; } h3 { color:#0000FF; text-transform:uppercase; } h1, h2, h3 { color:#0000FF; text-transform:uppercase; }

WallPearl

+ Value: Gi tr ca thuc tnh. V d: nh v d trn value chnh l #FFF dng nh mu trng cho nn trang. i vi mt gi tr c khong trng, bn nn t tt c trong mt du ngoc kp. V d: font-family:Times New Roman i vi cc gi tr l n v o, khng nn t mt khong cch gia s o vi n v ca n. V d: width:100 px. N s lm CSS ca bn b v hiu trn Mozilla/Firefox hay Netscape. Ch thch trong CSS: Cng nh nhiu ngn ng web khc. Trong CSS, chng ta cng c th vit ch thch cho cc on code d dng tm, sa cha trong nhng ln cp nht sau. Ch thch trong CSS c vit nh sau /* Ni dung ch thch */ V d: /* Mu ch cho trang web */ body { color:red }

Trang 12

Simple CSS Standard Edition

2.2. n v CSS:

WallPearl

Trong CSS2 h tr cc loi n v l n v o chiu di v n v o gc, thi gian, cng m thanh v mu sc. Tuy nhin, s dng ph bin nht vn l n v o chiu di v mu sc. Sau y l bng lit k cc n v chiu di v mu sc dng trong CSS. n v chiu di n v % in cm mm M t Phn trm Inch (1 inch = 2.54 cm) Centimeter Millimeter n v M t ex 1 ex bng chiu cao ca ch x in thng ca font hin hnh. Do , n v ny khng nhng ph thuc trn kch c font ch m cn ph thuc loi font ch v cng 1 c 14px nhng chiu cao ch x ca font Times v font Tohama l khc nhau. pt Point (1 pt = 1/72 inch) pc Pica (1 pc = 12 pt) px Pixels (im nh trn mn hnh my tnh)

em

1 em tng ng kch thc font hin hnh, nu font hin hnh c kch c 14px th 1 em = 14 px. y l mt n v rt hu ch trong vic hin th trang web.

n v mu sc n v Color-name RGB (r,g,b) RGB (%r,%g,%b) Hexadecimal RGB M t Tn mu ting Anh. V d: black, white, red, green, blue, cyan, magenta, Mu RGB vi 3 gi tr R, G, B c tr t 0 255 kt hp vi nhau to ra v s mu. Mu RGB vi 3 gi tr R, G, B c tr t 0 100% kt hp. M mu RGB dng h thp lc. V d: #FFFFFF: trng, #000000: en, #FF00FF: ti.

Trang 13

Simple CSS Standard Edition

2.3. V tr t CSS:

WallPearl

trn chng ta tm hiu v c php vit CSS, nhng cn t n u trong ti liu HTML? Trong phn ny, Pearl xin gii thiu vi cc bn v vn ny. Chng ta c ba cch khc nhau nhng CSS vo trong mt ti liu HTML + Cch 1: Ni tuyn (kiu thuc tnh) y l mt phng php nguyn thy nht nhng CSS vo mt ti liu HTML bng cch nhng vo tng th HTML mun p dng. V d nhin trong trng hp ny chng ta s khng cn selector trong c php. Lu : Nu bn mun p dng nhiu thuc tnh cho nhiu th HTML khc nhau th khng nn dng cch ny. v d sau chng ta s tin hnh nh nn mu trng cho trang v mu ch xanh l cho on vn bn nh sau: <html> <head> <title>V d</title> </head> <body style=background-color=#FFF;> <p style=color:green>^_^ Welcome To WallPearls Blog ^_^</p> </body> </html> + Cch 2: Bn trong (th style) Tht ra nu nhn k chng ta cng nhn ra y ch l mt phng cch thay th cch th nht bng cch rt tt c cc thuc tnh CSS vo trong th style ( tin cho cng tc bo tr, sa cha y m).

Trang 14

Simple CSS Standard Edition

WallPearl

Cng v d lm trang web c mu nn trng, on vn bn ch xanh l, chng ta s th hin nh sau: <html> <head> <title>V d</title> <style type=text/css> body { background-color:#FFF } p { color:#00FF00 } </style> </head> <body> <p>^_^ Welcome To WallPearls Blog ^_^</p> </body> </html> Lu : Th style nn t trong th head. i vi nhng trnh duyt c, khng th nhn ra th <style>. Theo mc nh, th khi mt trnh duyt khng nhn ra mt th th n s hin ra phn ni dung cha trong th. Nh v d trn, nu trnh duyt khng h tr th style th 2 dng CSS: body {background-color:#FFF } p { color:#00FF00 } s hin ra trn trnh duyt. trnh tnh trng ny, bn nn a vo thm du <!-- trc v --> sau khi code CSS. Nh v d trn s vit li l: <style type=text/css> <!-- body { background-color:#FFF } p { color:#00FF00 } --> </style>

Trang 15

Simple CSS Standard Edition

+ Cch 3: Bn ngoi (lin kt vi mt file CSS bn ngoi)

WallPearl

Tng t nh cch 2 nhng thay v t tt c cc m CSS trong th style chng ta s a chng vo trong mt file CSS (c phn m rng .css) bn ngoi v lin kt n vo trang web bng thuc tnh href trong th link. y l cch lm c khuyn co, n c bit hu ch cho vic ng b hay bo tr mt website ln s dng cng mt kiu mu. Cc v d trong sch ny cng c trnh by theo kiu ny. External CSS File Ch cn thay i ni dung 1 file CSS, tt c cc trang web s c cp nht ngay lp tc

Web Pages

No by gi chng ta hy m Notepad ln v th thc hin theo v d sau: u tin chng ta s to ra mt file vidu.html c ni dung nh sau:

Trang 16

Simple CSS Standard Edition

<html> <head> <title>V d</title> <link rel=stylesheet type=text/css href=style.css /> </head> <body> <p>^_^ Welcome To WallPearls Blog ^_^</p> </body> </html> Sau hy to mt file style.css vi ni dung: body { background-color:#FFF } p{ color:#00FF00 }

WallPearl

Hy t 2 file ny vo cng mt th mc, m file vidu.html trong trnh duyt ca bn v xem thnh qu. Lu : lu 1 file vi 1 ui khc .txt trong Notepad chng ta chn Save as type l All Files. C th chn Encoding l UTF-8, nu bn ch thch CSS bng ting Vit. Trong CSS chng ta cn c th s dng thuc tnh @import nhp mt file CSS vo CSS hin hnh. C php: @import url(link)

Trang 17

Simple CSS Standard Edition

2.4. S u tin:

WallPearl

Trc khi thc thi CSS cho mt trang web. Trnh duyt s c ton b CSS m trang web c th c p dng, bao gm: CSS mc nh ca trnh duyt, file CSS bn ngoi lin kt vo trang web, CSS nhng trong th <style> v cc CSS ni tuyn. Sau , trnh duyt s tng hp ton b CSS ny vo mt CSS o, v nu c cc thuc tnh CSS ging nhau th thuc tnh CSS no nm sau s c u tin s dng (ci ny cng ging nh chng trnh Ai L Triu Ph trn truyn hnh vy, ch cu tr li sau cng mi c chp nhn (smile)). Theo nguyn tc trnh duyt ca bn s u tin cho cc CSS ni tuyn > CSS bn trong > CSS bn ngoi > CSS mc nh ca trnh duyt. V d: Trong mt trang web c lin kt ti file style.css c ni dung nh sau: p{ color:#333; text-align:left; width:500px } trong th <style> gia th <head> cng c mt on CSS lin quan: p{ background-color:#FF00FF; text-align:right; width:100%; height:150px } trong phn ni dung trang web cng c s dng CSS ni tuyn: <p style=height:200px; text-align:center; border:1px solid #FF0000; color:#000 } Khi thc thi CSS trnh duyt s c ht tt c cc ngun cha style ri s tng hp li vo mt CSS o v nu c s trng lp cc thuc tnh CSS th n s ly thuc

Trang 18

Simple CSS Standard Edition

WallPearl

tnh CSS c mc u tin cao hn. Nh v d trn chng ta s thy CSS cui cng m phn t p nhn c l: p{ background-color:#FF00FF; width:100%; height:200px; text-align:center; border:1px solid #FF0000; color:#000 } Vy c cch no thay i u tin cho mt thuc tnh no ? Tht ra th trong CSS c sn mt thuc tnh gip chng ta thc hin iu ny, chnh l thuc tnh !important. Ch cn bn t thuc tnh ny sau mt thuc tnh no theo c php selector { property:value !important } th trnh duyt s hiu y l mt thuc tnh c u tin. By gi, chng ta cng xt li v d trn nhng c t thm mt s thuc tnh !important vo xem kt qu nh th no nh. p{ width:500px; text-align:left !important; color:#333 !important } p{ background-color:#FF00FF; width:100%; height:150px !important; text-align:right; } <p style=text-align:center; height:200px; border:1px solid #FF0000; color:#000 }

Trang 19

Simple CSS Standard Edition

Phn CSS s tc ng ln thuc tnh p l: p{ background-color:#FF0000; width:100%; height:150px !important; text-align:left !important; border:1px solid #FF0000; color:#333 !important }

WallPearl

Lu : Cng mt thuc tnh cho mt selector th nu c hai thuc tnh u t !important th ci sau c ly.

Trang 20

Simple CSS Standard Edition

WallPearl

Bi 3: Background
Trong bi hc ny chng ta s c hc v cch nh mu nn/nh nn cho mt trang web cng nh cc k thut nh v, iu chnh nh nn. 3.1. Mu nn (thuc tnh background-color):

Thuc tnh background-color gip nh mu nn cho mt thnh phn trn trang web. Cc gi tr m mu ca background-color cng ging nh color nhng c thm gi tr transparent to nn trong sut. V d sau y s ch cho chng ta bit cch s dng thuc tnh background-color nh mu nn cho c trang web, cc thnh phn h1, h2 ln lt l xanh l, v cam. body { background-color:cyan } h1 { background-color:red } h2 { background-color:orange } 3.2. nh nn (thuc tnh background-image):

Vic s dng nh nn gip trang web trng sinh ng v bt mt hn. chn nh nn vo mt thnh phn trn trang web chng ta s dng thuc tnh background-image.

Trang 21

Simple CSS Standard Edition

WallPearl

By gi chng ta s cng lm mt v d minh ha xem thuc tnh background-image s hot ng ra sao. u tin hy tm mt tm nh m bn thch, y Pearl s ly tm nh logo ca blog Pearl Sau , chng ta s vit CSS t logo ny lm nh nn trang web nh sau: body { background-image:url(logo.png) } h1 { background-color:red } h2 { background-color:orange } p{ background-color: FDC689 } Nh cc bn thy chng ta s phi ch nh ng dn ca nh trong cp ngoc n sau url. Do nh t trong cng th mc vi file style3.css nn chng ta ch cn ghi abc.jpg. Nhng nu chng ta to thm mt th mc img trong th mc th chng ta s phi ghi l background-image:url(img/abc.jpg). i khi nu khng chc lm bn c th dng ng dn tuyt i cho nh. 3.3. Lp li nh nn (thuc tnh background-repeat):

Nu s dng mt nh c kch thc qu nh lm nn cho mt i tng ln hn th theo mc nh trnh duyt s lp li nh nn ph kn khng gian cn tha. Thuc tnh background-repeat cung cp cho chng ta cc iu khin gip kim sot trnh trng lp li ca nh nn. Thuc tnh ny c 4 gi tr:

Trang 22

Simple CSS Standard Edition

+ repeat-x: Ch lp li nh theo phng ngang. + repeat-y: Ch lp li nh theo phng dc. + repeat: Lp li nh theo c 2 phng, y l gi tr mc nh. + no-repeat: Khng lp li nh.

WallPearl

By gi, chng ta hy thm thuc tnh background-repeat ny vo v d trn th xem sao. body { background-image:url(logo.png); background-repeat:no-repeat; } Cc bn xem, c phi nh nn khng b lp li nh trong v d trc, hy th thay i qua li gia cc gi tr v xem kt qu to ra. 3.4. Kha nh nn (thuc tnh background-attachment):

Background-attachment l mt thuc tnh cho php bn xc nh tnh c nh ca nh nn so vi vi ni dung trang web. Thuc tnh ny c 2 gi tr: + scroll: nh nn s cun cng ni dung trang web, y l gi tr mc nh. + fixed: C nh nh nn so vi ni dung trang web. Khi p dng gi tr ny, nh nn s ng yn khi bn ang cun trang web. 3.5. nh v nh nn (thuc tnh background-position):

Theo mc nh nh nn khi c chn s nm gc trn, bn tri mn hnh. Tuy nhin vi thuc tnh background-position bn s c th t nh nn bt c v tr no (trong khng gian ca thnh phn m n lm nn). Background-position s dng mt cp 2 gi tr biu din ta t nh nn. C kh nhiu kiu gi tr cho thuc tnh position. Nh n v chnh xc nh centimeters, pixels, inches, hay cc n v qui i nh %, hoc cc v tr t bit nh top, bottom, left, right.

Trang 23

Simple CSS Standard Edition

V d: Gi tr Background-position:5cm 2cm Background-position:20% 30% Background-position:bottom left

WallPearl

ngha nh c nh v 5cm t tri qua v 2cm t trn xung. nh c nh v 20% t tri qua v 30% t trn xung. nh c nh v gc tri pha di

Thuc tnh background rt gn Khi s dng qu nhiu thuc tnh CSS s gy kh khn cho ngi c, cng tc chnh sa cng nh tn nhiu dung lng cng cho nn CSS a ra mt cu trc rt gn cho cc thuc tnh cng nhm. V d: Chng ta c th nhm li on CSS sau background-color:transparent; background-image: url(logo.png); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; thnh mt dng ngn gn: background:transparent url(logo.png) no-repeat fixed right bottom; T v d trn chng ta c th khi qut cu trc rt gn cho nhm background: background:<background-color> | <background-image> | <background-repeat> | <background-attachment> | <background-position> Theo mc nh th cc thuc tnh khng c cp s nhn cc gi tr mc nh. V d: Chng ta s b qua hai thuc tnh background-attachment v backgroundposition dng m trn i: background:transparent url(logo.png) no-repeat; Trang 24

Simple CSS Standard Edition

WallPearl

Hai thuc tnh khng c ch nh s n thun c thit lp ti gi tr mc nh m chng ta iu bit l scroll v top left.

Trang 25

Simple CSS Standard Edition

WallPearl

Bi 4: Font Ch
bi hc trc, chng ta c tm hiu v cch nh dng mu ch bng CSS. Trong bi ny, chng ta s tip tc tm hiu thm v cc thuc tnh CSS lin quan ti font ch ca cc thnh phn trong mt trang web. 4.1. Thuc tnh font-family:

Thuc tnh font-family c cng dng nh ngha mt danh sch u tin cc font s c dng hin th mt thnh phn trang web. Theo , th font u tin c lit k trong danh sch s c dng hin th trang web. Nu nh trn my tnh truy cp cha ci t font ny th font th hai trong danh sch s c u tincho n khi c mt font ph hp. C hai loi tn font c dng ch nh trong font-family: family-names v generic families. + Family-names: Tn c th ca mt font. V d: Arial, Verdana, Tohama, + Generic families: Tn ca mt h gm nhiu font. V d: sans-serif, serif, Khi ln danh sch font dng hin th mt trang web bn s chn nhng font mong mun trang web s c hin th t cc v tr u tin. Tuy nhin, c th nhng font ny s khng thng dng lm nn bn cng cn ch nh thm mt s font thng dng d phn nh Arial, Tohama hay Times New Roman v bn cng c ngh t vo danh sch font ca mnh mt generic families (thng th n s c u tin thp nht). Thc hin theo cch ny th s m bo trang web ca bn c th hin th tt trn bt k h thng no. V d sau chng ta s vit CSS quy nh font ch dng cho c trang web l Times New Roman, Tohama, sans-serif, v font ch dng hin th cc tiu h1, h2, h3 s l Arial, Verdana v cc font h serif. body { font-family:Times New Roman,Tohama,sans-serif } h1, h2, h3 { font-family:arial,verdana,serif }

Trang 26

Simple CSS Standard Edition

WallPearl

M trang web trong trnh duyt v kim tra kt qu. Chng ta thy phn tiu s c u tin hin th bng font Arial, nu trn my khng c font ny th font Verdana s c u tin v k s l cc font thuc h serif. Ch : i vi cc font c khong trng trong tn nh Times New Roman cn c t trong du ngoc kp. 4.2. Thuc tnh font-style:

Thuc tnh font-style nh ngha vic p dng cc kiu in thng (normal), in nghing (italic) hay xin (oblique) ln cc thnh phn trang web. Trong v d bn di chng ta s th thc hin p dng kiu in nghing cho thnh phn h1 v kiu xin cho h2. h1 { font-style:italic; } h2 { font-style:oblique; } 4.3. Thuc tnh font-variant:

Thuc tnh font-variant c dng chn gia ch bnh thng v small-caps ca mt font ch. Mt font small-caps l mt font s dng ch in hoa c kch c nh hn in hoa chun thay th nhng ch in thng. Nu nh font ch dng hin th khng c sn font small-caps th trnh duyt s hin ch in hoa thay th. Trong v d sau chng ta s s dng kiu small-caps cho phn h1 h1 { font-variant:small-caps }

Trang 27

Simple CSS Standard Edition

4.4. Thuc tnh font-weight:

WallPearl

Thuc tnh font-weight m t cch thc th hin ca font ch l dng bnh thng (normal) hay in m (bold). Ngoi ra, mt s trnh duyt cng h tr m t in m bng cc con s t 100 900. Th in m phn p: p{ font-weight:bold } 4.5. Thuc tnh font-size:

Kch thc ca mt font c nh bi thuc tnh font-size. Thuc tnh ny nhn cc gi tr n v o h tr bi CSS bn cnh cc gi tr xxsmall, x-small, small, medium, large, x-large, xx-large, smaller, larger. Ty theo mc ch s dng ca website bn c th la chon nhng n v ph hp. V d trang web ca bn phc v ch yu l nhng ngi gi, th lc km hay nhng ngi dng s dng cc mn hnh my tnh km cht lng th bn c th cn nhc s dng cc n v qui i nh em hay %. Nh vy s m bo font ch trn trang web ca bn lun kch thc ph hp. v d sau trang web s c kch c font l 20px, h1 l 3em = 3 x 20 = 60px, h2 l 2em = 40px. body { font-size:20px } h1 { font-size:3em } h2 { font-size:2em }

Trang 28

Simple CSS Standard Edition

Thuc tnh font rt gn

WallPearl

Tng t nh cc thuc tnh background, chng ta cng c th rt gn cc thuc tnh font li thnh mt thuc tnh n nh v d sau: h1 { font-style: italic; font-variant:small-caps; font-weight: bold; font-size: 35px; font-family: arial,verdana,sans-serif; } Thnh h1 { font: italic bold 35px arial,verdana,sans-serif; } Cu trc rt gn cho cc thuc tnh nhm font: Font :<font-style> | < font-variant> | <font-weight> | <font-size> |< font-family> i qua bi hc ny, bn nm bt c cch nh font ch cho mt thnh phn trang web cng nh cch s dng cc kiu font in nghing, in m, font small-caps v cch qui nh kch thc font. Trong bi hc k chng ta s c tm hiu thm v cc thuc tnh CSS v nh dng vn bn.

Trang 29

Simple CSS Standard Edition

WallPearl

Bi 5: Text
nh dng v thm vo cc kiu nh dng c bit cho phn ni dung mt trang web l mt vn quan trng cho bt c nh thit k web no. Nh ni, bi hc ny chng ta s c tm hiu v cc thuc tnh CSS v nh dng vn bn. 5.1. Mu ch (thuc tnh color):

nh mu ch cho mt thnh phn no trn trang web chng ta s dng thuc tnh color. Gi tr ca thuc tnh ny l cc gi tr mu CSS h tr. V d sau chng ta s vit CSS nh mu ch chung cho mt trang web l en, cho tiu h1 mu xanh da tri, cho tiu h2 mu xanh l chng ta s lm nh body { color:#000 } h1 { color:#0000FF } h2 { color:#00FF00 }

5.2.

Thuc tnh text-indent :

Thuc tnh text-indent cung cp kh nng to ra khong tht u dng cho dng u tin trong on vn bn. Gi tr thuc tnh ny l cc n v o c bn dng trong CSS. Trong v d sau chng ta s nh dng tht u dng mt khong 30px cho dng vn bn u tin trong mi on vn bn i vi cc thnh phn <p>

Trang 30

Simple CSS Standard Edition

p{ text-indent:30px } 5.3. Thuc tnh text-align :

WallPearl

Thuc tnh text-align gip bn thm cc canh chnh vn bn cho cc thnh phn trong trang web. Cng tng t nh cc la chn canh chnh vn bn trong cc trnh son tho vn bn thng dng nh MS Word, thuc tnh ny c tt c 4 gi tr : left (canh tri mc nh), right (canh phi), center (canh gia) v justify (canh u). Trong v d sau chng ta s thc hin canh phi cc thnh phn h1, h2 v canh u i vi thnh phn <p> h1, h2 { text-align:right } p{ text-align:justify } 5.4. Thuc tnh letter-spacing:

Thuc tnh letter-spacing c dng nh khong cch gia cc k t trong mt on vn bn. Mun nh khong cch gia cc k t trong thnh phn h1, h2 l 7px v thnh phn <p> l 5px chng ta s vit CSS sau: h1, h2 { letter-spacing:7px } p { letter-spacing:5px }

Trang 31

Simple CSS Standard Edition

5.5. Thuc tnh text-decoration:

WallPearl

Thuc tnh text-decoration gip bn thm cc hiu ng gch chn (underline), gch xin (line-through), gch u (overline), v mt hiu ng c bit l vn bn nhp nhy (blink). V d sau chng ta s nh dng gch chn cho thnh phn h1, gch u thnh phn h2 h1 { text-decoration:underline } h2 { text-decoration:overline } 5.6. Thuc tnh text-transform:

Text-transform l thuc tnh qui nh ch in hoa hay in thng ca vn bn m khng ph thuc vo vn bn gc trn HTML. Thuc tnh ny c tt c 4 gi tr: uppercase (in hoa), lowercase (in thng), capitalize (in hoa k t u tin trong mi t) v none (khng p dng hiu ng mc nh). Trong v d di y chng ta s nh dng cho thnh phn h1 l in hoa, h2 l in hoa u mi k t. h1 { text-transform:uppercase } h2 { text-transform:capitalize }

Trang 32

Simple CSS Standard Edition

WallPearl

Bi 6: Pseudo-classes For Links

Mt thnh phn rt quan trng trong mi website chnh l lin kt.Cng nh mt i tng vn bn thng thng, chng ta hon ton c th p dng cc thuc tnh nh dng hc 2 bi trc nh nh font ch, gch chn, mu ch, cho mt lin kt. Hn na, CSS cn cung cp mt iu khin c bit c gi l pseudoclasses. Pseudo-classes cho php bn xc nh cc hiu ng nh dng cho mt i tng lin kt mt trng thi xc nh nh khi lin kt cha c thm (a:link), khi r chut ln lin kt (a:hover), khi lin kt c thm (a:visited) hay khi lin kt ang c kch hot ang gi nhn chut (a:active). Vi iu khin pseudoclasses cng vi cc thuc tnh CSS hc chc chn s mang li rt nhiu tng v trang tr lin kt cho trang web. Sau y chng ta s tin hnh mt s v d tm hiu thm v cc kh nng trang tr cho mt lin kt da trn pseudo-classes. V d 1: V d ny chng ta s p dng 4 mu sc khc nhau cho tng trng thi lin kt: cc lin kt cha thm c mu xanh l; cc lin kt mouse over s c mu ti; cc lin kt thm s c mu v cc lin kt ang kch hot c mu tm. a:link { color:#00FF00 } a:hover { color:#FF00FF } a:visited { color:#FF0000 } a:active { color:# 662D91 }

Trang 33

Simple CSS Standard Edition

WallPearl

V d 2: To cc hiu ng tng ng vi trnh trng lin kt: cc lin cha thm c mu xanh l, kch c font 14px; lin kt mouse over c mu ti, kch c font 1.2em, hiu ng nhp nhy; lin kt thm s c mu xanh da tri, khng c ng gch chn; cc lin kt ang kch hot c mu tm v font dng small-caps. a:link { color:#00FF00; font-size:14px } a:hover { color:#FF00FF; font-size:1.2em; text-decoration:blink } a:visited { color:#FF0000; text-decoration:none } a:active { color:# 662D91; font-variant:small-caps } V d 3: V d ny cng to cho lin kt hiu ng mu sc ging v d 2 nhng s c thm 1 s hiu ng: cc lin kt s c khung vin mu en, kch c font 14px; lin kt mouse over c nn light cyan; cc lin kt thm c nn light yellow.

Trang 34

Simple CSS Standard Edition

a{ border:1px solid #000; font-size:14px } a:link { color:#00FF00; } a:hover { background-color:#00BFF3; color:#FF00FF; font-size:1.2em; text-decoration:blink } a:visited { background-color:#FFF568; color:#FF0000; text-decoration:none } a:active { color:#662D91; font-variant:small-caps }

WallPearl

Ba v d trn ch l mt t gi v kh nng kt hp cc thuc tnh CSS vi pseudo-classes to nn nhiu hiu ng hp dn cho trang web. Cng xin ni lun l cc v d Pearl trnh by trong bi ny cng nh nhng bi khc tht ra trng khng d nhn, l do Pearl khng c nhiu thi gian chm cht cc v d ca mnh. Ci m Pearl mun ni ch l lm th no cc bn hiu tc dng mt thuc tnh no c th vn dng cho trang web ca chnh mnh.

Trang 35

Simple CSS Standard Edition

WallPearl

Bi 7 : Class & ID
Trong cc bi hc trc, chng ta c hc cc thuc tnh CSS v background, color, font, Tuy nhin, bn cng nhn ra l khi p dng mt thuc tnh CSS cho mt thnh phn no v d nh h1, h2, p, a, img, th ton b cc thnh phn ny trong trang web u nhn thuc tnh ny. Vy c cc no nhm li mt s thnh phn no p dng mt thuc tnh c bit. V d nh bn mun cc lin kt trn menu trang web s c in hoa, v c kch c ln hn so vi lin kt trong ni dung th phi lm th no? y chnh l vn m chng ta s cng gii quyt trong chng ny. 7.1. Nhm cc phn t vi class :

V d chng ta c mt on m HTML sau y : <p>Danh Sch Cc Tnh, Thnh Ph Ca Vit Nam</p> <ul> <li>H Ni</li> <li>TP. H Ch Minh</li> <li> Nng</li> <li>Tha Thin Hu</li> <li>Khnh Ha</li> <li>Qung Ninh</li> <li>Tin Giang</li> </ul> Yu cu t ra l lm th no tn cc thnh ph l mu v tn cc tnh l mu xanh da tri. gii quyt vn ny chng ta s dng mt thuc tnh HTML gi

Trang 36

Simple CSS Standard Edition

WallPearl

l class to thnh 2 nhm l thnh ph v tnh. Ta s vit li on HTML sau thnh nh th ny: <p>Danh Sch Cc Tnh, Thnh Ph Ca Vit Nam</p> <ul> <li class=tp>H Ni</li> <li class=tp>TP. H Ch Minh</li> <li class=tp> Nng</li> <li class=tinh>Tha Thin Hu</li> <li class=tinh>Khnh Ha</li> <li class=tinh>Qung Ninh</li> <li class=tinh>Tin Giang</li> </ul> Vi vic dng class nhm cc i tng nh trn th cng vic ca chng ta s tr nn n gin hn nhiu: li .tp { color:FF0000 } li .tinh { color:0000FF } Lu : Khng nn t tn class vi k t u l ch s, n s khng lm vic cho Firefox.

Trang 37

Simple CSS Standard Edition

7.2. V d: Nhn dng phn t vi id:

WallPearl

Cng vi on HTML nh v d v class. Nhng yu cu t ra l H Ni s c mu sm, TP. H Ch Minh mu , Nng mu ti cn cc tnh mu xanh da tri. gii quyt vn ny chng ta s s dng thuc tnh HTML l id nhn dng mi thnh ph v dng class nhm cc tnh. on HTML ca chng ta by gi s l : <p>Danh Sch Cc Tnh, Thnh Ph Ca Vit Nam</p> <ul> <li id=hanoi>H Ni</li> <li id=hcmc>TP. H Ch Minh</li> <li id=danang> Nng</li> <li class=tinh>Tha Thin Hu</li> <li class=tinh>Khnh Ha</li> <li class=tinh>Qung Ninh</li> <li class=tinh>Tin Giang</li> </ul> V on CSS cn dng s l : #hanoi { color:# 790000 } #hcmc { color:#FF0000 } #danang { color:#FF00FF } .tinh { color:#0000FF } Lu : Khng nn t tn id vi k t u l ch s, n s khng lm vic cho Firefox.

Trang 38

Simple CSS Standard Edition

Tr qua hai v d trn chng ta c th rt ra nhng kt lun sau:

WallPearl

- Class dng nhm cc i tng c cng thuc tnh, do tnh cht n c th c s dng nhiu ln. - Id dng nhn dng mt i tng c trng, id c tnh duy nht. Trong bi hc ny, chng ta c hc v cc s dng class v id p dng cc c tnh c bit cho mt thnh phn web. bi k tip chng ta s c hc thm v hai th <div> v <span> trong HTML v ngha 2 th ny i vi vic vit CSS.

Trang 39

Simple CSS Standard Edition

WallPearl

Bi 8: Span & Div

Nh ha, bi hc ny chng ta s cng tm hiu v 2 th <span> v <div> trong HTML v xem chng c li ch g cho cng vic vit CSS ca chng ta. 8.1. Nhm phn t vi th <span>:

Th <span> trong HTML tht ra l mt th trung ha, n khng thm hay bt bt c mt th g vo mt ti liu HTML c. Nhng chnh nh tnh cht trung ha ny m n li l mt cng c nh du tuyt vi qua chng ta c th vit CSS nh dng cho cc phn t mong mun. V d: Chng ta c on HTML sau trch dn cu ni ca ch tch H Ch Minh <p>Khng c g qu hn c lp, t do.</p> Yu cu y l chng ta hy dng CSS t m 2 t c lp, t do. gii quyt vn ny, chng ta s thm th <span> vo on HTML nh sau: <p>Khng c g qu hn <span class=nhanmanh>c lp</span>, <span class=nhanmanh>t do</span>. V by gi chng ta c th vit CSS cho yu cu trn: .nhanmanh { font-weight:bold } Rt n gin phi khng no. 8.2. Nhm khi phn t vi th <div>:

Cng nh <span>, <div> cng l mt th trung ha v c thm vo ti liu HTML vi mc nh nhm cc phn t li cho mc ch nh dng bng CSS. Tuy nhin, im khc bit l <span> dng nhm mt khi phn t trong khi <div> c th nhm mt hoc nhiu khi phn t.

Trang 40

Simple CSS Standard Edition

WallPearl

Tr li v d v danh sch tnh, thnh trong phn class bi trc chng ta s gii quyt vn bng cch nhm cc phn t vi <div> nh sau: <p>Danh Sch Cc Tnh, Thnh Ph Vit Nam:</p> <ul> <div id=tp> <li>H Ni</li> <li>TP. H Ch Minh</li> <li> Nng</li> </div> <div id=tinh> <li>Tha Thin Hu</li> <li>Khnh Ha</li> <li>Qung Ninh</li> <li>Tin Giang</li> </div> </ul> V on CSS cho mc ch ny s l: #tp { color:#FF0000 } #tinh { color:0000FF }

Trang 41

Simple CSS Standard Edition

WallPearl

Trong hai bi hc trn, chng ta c hc qua v id, class, <div>, <span> v li ch ca n trong vic nhm, nh du phn t c th dng CSS to ra cc kiu trnh by c bit. C th mt s bn cha hc qua HTML s kh khn trong vic nm bt cc kin thc ny. Tuy nhin, yu cu m Pearl a ra y ch l cc bn c th vn dng cc phn t ny trong CSS.

Trang 42

Simple CSS Standard Edition

WallPearl

Bi 9: Box Model
Trong CSS, box model (m hnh hp) m t cch m CSS nh dng khi khng gian bao quanh mt thnh phn. N bao gm padding (vng m), border (vin) v margin (canh l) v cc ty chn. Hnh bn di m t cu trc minh ha m hnh hp cho mt thnh phn web. M hnh hp trn ch l mt m hnh l thuyt l tng. Bn di y chng ta s xt m hnh hp ca mt i tng web c th: Left V d: Chng ta c mt on HTML sau:
C

Top Margin Border Padding Right Content

Top <p> Model Box

Trong CSS, box model (m hnh hp) m t cch m CSS nh dng khi khng gian bao quanh mt thnh phn. </p> Phn CSS cho on HTML trn: p{ width:200px; margin:30px 20px; padding:20px 10px; border:1px solid #000; text-align:justify }

Trang 43

Simple CSS Standard Edition

Vi v d trn chng ta s khi qut c m hnh hp nh sau:

WallPearl

C l bn s cm thy hi kh hiu. Nhng khng sao c, tm thi bn c chp nhn nh vy. Cn v nhng ci hp ny th chng ta s cng tm hiu c th hn trong cc bi hc tip theo.

Trang 44

Simple CSS Standard Edition

WallPearl

Bi 10: Margin & Padding

Nh gii thiu bi trc, trong bi hc ny chng ta s cng tm hiu chi tit v 2 thnh phn margin v padding ca m hnh hp. 10.1. Thuc tnh margin: Nh tt c nhng ai hc qua MS Word u bit l trong phn thit lp Page Setup ca Word cng c mt thit lp margin nh l cho trang in. Tng t, thuc tnh margin trong CSS cng c dng canh l cho c trang web hay mt thnh phn web ny vi cc thnh phn web khc hay vi vin trang. V d sau s ch cho chng ta bit cch canh l cho mt trang web. body { margin-top:80px; margin-bottom:40px; margin-left:50px; margin-right:30px; border:1px dotted #FF0000 } Hoc gn hn chng ta s vit nh sau: body { margin:80px 30px 40px 50px; border:1px dotted #FF0000 } C php nh sau: margin:<margin-top> | <margin-right> | <margin-bottom> | <margin-left> Hoc: margin:<value1>|< value2> vi value 1 l gi tr margin-top v marginbottom v value2 l gi tr margin-left v margin-right.

Trang 45

Simple CSS Standard Edition

Kt qu ca v d trn s c m hnh ha nh sau:

WallPearl

V d k tip s th hin r hn v vic dng margin canh l cho cc i tng trong trang web. Cc bn hy quan st cc ng vin v nhn xt. body { margin:80px 30px 40px 50px; border:1px solid #FF0000 } #box1 { margin:50px 30px 20px 40px; border:1px solid #00FF00 } #box2 { margin:50px 30px 20px 40px; border:1px solid #0000FF }

Trang 46

Simple CSS Standard Edition

10.2. Thuc tnh padding:

WallPearl

Padding c th hiu nh l mt thuc tnh m. Padding khng nh hng ti khong cc gia cc cc i tng nh margin m n ch quy nh khong cch gia phn ni dung v vin ca mt i tng (xem li nh minh ha v boxmodel). C php: Tng t margin. Padding:<padding-top> | <padding-right> | <padding-bottom> | <padding-left> Cc bn hy th thc hin li 2 v d phn margin, nhng thay margin bng padding, nh quan st v tr ng vin.

Trang 47

Simple CSS Standard Edition

WallPearl

Bi 11: Border
Border l mt thnh phn quan trng trong mt trang web. N thng c dng trong trang tr, ng khung cho mt i tng cn nhn mnh, phn cch cc i tng gip trang web trng d nhn hn, Trong bi hc ny, chng ta s cng tm hiu v cch dng CSS nh border cho cc i tng web. 11.1. Thuc tnh border-width: Border-width l mt thuc tnh CSS quy nh rng cho vin ca mt i tng web. Thuc tnh ny c cc gi tr: thin (mnh), medium (va), thick (dy), hay l mt gi tr o c th nh pixels. Xem hnh minh ha bn di. 11.2. Thuc tnh border-color: Border-color l thuc tnh CSS quy nh mu vin cho mt i tng web. Thuc tnh ny nhn tt c n v mu CSS h tr. 11.3. Thuc tnh border-style: Border-style l thuc tnh CSS quy nh kiu vin th hin ca mt i tng web. CSS cung cp tt c 8 kiu vin tng ng vi 8 gi tr: dotted, dashed, solid, double, groove, ridge, inset v outset. Ngoi ra, hai gi tr none hay hidden dng n ng vin. hiu r hn, chng ta hy xem hnh minh ha di y (tt c vin c mu vng).

V d: V d sau s nh vin cho 3 thnh phn h1, h2, p nh sau: h1 { border-width:thin; border-color:#FF0000; border-style:solid }

Trang 48

Simple CSS Standard Edition

h2 { border-width:thick; border-color:#CCC; border-style:dotted } p { border-width:5px; border-color:#FF00FF; border-style:double }

WallPearl

Ngoi ra, chng ta cng c th dng ring cc thuc tnh border-top, border-right, border-bottom hay border-left ch nh vin ring cho cc i tng. 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 } Thuc tnh border rt gn: d nh chng ta c th s dng cu trc rt gn ca CSS nh sau: Border:<border-width> |<border-color> |<border-style>

Trang 49

Simple CSS Standard Edition

WallPearl

Bi 12: Height & Width

Trong bi hc ny, chng ta s tm hiu thm v cch dng thuc tnh height v width nh kch c cho mt thnh phn web. 12.1. Thuc tnh width: Width l mt thuc tnh CSS dng quy nh chiu rng cho mt thnh phn web. V d sau chng ta s nh chiu rng cho thnh phn p ca mt trang web. p{ width:700px; } 12.2. Thuc tnh max-width: Max-width l thuc tnh CSS dng quy nh chiu rng ti a cho mt thnh phn web. 12.3. Thuc tnh min-width: Min-width l thuc tnh CSS dng quy nh chiu rng ti thiu cho mt thnh phn web. 12.4. Thuc tnh height: Height l mt thuc tnh CSS dng quy nh chiu cao cho mt thnh phn web. V d sau chng ta s nh chiu cao cho thnh phn p ca mt trang web. p{ height:300px }

Trang 50

Simple CSS Standard Edition

12.5. Thuc tnh max-height:

WallPearl

Max-height l thuc tnh CSS dng quy nh chiu cao ti a cho mt thnh phn web. 12.6. Thuc tnh min-height: Min-height l thuc tnh CSS dng quy nh chiu cao ti thiu cho mt thnh phn web. Lu : Thng thng chiu cao mt thnh phn web do vn bn trong trang web quyt nh. Vic nh chiu cao chnh xc cho mt thnh phn s to thanh cun vn bn nu chiu cao vn bn ln hn chiu cao nh. Cc thuc tnh max/min-width/height c s dng trong nhng trng hp bn khng chc gi tr chnh xc cho width, height c mt thnh phn. V d, bn vng cha bi post ca mt forum c b ngang 500px, bn c th nh max-width:500px cho phn hnh nh trong phn trnh nhng nh ln b lch ra ngoi.

Trang 51

Simple CSS Standard Edition

WallPearl

Bi 13: Float & Clear

13.1. Thuc tnh float: Float (theo nh ngha ting Vit l th tri) l mt thuc tnh CSS dng c nh mt thnh phn web v bn tri hay bn phi Box B di chuyn sang khng gian bao quanh n. tri y l mt thuc tnh rt cn thit khi dn trang (nh to cc trang web 2 column layout hay 3 Content trn ln lp khong trng column layout), hin th vn bn thnh ct (ging nh kiu Format > Columns trong MS Word vy), hay thc hin vic nh v tr nh v text (nh mt s kiu text wrapping ca MS Word). r hn chng ta hy xem hnh minh ha sau v c ch hot ng ca float: Thuc tnh float c 3 gi tr: + Left: C nh phn t v bn tri. + Right: C nh phn t v bn phi. + None: Bnh thng. Nhn vo hnh minh ha trn chng ta thy l ban u trong box ln c hai thnh phn l Box B v phn Content. Lc u Box B nm bn trn v Content nm bn di, nhng khi chng ta t thuc tnh float cho Box B th Box B b c nh v bn tri v cha li khong trng bn tri n. Cn phn Content th vn nm bn di s t ng trn ln lp y khong trng do Box B to ra. v d sau, chng ta s thc hin float nh logo sang tri phn ni dung bn di trn ln nm cnh logo.

Trang 52

Simple CSS Standard Edition

#logo { float:left; } Mt v d khc l chng ta s th dng float chia 2 ct vn bn. .column1, .column2 { width:45%; float:left; text-align:justify; padding:0 20px; } .column1 { border-right:1px solid #000 } 13.2. Thuc tnh clear:

WallPearl

i cng vi thuc tnh float, trong CSS cn c mt thuc tnh l clear. Thuc tnh clear l mt thuc tnh thng c gn vo cc phn t lin quan ti phn t c float quyt nh hng x s ca phn t ny. v d trn, khi chng ta float tm nh qua tri th mc nhin vn bn s c trn ln lp vo ch trng. Nhng khi chng ta t vo vn bn thuc tnh clear th chng ta c quyn quyt nh xem phn vn bn c c trn ln hay khng. Thuc tnh clear c tt c 4 thuc tnh: left (trn bn tri), right (trn bn phi), both (khng trn) v none. Th dng thuc tnh clear vi cc gi tr khc nhau i vi on vn bn trong v d float nh logo trn.

Trang 53

Simple CSS Standard Edition

WallPearl

Bi 14: Position
Kt hp vi thuc tnh float hc, thuc tnh position mang li nhiu kh nng to mt cch trnh by tin tin v chnh xc cho trang web. Nguyn l hot ng ca position: Hy tng tng ca s trnh duyt ca bn ging nh mt h ta v vi position bn c th t mt i tng web bt c v tr no trn h ta ny.

Gi s chng ta mun nh v mt nh v tr 70px cch nh v 90px t bn tri ti liu, chng ta s vit CSS nh sau: img { position:absolute; top:70px; left:90px }

Trang 54

Simple CSS Standard Edition

WallPearl

Nh bn thy, s nh v bng CSS l mt cng ngh chnh xc nh v mt thnh phn. N d dng hn so vi vic dng bng, nh trong sut hay bt k th g khc. 14.1. Absolute position: nh v tuyt i l s nh v m trong cc thnh phn c nh v khng li bt c mt khong trng no trong ti liu. Mt thnh phn c nh v tuyt i s nhn gi tr position l absolute. Cc i tng nh v tuyt i s dng kt hp vi cc thuc tnh top, left, right, bottom xc nh ta . V d sau s ch cho chng ta cch t bn nh bn gc ti liu bng nh v tuyt 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 }

Trang 55

Simple CSS Standard Edition

14.2. Relative position:

WallPearl

S nh v tng i cho mt thnh phn l s nh v c tnh t v tr gc trong ti liu. Cc thnh phn c nh v tng i s li khong khng trong ti liu. Cc thnh phn c nh v tng i s nhn gi tr position l relative. Chng ta hy lm li v d trn nhng thay absolute thnh relative. Cc bn ghi nhn li v tr 4 nh logo lc p dng thuc tnh position l none, absolute v relative ri rt ra nhn xt. Hai bi hc trn, bn c hc v 2 thuc tnh CSS l float v position. Hai thuc tnh ny mang li cho bn nhiu s la chn hn trong vic dn trang. N chnh xc v d thc hin hn so vi cc phng php dng bng hay nh trong sut.

Trang 56

Simple CSS Standard Edition

WallPearl

Bi 15: Layers
CSS hot ng trn c 3 chiu: cao, rng, su. Hai chiu u tin, chng ta c nhn thy trong cc bi hc trc. Trong bi hc ny, chng ta s c hc v cch t cc thnh phn web cc lp khc nhau vi thuc tnh z-index. Ni n gin hn th l cch bn t mt thnh phn ny ln trn mt thnh phn khc. Vi mc ch ny, bn s gn cho mi phn t mt con s. Theo , phn t c s cao hn s nm trn, phn t c s thp hn s nm di. V d sau chng ta s t 5 bc nh logo 5 lp. #logo1 { position:absolute; top:70px; left:50px; z-index:1 } #logo2 { position:absolute; top:140px; left:100px; z-index:2 } #logo3 { position:absolute; top:210px; left:150px; z-index:3 }

Trang 57

Simple CSS Standard Edition

#logo4 { position:absolute; top:280px; left:200px; z-index:4 } #logo5 { position:absolute; top:350px; left:250px; z-index:5 }

WallPearl

Trang 58

Simple CSS Standard Edition

WallPearl

Bi 16: Web Standards

Trong cng vic thit k web th mt trong nhng vn quan trng l lm sao m bo trang web ca bn c th hin th tt trn hu ht cc trnh duyt. Hiu r vn ny W3C (World Wide Web Consortium) mt t chc c nhim v qun l v c ra cc tiu chun web cng vi cc i tc khc nh Microsof, Mozilla Foundation, t ra cc tiu chun v m cho web. N cho php nh pht trin web c th t tin hn khi thc hin d n cng nh m bo cho cc trang web tha mn tiu chun c th hin th tt nhiu trnh duyt. d dng hn. Trong CSS, W3C to ra mt cng c gi l CSS Validator c v thm nh tnh hp chun cho CSS ca bn. u tin, cc bn truy cp vo a ch sau click here. t url file CSS ca bn url ri nhn nt click to check stylesheet chng trnh c file CSS ca bn. Sau khi c xong, nu file CSS ca bn khng ph hp tiu chun, chng trnh s hin th danh sch li. Nu file CSS ca bn hp chun th chng trnh s hin ra bc nh chng nhn. Bn c th t bc nh trn trang web ca bn th hin n c xy dng trn cc m chun.

Trang 59

Simple CSS Standard Edition

WallPearl

Ph Lc: Bng Thuc Tnh & Gi Tr Thuc Tnh

Thuc tnh background

background-color background-image background-repeat

backgroundattachment background-position

font

M t Gi tr Background Thuc tnh rt gn cho tt c background-color cc thuc tnh nn. background-image background-repeat background-attachment background-position Thit lp mu nn cho i <color> tng. transparent Thit lp nh nn cho i url tng. none Thit lp ch lp nh nn. repeat repeat-x repeat-y no-repeat Thit lp nh nn cun/c scroll nh. fixed Thit lp v tr th hin nh top left nn. top center top right center left center center center right bottom left bottom center bottom right x% y% xy Font Thuc tnh ngn cho tt c font-style cc thit lp v font. font-variant

Trang 60

Simple CSS Standard Edition

WallPearl

font-style

font-variant font-weight

font-size

font-family

color text-indent text-align

letter-spacing text-decoration

font-weight font-size font-family Thit lp ch in nghing, normal xin hay bnh thng. italic oblique Thit lp font bnh thng normal hay small-caps small-caps Thit lp in m, thng. normal bold bolder lighter 100 900 Thit lp kch c font. xx-small x-small small medium large x-large xx-large smaller larger <length> % Thit lp loi font hin th family-name trang web/ i tng web. generic-family Text Thit lp mu ch. <color> Thit lp khong tht u <length> dng. % Thit lp ch canh vn left bn. right center justify Thit lp khong cch gia normal cc k t. <length> Thm hiu ng c bit cho none vn bn. underline

Trang 61

Simple CSS Standard Edition

overline line-through blink none upper lower capitalize

WallPearl

text-transform

Change case vn bn.

:link :hover :visited :active margin

margin-top

margin-right

margin-bottom

margin-left

padding

padding-top padding-right

Pseudo-classes Lin kt cha thm. Mouse over 1 thnh phn. Lin kt thm. Kch hot 1 thnh phn Margin Thuc tnh ngn cho cc thit margin-top lp margin. margin-right margin-bottom margin-left Thit lp canh l trn cho mt auto thnh phn. <length> % Thit lp canh l phi cho auto mt thnh phn. <length> % Thit lp canh l di cho auto mt thnh phn. <length> % Thit lp canh l tri cho mt auto thnh phn. <length> % Padding Thuc tnh ngn cho cc thit padding-top lp padding. padding -right padding -bottom padding -left Thit lp m trn cho mt <length> thnh phn. % Thit lp m phi cho mt <length> thnh phn. % Trang 62

Simple CSS Standard Edition

Thit lp m di cho mt thnh phn. Thit lp m tri cho mt thnh phn. Border Thuc tnh ngn cho tt c cc thit lp border cho mt thnh phn. Thit lp rng ng vin. <length> % <length> %

WallPearl

padding-bottom padding-left

border

border-width

border-color border-style

border-top-width border-top-color border-top-style border-right-width border-right-color border-right-style border-bottom-width border-bottom-color border-bottom-style border-left-width border-left-color

border-width border-color border-style thin medium thick <length> Thit lp mu cho ng <color> vin. Thit lp kiu ng vin. none hidden solid dotted dashed double groove ridge inset outset Thit lp rng vin pha <border-width> trn. Thit lp mu vin pha trn. <border-color> Thit lp kiu vin pha trn. <border-style> Thit lp rng vin phi. <border-width> Thit lp mu vin phi. <border-color> Thit lp kiu vin phi. <border-style> Thit lp rng vin bn <border-width> di. Thit lp mu vin bn di. <border-color> Thit lp kiu vin bn di. <border-style> Thit lp rng vin tri. <border-width> Thit lp mu vin tri. <border-color>

Trang 63

Simple CSS Standard Edition

WallPearl

border-left-style width

max-width

min-width

height

max-height

min-height

float

clear

position top

right

bottom

Thit lp kiu vin tri. <border-style> Width Thit lp chiu rng i auto tng. <length> % Thit lp chiu rng ti a none cho i tng. <length> % Thit lp chiu rng ti thiu <length> cho mt i tng. % Height Thit lp chiu cao cho mt auto i tng. <length> % Thit lp chiu cao ti a cho none mt i tng. <length> % Thit lp chiu cao ti thiu <length> cho mt i tng. % Layout Position C nh i tng. left right none Cch thc x s ca mt i left tng lin quan vi i tng right floated. both none nh v i tng relative absolute Thit lp ta nh i auto tng. <length> % Thit lp ta bn phi i auto tng. <length> % Thit lp ta y i auto tng. <length> % Trang 64

Simple CSS Standard Edition

Thit lp ta bn tri i auto tng. <length> % nh lp i tng. auto number

WallPearl

left

z-index

Trang 65