- 1. Trnh by: Nguyn Ph Trng
2. NI DUNG Gii thiu CSSCc loi CSSCch dng CSS Cc CSS c bn Cc CSS
nng cao 28/Oct/20092 B mn Mng my tnh & Truyn thng 3. CSS L G?
CSS vit tt t Cascading Style Sheets Cc kiu (Styles) nh ngha cch hin
th cc phn tHTML Cc kiu c b sung vo HTML 4.0 gii quyt vn v hin th Cc
bng kiu ngoi (External Style Sheets) c thlu nhiu vic Cc bng kiu
ngoi c lu vo cc tp tin .CSS 28/Oct/20093B mn Mng my tnh & Truyn
thng 4. DEMO CSS Cng mt ni dung d liu c th hin th theo nhiu kiukhc
nhau Th d: Mt CSS n gin 28/Oct/20094 B mn Mng my tnh & Truyn
thng 5. TI SAO CSS? HTML khng cha cc th nh dng ti liu. HTML nh ngha
ni dung ca ti liu nh: This is a heading
This is a paragraph.
Khi th , v thuc tnh color c thm ti c t HTML 3.2 N sinh ra ra mt
vn cho ngi pht trin web. Vic pht trin cc website ln cha thng tin
fonts v color c thm ti mi trang web ring tn nhiu thi gian v chi ph
Gii quyt vn ny, W3C to ra CSS. Trong HTML 4.0, tt c nh dng c g khi
ti liu HTML, vc lu vo mt tp tin CSS ring. Tt c trnh duyt ngy nay u
h tr CSS. 28/Oct/20095 B mn Mng my tnh & Truyn thng 6. CSS LU
NHIU TH CSS nh ngha cch cc phn t HTML c hin th. Cc kiu thng c lu vo
tp tin .css. Cc bng kiu ngoi cho php thay i din mo vcanh l c tt c
Web site ch bng hiu chnh mt tp tinn! 28/Oct/20096B mn Mng my tnh
& Truyn thng 7. C PHP CSS C php CSS gm 3 phn: b chn, thuc tnh v
gi tr selector {property:value} y: B chn (selector): thng l cc thnh
phn/th HTML Thuc tnh (property): l thuc tnh mun thay i, mi thuc tnh
c th mang 1 gi tr. Thuc tnh v gi tr c ngn cch bi du : v c bao quanh
du ngoc nhn {}. 28/Oct/2009 7 B mn Mng my tnh & Truyn thng 8. C
PHP CSS Th d: body {color:black} p {font-family:"sans serif"} p
{text-align:center;color:red} Ch : Nu gi tr c nhiu t th t chng
trong du nhy i (). Nu mun xc nh nhiu hn mt thuc tnh, phi ngn cch mi
thuc tnh vi du chm phy (;) 28/Oct/2009 8 B mn Mng my tnh &
Truyn thng 9. C PHP CSS to cc nh ngha kiu d c hn, c th m t mtthuc
tnh trn mt dng p { color:red; text-align:center; } 28/Oct/2009 9 B
mn Mng my tnh & Truyn thng 10. NHM CC B CHN C th nhm cc b chn.
Ngn cch mi b chn vi du phy (,). Th d:h1,h2,h3,h4,h5,h6{color:green}
28/Oct/2009 10 B mn Mng my tnh & Truyn thng 11. LP CHN Vi lp
chn (class selector) c th nh ngha cc kiukhc nhau cho cng loi phn t
HTML. Th d: nu chng ta mun c hai kiu on ti liu: mtcanh l phi v mt
canh gia, chng ta c kiu sau: p.right {text-align:right} p.center
{text-align:center} Dng thuc tnh class trong ti liu HTML:
This paragraph will be right-aligned.
This paragraph will be center- aligned.
28/Oct/200911B mn Mng my tnh & Truyn thng 12. LP CHN Ch : p
dng nhiu hn mt class trn phn tc cho, c php nh sau:
This is a paragraph.
on trn s c nh kiu bi class "center" ANDclass "bold". Cng c th b
tn th trong b chn nh ngha kius c dng bi tt c thnh phn HTML c lp c
th. Trong th d sau, tt c thnh phn HTML viclass="center" s c canh
gia: .center {text-align:center} 28/Oct/2009 12B mn Mng my tnh
& Truyn thng 13. LP CHN Trong m di y c hai phn t h1 v p
cclass="center". iu ny c ngha l c hai phn t stun theo qui cch trong
b chn".center: This heading will be center- aligned
This paragraph will also be center- aligned.
Khng bt u tn lp vi mt s! iu ny ch c htr trong Internet Explorer.
28/Oct/2009 13B mn Mng my tnh & Truyn thng 14. THM CC KIU TI CC
PHN T VI CC THUC TNH XC NH Cng c th p dng cc kiu ti cc phn t HTML
vicc thuc tnh xc nh Qui cch kiu di y s ph hp cho tt c phn tnhp
(input) m c thuc tnh kiu vi mt gi tr text: input[type="text"]
{background-color:blue} 28/Oct/200914B mn Mng my tnh & Truyn
thng 15. B CHN ID Cng c th nh ngha cc kiu cho cc phn t HTML vi b
chn id. B chn id c nh ngha nh mt du thng (#). Qui cch kiu di y s ph
hp vi phn t c thuc tnh id vi gi tr "green": #green {color:green}
Qui cch kiu di y s ph hp vi phn t p c id vi gi tr "para1": p#para1
{ text-align:center; color:red } Khng bt u tn ID vi 1 s! N s khng
lm vic trong Mozilla/Firefox.28/Oct/200915B mn Mng my tnh &
Truyn thng 16. CH THCH TRONG CSS Cc ch thch c dng gii thch m ca bn
v cth gip bn khi hiu chnh m ngun sau . Mt ch thch s c b qua bi trnh
duyt Ch thch trong CSS bt u vi "/*", v kt thc vi"*/",nh th d:
/*This is a comment*/ p { text-align:center; /*This is another
comment*/ color:black; font-family:arial } 28/Oct/200916 B mn Mng
my tnh & Truyn thng 17. CCH DNG CSS Khi mt trnh duyt c mt style
sheet, n s nh dngti liu da theo style sheet . C ba cch chn mt style
sheet: External style sheet (bng kiu ngoi) Internal style sheet
(bng kiu trong) Inline style (bng kiu trn dng) 28/Oct/2009 17 B mn
Mng my tnh & Truyn thng 18. BNG KIU NGOI Bng kiu ngoi l l tng
khi kiu c p dng tinhiu trang. Vi bng kiu ngoi, bn c th thay i din
mo caton b website bng cch thay i mt tp tin. Mi trang phi lin kt ti
bng kiu dng th . Th nm bn trong phn head: 28/Oct/200918 B mn Mng my
tnh & Truyn thng 19. BNG KIU NGOI Bng kiu ngoi c th c vit trong
bt c trnh sontho no. Tp tin ny s khng cha bt c th HTML. Bng kiunn c
lu trong tp tin c phn m rng .css. Th d, mt tp tin bng kiu nn c hin
th nh sau: hr {color:sienna} p {margin-left:20px} body
{background-image:url("images/back40.gif")} ng khong trng gia gi tr
thuc tnh v n vtnh! "margin-left:20 px" (thay v "margin-left:20px")
s lm vic trong IE, nhng khng lm vic trong Firefox hay Opera.
28/Oct/200919B mn Mng my tnh & Truyn thng 20. BNG KIU TRONG Bng
kiu trong nn c dng khi mt ti liu n ckiu duy nht. Bn nh ngha cc kiu
bn trong trong phn head catrang HTML, bng cch dng th 28/Oct/200920B
mn Mng my tnh & Truyn thng 21. KIU TRN DNG Mt kiu trn dng mt
nhiu li im ca bng kiubng cch xen ln ni dung vi biu din. Dng phng
php ny mt cch hn ch! dng cc kiu trn dng, bn dng thuc tnh styletrong
th tng ng. Thuc tnh style c th cha bt c thuc tnh CSS. Th d hin th
cch i mu v canh tri ca mt on
This is a paragraph.
28/Oct/2009 21B mn Mng my tnh & Truyn thng 22. NHIU BNG KIU
Nu c vi thuc tnh c thit lp cho cng mt bchn trong cc bng kiu khc
nhau, cc gi tr ny sc k tha t nhiu hn bng kiu xc nh. Th d, 1bng kiu
ngoi c cc thuc tnh ny cho bchn h3 h3 { color:red; text-align:left;
font-size:8pt } 28/Oct/2009 22 B mn Mng my tnh & Truyn thng 23.
NHIU BNG KIU V 1bng kiu trong c cc thuc tnh ny cho b chn h3: h3 {
text-align:right; font-size:20pt } Nu trang ny vi bng kiu trong cng
lin kt ti bng kiu ngoi,cc thuc tnh cho h3 s l: color:red;
text-align:right; font-size:20pt Mu s c k tha t bng kiu ngoi v canh
l vn bn v kchthc font b thay th bi bng kiu trong. 28/Oct/200923B mn
Mng my tnh & Truyn thng 24. NHIU KIU S C XP THNH MT Cc kiu c th
c xc nh Bn trong mt phn t Bn trong phn head ca mt trang HTML Trong
tp tin CSS ngoi Ch : Nhiu bng kiu c th c tham chiu bn trong mt ti
liu HTML. 28/Oct/200924B mn Mng my tnh & Truyn thng 25. TH T
PHN TNG Kiu g s c dng khi c nhiu hn mt kiu xc nhcho mt phn t HTML?
Thng th tt c cc kiu s c xp thnh mtbng kiu mi o theo nhng qui tc m 4
c u tin cao nht Browser default External style sheet Internal style
sheet (trong phn head ) Inline style (bn trong phn t HTML)
28/Oct/2009 25B mn Mng my tnh & Truyn thng 26. TH T PHN TNG V
th, kiu trn dng(bn trong phn t HTML) c utin cao nht, c ngha n s :
Kiu c nh ngha bn trong th , hay Trong bng kiu bn ngoi, hay Trong
trnh duyt (gi tr mc nh). Ch : Nu lin kt ti bng kiu ngoi c thay th
sau khi bng kiu bn trong th HTML , th bng kiu ngoi s bng kiu trong!
28/Oct/2009 26 B mn Mng my tnh & Truyn thng 27. CSS MU NN Cc
thuc tnh nn CSS c dng nh ngha cchiu ng nn ca mt phn t. Cc thuc tnh
CSS c dng cho hiu ng nn: background-color background-image
background-repeat background-attachment background-position
28/Oct/2009 27 B mn Mng my tnh & Truyn thng 28. CSS MU NN Thuc
tnh background-color xc nh mu nn camt phn t. Mu nn ca trang c nh
ngha trong b chn body: Th d body {background-color:#b0c4de} Mu nn c
th c xc nh bi: name tn mt mu, nh "red cho mu RGB gi tr RGB, nh
"rgb(255,0,0)" Hex gi tr thp lc phn, nh "#ff0000"28/Oct/2009 28B mn
Mng my tnh & Truyn thng 29. MU NN Trong th d di y phn t h1, p,
v div c mu nnkhc nhau: Th d: h1 {background-color:#6495ed}p
{background-color:#e0ffff}div {background-color:#b0c4de}
28/Oct/2009 29 B mn Mng my tnh & Truyn thng 30. NH NN Thuc tnh
background-image xc nh nh dng lmnn cho mt phn t. Mc nh, nh c lp m n
ph ton b phn t. nh nn i vi mt trang c th c thit lp nh sau: Th d:
body {background-image:url('paper.gif')} Below is an example of a
bad combination of text and background image. The text is almost
not readable: Ch : cn c s kt hp gia vn bn v mu nn vn bn c th c c Th
d:28/Oct/200930 B mn Mng my tnh & Truyn thng 31. NH NN-LP NGANG
HAY NG Mc nh, thuc tnh background-image lp nh c chiungang v chiu
ng. Mt vi nh nn c lp ch ngang hay ng, haychng s trng rt l nh th ny:
Body { background-image:url('gradient2.png'); } Nu nh c lp ch theo
chiu ngang (repeat-x), nns trng tt hn: body {
background-image:url('gradient2.png'); background-repeat:repeat-x;
}28/Oct/2009 31 B mn Mng my tnh & Truyn thng 32. NH NN-THIT LP
V TR V KHNG LP Khi s dng mt nh nn, dng mt nh m khng bindng vn bn.
Hin th hnh nh ch mt ln c xc nh bi thuctnh background-repeat Th d
body { background-image:url('img_tree.png');
background-repeat:no-repeat; } Trong th d trn, nh nn c hin th trong
cng v tr vi vn bn. Chng ta phi chuyn v tr ca nh m n khng bin dng vn
bn qu nhiu28/Oct/2009 32B mn Mng my tnh & Truyn thng 33. NH
NN-THIT LP V TR V KHNG LP V tr ca nh c xc nh bi thuc tnh
background-position: Th d body {
background-image:url('img_tree.png'); background-repeat:no-repeat;
background-position:top right; } 28/Oct/200933 B mn Mng my tnh
& Truyn thng 34. THUC TNH BACKGROUND - SHORTHAND Nh thy trong
cc th d trn, c nhiu thuc tnh xem xt lin quan ti nn. n gin m, c th
xc nh tt c thuc tnh trongmt thuc tnh n. Thuc tnh ny l shorthand
(nhanh). Thuc tnh nhanh cho nn n gin l "background": Th d: body
{background:#ffffff url('img_tree.png') no-repeat top right}
28/Oct/200934 B mn Mng my tnh & Truyn thng 35. THUC TNH
BACKGROUND -SHORTHAND Khi dng thuc tnh nhanh th t ca cc gi tr
thuctnh l: background-color background-image background-repeat
background-attachment background-position Khng c vn nu mt trong cc
gi tr thuc tnh bthiu, min l chng c hin din trong th t
ny.28/Oct/2009 35B mn Mng my tnh & Truyn thng 36. TT C THUC TNH
NN CSS Thuc tnhM t Gi trCSS background Sets all the background
background-color 1properties in one background-imagedeclaration
background-repeatbackground-attachmentbackground-positioninherit
background-Sets whether ascroll1 attachment background image is
fixedfixed or scrolls with the inheritrest of the page
background-color Sets the background color-rgb 1color of an element
color-hexcolor-nametransparentinherit28/Oct/200936 B mn Mng my tnh
& Truyn thng 37. TT C THUC TNH NN CSSThuc tnh M t Gi tr CSS
background-imageSets the background image url(URL) 1 for an
elementnone inherit background-position Sets the starting position
of top left 1 a background imagetop center top right center left
center center center right bottom left bottom center bottom right
x% y% xpos ypos inherit background-repeat Sets if/how a background
repeat1 image will be repeatedrepeat-x repeat-y no-repeat inherit
28/Oct/2009 37 B mn Mng my tnh & Truyn thng 38. CSS TEXT Cc
thuc tnh CSS text nh ngha din mo ca vnbn Th d gm vi thuc tnh nh dng
vn bn: Tiu dng: Text-align Text-transform Color 28/Oct/2009 38B mn
Mng my tnh & Truyn thng 39. MU VN BN Thuc tnh mu c dng thit lp
mu ca vnbn. Mu c th c xc nh bi: name tn mu, nh mu l "red" RGB gi tr
RGB, nh "rgb(255,0,0)" Hex gi tr thp lc phn, nh "#ff0000" Mu mc nh
cho mt trang c nh ngha trong bchn body. 28/Oct/2009 39 B mn Mng my
tnh & Truyn thng 40. MU VN BN Th d: body {color:blue} h1
{color:#00ff00} h2 {color:rgb(255,0,0)} W3C tng thch CSS: nu bn nh
ngha thuc tnhmu, bn cng phi nh ngha thuc tnh background-color.
28/Oct/2009 40 B mn Mng my tnh & Truyn thng 41. CANH L VN BN
Thuc tnh text-align c dng thit lp canh lngang cho vn bn. Vn bn c th
c canh l: gia, tri, phi hay c haitri v phi. Khi text-align c t ti
"justify", mi dng b ko dn m mi dng c dy bng nhau v l tri, phi lthng
(nh tp ch hay bo). Th d h1 {text-align:center} p.date
{text-align:right} p.main {text-align:justify}28/Oct/2009 41 B mn
Mng my tnh & Truyn thng 42. TRANG TR VN BN Thuc tnh
text-decoration c dng thit lp hayxa thit lp t vn bn. Hu ht, thuc
tnh text-decoration c dng bgch di t nhng lin kt cho mc ch thit k: a
{text-decoration:none} N cng c th c dng trang tr vn bn h1
{text-decoration:overline} h2 {text-decoration:line-through} h3
{text-decoration:underline} h4 {text-decoration:blink} Vn bn khng
phi l lin kt khng yu cu gch div s thng lm cho ngi dng nhm ln.
28/Oct/200942 B mn Mng my tnh & Truyn thng 43. I HOA THNG CHO
VN BN Thuc tnh text-transform c dng xc nh chhoa v thng trong vn bn.
N c th c dng chuyn mi th thnh hoa haythng, hay k t u tin hoa. Th d:
p.uppercase {text-transform:uppercase} p.lowercase
{text-transform:lowercase} p.capitalize {text-transform:capitalize}
28/Oct/2009 43 B mn Mng my tnh & Truyn thng 44. CANH L Thuc tnh
text-indentation c dng xc nh l cadng u tin trong vn bn. Th d: p
{text-indent:50px} 28/Oct/2009 44 B mn Mng my tnh & Truyn thng
45. TT C THUC TNH VN BN Thuc tnh M t Gi tr CSS colorSets the color
of a textcolor 1 directionSets the text direction ltr 2rtl
line-heightSets the distance between lines normal1numberlength%
letter-spacing Increase or decrease the spacenormal1between
characterslength text-align Aligns the text in an element
left1rightcenterjustify28/Oct/200945B mn Mng my tnh & Truyn
thng 46. TT C THUC TNH VN BN Thuc tnhM t Gi trCSS text-decoration
Adds decoration to textnone1underlineoverlineline-throughblink
text-indent Indents the first line of text in an length1 element%
text-shadownonecolorlength text-transformControls the letters in an
element none1capitalizeuppercaselowercase28/Oct/2009 46 B mn Mng my
tnh & Truyn thng 47. TT C THUC TNH VN BN Thuc tnh M t Gi tr
CSSunicode-bidi normal2 embed bidi-overridevertical-align Sets the
vertical alignment of an element baseline1 sub super top text-top
middle bottom text-bottom length %white-spaceSets how white space
inside an element is normal1 handled pre nowrapword-spacing
Increase or decrease the space between normal 1 words
length28/Oct/2009 47 B mn Mng my tnh & Truyn thng 48. CSS FONT
Cc thuc tnh CSS font nh ngha: font family,boldness, size, v loi ca
vn bn the style of a text. S khc nhau ca font Sans-serif v Serif
Trn mn hnh my tnh, cc font Sans-serif c xem ld c hn font Serif
28/Oct/200948B mn Mng my tnh & Truyn thng 49. CC H PHNG CSS
Trong CSS, c hai loi tn h phng: H chung (generic family) nhm cc h
font trng tng t nhau (nh "Serif" hay "Monospace") H phng (font
family) mt h phng xc nh (nh "Times New Roman" hay "Arial)H chung H
phngM tSerifTimes New Roman Phng Serif c cc dng nh ti im Georgia kt
thc trn 1 vi k tSans-serif Arial "Sans" ngha l khng- cc phng
Verdana ny khng c cc dng ti im cui mi k tMonospaceCourier New Tt c
k t c cng rng Lucida Console 28/Oct/2009 49 B mn Mng my tnh &
Truyn thng 50. H PHNG H phng ca vn bn c thit lp vi thuc tnh
font-family. Thuc tnh font-family c th qun l nhiu tn phngnh h thng
"fallback. Nu browser khng h tr phng th nht, n th phngk. Bt u vi
phng bn mun, v kt thc vi phng hchung, browsers chn mt phng tng t
trong hchung nu khng c phng no khc sn c. 28/Oct/200950B mn Mng my
tnh & Truyn thng 51. H PHNG Ch : Nu tn ca h phng nhiu hn mt t,
n phit trong du . Th d: font-family: "Times New Roman". Nhiu hn mt
h phng c xc nh trong danh schc ngn cch bi du phy (,) Th d:
p{font-family:"Times New Roman",Georgia,Serif} 28/Oct/2009 51 B mn
Mng my tnh & Truyn thng 52. KIU PHNG Thuc tnh font-style thng c
dng xc nh vnbn in nghing. Thuc tnh c 3 gi tr: normal Vn bn hin th
bnh thng italic Vn bn c hin th in nghing oblique Vn bn c hin th in
xin (xin rt ging nghing, nhng c h tr t hn) Th d: p.normal
{font-style:normal} p.italic {font-style:italic} p.oblique
{font-style:oblique}28/Oct/200952B mn Mng my tnh & Truyn thng
53. KCH C PHNG Thuc tnh font-size thit lp kch c vn bn. Qun l kch
thc vn bn l quan trng trong thit kweb. Tuy nhin, bn khng nn dng cc
hiu chnh lmcc on trng ging nh cc heading, hay cc headingging nh cc
on. Lun dng cc th HTML ph hp, nh - choheading v
on. Gi tr font-size c th l tuyn i hay tng i.28/Oct/200953 B mn
Mng my tnh & Truyn thng 54. KCH C PHNG Kch thc tuyt i: Thit lp
vn bn ti mt kch thc xc nh Khng cho php ngi dng thay i kch thc vn
bntrong tt c trnh duyt (hn ch cho l do kh nng truy cp) Kch thc tuyt
i c ch khi kch thc vt l ca d liuxut c bit Kch thc tng i: Thit lp
kch thc tng i so vi cc thnh phn ph cn Cho php ngi dng thay i kch
thc vn bn trong trnhduyt Nu khng xc nh kch thc phng, kch thc mc
nhcho vn bn thng thng nh on l 16px (16px=1em).28/Oct/2009 54 B mn
Mng my tnh & Truyn thng 55. T KCH C VN BN DNG PIXELS Thit lp
kch c vn bn vi pixels, cho bn iu khinhon ton kch c vn bn: Th d h1
{font-size:40px} h2 {font-size:30px} p {font-size:14px} Th d trn
cho php Firefox, Chrome, v Safari nh likch thc vn bn, nhng Internet
Explorer th khng Vn bn c th c nh li kch thc trong tt ctrnh duyt dng
cng c phng to/thu nh (tuy nhin,iu ny nh v ton b trang, nhng ch vn
bn).28/Oct/2009 55B mn Mng my tnh & Truyn thng 56. T KCH C VN
BN DNG EM trch vn nh li kch c vi IE, nhiu ngi phttrin dng em thay
cho pixel. n v kch thc em c ngh bi W3C. 1em bng kch thc phng hin
hnh. Kch thc vnbn mc nh l 16px. V th, mc nh 1 em = 16px. Kch thc c
th c tnh t pixels ti em dng cngthc: pixels/16=em 28/Oct/2009 56B mn
Mng my tnh & Truyn thng 57. T KCH C VN BN DNG EM Th d: h1
{font-size:2.5em} /* 40px/16=2.5em */ h2 {font-size:1.875em} /*
30px/16=1.875em */ p {font-size:0.875em} /* 14px/16=0.875em */
Trong th d trn, kch thc vn bn tnh bng em bng vi th d trc tnh bng
pixel. Tuy nhin, vi kch thc em, kch thc vn bn c th hiu chnh trong
tt c browser. Tuy nhin, vn vn cn vi IE. Khi nh li kch thcvn bn, vn
bn tr nn ln hn khi c lm ln vnh hn khi c lm nh hn. 28/Oct/2009 57B
mn Mng my tnh & Truyn thng 58. S DNG KT HP % V EM Gii php lm
vic trong tt c browser l thit lp kchthc phng mc nh bng % cho phn t
body. Th d body {font-size:100%} h1 {font-size:2.5em} h2
{font-size:1.875em} p {font-size:0.875em} M by gi lm vic tt! Hin th
cng kch thc vn bn trong tt c browser, v cho php tt c browser phng
to/thu nh hay nh li kch thc vn bn!28/Oct/2009 58B mn Mng my tnh
& Truyn thng 59. TT C THUC TNH PHNGThuc tnh M t Gi tr CSS font
Sets all the font font-style1properties in one
font-variantdeclaration
font-weightfont-size/line-heightfont-familycaptioniconmenumessage-boxsmall-captionstatus-barinherit
28/Oct/200959B mn Mng my tnh & Truyn thng 60. TT C THUC TNH
PHNGThuc tnh M tGi trCSS font-familySpecifies the font
family-name1family for textgeneric-family inherit
font-sizeSpecifies the font xx-small 1size of text x-small small
medium large x-large xx-large smaller larger length %
inherit28/Oct/2009 60 B mn Mng my tnh & Truyn thng 61. TT C
THUC TNH PHNGThuc tnhM tGi trCSS font-styleSpecifies the font
normal 1 style for text italicobliqueinherit font-variantSpecifies
whether normal1 or not a text should small-caps be displayed in
ainherit small-caps font 28/Oct/200961 B mn Mng my tnh & Truyn
thng 62. font-style Specifies the font style for text normal1
italic oblique inheritfont-variant Specifies whether or not a text
normal1 should be displayed in a small- small-caps caps font
inherit 28/Oct/2009 62 B mn Mng my tnh & Truyn thng 63. M HNH
HP CSS Tt c phn t HTML c th c xem nh cc hp(boxes). Trong CSS, thut
ng m hnh hp (boxmodel) c dng khi n v thit k v sp xp (layout). M hnh
hp CSS l 1 hp m bao bc cc phn tHTML, v cha: l, ng vin, padding, v
ni dungtht. M hnh hp cho php thay th ng vin bao quanhcc phn t v cc
phn t trng lin quan vi cc phnt khc. Hnh nh bn hin th m hnh hp:
28/Oct/2009 63 B mn Mng my tnh & Truyn thng 64. M HNH HP CSS
28/Oct/200964 B mn Mng my tnh & Truyn thng 65. M HNH HP CSS Gii
thch cc phn khc nhau: L (Margin) chim 1 vng quanh ng vin. L khng c
mu nn v n hon ton trong sut ng vin (Border) ng vin nm gia padding v
ni dung. ng vin b nh hng bi mu nn ca hp Padding chim mt vng quanh
ni dung. Padding b nh hng bi mu nn ca hp Ni dung (Content) ni dung
ca hp, ni vn bn v hnh nh xut hin thit lp rng v chiu cao ca mt phn t
chnhxc trong tt c trnh duyt, bn cn bit cch m hnhhp lm vic.
28/Oct/200965B mn Mng my tnh & Truyn thng 66. RNG & CHIU
CAO PHN T Quan trng: khi bn xc nh thuc tnh rng vchiu cao ca mt phn
t vi CSS, bn ch thit lp rng v chiu cao ca vng ni dung. bit kch thcy
ca phn t, bn phi thm vo padding, ngvin v l. Ton b rng ca phn t
trong th d di y l300px: width:250px; padding:10px; border:5px solid
gray; margin:10px; 28/Oct/200966 B mn Mng my tnh & Truyn thng
67. VN TNG THCH TRNH DUYT Nu bn kim tra th d trc trong IE, bn thy
rng rng tng cng khng bng 250px. IE cha padding v ng vin trong rng,
khi thuctnh rng c thit lp, tr khi DOCTYPE ckhai bo. gii quyt vn ny,
ch cn thm DOCTYPE tim: 28/Oct/2009 67 B mn Mng my tnh & Truyn
thng 68. VN TNG THCH TRNH DUYT
28/Oct/200968B mn Mng my tnh & Truyn thng 69. NG VIN CSS Cc
thuc tnh ng vin CSS nh ngha cc ngvin xung quanh phn t. Cc thuc tnh
ng vin CSS cho php bn c tkiu v mu sc ca ng vin ca phn t. Cc loi ng
vin Thuc tnh loi xc nh loi ng vin g c hin th. Khng c thuc tnh ng
vin no khc s c nh hng ngoi tr kiu ng vin c t Gi tr loi ng
vin28/Oct/2009 69 B mn Mng my tnh & Truyn thng 70. GI TR LOI NG
VIN none: Defines no border dotted: Defines a dotted border dashed:
Defines a dashed border solid: Defines a solid border double:
Defines two borders. The width of the two borders are the same as
the border-width value groove: Defines a 3D grooved border. The
effect depends on the border-color value ridge: Defines a 3D ridged
border. The effect depends on the border-color value inset: Defines
a 3D inset border. The effect depends on the border-color value
outset: Defines a 3D outset border. The effect
depends28/Oct/200970B mn Mng my tnh & Truyn thng 71. RNG NG VIN
Thuc tnh border-width c dng t rngng vin. rng c t theo n v pixels,
hay s dng mttrong ba gi tr c nh ngha: thin, medium, hay thick. Ch :
Thuc tnh "border-width" khng lm vic nu nc dng mt mnh. Dng thuc tnh
"border-style" t ng vin trc. 28/Oct/200971 B mn Mng my tnh &
Truyn thng 72. RNG NG VIN Th d
p.one{border-style:solid;border-width:5px;}p.two{border-style:solid;border-width:medium;}
28/Oct/2009 72 B mn Mng my tnh & Truyn thng 73. MU NG VIN Thuc
tnh border-color c dng thit lp mu cang vin. Mu c th c t bi: name-
xc nh tn mu, nh "red" RGB xc nh gi tr RGB, nh "rgb(255,0,0)" Hex xc
nh gi tr thp lc phn, nh "#ff0000" Bn cng c th thit lp mu ng vin
trong sut"transparent". Ch : thuc tnh "border-color" khng lm vic nu
nc dng mt mnh. Dng thuc tnh "border-style" thit lp ng vin trc.
28/Oct/2009 73 B mn Mng my tnh & Truyn thng 74. MU NG VIN
p.one{border-style:solid;border-color:red;}p.two{border-style:solid;border-color:#98bf21;}28/Oct/200974
B mn Mng my tnh & Truyn thng 75. MU CHO TNG PHA Trong CSS c th
xc nh cc ng vin khc nhaucho cc pha khc nhau: Th d: p {
border-top-style:dotted; border-right-style:solid;
border-bottom-style:dotted; border-left-style:solid; } Trong th d
trn cng c th thit lp mt thuc tnhn: border-style:dotted solid;
28/Oct/2009 75 B mn Mng my tnh & Truyn thng 76. GI TR CA THUC
TNH BORDER-STYLE Thuc tnh border-style c th c t 1 n 4 gi tr.
border-style:dotted solid double dashed; top border l dotted right
border l solid bottom border l double left border l dashed
border-style:dotted solid double; top border l dotted right v left
borders l solid bottom border l double 28/Oct/2009 76B mn Mng my
tnh & Truyn thng 77. GI TR CA THUC TNH BORDER-STYLE Thuc tnh
border-style c th c t 1 n 4 gi tr. border-style:dotted solid; top v
bottom borders l dotted right v left borders l solid
border-style:dotted; Bn borders l dotted Thuc tnh border-style c
dng trong th d trn.Tuy nhin, n cng lm vic vi border-width v
border-color.28/Oct/2009 77 B mn Mng my tnh & Truyn thng 78.
THUC TNH BORDER - SHORTHAND Nh bn thy trong th d trn, c nhiu thuc
tnh xemxt khi lm vic vi cc ng vin. lm ngn m, n cng c th xc nh tt c
thuctnh ng vin trong mt thuc tnh. iu ny c gil thuc tnh shorthand.
Thuc tnh shorthand cho cc thuc tnh ng vin l"border": Th d:
border:5px solid red; 28/Oct/2009 78B mn Mng my tnh & Truyn
thng 79. THUC TNH BORDER - SHORTHAND Khi s dng thuc tnh border, th
t ca cc gi tr l: border-width border-style border-color N khng l vn
nu mt trong cc gi tr trn b mt(mc d, border-style c yu cu), min l
phn cnli trong th t xc nh. 28/Oct/200979B mn Mng my tnh & Truyn
thng 80. TT C THUC TNH CSS BORDER Thuc tnhM t Gi tr CSSborderSets
all the border properties in one border-width 1 declaration
border-style border-color border-bottom Sets all the bottom border
properties border-bottom-width1 in one
declarationborder-bottom-style border-bottom-color
border-bottom-color Sets the color of the bottom border
border-color 2border-bottom-style Sets the style of the bottom
border border-style 2border-bottom-width Sets the width of the
bottom border border-width 1border-colorSets the color of the four
borderscolor_name 1 hex_number rgb_number transparent inherit
28/Oct/200980B mn Mng my tnh & Truyn thng 81. TT C THUC TNH CSS
BORDER Thuc tnh M t Gi trCSS border-leftSets all the left border
properties in oneborder-left-width 1declaration
border-left-styleborder-left-color border-left-colorSets the color
of the left border border-color2border-left-styleSets the style of
the left border border-style2border-left-widthSets the width of the
left border border-width1border-right Sets all the right border
properties in one border-right-width1declaration
border-right-styleborder-right-color border-right-color Sets the
color of the right borderborder-color2border-right-style Sets the
style of the right borderborder-style2border-right-width Sets the
width of the right borderborder-width1 28/Oct/2009 81 B mn Mng my
tnh & Truyn thng 82. TT C THUC TNH CSS BORDER Thuc tnh M t Gi
tr CSSborder-styleSets the style of the four bordersnone 1 hidden
dotted dashed solid double groove ridge inset outset inherit
border-topSets all the top border properties in one
border-top-width 1 declaration border-top-style border-top-color
border-top-colorSets the color of the top borderborder-color
2border-top-styleSets the style of the top borderborder-style
2border-top-widthSets the width of the top borderborder-width
1border-widthSets the width of the four bordersthin 1 medium thick
length inherit 28/Oct/200982B mn Mng my tnh & Truyn thng 83.
CSS OUTLINE Outline l ng c v xung quanh cc phn t,ngoi ra ng vin, lm
thnh phn ni bt. Cc thuc tnh outline xc nh kiu, mu, v rngca outline.
Th d: V ng quanh phn t outline Thit lp kiu outline Thit lp mu ca
outline Thit lp rng ca outline 28/Oct/2009 83 B mn Mng my tnh &
Truyn thng 84. TT C THUC TNH OUTLINE Thuc tnhM t Gi tr CSS outline
Sets all the outline propertiesoutline-color 2 in one declaration
outline-styleoutline-widthinherit outline-color Sets the color of
an outline color_name2hex_numberrgb_numberinvertinherit 28/Oct/2009
84 B mn Mng my tnh & Truyn thng 85. TT C THUC TNH OUTLINEThuc
tnhM t Gi tr CSS outline-style Sets the style of an outline
none2dotteddashedsoliddoublegrooveridgeinsetoutsetinherit
outline-width Sets the width of an outline
thin2mediumthicklengthinherit 28/Oct/2009 85 B mn Mng my tnh &
Truyn thng 86. CSS MARGIN Cc CSS margin (l) nh ngha khong trng
xungquanh cc phn t. L xa vng xung quanh mt phn t (bn ngoi ngvin). L
khng c mu nn v hon ton trong sut. L trn, phi, di, v tri c th c thay
i c lps dng cc thuc tnh ring. Thuc tnh shorthand cng c th c dng,
thayi tt c l mt ln28/Oct/2009 86B mn Mng my tnh & Truyn thng
87. CC GI TR C TH Gi tr M tautoThe browser sets the margin.The
result of this is dependant of the browserlengthDefines a fixed
margin (in pixels, pt, em, etc.)% Defines a margin in % of the
containing element C th s dng cc gi tr m chng lp ni dung
28/Oct/200987B mn Mng my tnh & Truyn thng 88. L-CC PHA RING
Trong CSS, c th xc nh cc l khc nhau cho mipha khc nhau: Th d
margin-top:100px; margin-bottom:100px; margin-right:50px;
margin-left:50px; 28/Oct/200988B mn Mng my tnh & Truyn thng 89.
THUC TNH MARGIN-SHORTHAND lm ngn m, c th xc nh tt c thuc tnh ltrong
mt thuc tnh. iu ny c gi l thuc tnhshorthand. Thuc tnh shorthand cho
tt c thuc tnh l l "margin": Th d margin:100px 50px; Thuc tnh
margian c th c mt ti bn gi tr. margin:25px 50px 75px 100px; top
margin l 25px right margin l 50px bottom margin l 75px left margin
l 100px28/Oct/2009 89 B mn Mng my tnh & Truyn thng 90. THUC TNH
MARGIN-SHORTHAND margin:25px 50px 75px; top margin l 25px right v
left margin l 50px bottom margin l 75px margin:25px 50px; top v
bottom margins l 25px right v left margins l 50px margin:25px; Tt c
4 margins l 25px28/Oct/200990 B mn Mng my tnh & Truyn thng 91.
TT C THUC TNH CSS MARGINThuc tnh M t Gi trCSS margin A shorthand
property for setting the margin margin-top 1properties in one
declaration margin-rightmargin-bottommargin-left margin-Sets the
bottom margin of an elementauto 1 bottom length% margin-left Sets
the left margin of an element auto 1length% margin-right Sets the
right margin of an element auto 1length% margin-top Sets the top
margin of an element auto 1length% 28/Oct/2009 91B mn Mng my tnh
& Truyn thng 92. CSS PADDING Cc thuc tnh CSS padding nh ngha
khong trnggia ng vin thnh phn v ni dung thnh phn Padding Padding xa
mt vng xung quanh ni dung (bn trong) thnh phn. Padding b nh hng bi
mu nn ca thnh phn. Top, right, bottom, v left padding c th c thay i
c lp s dng cc thuc tnh ring r. Thuc tnh shorthand padding cng c th
c dng thay i tt c paddings mt ln.28/Oct/2009 92 B mn Mng my tnh
& Truyn thng 93. PADDING-T PHA Trong CSS c th padding t pha khc
nhau Th d: padding-top:25px; padding-bottom:25px;
padding-right:50px; padding-left:50px; 28/Oct/200993 B mn Mng my
tnh & Truyn thng 94. THUC TNH PADDING-SHORTHAND l ngn m, c th
xc nh tt c thuc tnh paddingtrong mt thuc tnh. iu ny c gi l thuc
tnhshorthand. Thuc tnh shorthand cho tt c thuc tnh padding
l"padding. Th d: padding:25px 50px; 28/Oct/200994B mn Mng my tnh
& Truyn thng 95. THUC TNH PADDING-SHORTHAND Thuc tnh padding c
th c t mt ti bn gi tr. padding:25px 50px 75px 100px; top padding l
25px right padding l 50px bottom padding l 75px left padding l
100px padding:25px 50px 75px; top padding l 25px right v left
paddings l 50px bottom padding l 75px 28/Oct/200995 B mn Mng my tnh
& Truyn thng 96. THUC TNH PADDING-SHORTHAND padding:25px 50px;
top v bottom paddings l 25px right v left paddings l 50px
padding:25px; Tt c 4 paddings l 25px Th d: Tt c padding trong mt
khai bo Thit lp padding-left Thit lp padding-right Thit lp
padding-top 28/Oct/200996 B mn Mng my tnh & Truyn thng 97. TT C
THUC TNH PADDINGThuc tnh M tGi tr CSS paddingA shorthand property
for setting all the padding-top 1padding properties in one
declaration padding-right padding-bottom padding-left
padding-bottom Sets the bottom padding of an element length 1 %
padding-left Sets the left padding of an elementlength1 %
padding-rightSets the right padding of an element length1 %
padding-topSets the top padding of an element length1 %
28/Oct/200997 B mn Mng my tnh & Truyn thng 98. CSS LIST Thuc
tnh CSS list cho php t b nh du thnhphn danh sch, thay i gia cc b nh
du khcnhau hay thit lp hnh nh nh b nh du thnh phndanh sch Danh sch:
Trong HTML, c hai loi danh sch Danh sch khng th t Danh sch c th t
Vi CSS, cc danh sch c th c phn kiu xa hn,v hnh nh c th c dng nh b
nh du thnhphn danh sch 28/Oct/200998B mn Mng my tnh & Truyn
thng 99. B NH DU THNH PHN DANH SCH C th xc nh loi danh sch vi thuc
tnh list-style-type Th d: ul.circle {list-style-type:circle}
ul.square {list-style-type:square}ol.upper-roman
{list-style-type:upper-roman} ol.lower-alpha
{list-style-type:lower-alpha} 28/Oct/2009 99 B mn Mng my tnh &
Truyn thng 100. CC GI TR C TH CA DANH SCH KHNG TH TGi tr M t noneNo
marker discDefault. The marker is a filled circle circleThe marker
is a circle squareThe marker is a square 28/Oct/2009100 B mn Mng my
tnh & Truyn thng 101. CC GI TR C TH CA DANH SCH C TH TGi trM t
none No marker circle The marker is a circle disc The marker is a
filled circle. This is default square The marker is a square
armenian The marker is traditional Armenian numbering decimalThe
marker is a number decimal-leading-zero The marker is a number
padded by initial zeros (01, 02,03, etc.) 28/Oct/2009 101 B mn Mng
my tnh & Truyn thng 102. CC GI TR C TH CA DANH SCH C TH TGi tr
M t georgianThe marker is traditional Georgian numbering (an, ban,
gan, etc.) lower-alpha The marker is lower-alpha (a, b, c, d, e,
etc.) lower-greek The marker is lower-greek (alpha, beta, gamma,
etc.) lower-latin The marker is lower-latin (a, b, c, d, e, etc.)
lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.)
upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.)
upper-latin The marker is upper-latin (A, B, C, D, E, etc.)
upper-roman The marker is upper-roman (I, II, III, IV, V, etc.)
28/Oct/2009 102B mn Mng my tnh & Truyn thng 103. NH V DANH SCH
Thuc tnh list-style-position xc nh cn l ca mtdanh sch. "outside" l
gi tr mc nh. "inside l gi tr khc cnl danh sch Th d ul.inside
{list-style-position:inside} ul.outside
{list-style-position:outside} 28/Oct/2009 103B mn Mng my tnh &
Truyn thng 104. S DNG NH NH B NH DU THNHPHN DANH SCH C th dng mt nh
nh b nh du thnh phn danhsch marker: Th d ul {
list-style-image:url('arrow.gif'); } 28/Oct/2009104 B mn Mng my tnh
& Truyn thng 105. S DNG NH NH B NH DU THNHPHN DANH SCH Th d trn
s khng hin th kt qu chnh xc trong ttc trnh duyt IE v Opera s hin th
nh cao hn mt cht so viFirefox, Chrome, v Safari. Th d trn s tt cho
hu ht cc trng hp. Tuynhin, c mt cch nh v hnh nh chnh xc hn c cng kt
qu trong tt c trnh duyt, bn phidng mt nh nn trn mi thnh phn danh
sch, nhth ny: 28/Oct/2009 105 B mn Mng my tnh & Truyn thng 106.
S DNG NH NH B NH DU THNH PHN DANH SCH Th d ul {
list-style-type:none; padding:0px; margin:0px; } li {
background-image:url(arrow.gif); background-repeat:no-repeat;
background-position:0px 5px; padding-left:14px; } 28/Oct/2009106 B
mn Mng my tnh & Truyn thng 107. S DNG NH NH B NH DU THNH PHN
DANH SCH Gii thch th d i vi ul: t list-style-type ti none b b nh du
thnh phn danh sch C hai padding v margin phi c t ti 0px tng thch
trnh duyt i vi li: t URL ca nh, v hin th n ch mt ln (khng lp) Dng
thuc tnh background-position t hnh ni bn mun (left 0px and down
5px) Dng thuc tnh padding-left nh v vn bn trong danh sch
28/Oct/2009107B mn Mng my tnh & Truyn thng 108. THUC TNH
SHORTHAND C th xc nh tt c cc thuc tnh danh sch trongmt thuc tnh n
dng thuc tnh shorthand. Thuc tnh shorthand cho danh sch l
"list-style": Th d: list-style:square inside; Khi dng thuc tnh
shorthand, th t ca cc gi tr l: list-style-type list-style-position
list-style-image Khng vn nu mt trong cc gi tr b mt, min lphn cn li
trong th t xc nh. 28/Oct/2009 108B mn Mng my tnh & Truyn thng
109. TT C THUC TNHThuc tnh M t Gi trCSS list-styleSets all the
propertieslist-style-type 1 for a list in onelist-style-position
declarationlist-style-imageinherit list-style-image Specifies an
image as URL 1 the list-item marker noneinherit list-style-position
Specifies where to inside1 place the list-itemoutside marker
inherit 28/Oct/2009 109B mn Mng my tnh & Truyn thng 110. TT C
THUC TNHThuc tnhM t Gi trCSS list-style-type Specifies the type
ofnone 1 list-item marker
disccirclesquaredecimaldecimal-leading-zeroarmeniangeorgianlower-alphaupper-alphalower-greeklower-latinupper-latinlower-romanupper-romaninherit
28/Oct/2009 110 B mn Mng my tnh & Truyn thng 111. CSS TABLE
Thuc tnh css table cho php thit lp b tr bng Th d: Thit lp b tr bng
Hin th trng ca bng Ph lp ng vin ca bng Thit lp khng gian gia cc ng
vin Thit lp ch thch cho bng 28/Oct/2009 111B mn Mng my tnh &
Truyn thng 112. TT C THUC TNH CHO BNG Thuc tnh M tGi tr CSS
border-collapseSpecifies whether or not tablecollapse 2borders
should be collapsed separateinherit border-spacing Specifies the
distance between the length length 2borders of adjacent cells
inherit caption-side Specifies the placement of a table top
2caption bottominherit empty-cellsSpecifies whether or not to
display show 2borders and background on empty hidecells in a
tableinherit table-layout Sets the layout algorithm to be usedauto
2for a table fixedinherit 28/Oct/2009 112 B mn Mng my tnh &
Truyn thng
