Post on 04-Apr-2018
7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
1/65
2008
Simple CSSStandard Edition
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
2/65
Trang 2
Simple CSS Standard Edition WallPearl
2008
Simple CSSStandard Edition
By WallPearl
2008 WallPearlsBlog. All Rights Reserved.
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
3/65
Trang 3
Simple CSS Standard Edition WallPearl
Mc Lc
Ni dung Trang
Li mu ................................................................................ 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 squy c v cch vit CSS ................................... 10
2.1. C php CSS .................................................................................... 10
2.2. n v CSS ...................................................................................... 13
2.3. Vtr t CSS................................................................................... 14
2.4. Su tin......................................................................................... 18
Bi 3: Mu ch v mu nn ...................................................... 213.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
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
4/65
Trang 4
Simple CSS Standard Edition WallPearl
4.3. Thuc tnh font-variant .................................................................... 27
4.4. Thuc tnh font-weight .................................................................... 28
4.5. Thuc tnh font-size ......................................................................... 28Bi 5: Text ................................................................................. 30
5.1. Thuc tnh color ............................................................................... 30
5.2. Thuc tnh text-indent...................................................................... 30
5.3. Thuc tnh text-align........................................................................ 31
5.4. Thuc tnh letter-spacing ................................................................. 31
5.5. Thuc tnh text-decoration ............................................................... 32
5.6. Thuc tnh text-transform................................................................ 32
Bi 6: Pseudo-classes for Links ................................................ 33
Bi 7: Class & id ....................................................................... 36
7.1. Nhm phn t vi class.................................................................... 36
7.2. Nhn dng phn t vi id ................................................................. 38
Bi 8: Span & div ...................................................................... 40
8.1. Nhm phn t vi ............................................................... 40
8.2. Nhm phn t vi .................................................................. 40
Bi 9: Box Model ...................................................................... 43
Bi 10: Margin & padding ........................................................ 45
10.1. Thuc tnh margin.......................................................................... 45
10.2. Thuc tnh padding ........................................................................ 47
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
5/65
Trang 5
Simple CSS Standard Edition WallPearl
Bi 11: Border ........................................................................... 48
11.1. Thuc tnh border-width ................................................................ 48
11.2. Thuc tnh border-color................................................................. 4811.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
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
6/65
Trang 6
Simple CSS Standard Edition WallPearl
Li Mu
u tin, Pearl xin tha vi tt c cc bn c gi (hay nhng bn no cquyn sch ny) l Pearl khng phi l mt chuyn gia v CSS m ch l mttay ngang trong ngh m thi (c thl Pearl cng ch ln mng hc t cc tiliu ting Anh chcng khng phi qua trng lp o to bi bn g c). Cn vquyn sch ny th phi ni t hi u thng 6 nm ri (ri chuyn thy, nhngai quen Pearl u bit Pearl c tnh hay tng trnh vy m (smile)), Pearl vobloganh Tnthy nh c dch my bi tut CSS tHTML.netm trong bi muli c ghi tn cc cao th CSS trn Opera:ch Hin,ch Lin,Phm Lm, v cPearl (cn ai na khng th qun ri, ti nh giu my bi ny ri). ng l richuyn 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 tingphi 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 cngkhng thch vit tut, tip nh h, trng cnh 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 cngng (c, cng l c d dcc cao th kia vo chia phn thi, c bao nhiucao 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, bodch bi cui chng phi d dPearl li bing sao, m k) Ti cui thng 6,nh v qu ngh h, vc ri th trn bit lun, Pearl cng qun mt lun tithng 8 mi thy anh ln blog: khng rnh, lu lu v qun, cn thi gian vi gianh (ai c blog anh ny cng bit ngi yu v ri) th Pearl dch tt choxong ti trung tun thng 8, bt u dch, ngi hc dAnh vn m dch maugh, dch hn 10 ngy l ht 16 tut lun nh thng 9, bin tp li ri phthnh 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 3ngy, Pearl li li 16 bi dch ra bin tp li (hem phi ti sing t xut, m tisp ht nm vi li y cng l hot ng k nim ngy thnh lp WallPearlsBlog), bin ti, bin lui tn c tun mi xong. c li mi thy, 16 tut ca HTMLdot net cn thiu nhiu ci lm. Th l li ly thm ti liu tW3 School b
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://my.opera.com/Tansang/http://my.opera.com/Tansang/http://my.opera.com/Tansang/http://www.html.net/http://www.html.net/http://www.html.net/http://my.opera.com/danquynh/http://my.opera.com/danquynh/http://my.opera.com/danquynh/http://my.opera.com/danquynh/http://my.opera.com/danquynh/http://my.opera.com/danquynh/http://my.opera.com/danquynh/http://my.opera.com/hoatrongvuon/http://my.opera.com/hoatrongvuon/http://my.opera.com/hoatrongvuon/http://my.opera.com/hoatrongvuon/http://my.opera.com/hoatrongvuon/http://my.opera.com/phamlam/http://my.opera.com/phamlam/http://my.opera.com/phamlam/http://my.opera.com/phamlam/http://my.opera.com/phamlam/http://www.w3schools.com/http://www.w3schools.com/http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://www.w3schools.com/http://my.opera.com/phamlam/http://my.opera.com/hoatrongvuon/http://my.opera.com/danquynh/http://www.html.net/http://my.opera.com/Tansang/7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
7/65
Trang 7
Simple CSS Standard Edition WallPearl
khuyt, ri li mun ly thm nhiu ti liu khc thm v, thm c CSS3 v, rt litrng 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 caHTML.Net, ch b sung 1 s ch vc php CSS v u tin ca CSS.
Bn Simple CSS Advanced Edition: Bao gm ni dung ca HTML.Net trnvi 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 lic phn tng trnh nh quyn sch ny (ch t th khng c quyn sch in no livit vny). iu ny chng qua l Pearl dvn, khng vit un o, o lc,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 khnng kin thc, kin vn hn hp nn chc chn quynsch ny vn cn rt nhiu thiu st, nn Pearl rt mong nhn c kin nh gica mi ngi.
Sau cng, Pearl xin chn thnh gi li cm n ti HTML.Net, W3 School,CSS3.Infov nhiu trang web khc cung cp ti liu Pearl hon thnh quynsch ny. Cm n tt c cc bn blogger ng h, cv Pearl trong thi gian vaqua.
Mi kin ng gp c th post trc tip trn cc blog ca Pearl hoc quaa ch emailwallpearl@gmail.comhocwallpearl@inbox.com
Thng 1, nm 2008
.:WallPearl:.
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://www.css3.info/http://www.css3.info/mailto:wallpearl@gmail.commailto:wallpearl@gmail.commailto:wallpearl@gmail.commailto:wallpearl@inbox.commailto:wallpearl@inbox.commailto:wallpearl@inbox.comhttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snsmailto:wallpearl@inbox.commailto:wallpearl@gmail.comhttp://www.css3.info/7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
8/65
Trang 8
Simple CSS Standard Edition WallPearl
Bi 1: Gii Thiu
1.1. CSS l g?Trong lnh vc xy dng, chng ta c trang tr ni tht; trong lnh vc thm
m - lm p, chng ta c k thut make-up; cn trong lnh vc thit k web chngta c CSS. y ch l mt nh ngha giu hnh nh ca Pearl thi (nhng cngthc t nh (smile). Cn CSS (Cascading Style Sheets m Pearl tm dch l tmutheo Style Sheets) l mt ngn ngquy nh cch trnh by cho cc ti liu vitbng HTML, XHTML, XML, SVG, hay UML,
1.2. Ti sao CSS?Nu bn tng hc qua HTML th cng bit HTML cng h trmt s
thuc tnh nh dng c bn cho text, picture, table, nhng n khng tht sphong ph v chnh xc nh nhau trn mi h thng. CSS cung cp cho bn hngtrm thuc tnh trnh by dnh cho cc i tng vi s sng to cao trong kt hpcc thuc tnh gip mang li hiu qu. Ngoi ra, hin ti CSS c h trbi ttc cc trnh duyt, nn bn hon ton c th t tin trang web ca mnh c th hinth hu nh nh nhau d trn mt h thng s dng Windows, Linux hay trnmt 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 gianthit k cng nh dung lng lu tr trn a cng. Trong khi CSS a ra
phng thc tmu ngoi gip p dng mt khun mu chun t mt file CSS ngoi. N tht s c hiu qung b khi bn to mt website c hng trm tranghay c khi bn mun thay i mt thuc tnh trnh by no . Hy th tngtng 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 vtn nhiu thi gian. Nhng vi vic s dng CSS vic l hon ton n gincng nh l bn c mt tr ma thut no .
Ngoi ra, CSS cn cho php bn p t nhng kiu trnh by thch hp hncho cc phng tin khc nhau nh mn hnh my tnh, my in, in thoi,
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
9/65
Trang 9
Simple CSS Standard Edition WallPearl
CSS c cp nht lin tc mang li cc trnh by phc tp v tinh vi hn.
1.3. Hc CSS cn nhng g?Tht s khng c mt iu kin g c quy nh khi hc CSS. Nhng mt kha cnh no th mt s chun b cho mt cuc hnh trnh d l d nht
vn khng tha v t nht n s gip bn lm tt hn.
Hnh trang th nht m bn nn c l mt kin thc v HTML, n khngtht s cn thit nu bn chdng CSS trnh by cho mt trang HTML c sn(nh lm skin cho blog chng hn), nhng bn vn cn bit ngha mt s thHTML, n s c ch khi bn vit CSS. Tuy nhin, nu bn mun t thit k, trnhby 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 vitm CSS. y, Pearl khuyn bn nn s dng mt trnh son tho n gin nhNotepad, 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 tchng 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 hnhchng nhng gip bn vn dng nhun nhuyn cc bi hc m cn c tc dngexplain ngc li nhng l thuyt m bn cha hiu.
By ginu bn tht s chun b chng ta hy chuyn qua chng tiptheo tht sbc chn vo th gii CSS.
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
10/65
Trang 10
Simple CSS Standard Edition WallPearl
Bi 2: Mt SQuy 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 dngcode sau:
+ Trong HTML:
+ Trong CSS: body { background-color:#00BFF3; }
Nhn qua v d trn t nhiu chng ta cng thy c mi tng ng giacc thuc tnh trong HTML v CSS cho nn nu bn hc qua HTML th cng srt d dng tip thu CSS. l mt cht li th ca cu chuyn hnh trnh mPearl ni bi trc. Nhng khng sao c, by gi hy nhn vo v d cachng 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 lcc 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 thvit tn selector theo phn cp nh ch cc nh trong #entry, chng ta vit
selector l #entry img, nh vy th cc thuc tnh chnh s ch p dng ring chocc nh nm trong #entry.
Khi vit tn cho class, i khi s c nhiu thnh phn c cng class , v dnh th img v tha cng c class tn vistors nhng y li l hai i tng khcnhau, 1 ci l nh ca ngi thm, 1 ci l lin kt ti trang ngi thm. Nn nu
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
11/65
Trang 11
Simple CSS Standard Edition WallPearl
khi vit CSS ta ghi l .visitors { width:50 } th snh hng ti c hai thnh phn.Nn trong trng hp ny, nu bn c dng CSS ch ring phn nh th chnn ghi l img .visitors thi.
Mt li vit tn selector na l da trn tn cc thuc tnh c trongHTML. V d trong HTML ta c on m nh vy: . p dng thuc tnh CSS cho ring tmkim ny chng ta s dng selector input[name=Search].
Ngoi vic vit tn selector c th, chng ta cng c th dng mt selectori din nh * { color:red } stc ng n tt c cc thnh phn c trn trang weblm 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 thuctnh cho mt selector th chng ta phi dng mt du ; (chm phy) phn cchcc thuc tnh. Tt c cc thuc tnh trong mt selector sc t trong mt cpngoc nhn sau selector.
V d:body { background:#FFF; color:#FF0000; font-size:14pt }
dc hn, bn nn vit mi thuc tnh CSS mt dng. Tuy nhin, nslm 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 }
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
12/65
Trang 12
Simple CSS Standard Edition 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 ngockp. V d: font-family:Times New Roman
i vi cc gi trl n vo,khng nn t mt khong cch gia so
vi n v ca n. V d: width:100 px. N s lm CSS ca bn b v hiu trnMozilla/Firefox hay Netscape.
Ch thch trong CSS:
Cng nh nhiu ngn ngweb khc. Trong CSS, chng ta cng c th vit chthch 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
}
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
13/65
Trang 13
Simple CSS Standard Edition WallPearl
2.2. n v CSS:Trong CSS2 h trcc loi n vl n vo chiu di v n vo gc,
thi gian, cng m thanh v mu sc. Tuy nhin, s dng ph bin nht vn l
n vo chiu di v mu sc. Sau y l bng lit k cc n v chiu di v musc dng trong CSS.
n v chiu di
n v M t n v M t% Phn trm ex 1 ex bng chiu cao ca ch x
in thng ca font hin hnh.Do , n v ny khngnhng ph thuc trn kch cfont ch m cn ph thucloi font ch v cng 1 c14px nhng chiu cao ch xca font Times v fontTohama l khc nhau.
in Inch (1 inch = 2.54 cm)
cm Centimeter
mm Millimeter
em 1 em tng ng kch thcfont hin hnh, nu font hinhnh c kch c14px th 1 em= 14 px. y l mt n v rt
hu ch trong vic hin thtrang web.
pt Point (1 pt = 1/72 inch)
pc Pica (1 pc = 12 pt)
px Pixels (im nh trn mnhnh my tnh)
n v mu sc
n v M tColor-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 0255 kt hp vi
nhau to ra v s mu.RGB(%r,%g,%b)
Mu RGB vi 3 gi tr R, G, B c tr t 0100% kt hp.
HexadecimalRGB
M mu RGB dng h thp lc. V d: #FFFFFF: trng,#000000: en, #FF00FF: ti.
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
14/65
Trang 14
Simple CSS Standard Edition WallPearl
2.3. Vtr 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 liuHTML bng cch nhng vo tng th HTML mun p dng. V d nhin trongtrng 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 thkhng nn dng cch ny.
v d sau chng ta s tin hnh nh nn mu trng cho trang v mu ch xanh lcho on vn bn nh sau:
V d
^_^ Welcome To WallPearls Blog ^_^
+ Cch 2: Bn trong (th style)
Tht ra nu nhn kchng ta cng nhn ra y ch l mt phng cch thayth 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).
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
15/65
Trang 15
Simple CSS Standard Edition WallPearl
Cng v d lm trang web c mu nn trng, on vn bn ch xanh l, chng ta sth hin nh sau:
V d
body { background-color:#FFF }
p { color:#00FF00 }
^_^ Welcome To WallPearls Blog ^_^
Lu : Thstyle nn t trong th head.
i vi nhng trnh duyt c, khng th nhn ra th . Theo mc nh, thkhi mt trnh duyt khng nhn ra mt th th n s hin ra phn ni dung chatrong th. Nh v d trn, nu trnh duyt khng h trth 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 khicode CSS.Nh v d trn s vit li l:
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
16/65
Trang 16
Simple CSS Standard Edition WallPearl
+ Cch 3: Bn ngoi (lin kt vi mt file CSS bn ngoi)
Tng tnh cch 2 nhng thay v t tt c cc m CSS trong th stylechng ta sa chng vo trong mt file CSS (c phn mrng .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 haybo tr mt website ln s dng cng mt kiu mu. Cc v dtrong sch ny cngc trnh by theo kiu ny.
No by gichng ta hy mNotepad ln v th thc hin theo v d sau:
u tin chng ta s to ra mt file vidu.html c ni dung nh sau:
External
CSS File
Web Pages
Ch cn thay i nidung 1 file CSS, tt ccc trang web sc
cp nht ngay lp tc
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
17/65
Trang 17
Simple CSS Standard Edition WallPearl
V d
^_^ Welcome To WallPearls Blog ^_^
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, mfile vidu.html trong trnh duyt cabn v xem thnh qu.
Lu :
lu 1 file vi 1 ui khc .txt trong Notepad chng ta chn Save as typel All Files. C th chn Encoding l UTF-8, nu bn ch thch CSS bng tingVit.
Trong CSS chng ta cn c th s dng thuc tnh @import nhp mt fileCSS vo CSS hin hnh. C php: @import url(link)
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
18/65
Trang 18
Simple CSS Standard Edition WallPearl
2.4. Su tin:Trc khi thc thi CSS cho mt trang web. Trnh duyt sc ton b CSS
m trang web c thc p dng, bao gm: CSS mc nh ca trnh duyt, file
CSS bn ngoi lin kt vo trang web, CSS nhng trong th v cc CSSni tuyn. Sau , trnh duyt s tng hp ton b CSS ny vo mt CSS o, vnu c cc thuc tnh CSS ging nhau th thuc tnh CSS no nm sau sc utin s dng (ci ny cng ging nh chng trnh Ai L Triu Ph trn truynhnh vy, ch cu tr li sau cng mi c chp nhn (smile)). Theo nguyn tc trnh duyt ca bn su tin cho cc CSS ni tuyn > CSS bn trong > CSSbn ngoi > CSS mc nh ca trnh duyt.
V d:
Trong mt trang web c lin kt ti file style.css c ni dung nh sau:
p {
color:#333;
text-align:left;
width:500px
}
trong th gia th cng c mt on CSS lin quan:
p {
background-color:#FF00FF;
text-align:right;
width:100%;
height:150px
}
trong phn ni dung trang web cng c s dng CSS ni tuyn:
7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
19/65
Trang 19
Simple CSS Standard Edition WallPearl
tnh CSS c mc u tin cao hn. Nh v d trn chng ta s thy CSS cui cngm 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 thtrong CSS c sn mt thuc tnh gip chng ta thc hin iu ny, chnh lthuc 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 lmt thuc tnh c u tin. By gi, chng ta cng xt li v dtrn nhng c tthm mt s thuc tnh !important vo xem kt qunh 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;
}
7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
20/65
Trang 20
Simple CSS Standard Edition WallPearl
Phn CSS stc 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.
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
21/65
Trang 21
Simple CSS Standard Edition WallPearl
Bi 3: Background
Trong bi hc ny chng ta sc hc vcch nh mu nn/nh nn cho mttrang 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 nhngc thm gi trtransparent to nn trong sut.
V dsau y s ch cho chng ta bit cch s dng thuc tnh background-colornh 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 tnhbackground-image.
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
22/65
Trang 22
Simple CSS Standard Edition WallPearl
By gichng ta s cng lm mt v d minh ha xem thuc tnh background-image s hot ngra 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 lmnh 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 chnh ng dn ca nh trong cp ngocn sau url. Do nh t trong cng th mc vi file style3.css nn chng ta ch cnghi abc.jpg. Nhng nu chng ta to thm mt th mc img trong th mc thchng ta s phi ghi l background-image:url(img/abc.jpg). i khi nu khngchc lm bn c thdng 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 cntha. Thuc tnh background-repeat cung cp cho chng ta cc iu khin gipkim sot trnh trng lp li ca nh nn. Thuc tnh ny c 4 gi tr:
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
23/65
Trang 23
Simple CSS Standard Edition WallPearl
+ repeat-x: Ch lp li nh theo phng ngang.
+ repeat-y: Ch lp li nh theophng dc.
+ repeat: Lp li nh theo c2 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 thxem 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 dtrc, hy ththay 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: Cnh nh nn so vi ni dung trang web. Khi p dng gi tr ny, nhnn sng yn khi bn ang cun trang web.
3.5. nh vnh 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 tht 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. Ckh nhiu kiu gi tr cho thuc tnh position. Nh n v chnh xc nhcentimeters, pixels, inches, hay cc n vqui i nh %, hoc cc vtr t bitnh top, bottom, left, right.
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
24/65
Trang 24
Simple CSS Standard Edition WallPearl
V d:
Gi tr nghaBackground-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 vgc tri pha di
Thuc tnh background rt gn
Khi s dng qu nhiu thuc tnh CSS sgy kh khn cho ngi c, cng tcchnh sa cng nh tn nhiu dung lng cng cho nn CSS a ra mt cu trcrt gn cho cc thuc tnh cng nhm.
V d: Chng ta c th nhm li on CSS sau
background-color:transparent;
background-image: url(logo.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
thnh mt dng ngn gn:
background:transparent url(logo.png) no-repeat fixed right bottom;
T v d trn chng ta c th khi qut cu trc rt gn cho nhm background:
background: | | |
|
Theo mc nh th cc thuc tnh khng c cp s nhn cc gi tr mc nh.
V d: Chng ta s b qua hai thuc tnh background-attachment v background-position dng m trn i:
background:transparent url(logo.png) no-repeat;
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
25/65
Trang 25
Simple CSS Standard Edition WallPearl
Hai thuc tnh khng c chnh sn thun c thit lp ti gi tr mc nhm chng ta iu bit l scroll v top left.
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
26/65
Trang 26
Simple CSS Standard Edition WallPearl
Bi 4: Font Ch
bi hc trc, chng ta c tm hiu v cch nh dng mu ch bng CSS.Trong bi ny, chng ta s tip tc tm hiu thm v cc thuc tnh CSS lin quanti 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 sc dng hin th mt thnh phn trang web. Theo , th font u tinc lit k trong danh sch sc 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 utincho n khi c mt font ph hp.
C hai loi tn font c dng ch nh trong font-family: family-names vgeneric 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 fontmong mun trang web sc hin tht cc vtr u tin. Tuy nhin, c thnhng font ny s khng thng dng lm nn bn cng cn chnh thm mt sfont thng dng d phn nh Arial, Tohama hay Times New Roman v bn cngc nght vo danh sch font ca mnh mt generic families (thng th nsc u tin thp nht). Thc hin theo cch ny th sm bo trang web cabn 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 lTimes New Roman, Tohama, sans-serif, v font chdng hin thcc 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 }
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
27/65
Trang 27
Simple CSS Standard Edition WallPearl
Mtrang web trong trnh duyt v kim tra kt qu. Chng ta thy phn tiu sc u tin hin th bng font Arial, nu trn my khng c font ny th fontVerdana sc 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 cnc 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 dbn di chng ta s th thc hin p dng kiu in nghing cho thnh phn h1 vkiu 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 nhhn in hoachun thay th nhng chin thng. Nu nh font chdng hin th khngc sn font small-caps th trnh duyt s hin chin hoa thay th.
Trong v d sau chng ta s s dng kiu small-caps cho phn h1
h1 {
font-variant:small-caps
}
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
28/65
Trang 28
Simple CSS Standard Edition WallPearl
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 trm t
in m bng cc con s t 100900.
Thin 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 trn vo h trbi 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 dtrang web ca bn phc v ch yu l nhng ngi gi, th lc km hay nhngngi dng s dng cc mn hnh my tnh km cht lng th bn c th cn nhcs dng cc n vqui i nh em hay %.Nh vy sm bo font ch trn trangweb ca bn lun kch thc ph hp.
v d sau trang web s c kch cfont l 20px, h1 l 3em = 3 x 20 = 60px, h2 l2em = 40px.
body {
font-size:20px
}
h1 {
font-size:3em}
h2 {
font-size:2em
}
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
29/65
Trang 29
Simple CSS Standard Edition WallPearl
Thuc tnh font rt gn
Tng tnh cc thuc tnh background, chng ta cng c th rt gn cc thuctnh font li thnh mt thuc tnh n nh v d sau:
h1 {
font-style: italic;
font-variant:small-caps;
font-weight: bold;
font-size: 35px;
font-family: arial,verdana,sans-serif;
}
Thnh
h1 {
font: italic bold 35px arial,verdana,sans-serif;}
Cu trc rt gn cho cc thuc tnh nhm font:
Font : | < font-variant> | | |< font-family>
i qua bi hc ny, bn nm bt c cch nh font ch cho mt thnh phntrang web cng nh cch s dng cc kiu font in nghing, in m, font small-capsv cch qui nh kch thc font. Trong bi hc k chng ta sc tm hiu thmv cc thuc tnh CSS vnh dng vn bn.
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
30/65
Trang 30
Simple CSS Standard Edition WallPearl
Bi 5: Text
nh dng v thm vo cc kiu nh dng c bit cho phn ni dung mt trangweb l mt vn quan trng cho bt c nh thit kweb no. Nh ni, bihc ny chng ta sc tm hiu v cc thuc tnh CSS vnh 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 slm nh
body {
color:#000
}
h1 {
color:#0000FF
}h2 {
color:#00FF00
}
5.2. Thuc tnh text-indent :Thuc tnh text-indent cung cp khnng to ra khong tht u dng cho dngu tin trong on vn bn. Gi tr thuc tnh ny l cc n vo c bn dngtrong CSS.
Trong v d sau chng ta snh dng tht u dng mt khong 30px cho dngvn bn u tin trong mi on vn bn i vi cc thnh phn
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
31/65
Trang 31
Simple CSS Standard Edition WallPearl
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 phntrong trang web.
Cng tng tnh cc la chn canh chnh vn bn trong cc trnh son tho vnbn thng dng nh MS Word, thuc tnh ny c tt c 4 gi tr : left (canh trimc 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 ui vi thnh phn
h1, h2 {
text-align:right
}
p {
text-align:justify
}
5.4. Thuc tnh letter-spacing:Thuc tnh letter-spacing c dng nh khong cch gia cc k t trong mton vn bn.
Mun nh khong cch gia cc k t trong thnh phn h1, h2 l 7px v thnhphn
l 5px chng ta s vit CSS sau:
h1, h2 {
letter-spacing:7px
}
p { letter-spacing:5px }
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
32/65
Trang 32
Simple CSS Standard Edition WallPearl
5.5. Thuc tnh text-decoration:Thuc tnh text-decoration gip bn thm cc hiu ng gch chn (underline), gchxin (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 thnhphn h2
h1 {
text-decoration:underline
}
h2 {
text-decoration:overline
}
5.6. Thuc tnh text-transform:Text-transform l thuc tnh qui nh chin hoa hay in thng ca vn bn mkhng 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 tu tin trong mi t) v none (khng p dng hiu ngmc nh).
Trong v ddi y chng ta snh dng cho thnh phn h1 l in hoa, h2 l inhoa u mi k t.
h1 {
text-transform:uppercase
}
h2 {
text-transform:capitalize
}
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
33/65
Trang 33
Simple CSS Standard Edition WallPearl
Bi 6: Pseudo-classes For Links
Mt thnh phn rt quan trng trong mi website chnh l lin kt.Cng nh mti tng vn bn thng thng, chng ta hon ton c th p dng cc thuc tnhnh dng hc 2 bi trc nh nh font ch, gch chn, mu ch, cho mtlin 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 itng 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 linkt ang c kch hotang 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 khnng trangtr 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 thilin kt: cc lin kt cha thm c mu xanh l; cc lin kt mouse over s c muti; cc lin kt thm sc 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 }
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
34/65
Trang 34
Simple CSS Standard Edition WallPearl
V d 2: To cc hiu ng tng ng vi trnh trng lin kt: cc lin cha thm cmu xanh l, kch cfont 14px; lin kt mouse over c mu ti, kch cfont1.2em, hiu ng nhp nhy; lin kt thm s c mu xanh da tri, khng cng 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 dny cng to cho lin kt hiu ng mu sc ging v d2 nhng sc thm 1 s hiu ng: cc lin kt s c khung vin mu en, kch cfont 14px;lin kt mouse over c nn light cyan; cc lin kt thm c nn light yellow.
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
35/65
Trang 35
Simple CSS Standard Edition 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 nilun l cc v d Pearl trnh by trong bi ny cng nh nhng bi khc tht ratrng khng dnhn, l do Pearl khng c nhiu thi gian chm cht cc vd ca mnh. Ci m Pearl mun ni ch l lm th no cc bn hiu tc dng mtthuc tnh no c th vn dng cho trang web ca chnh mnh.
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
36/65
Trang 36
Simple CSS Standard Edition WallPearl
Bi 7 : Class & ID
Trong cc bi hc trc, chng ta c hc cc thuc tnh CSS v background,color, font, Tuy nhin, bn cng nhn ra l khi p dng mt thuc tnh CSS chomt thnh phn no v dnh h1, h2, p, a, img, th ton b cc thnh phnny trong trang web u nhn thuc tnh ny. Vy c cc no nhm li mt sthnh phn no p dng mt thuc tnh c bit. V dnh bn mun cclin kt trn menu trang web sc in hoa, v c kch cln hn so vi lin kttrong ni dung th phi lm th no? y chnh l vn m chng ta s cng giiquyt trong chng ny.
7.1. Nhm cc phn tvi class :V d chng ta c mt on m HTML sau y :
Danh Sch Cc Tnh, Thnh Ph Ca Vit Nam
H Ni
TP. H Ch Minh
Nng
Tha Thin Hu
Khnh Ha
Qung Ninh
Tin Giang
Yu cu t ra l lm thno tn cc thnh phl mu v tn cc tnh l muxanh da tri. gii quyt vn ny chng ta s dng mt thuc tnh HTML gi
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
37/65
Trang 37
Simple CSS Standard Edition WallPearl
l class to thnh 2 nhm l thnh ph v tnh. Ta s vit li on HTML sauthnh nh th ny:
Danh Sch Cc Tnh, Thnh Ph Ca Vit Nam
H Ni
TP. H Ch Minh
Nng
Tha Thin Hu
Khnh Ha
Qung Ninh
Tin Giang
Vi vic dng class nhm cc i tng nh trn th cng vic ca chng ta strnn n gin hn nhiu:
li .tp {
color:FF0000
}
li .tinh {
color:0000FF
}
Lu :Khng nn t tn class vi k tu l ch s, n s khng lm vic choFirefox.
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
38/65
Trang 38
Simple CSS Standard Edition WallPearl
7.2. Nhn dng phn tvi id:V d:
Cng vi on HTML nh v d v class.Nhng yu cu t ra l H Ni s cmu sm, TP. HCh Minh mu , Nng mu ti cn cc tnh muxanh da tri. gii quyt vn ny chng ta s s dng thuc tnh HTML l id nhn dng mi thnh phv dng class nhm cc tnh. on HTML cachng ta by gis l :
Danh Sch Cc Tnh, Thnh Ph Ca Vit Nam
H Ni
TP. H Ch Minh
Nng
Tha Thin Hu
Khnh Ha
Qung Ninh
Tin Giang
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 tu l ch s, n s khng lm vic choFirefox.
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
39/65
Trang 39
Simple CSS Standard Edition WallPearl
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 cthc 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 ccc tnh c bit cho mt thnh phn web. bi k tip chng ta sc hc thmv hai th v trong HTML v ngha 2 thny i vi vic vitCSS.
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
40/65
Trang 40
Simple CSS Standard Edition WallPearl
Bi 8: Span & Div
Nh ha, bi hc ny chng ta s cng tm hiu v 2 th v trong HTML v xem chng c li ch g cho cng vic vit CSS ca chng ta.
8.1. Nhm phn tvi th :Th trong HTML tht ra l mt th trung ha, n khng thm hay bt btc mt th g vo mt ti liu HTML c. Nhng chnh nhtnh cht trung ha nym n li l mt cng cnh du tuyt vi qua chng ta c th vit CSSnh dng cho cc phn t mong mun.
V d: Chng ta c on HTML sau trch dn cu ni ca ch tch H Ch Minh
Khng c g qu hn c lp, t do.
Yu cu y l chng ta hy dng CSS t m 2 tc lp, tdo. gii quytvn ny, chng ta s thm th vo on HTML nh sau:
Khng c g qu hn c lp, t do.
V by gichng ta c th vit CSS cho yu cu trn:
.nhanmanh {
font-weight:bold
}
Rt n gin phi khng no.
8.2. Nhm khi phn tvi th :Cng nh , cng l mt th trung ha v c thm vo ti liuHTML vi mc nh nhm cc phn t li cho mc ch nh dng bng CSS. Tuynhin, im khc bit l dng nhm mt khi phn ttrong khi c th nhm mt hoc nhiu khi phn t.
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
41/65
Trang 41
Simple CSS Standard Edition WallPearl
Trli v d v danh sch tnh, thnh trong phn class bi trc chng ta s giiquyt vn bng cch nhm cc phn t vi nh sau:
Danh Sch Cc Tnh, Thnh Ph Vit Nam:
H Ni
TP. H Ch Minh
Nng
Tha Thin Hu
Khnh Ha
Qung Ninh
Tin Giang
V on CSS cho mc ch ny s l:
#tp {
color:#FF0000
}#tinh {
color:0000FF
}
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
42/65
Trang 42
Simple CSS Standard Edition WallPearl
Trong hai bi hc trn, chng ta c hc qua v id, class, , v lich ca n trong vic nhm, nh du phn t c thdng CSS to ra cckiu trnh by c bit. C th mt s bn cha hc qua HTML skh khn trongvic nm bt cc kin thc ny. Tuy nhin, yu cu m Pearl a ra y ch lcc bn c th vn dng cc phn t ny trong CSS.
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
43/65
Trang 43
Simple CSS Standard Edition WallPearl
Bi 9: Box Model
Trong CSS, box model (m hnh hp) m tcch m CSS nh dng khi khnggian bao quanh mt thnh phn. N bao gm padding (vng m), border (vin) vmargin (canh l) v cc ty chn. Hnh bn di m t cu trc minh ha m hnhhp cho mt thnh phn web.
M hnh hp trn ch lmt m hnh l thuyt ltng. Bn di y chng
ta s xt m hnh hp camt i tng web c th:
V d: Chng ta c mton HTML sau:
Trong CSS, box model (m hnh hp) m tcch m CSS nh dng khi khnggian bao quanh mt thnh phn.
Phn CSS cho on HTML trn:
p {
width:200px;
margin:30px 20px;
padding:20px 10px;
border:1px solid #000;
text-align:justify
}
Model Box
Margin
Border
Padding
Content
Top
Top
Left
Riht
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
44/65
Trang 44
Simple CSS Standard Edition WallPearl
Vi v d trn chng ta skhi qut c m hnh hp nh sau:
C l bn s cm thy hi kh hiu. Nhng khng sao c, tm thi bn c chpnhn nh vy. Cn v nhng ci hp ny th chng ta s cng tm hiu c thhn trong cc bi hc tip theo.
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
45/65
Trang 45
Simple CSS Standard Edition WallPearl
Bi 10: Margin & Padding
Nh gii thiu bi trc, trong bi hc ny chng ta s cng tm hiu chi titv 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 PageSetup ca Word cng c mt thit lp margin nh lcho trang in. Tng t,thuc tnh margin trong CSS cng c dng canh l cho c trang web hay mtthnh phn web ny vi cc thnh phn web khc hay vi vin trang.
V d sau s ch cho chng ta bit cch canh l cho mt trang web.
body {
margin-top:80px;
margin-bottom:40px;
margin-left:50px;
margin-right:30px;
border:1px dotted #FF0000}
Hoc gn hn chng ta s vit nh sau:
body {
margin:80px 30px 40px 50px;
border:1px dotted #FF0000
}
C php nh sau:
margin: | | |
Hoc: margin:|< value2> vi value 1 l gi tr margin-top v margin-bottom v value2 l gi tr margin-left v margin-right.
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
46/65
Trang 46
Simple CSS Standard Edition WallPearl
Kt qu ca v d trn sc m hnh ha nh sau:
V d k tip s th hin r hn v vic dng margin canh lcho cc i tngtrong trang web. Cc bn hy quan st cc ng vin v nhn xt.
body {
margin:80px 30px 40px 50px;
border:1px solid #FF0000
}
#box1 {
margin:50px 30px 20px 40px;
border:1px solid #00FF00
}
#box2 {
margin:50px 30px 20px 40px;
border:1px solid #0000FF
}
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
47/65
Trang 47
Simple CSS Standard Edition WallPearl
10.2. Thuc tnh padding:Padding c th hiu nh l mt thuc tnh m. Padding khng nh hng tikhong cc gia cc cc i tng nh margin m n chquy nh khong cch
gia phn ni dung v vin ca mt i tng (xem li nh minh ha vboxmodel).
C php: Tng t margin.
Padding: | | |
Cc bn hy th thc hin li 2 v d phn margin, nhng thay margin bngpadding, nhquan st vtr ng vin.
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
48/65
Trang 48
Simple CSS Standard Edition WallPearl
Bi 11: Border
Border l mt thnh phn quan trng trong mt trang web. N thng c dngtrong trang tr, ng khung cho mt i tng cn nhn mnh, phn cch cc itng gip trang web trng dnhn hn, Trong bi hc ny, chng ta s cngtm hiu vcch 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 tngweb. Thuc tnh ny c cc gi tr: thin (mnh), medium (va), thick (dy), hay l
mt gi tro c thnh 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. Thuctnh ny nhn tt cn 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 trnone hay hidden dng n ng vin. hiu r hn, chng ta hy xem hnh minh ha di y (tt cvin c mu vng).
V d: V d sau snh vin cho 3 thnh phn h1, h2, p nh sau:
h1 { border-width:thin;
border-color:#FF0000;
border-style:solid }
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
49/65
Trang 49
Simple CSS Standard Edition 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 chnh 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 nhchng ta c th s dng cu trc rt gn ca CSS nh sau:
Border: | |
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
50/65
Trang 50
Simple CSS Standard Edition WallPearl
Bi 12: Height & Width
Trong bi hc ny, chng ta s tm hiu thm v cch dng thuc tnh height vwidth nh kch ccho 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 snh 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 thnhphn web.
12.3. Thuc tnh min-width:Min-width l thuc tnh CSS dng quy nh chiu rng ti thiu cho mt thnhphn 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 snh chiu cao cho thnh phn p ca mt trang web.
p {
height:300px
}
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
51/65
Trang 51
Simple CSS Standard Edition WallPearl
12.5. Thuc tnh max-height:Max-height l thuc tnh CSS dng quy nh chiu cao ti a cho mt thnhphn web.
12.6. Thuc tnh min-height:Min-height l thuc tnh CSS dng quy nh chiu cao ti thiu cho mt thnhphn web.
Lu :
Thng thng chiu cao mt thnh phn web do vn bn trong trang web quytnh. 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 bnkhng chc gi tr chnh xc cho width, height c mt thnh phn. V d, bn vngcha bi post ca mt forum c b ngang 500px, bn c thnh max-width:500pxcho phn hnh nh trong phn trnh nhng nh ln b lch ra ngoi.
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
52/65
Trang 52
Simple CSS Standard Edition WallPearl
Bi 13: Float & Clear
13.1. Thuc tnh float:Float (theo nh ngha ting Vit l th tri) l mt thuc tnh CSS dng cnh
mt thnh phn web vbn tri hay bn phikhng gian bao quanh n.
y l mt thuc tnh rtcn thit khi dn trang
(nh to cc trang web 2column layout hay 3column layout), hin thvn bn thnh ct (gingnh kiu Format >
Columns trong MS Word vy), hay thc hin vic nh v trnh v text (nh mts kiu text wrapping ca MS Word). r hn chng ta hy xem hnh minh hasau vc ch hot ng ca float:
Thuc tnh float c 3 gi tr:
+ Left: Cnh phn t v bn tri.
+ Right: Cnh 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 thnhphn 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 cnh vbn tri v cha li khong trng bn tri n. Cn phn Content th vn nm bndi s tng 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 bndi trn ln nm cnh logo.
Content trn ln lp khong trng
Box B di chuyn sangtri
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
53/65
Trang 53
Simple CSS Standard Edition WallPearl
#logo {
float:left;
}
Mt v d khc l chng ta s thdng 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 tnhclear l mt thuc tnh thng c gn vo cc phn t lin quan ti phn tc 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 sc trnln lp vo ch trng. Nhng khi chng ta t vo vn bn thuc tnh clear thchng 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 trkhc nhau i vi on vn bn trong vd float nh logo trn.
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
54/65
Trang 54
Simple CSS Standard Edition WallPearl
Bi 14: Position
Kt hp vi thuc tnh float hc, thuc tnh position mang li nhiu khnng 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 viposition bn c tht mt i tng web bt c v tr no trn h ta ny.
Gi s chng ta mun nh v mt nh vtr 70px cch nh v 90px t bn triti liu, chng ta s vit CSS nh sau:
img { position:absolute; top:70px; left:90px }
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
55/65
Trang 55
Simple CSS Standard Edition WallPearl
Nh bn thy, snh v bng CSS l mt cng nghchnh xc nh v mtthnh phn. N ddng hn so vi vic dng bng, nh trong sut hay bt k thg khc.
14.1. Absolute position:nh v tuyt i l snh vm trong cc thnh phn c nh vkhng li bt c mt khong trng no trong ti liu. Mt thnh phn c nh v tuyti s nhn gi trposition l absolute. Cc i tng nh v tuyt i s dngkt hp vi cc thuc tnh top, left, right, bottom xc nh ta .
V d sau s chcho chng ta cch t bn nh bn gc ti liu bng nh vtuyt 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 }
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
56/65
Trang 56
Simple CSS Standard Edition WallPearl
14.2. Relative position:Snh vtng i cho mt thnh phn l snh vc tnh t v tr gc trongti liu. Cc thnh phn c nh vtng i s li khong khng trong ti
liu. Cc thnh phn c nh vtng i s nhn gi tr position l relative.
Chng ta hy lm li v d trn nhng thay absolute thnh relative. Cc bn ghinhn li v tr 4 nh logo lc p dng thuc tnh position l none, absolute vrelative ri rt ra nhn xt.
Hai bi hc trn, bn c hc v 2 thuc tnh CSS l float v position. Haithuc tnh ny mang li cho bn nhiu s la chn hn trong vic dn trang. Nchnh xc v d thc hin hn so vi cc phng php dng bng hay nh trong
sut.
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
57/65
Trang 57
Simple CSS Standard Edition WallPearl
Bi 15: Layers
CSS hot ng trn c 3 chiu: cao, rng, su. Hai chiu u tin, chng ta cnhn thy trong cc bi hc trc. Trong bi hc ny, chng ta sc hc v ccht cc thnh phn web cc lp khc nhau vi thuc tnh z-index. Ni n ginhn 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 scao hn s nm trn, phn t c s thp hn s nm di.
V d sau chng ta st 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
}
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
58/65
Trang 58
Simple CSS Standard Edition WallPearl
#logo4 {
position:absolute;
top:280px;
left:200px;
z-index:4
}
#logo5 {
position:absolute;
top:350px;
left:250px;
z-index:5
}
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
59/65
Trang 59
Simple CSS Standard Edition WallPearl
Bi 16: Web Standards
Trong cng vic thit k web th mt trong nhng vn quan trng l lm saom bo trang web ca bn c th hin th tt trn hu ht cc trnh duyt. Hiu rvn ny W3C (World Wide Web Consortium) mt t chc c nhim v qunl v c ra cc tiu chun web cng vi cc i tc khc nh Microsof, MozillaFoundation, t ra cc tiu chun v m cho web. N cho php nh pht trinweb c th t tin hn khi thc hin dn cng nh m bo cho cc trang webtha mn tiu chun c th hin th tt nhiu trnh duyt.
ddng 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 sauclick here.
t url file CSS ca bn url ri nhn nt click to check stylesheet chngtrnh c file CSS ca bn. Sau khi c xong, nu file CSS ca bn khng ph hptiu chun, chng trnh s hin th danh sch li. Nu file CSS ca bn hp chunth chng trnh s hin ra bc nh chng nhn. Bn c tht bc nh trntrang web ca bn th hin n c xy dng trn cc m chun.
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://jigsaw.w3.org/css-validator/http://jigsaw.w3.org/css-validator/http://jigsaw.w3.org/css-validator/http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://jigsaw.w3.org/css-validator/7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
60/65
Trang 60
Simple CSS Standard Edition WallPearl
Ph Lc: Bng Thuc Tnh & Gi Tr Thuc Tnh
Thuc tnh M t Gi trBackground
background Thuc tnh rt gn cho tt ccc thuc tnh nn.
background-color
background-image
background-repeat
background-attachment
background-positionbackground-color Thit lp mu nn cho itng.
transparent
background-image Thit lp nh nn cho itng.
url
none
background-repeat Thit lp ch lp nh nn. repeatrepeat-x
repeat-y
no-repeat
background-attachment
Thit lp nh nn cun/cnh.
scrollfixed
background-position Thit lp v tr th hin nhnn.
top lefttop center
top right
center left
center center
center right
bottom left
bottom center
bottom rightx% y%
x y
Font
font Thuc tnh ngn cho tt ccc thit lp v font.
font-style
font-variant
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
61/65
Trang 61
Simple CSS Standard Edition WallPearl
font-weight
font-size
font-family
font-style Thit lp ch in nghing,
xin hay bnh thng.normal
italicoblique
font-variant Thit lp font bnh thnghay small-caps
normalsmall-caps
font-weight Thit lp in m, thng. normalbold
bolder
lighter
100900
font-size Thit lp kch cfont. xx-smallx-smallsmall
medium
large
x-large
xx-large
smaller
larger
%
font-family Thit lp loi font hin thtrang web/ i tng web.
family-name
generic-family
Text
color Thit lp mu ch. text-indent Thit lp khong tht u
dng.
%
text-align Thit lp ch canh vnbn.
leftright
centerjustify
letter-spacing Thit lp khong cch giacc k t.
normal
text-decoration Thm hiu ng c bit chovn bn.
noneunderline
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
62/65
Trang 62
Simple CSS Standard Edition WallPearl
overline
line-through
blink
text-transform Change case vn bn. noneupperlower
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 thitlp margin.
margin-topmargin-right
margin-bottom
margin-left
margin-top Thit lp canh l trn cho mtthnh phn.
auto
%
margin-right Thit lp canh l phi chomt thnh phn.
auto
%margin-bottom Thit lp canh l di cho
mt thnh phn.auto
%
margin-left Thit lp canh l tri cho mtthnh phn.
auto
%
Padding
padding Thuc tnh ngn cho cc thitlp padding.
padding-top
padding -right
padding -bottom
padding -left
padding-top Thit lp m trn cho mtthnh phn.
%
padding-right Thit lp m phi cho mtthnh phn.
%
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
63/65
Trang 63
Simple CSS Standard Edition WallPearl
padding-bottom Thit lp m di cho mtthnh phn.
%
padding-left Thit lp m tri cho mtthnh phn.
%
Border
border Thuc tnh ngn cho tt ccc thit lp border cho mtthnh phn.
border-width
border-color
border-style
border-width Thit lp rng ng vin. thinmedium
thick
border-color Thit lp mu cho ng
vin.
border-style Thit lp kiu ng vin. nonehidden
solid
dotted
dashed
double
groove
ridge
inset
outset
border-top-width Thit lp rng vin phatrn.
border-top-color Thit lp mu vin pha trn. border-top-style Thit lp kiu vin pha trn. border-right-width Thit lp rng vin phi. border-right-color Thit lp mu vin phi. border-right-style Thit lp kiu vin phi. border-bottom-width Thit lp rng vin bn
di.
border-bottom-color Thit lp mu vin bn di. border-bottom-style Thit lp kiu vin bn di. border-left-width Thit lp rng vin tri. border-left-color Thit lp mu vin tri.
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
64/65
Trang 64
Simple CSS Standard Edition WallPearl
border-left-style Thit lp kiu vin tri. Width
width Thit lp chiu rng itng.
auto
%
max-width Thit lp chiu rng ti acho i tng.
none
%
min-width Thit lp chiu rng ti thiucho mt i tng.
%
Height
height Thit lp chiu cao cho mti tng.
auto
%max-height Thit lp chiu cao ti a cho
mt i tng.none
%
min-height Thit lp chiu cao ti thiucho mt i tng.
%
Layout Position
float Cnh i tng. leftright
noneclear Cch thc x s ca mt i
tng lin quan vi i tngfloated.
left
right
both
none
position nh vi tng relativeabsolute
top Thit lp ta nh itng.
auto
%
right Thit lp ta bn phi itng.
auto
%
bottom Thit lp ta y itng.
auto
%
Smith N guyen Stu
t tp:/ / gg.gg/ sns
http://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/sns7/30/2019 CSS Co Ban Tieng Viet - Smith.N Studio
65/65
Simple CSS Standard Edition WallPearl
left Thit lp ta bn tri itng.
auto
%
z-index nh lp i tng. autonumber
Smith N guyen Stu
http://gg.gg/snshttp://gg.gg/sns