Tail i Eucs s Tieng Viet Coban

2008

Simple CSS Standard Edition

Simple CSS Standard Edition WallPearl

2008

Simple CSS Standard Edition

By WallPearl

2008 WallPearlsBlog. All Rights Reserved.


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


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 ............................................................... 40

8.2. Nhm phn t vi .................................................................. 40

Bi 9: Box Model ...................................................................... 43

Bi 10: Margin & padding ........................................................ 45

10.1. Thuc tnh margin .......................................................................... 45

10.2. Thuc tnh padding ........................................................................ 47


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


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


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 [email protected] hoc [email protected]

Thng 1, nm 2008

.: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,


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.


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:

+ 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


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: . 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: background-

color, 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 }


h2 {

color:#0000FF;

text-transform:uppercase;

}

h3 {

color:#0000FF;


}

h1, h2, h3 {

color:#0000FF;


}

+ 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

}


2.2. n v CSS:

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 M t n v M t

% Phn trm 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.

in Inch (1 inch = 2.54 cm)

cm Centimeter

mm Millimeter

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.

pt Point (1 pt = 1/72 inch)

pc Pica (1 pc = 12 pt)

px Pixels (im nh trn mn hnh my tnh)

n v mu sc

n v M t

Color-name Tn mu ting Anh. V d: black, white, red, green, blue, cyan, magenta,

RGB (r,g,b) Mu RGB vi 3 gi tr R, G, B c tr t 0 255 kt hp vi nhau to ra v s mu.

RGB

(%r,%g,%b)

Mu RGB vi 3 gi tr R, G, B c tr t 0 100% kt hp.

Hexadecimal

RGB

M mu RGB dng h thp lc. V d: #FFFFFF: trng, #000000: en, #FF00FF: ti.


2.3. V tr t CSS:

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:

V d

^_^ Welcome To WallPearls Blog ^_^

+ 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).


Cng v d lm trang web c mu nn trng, on vn bn ch xanh l, chng ta s

th hin nh sau:

V d

body { background-color:#FFF }

p { color:#00FF00 }


Lu : Th style nn t trong th head.

i vi nhng trnh duyt c, khng th nhn ra th . 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 sau khi

code CSS. Nh v d trn s vit li l:


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

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.

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:

External

CSS File

Web Pages

Ch cn thay i ni

dung 1 file CSS, tt c

cc trang web s c

cp nht ngay lp tc


V d


Sau hy to mt file style.css vi ni dung:

body {

background-color:#FFF

}

p {

color:#00FF00

}

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)


2.4. S u tin:

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 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 gia th 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:


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 {


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 {


width:100%;

height:150px !important;

text-align:right;

}


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

}

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


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.


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:


+ 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.

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.


V d:

Gi tr ngha

Background-position:5cm 2cm nh c nh v 5cm t tri qua v 2cm t trn xung.

Background-position:20% 30% nh c nh v 20% t tri qua v 30% t trn xung.

Background-position:bottom left 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: | | |

|

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 background-

position dng m trn i:

background:transparent url(logo.png) no-repeat;


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.


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 }


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

}


4.4. Thuc tnh font-weight:

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 xx-

small, 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

}


Thuc tnh font rt gn

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-variant> | | |< 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.


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 {

text-indent:30px

}

5.3. Thuc tnh text-align :

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

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 l 5px chng ta s vit CSS sau:

h1, h2 {

letter-spacing:7px

}

p { letter-spacing:5px }


5.5. Thuc tnh text-decoration:

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

}


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 pseudo-

classes. 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 pseudo-

classes 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 }


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.


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 }

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.


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 :

Danh Sch Cc Tnh, Thnh Ph Ca Vit Nam

H Ni

TP. H Ch Minh

Nng

Tha Thin Hu

Khnh Ha

Qung Ninh

Tin Giang

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


l class to thnh 2 nhm l thnh ph v tnh. Ta s vit li on HTML sau

thnh nh th ny:


H Ni

TP. H Ch Minh

Nng

Tha Thin Hu

Khnh Ha

Qung Ninh

Tin Giang

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.


7.2. Nhn dng phn t vi id:

V d:

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 :


H Ni

TP. H Ch Minh

Nng

Tha Thin Hu

Khnh Ha

Qung Ninh

Tin Giang

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.


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

- 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 v trong HTML v ngha 2 th ny i vi vic vit

CSS.


Bi 8: Span & Div

Nh ha, bi hc ny chng ta s cng tm hiu v 2 th v

trong HTML v xem chng c li ch g cho cng vic vit CSS ca chng ta.

8.1. Nhm phn t vi th :

Th 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

Khng c g qu hn c lp, t do.

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 vo on HTML nh sau:

Khng c g qu hn c lp, t do.

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 :

Cng nh , 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 dng nhm mt khi phn t trong khi

c th nhm mt hoc nhiu khi phn t.


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 nh sau:

Danh Sch Cc Tnh, Thnh Ph Vit Nam:

H Ni

TP. H Ch Minh

Nng

Tha Thin Hu

Khnh Ha

Qung Ninh

Tin Giang

V on CSS cho mc ch ny s l:

#tp {

color:#FF0000

}

#tinh {

color:0000FF

}


Trong hai bi hc trn, chng ta c hc qua v id, class, , 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.


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:

V d: Chng ta c mt

on HTML sau:

Trong CSS, box model (m hnh hp) m t cch m CSS nh dng khi khng

gian bao quanh mt thnh phn.

Phn CSS cho on HTML trn:

p {

width:200px;

margin:30px 20px;

padding:20px 10px;

border:1px solid #000;

text-align:justify

}

Model Box

Margin

Border

Padding

Content

C

Top

Top

Lef

t

Rig

ht


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

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.


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: | | |

Hoc: margin:|< value2> vi value 1 l gi tr margin-top v margin-

bottom v value2 l gi tr margin-left v margin-right.


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

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 {


border:1px solid #FF0000

}

#box1 {


border:1px solid #00FF00

}

#box2 {


border:1px solid #0000FF

}


10.2. Thuc tnh padding:

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: | | |

Cc bn hy th thc hin li 2 v d phn margin, nhng thay margin bng

padding, nh quan st v tr ng vin.


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 }


h2 { border-width:thick;

border-color:#CCC;

border-style:dotted }

p { border-width:5px;

border-color:#FF00FF;

border-style:double }

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: | |


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

}


12.5. Thuc tnh max-height:

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.


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

khng gian bao quanh n.

y l mt thuc tnh rt

cn thit khi dn trang

(nh to cc trang web 2

column layout hay 3

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.

Content trn ln lp khong trng

Box B di chuyn sang

tri


#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:

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.


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 }


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 }


14.2. Relative position:

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.


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

}


#logo4 {

position:absolute;

top:280px;

left:200px;

z-index:4

}

#logo5 {

position:absolute;

top:350px;

left:250px;

z-index:5

}


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.


Ph Lc: Bng Thuc Tnh & Gi Tr Thuc Tnh

Thuc tnh M t Gi tr

Background

background Thuc tnh rt gn cho tt c cc thuc tnh nn.

background-color

background-image

background-repeat

background-attachment

background-position

background-color Thit lp mu nn cho i tng.

transparent

background-image Thit lp nh nn cho i tng.

url

none

background-repeat Thit lp ch lp nh nn. repeat repeat-x

repeat-y

no-repeat

background-

attachment

Thit lp nh nn cun/c nh.

scroll

fixed

background-position Thit lp v tr th hin nh nn.

top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right

x% y%

x y

Font

font Thuc tnh ngn cho tt c cc thit lp v font.

font-style

font-variant


font-weight

font-size

font-family

font-style Thit lp ch in nghing, xin hay bnh thng.

normal

italic

oblique

font-variant Thit lp font bnh thng hay small-caps

normal

small-caps

font-weight Thit lp in m, thng. normal bold

bolder

lighter

100 900

font-size Thit lp kch c font. xx-small x-small

small

medium

large

x-large

xx-large

smaller

larger

%

font-family Thit lp loi font hin th trang web/ i tng web.

family-name

generic-family

Text

color Thit lp mu ch.

text-indent Thit lp khong tht u dng.

%

text-align Thit lp ch canh vn bn.

left

right

center

justify

letter-spacing Thit lp khong cch gia cc k t.

normal

text-decoration Thm hiu ng c bit cho vn bn.

none

underline


overline

line-through

blink

text-transform Change case vn bn. none upper

lower

capitalize

Pseudo-classes

:link Lin kt cha thm.

:hover Mouse over 1 thnh phn.

:visited Lin kt thm.

:active Kch hot 1 thnh phn

Margin

margin Thuc tnh ngn cho cc thit lp margin.

margin-top

margin-right

margin-bottom

margin-left

margin-top Thit lp canh l trn cho mt thnh phn.

auto

%

margin-right Thit lp canh l phi cho mt thnh phn.

auto

%

margin-bottom Thit lp canh l di cho mt thnh phn.

auto

%

margin-left Thit lp canh l tri cho mt thnh phn.

auto

%

Padding

padding Thuc tnh ngn cho cc thit lp padding.

padding-top

padding -right

padding -bottom

padding -left

padding-top Thit lp m trn cho mt thnh phn.

%

padding-right Thit lp m phi cho mt thnh phn.

%


padding-bottom Thit lp m di cho mt thnh phn.

%

padding-left Thit lp m tri cho mt thnh phn.

%

Border

border Thuc tnh ngn cho tt c cc thit lp border cho mt thnh phn.

border-width

border-color

border-style

border-width Thit lp rng ng vin. thin medium

thick

border-color Thit lp mu cho ng vin.

border-style Thit lp kiu ng vin. none hidden

solid

dotted

dashed

double

groove

ridge

inset

outset

border-top-width Thit lp rng vin pha trn.

border-top-color Thit lp mu vin pha trn.

border-top-style Thit lp kiu vin pha trn.

border-right-width Thit lp rng vin phi.

border-right-color Thit lp mu vin phi.

border-right-style Thit lp kiu vin phi.

border-bottom-width Thit lp rng vin bn di.

border-bottom-color Thit lp mu vin bn di.

border-bottom-style Thit lp kiu vin bn di.

border-left-width Thit lp rng vin tri.

border-left-color Thit lp mu vin tri.


border-left-style Thit lp kiu vin tri.

Width

width Thit lp chiu rng i tng.

auto

%

max-width Thit lp chiu rng ti a cho i tng.

none

%

min-width Thit lp chiu rng ti thiu cho mt i tng.

%

Height

height Thit lp chiu cao cho mt i tng.

auto

%

max-height Thit lp chiu cao ti a cho mt i tng.

none

%

min-height Thit lp chiu cao ti thiu cho mt i tng.

%

Layout Position

float C nh i tng. left right

none

clear Cch thc x s ca mt i tng lin quan vi i tng floated.

left

right

both

none

position nh v i tng relative absolute

top Thit lp ta nh i tng.

auto

%

right Thit lp ta bn phi i tng.

auto

%

bottom Thit lp ta y i tng.

auto

%


left Thit lp ta bn tri i tng.

auto

%

z-index nh lp i tng. auto number

Tail i Eucs s Tieng Viet Coban

Documents

Transcript of Tail i Eucs s Tieng Viet Coban