Professional Documents
Culture Documents
CSS Can Ban
CSS Can Ban
Standard Edition
2008
WallPearl
2008
Simple CSS
Standard Edition
By WallPearl
Trang 2
WallPearl
Mc Lc
Ni dung
Trang
Li m u ................................................................................ 6
Bi 1: Gii thiu ........................................................................ 8
1.1. CSS l g? ......................................................................................... 8
1.2. Ti sao CSS? .................................................................................... 8
1.3. Hc CSS cn nhng g? ................................................................... 9
Bi 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
WallPearl
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
Trang 4
WallPearl
Bi 15: Layers............................................................................ 57
Bi 16: Web standard ................................................................ 59
Ph lc ....................................................................................... 60
Trang 5
WallPearl
Li M u
u tin, Pearl xin tha vi tt c cc bn c gi (hay nhng bn no c
quyn sch ny) l Pearl khng phi l mt chuyn gia v CSS m ch l mt
tay ngang trong ngh m thi (c th l Pearl cng ch ln mng hc t cc ti
liu ting Anh ch cng khng phi qua trng lp o to bi bn g c). Cn v
quyn sch ny th phi ni t hi u thng 6 nm ri (ri chuyn th y, nhng
ai quen Pearl u bit Pearl c tnh hay tng trnh vy m (smile)), Pearl vo
blog anh Tn thy nh c dch my bi tut CSS t HTML.net m trong bi m u
li c ghi tn cc cao th CSS trn Opera: ch Hin, ch Lin, Phm Lm, v c
Pearl (cn ai na khng th qun ri, ti nh giu my bi ny ri). ng l ri
chuyn tht, ch nh li i khiu ni ci chuyn Pearl ch l tay ngang thi sao.
Thi th c ngi bo mnh l cao th cng c chu vy, nhng ngt ci c ting
phi c ming ch, cc cao th kia th iu c vit tut, tip hng dn lm blog,
sa skin c. Trong khi , mnh li ch vit g cho cng ng th u c c
(khng phi Pearl li, ti my ngi kia vit ht ri ch, vi li Pearl cng
khng thch vit tut, tip nh h, trng c nh cng thc nu n vy (big green)),
nn Pearl mi nho v xin dch my bi coi nh l mnh ng gp t nh cho cng
ng (c, cng l c d d cc cao th kia vo chia phn thi, c bao nhiu
cao th nh th ny th c thm chc bi na cng 1 tun l xong (roll eyes)
nh mng qu, cho dch 2 bi cui (chui, ngi ta ang mun lm ngay m, bo
dch bi cui chng phi d d Pearl li bing sao, m k) Ti cui thng 6,
nh v qu ngh h, v c ri th trn bit lun, Pearl cng qun mt lun ti
thng 8 mi thy anh ln blog: khng rnh, lu lu v qun, cn thi gian vi gia
nh (ai c blog anh ny cng bit ngi yu v ri) th Pearl dch tt cho
xong ti trung tun thng 8, bt u dch, ngi hc d Anh vn m dch mau
gh, dch hn 10 ngy l ht 16 tut lun nh thng 9, bin tp li ri pht
hnh nh l th, nhng ti thng 9, Pearl ci li my 1 pht, ri lo lng sc,
nhi nht phn mm, sch, nhc vo li cng, tn nhng hai tun, qun tp 2,
my bi tut nh xp x tip Mi ti thng ri, c th l sau Ging Sinh 3
ngy, Pearl li li 16 bi dch ra bin tp li (hem phi ti sing t xut, m ti
sp ht nm vi li y cng l hot ng k nim ngy thnh lp WallPearls
Blog), bin ti, bin lui tn c tun mi xong. c li mi thy, 16 tut ca HTML
dot net cn thiu nhiu ci lm. Th l li ly thm ti liu t W3 School b
Trang 6
WallPearl
Trang 7
WallPearl
Bi 1: Gii Thiu
1.1.
CSS l g?
Ti sao CSS?
Trang 8
WallPearl
Hc CSS cn nhng g?
Trang 9
WallPearl
2.1.
C php CSS:
Trang 10
WallPearl
khi vit CSS ta ghi l .visitors { width:50 } th s nh hng ti c hai thnh phn.
Nn trong trng hp ny, nu bn c dng CSS ch ring phn nh th ch
nn ghi l img .visitors thi.
Mt li vit tn selector na l da trn tn cc thuc tnh c trong
HTML. V d trong HTML ta c on m nh vy: <input name=Search
type=Text value=Key Word>. p dng thuc tnh CSS cho ring tm
kim ny chng ta s dng selector input[name=Search].
Ngoi vic vit tn selector c th, chng ta cng c th dng mt selector
i din nh * { color:red } s tc ng n tt c cc thnh phn c trn trang web
lm cho chng c text mu .
+ Property: Chnh l cc thuc tnh quy nh cch trnh by. V d: backgroundcolor, font-family, color, padding, margin,
Mi thuc tnh CSS phi c gn mt gi tr. Nu c nhiu hn mt thuc
tnh cho mt selector th chng ta phi dng mt du ; (chm phy) phn cch
cc thuc tnh. Tt c cc thuc tnh trong mt selector s c t trong mt cp
ngoc nhn sau selector.
V d: body { background:#FFF; color:#FF0000; font-size:14pt }
d c hn, bn nn vit mi thuc tnh CSS mt dng. Tuy nhin, n
s lm tng dung lng lu tr CSS ca bn.
V d: body {
background:#FFF;
bolor:#FF0000;
font-size:14pt
}
i vi mt trang web c nhiu thnh phn c cng mt s thuc tnh,
chng ta c th thc hin gom gn li nh sau:
h1 { color:#0000FF;
text-transform:uppercase }
Trang 11
WallPearl
h2 {
color:#0000FF;
text-transform:uppercase;
}
h3 {
color:#0000FF;
text-transform:uppercase;
}
h1, h2, h3 {
color:#0000FF;
text-transform:uppercase;
}
+ 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
WallPearl
n v CSS:
M t
Phn trm
Inch (1 inch = 2.54 cm)
Centimeter
Millimeter
em
n v M t
ex
1 ex bng chiu cao ca ch x
in thng ca font hin hnh.
Do , n v ny khng
nhng ph thuc trn kch c
font ch m cn ph thuc
loi font ch v cng 1 c
14px nhng chiu cao ch x
ca font Times v font
Tohama l khc nhau.
pt
Point (1 pt = 1/72 inch)
pc
Pica (1 pc = 12 pt)
px
Pixels (im nh trn mn
hnh my tnh)
n v mu sc
n v
Color-name
RGB (r,g,b)
RGB
(%r,%g,%b)
Hexadecimal
RGB
M t
Tn mu ting Anh. V d: black, white, red, green, blue,
cyan, magenta,
Mu RGB vi 3 gi tr R, G, B c tr t 0 255 kt hp vi
nhau to ra v s mu.
Mu RGB vi 3 gi tr R, G, B c tr t 0 100% kt hp.
M mu RGB dng h thp lc. V d: #FFFFFF: trng,
#000000: en, #FF00FF: ti.
Trang 13
WallPearl
V tr t CSS:
Trang 14
WallPearl
Trang 15
WallPearl
Ch cn thay i ni
dung 1 file CSS, tt c
cc trang web s c
cp nht ngay lp tc
Web Pages
Trang 16
WallPearl
<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
WallPearl
S u tin:
2.4.
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
WallPearl
tnh CSS c mc u tin cao hn. Nh v d trn chng ta s thy CSS cui cng
m phn t p nhn c l:
p{
background-color:#FF00FF;
width:100%;
height:200px;
text-align:center;
border:1px solid #FF0000;
color:#000
}
Vy c cch no thay i u tin cho mt thuc tnh no ? Tht ra th
trong CSS c sn mt thuc tnh gip chng ta thc hin iu ny, chnh l
thuc tnh !important. Ch cn bn t thuc tnh ny sau mt thuc tnh no
theo c php selector { property:value !important } th trnh duyt s hiu y l
mt thuc tnh c u tin. By gi, chng ta cng xt li v d trn nhng c t
thm mt s thuc tnh !important vo xem kt qu nh th no nh.
p{
width:500px;
text-align:left !important;
color:#333 !important
}
p{
background-color:#FF00FF;
width:100%;
height:150px !important;
text-align:right;
}
<p style=text-align:center; height:200px; border:1px solid #FF0000; color:#000 }
Trang 19
WallPearl
Trang 20
WallPearl
Bi 3: Background
Trang 21
WallPearl
Trang 22
WallPearl
Trang 23
WallPearl
V d:
Gi tr
Background-position:5cm 2cm
Background-position:20% 30%
Background-position:bottom left
ngha
nh c nh v 5cm t tri qua v
2cm t trn xung.
nh c nh v 20% t tri qua v
30% t trn xung.
nh c nh v gc tri pha di
WallPearl
Trang 25
WallPearl
Bi 4: Font Ch
Trang 26
WallPearl
M trang web trong trnh duyt v kim tra kt qu. Chng ta thy phn tiu s
c u tin hin th bng font Arial, nu trn my khng c font ny th font
Verdana s c u tin v k s l cc font thuc h serif.
Ch : i vi cc font c khong trng trong tn nh Times New Roman cn
c t trong du ngoc kp.
4.2.
Trang 27
WallPearl
Trang 28
WallPearl
Trang 29
WallPearl
Bi 5: Text
5.2.
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
WallPearl
p{
text-indent:30px
}
5.3.
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.
Trang 31
WallPearl
Thuc tnh text-decoration gip bn thm cc hiu ng gch chn (underline), gch
xin (line-through), gch u (overline), v mt hiu ng c bit l vn bn nhp
nhy (blink).
V d sau chng ta s nh dng gch chn cho thnh phn h1, gch u thnh
phn h2
h1 {
text-decoration:underline
}
h2 {
text-decoration:overline
}
5.6.
Trang 32
WallPearl
Trang 33
WallPearl
Trang 34
WallPearl
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
WallPearl
Bi 7 : Class & ID
Trang 36
WallPearl
Trang 37
WallPearl
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 :
<p>Danh Sch Cc Tnh, Thnh Ph Ca Vit Nam</p>
<ul>
<li id=hanoi>H Ni</li>
<li id=hcmc>TP. H Ch Minh</li>
<li id=danang> Nng</li>
<li class=tinh>Tha Thin Hu</li>
<li class=tinh>Khnh Ha</li>
<li class=tinh>Qung Ninh</li>
<li class=tinh>Tin Giang</li>
</ul>
V on CSS cn dng s l :
#hanoi { color:# 790000 }
#hcmc { color:#FF0000 }
#danang { color:#FF00FF }
.tinh { color:#0000FF }
Lu : Khng nn t tn id vi k t u l ch s, n s khng lm vic cho
Firefox.
Trang 38
WallPearl
Trang 39
WallPearl
Trang 40
WallPearl
Tr li v d v danh sch tnh, thnh trong phn class bi trc chng ta s gii
quyt vn bng cch nhm cc phn t vi <div> nh sau:
<p>Danh Sch Cc Tnh, Thnh Ph Vit Nam:</p>
<ul>
<div id=tp>
<li>H Ni</li>
<li>TP. H Ch Minh</li>
<li> Nng</li>
</div>
<div id=tinh>
<li>Tha Thin Hu</li>
<li>Khnh Ha</li>
<li>Qung Ninh</li>
<li>Tin Giang</li>
</div>
</ul>
V on CSS cho mc ch ny s l:
#tp {
color:#FF0000
}
#tinh {
color:0000FF
}
Trang 41
WallPearl
Trang 42
WallPearl
Bi 9: Box Model
Trong CSS, box model (m hnh hp) m t cch m CSS nh dng khi khng
gian bao quanh mt thnh phn. N bao gm padding (vng m), border (vin) v
margin (canh l) v cc ty chn. Hnh bn di m t cu trc minh ha m hnh
hp cho mt thnh phn web.
M hnh hp trn ch l
mt m hnh l thuyt l
tng. Bn di y chng
ta s xt m hnh hp ca
mt i tng web c th:
Left
Margin
Border
Padding
Content
Right
V d: Chng ta c mt
on HTML sau:
Top
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
WallPearl
Trang 44
WallPearl
Trang 45
WallPearl
Trang 46
WallPearl
Trang 47
WallPearl
Bi 11: Border
Border l mt thnh phn quan trng trong mt trang web. N thng c dng
trong trang tr, ng khung cho mt i tng cn nhn mnh, phn cch cc i
tng gip trang web trng d nhn hn, Trong bi hc ny, chng ta s cng
tm hiu v cch dng CSS nh border cho cc i tng web.
11.1. Thuc tnh border-width:
Border-width l mt thuc tnh CSS quy nh rng cho vin ca mt i tng
web. Thuc tnh ny c cc gi tr: thin (mnh), medium (va), thick (dy), hay l
mt gi tr o c th nh pixels. Xem hnh minh ha bn di.
11.2. Thuc tnh border-color:
Border-color l thuc tnh CSS quy nh mu vin cho mt i tng web. Thuc
tnh ny nhn tt c n v mu CSS h tr.
11.3. Thuc tnh border-style:
Border-style l thuc tnh CSS quy nh kiu vin th hin ca mt i tng web.
CSS cung cp tt c 8 kiu vin tng ng vi 8 gi tr: dotted, dashed, solid,
double, groove, ridge, inset v outset. Ngoi ra, hai gi tr none hay hidden dng
n ng vin. hiu r hn, chng ta hy xem hnh minh ha di y (tt c
vin c mu vng).
Trang 48
WallPearl
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
WallPearl
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
WallPearl
Trang 51
WallPearl
Trang 52
WallPearl
#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
WallPearl
Bi 14: Position
Kt hp vi thuc tnh float hc, thuc tnh position mang li nhiu kh nng
to mt cch trnh by tin tin v chnh xc cho trang web.
Nguyn l hot ng ca position:
Hy tng tng ca s trnh duyt ca bn ging nh mt h ta v vi
position bn c th t mt i tng web bt c v tr no trn h ta ny.
Trang 54
WallPearl
Trang 55
WallPearl
Trang 56
WallPearl
Bi 15: Layers
CSS hot ng trn c 3 chiu: cao, rng, su. Hai chiu u tin, chng ta c
nhn thy trong cc bi hc trc. Trong bi hc ny, chng ta s c hc v cch
t cc thnh phn web cc lp khc nhau vi thuc tnh z-index. Ni n gin
hn th l cch bn t mt thnh phn ny ln trn mt thnh phn khc.
Vi mc ch ny, bn s gn cho mi phn t mt con s. Theo , phn t c s
cao hn s nm trn, phn t c s thp hn s nm di.
V d sau chng ta s t 5 bc nh logo 5 lp.
#logo1 {
position:absolute;
top:70px;
left:50px;
z-index:1
}
#logo2 {
position:absolute;
top:140px;
left:100px;
z-index:2
}
#logo3 {
position:absolute;
top:210px;
left:150px;
z-index:3
}
Trang 57
WallPearl
#logo4 {
position:absolute;
top:280px;
left:200px;
z-index:4
}
#logo5 {
position:absolute;
top:350px;
left:250px;
z-index:5
}
Trang 58
WallPearl
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
WallPearl
Thuc tnh
background
background-color
background-image
background-repeat
backgroundattachment
background-position
font
M t
Gi tr
Background
Thuc tnh rt gn cho tt c background-color
cc thuc tnh nn.
background-image
background-repeat
background-attachment
background-position
Thit lp mu nn cho i <color>
tng.
transparent
Thit lp nh nn cho i url
tng.
none
Thit lp ch lp nh nn. repeat
repeat-x
repeat-y
no-repeat
Thit lp nh nn cun/c scroll
nh.
fixed
Thit lp v tr th hin nh top left
nn.
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xy
Font
Thuc tnh ngn cho tt c font-style
cc thit lp v font.
font-variant
Trang 60
font-style
font-variant
font-weight
font-size
font-family
color
text-indent
text-align
letter-spacing
text-decoration
WallPearl
font-weight
font-size
font-family
Thit lp ch in nghing, normal
xin hay bnh thng.
italic
oblique
Thit lp font bnh thng normal
hay small-caps
small-caps
Thit lp in m, thng.
normal
bold
bolder
lighter
100 900
Thit lp kch c font.
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
<length>
%
Thit lp loi font hin th family-name
trang web/ i tng web.
generic-family
Text
Thit lp mu ch.
<color>
Thit lp khong tht u <length>
dng.
%
Thit lp ch canh vn left
bn.
right
center
justify
Thit lp khong cch gia normal
cc k t.
<length>
Thm hiu ng c bit cho none
vn bn.
underline
Trang 61
text-transform
:link
:hover
:visited
:active
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
WallPearl
overline
line-through
blink
none
upper
lower
capitalize
Pseudo-classes
Lin kt cha thm.
Mouse over 1 thnh phn.
Lin kt thm.
Kch hot 1 thnh phn
Margin
Thuc tnh ngn cho cc thit margin-top
lp margin.
margin-right
margin-bottom
margin-left
Thit lp canh l trn cho mt auto
thnh phn.
<length>
%
Thit lp canh l phi cho auto
mt thnh phn.
<length>
%
Thit lp canh l di cho auto
mt thnh phn.
<length>
%
Thit lp canh l tri cho mt auto
thnh phn.
<length>
%
Padding
Thuc tnh ngn cho cc thit padding-top
lp padding.
padding -right
padding -bottom
padding -left
Thit lp m trn cho mt <length>
thnh phn.
%
Thit lp m phi cho mt <length>
thnh phn.
%
Trang 62
padding-bottom
padding-left
border
border-width
border-color
border-style
border-top-width
border-top-color
border-top-style
border-right-width
border-right-color
border-right-style
border-bottom-width
border-bottom-color
border-bottom-style
border-left-width
border-left-color
WallPearl
Thit lp m di cho mt
thnh phn.
Thit lp m tri cho mt
thnh phn.
Border
Thuc tnh ngn cho tt c
cc thit lp border cho mt
thnh phn.
Thit lp rng ng vin.
<length>
%
<length>
%
border-width
border-color
border-style
thin
medium
thick
<length>
Thit lp mu cho ng <color>
vin.
Thit lp kiu ng vin.
none
hidden
solid
dotted
dashed
double
groove
ridge
inset
outset
Thit lp rng vin pha <border-width>
trn.
Thit lp mu vin pha trn. <border-color>
Thit lp kiu vin pha trn. <border-style>
Thit lp rng vin phi.
<border-width>
Thit lp mu vin phi.
<border-color>
Thit lp kiu vin phi.
<border-style>
Thit lp rng vin bn <border-width>
di.
Thit lp mu vin bn di. <border-color>
Thit lp kiu vin bn di. <border-style>
Thit lp rng vin tri.
<border-width>
Thit lp mu vin tri.
<border-color>
Trang 63
border-left-style
width
max-width
min-width
height
max-height
min-height
float
clear
position
top
right
bottom
WallPearl
left
z-index
WallPearl
Trang 65