WallPearl SimpleCSS (StandardEdition)

Simple CSS
Standard Edition
2008
Simple CSS Standard Edition WallPearl
2008
Simple CSS
Standard Edition
By WallPearl
2008 WallPearlsBlog. All Rights Reserved.
Trang 2
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
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
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
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
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
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
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
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
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: 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 }
Trang 11
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
}
Trang 12
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 Inch (1 inch = 2.54 cm) in thng ca font hin hnh.
cm Centimeter Do , n v ny khng
mm Millimeter 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.
em 1 em tng ng kch thc pt Point (1 pt = 1/72 inch)
font hin hnh, nu font hin pc Pica (1 pc = 12 pt)
hnh c kch c 14px th 1 em px Pixels (im nh trn mn
= 14 px. y l mt n v rt hnh my tnh)
hu ch trong vic hin th
trang web.
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 Mu RGB vi 3 gi tr R, G, B c tr t 0 100% kt hp.
(%r,%g,%b)
Hexadecimal M mu RGB dng h thp lc. V d: #FFFFFF: trng,
RGB #000000: en, #FF00FF: ti.
Trang 13
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:
<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
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  sau khi
code CSS. Nh v d trn s vit li l:
<style type=text/css>

</style>
Trang 15
+ 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.
External Ch cn thay i ni
CSS File 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
<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
}
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
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 <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
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;
}
<p style=text-align:center; height:200px; border:1px solid #FF0000; color:#000 }
Trang 19
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.
Trang 20
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
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
+ 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.
Trang 23
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:<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 background-

position dng m trn i:
background:transparent url(logo.png) no-repeat;
Trang 24
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
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
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
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
}
Trang 28
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-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
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
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 <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
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
}
Trang 32
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 }
Trang 33
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
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.
Trang 35
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
l class to thnh 2 nhm l thnh ph v tnh. Ta s vit li on HTML sau

thnh nh th ny:
<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
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 :
<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
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 <div> v <span> trong HTML v ngha 2 th ny i vi vic vit
CSS.
Trang 39
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
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
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
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 Top

mt m hnh l thuyt l
tng. Bn di y chng Margin
ta s xt m hnh hp ca Border
mt i tng web c th: Padding
Right
Left
Content
V d: Chng ta c mt
on HTML sau: C
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
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.
Trang 44
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 margin-

bottom v value2 l gi tr margin-left v margin-right.
Trang 45
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
}
Trang 46
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:<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
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
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:<border-width> |<border-color> |<border-style>
Trang 49
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
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.
Trang 51
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
Box B di chuyn sang bn tri hay bn phi
tri 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
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
#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.
Trang 53
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
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
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.
Trang 56
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
#logo4 {
position:absolute;
top:280px;
left:200px;
z-index:4
}
#logo5 {
position:absolute;
top:350px;
left:250px;
z-index:5
}
Trang 58
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
Ph Lc: Bng Thuc Tnh & Gi Tr Thuc Tnh
Thuc tnh M t Gi tr
Background
background Thuc tnh rt gn cho tt c background-color
cc thuc tnh nn. background-image
background-repeat
background-attachment
background-position
background-color Thit lp mu nn cho i <color>
tng. transparent
background-image Thit lp nh nn cho i url
tng. none
background-repeat Thit lp ch lp nh nn. repeat
repeat-x
repeat-y
no-repeat
background- Thit lp nh nn cun/c scroll
attachment nh. fixed
background-position 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
font Thuc tnh ngn cho tt c font-style
cc thit lp v font. font-variant
Trang 60
font-weight
font-size
font-family
font-style Thit lp ch in nghing, normal
xin hay bnh thng. italic
oblique
font-variant Thit lp font bnh thng normal
hay small-caps 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
<length>
%
font-family Thit lp loi font hin th family-name
trang web/ i tng web. generic-family
Text
color Thit lp mu ch. <color>
text-indent Thit lp khong tht u <length>
dng. %
text-align Thit lp ch canh vn left
bn. right
center
justify
letter-spacing Thit lp khong cch gia normal
cc k t. <length>
text-decoration Thm hiu ng c bit cho none
vn bn. underline
Trang 61
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 margin-top
lp margin. margin-right
margin-bottom
margin-left
margin-top Thit lp canh l trn cho mt auto
thnh phn. <length>
%
margin-right Thit lp canh l phi cho auto
mt thnh phn. <length>
%
margin-bottom Thit lp canh l di cho auto
mt thnh phn. <length>
%
margin-left Thit lp canh l tri cho mt auto
thnh phn. <length>
%
Padding
padding Thuc tnh ngn cho cc thit padding-top
lp padding. padding -right
padding -bottom
padding -left
padding-top Thit lp m trn cho mt <length>
thnh phn. %
padding-right Thit lp m phi cho mt <length>
thnh phn. %
Trang 62
padding-bottom Thit lp m di cho mt <length>

thnh phn. %
padding-left Thit lp m tri cho mt <length>
thnh phn. %
Border
border Thuc tnh ngn cho tt c border-width
cc thit lp border cho mt border-color
thnh phn. border-style
border-width Thit lp rng ng vin. thin
medium
thick
<length>
border-color Thit lp mu cho ng <color>
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 <border-width>
trn.
border-top-color Thit lp mu vin pha trn. <border-color>
border-top-style Thit lp kiu vin pha trn. <border-style>
border-right-width Thit lp rng vin phi. <border-width>
border-right-color Thit lp mu vin phi. <border-color>
border-right-style Thit lp kiu vin phi. <border-style>
border-bottom-width Thit lp rng vin bn <border-width>
di.
border-bottom-color Thit lp mu vin bn di. <border-color>
border-bottom-style Thit lp kiu vin bn di. <border-style>
border-left-width Thit lp rng vin tri. <border-width>
border-left-color Thit lp mu vin tri. <border-color>
Trang 63
border-left-style Thit lp kiu vin tri. <border-style>

Width
width Thit lp chiu rng i auto
tng. <length>
%
max-width Thit lp chiu rng ti a none
cho i tng. <length>
%
min-width Thit lp chiu rng ti thiu <length>
cho mt i tng. %
Height
height Thit lp chiu cao cho mt auto
i tng. <length>
%
max-height Thit lp chiu cao ti a cho none
mt i tng. <length>
%
min-height Thit lp chiu cao ti thiu <length>
cho mt i tng. %
Layout Position
float C nh i tng. left
right
none
clear Cch thc x s ca mt i left
tng lin quan vi i tng right
floated. both
none
position nh v i tng relative
absolute
top Thit lp ta nh i auto
tng. <length>
%
right Thit lp ta bn phi i auto
tng. <length>
%
bottom Thit lp ta y i auto
tng. <length>
%
Trang 64
left Thit lp ta bn tri i auto

tng. <length>
%
z-index nh lp i tng. auto
number
Trang 65

WallPearl SimpleCSS (StandardEdition)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WallPearl SimpleCSS (StandardEdition)

Uploaded by

Copyright:

Available Formats

Simple CSS

2008 WallPearlsBlog. All Rights Reserved.

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.2. n v CSS ...................................................................................... 13

2.3. V tr t CSS ................................................................................... 14

2.4. S u tin ......................................................................................... 18

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

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

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

7.2. Nhn dng phn t vi id ................................................................. 38

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

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

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

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

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

11.2. Thuc tnh border-color ................................................................. 48

11.3. Thuc tnh border-style .................................................................. 48

Bi 12: Height & 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.2. Thuc tnh clear ............................................................................. 53

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

14.2. Relative position ............................................................................ 56

khuyt, ri li mun ly thm nhiu ti liu khc thm v, thm c CSS3 v, rt li

Bn Simple CSS Standard Edition: Bao gm ni dung ch yu t 16 tut ca

Phn tng trnh ti y l kt thc. Chc chn l t c quyn sch no li

Do y l ln u tin Pearl thc hin mt quyn sch hng dn v mt

Sau cng, Pearl xin chn thnh gi li cm n ti HTML.Net, W3 School,

Mi kin ng gp c th post trc tip trn cc blog ca Pearl hoc qua

Trong lnh vc xy dng, chng ta c trang tr ni tht; trong lnh vc thm

1.2. Ti sao CSS?

Nu bn tng hc qua HTML th cng bit HTML cng h tr mt s

Ngoi ra, CSS cn cho php bn p t nhng kiu trnh by thch hp hn

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

Hnh trang th nht m bn nn c l mt kin thc v HTML, n khng

Hnh trang th hai chnh l mt trnh son tho vn bn bn c th vit

Hnh trang th ba ca bn chnh l mt phin bn mi nht ca trnh duyt

V mt iu na m Pearl mun ngh l cc bn hy dnh mt t thi

By gi nu bn tht s chun b chng ta hy chuyn qua chng tip

Bi 2: Mt S Quy c V Cch Vit 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

+ Trong HTML: <body bgcolor=#00BFF3>

+ Trong CSS: body { background-color:#00BFF3; }