CSS Co Ban Tieng Viet - Smith.N Studio

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/sns


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


3/65

Trang 3


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


4/65

Trang 4


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


5/65

Trang 5


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


6/65

Trang 6


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/65

Trang 7


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 [email protected]@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:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]:[email protected]://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snshttp://gg.gg/snsmailto:[email protected]:[email protected]://www.css3.info/


8/65

Trang 8


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


9/65

Trang 9


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


10/65

Trang 10


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


11/65

Trang 11


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


12/65

Trang 12


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


13/65

Trang 13


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


14/65

Trang 14


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


15/65

Trang 15


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 }


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


16/65

Trang 16


+ 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


17/65

Trang 17


V d


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

body {

background-color:#FFF

}

p {

color:#00FF00

}

Hy t 2 file ny vo cng mt th mc, 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


18/65

Trang 18


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:


19/65

Trang 19


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 {


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 {


width:100%;

height:150px !important;text-align:right;

}


20/65

Trang 20


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


21/65

Trang 21


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


22/65

Trang 22


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


23/65

Trang 23


+ 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


24/65

Trang 24


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


25/65

Trang 25


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


26/65

Trang 26


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


27/65

Trang 27


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


28/65

Trang 28


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


29/65

Trang 29


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


30/65

Trang 30


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


31/65

Trang 31


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


32/65

Trang 32


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


33/65

Trang 33


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


34/65

Trang 34


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


35/65

Trang 35


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


36/65

Trang 36


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


37/65

Trang 37


l class to thnh 2 nhm l thnh ph v tnh. Ta s vit li on HTML sauthnh nh th ny:


H Ni

TP. H Ch Minh

Nng

Tha Thin Hu

Khnh Ha

Qung Ninh

Tin Giang

Vi vic dng class nhm cc i tng nh trn th cng vic ca chng ta 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


38/65

Trang 38


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 :


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


39/65

Trang 39


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


40/65

Trang 40


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


41/65

Trang 41


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


42/65

Trang 42


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


43/65

Trang 43


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


44/65

Trang 44


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


45/65

Trang 45


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


46/65

Trang 46


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 {


border:1px solid #FF0000

}

#box1 {


border:1px solid #00FF00

}

#box2 {


border:1px solid #0000FF

}

Smith N guyen Stu

t tp:/ / gg.gg/ sns


47/65

Trang 47


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


48/65

Trang 48


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


49/65

Trang 49


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


50/65

Trang 50


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


51/65

Trang 51


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


52/65

Trang 52


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


53/65

Trang 53


#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


54/65

Trang 54


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


55/65

Trang 55


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


56/65

Trang 56


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


57/65

Trang 57


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


58/65

Trang 58


#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


59/65

Trang 59


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/


60/65

Trang 60


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


61/65

Trang 61


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


62/65

Trang 62


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


63/65

Trang 63


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


64/65

Trang 64


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


65/65


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

CSS Co Ban Tieng Viet - Smith.N Studio

Documents

Transcript of CSS Co Ban Tieng Viet - Smith.N Studio