CSS TiengViet

Cc bi h c v CSS
M cl c
Contents
C b n v CSS ......................................................................................................................................... 3 I. CSS l g ........................................................................................................................................... 3 II. M t s c tnh c b n c a CSS ................................................................................................... 3
C php c a CSS .................................................................................................................................... 5 Lm sao chn CSS vo trong trang Web .............................................................................................. 6 1. CSS c khai bo trong file ring. .............................................................................................. 6 2. Chn CSS trong ti li u HTML ..................................................................................................... 6 3. Chn tr c ti p vo th c a HTML(inline style) ........................................................................... 7 4. Nhi u Stylesheet .............................................................................................................................. 7 Cc v n v vn b n v cch nh d ng vn b n .............................................................................. 8
t mu cho m t o n vn b n ......................................................................................................... 8 t mu n n cho o n vn b n.......................................................................................................... 8 Cn ch nh kho ng cch gi a cc k t .............................................................................................. 8 Cn ch nh kho ng cch gi a cc dng. ............................................................................................. 8 Dng hng ............................................................................................................................................ 9 Trang hong thm cho o n vn b n. ............................................................................................... 9 Ch nh v tr c a o n vn b n (indent). ............................................................................................ 9 i u ki n cc k t trong m t o n vn b n. ................................................................................... 9 t h ng cho o n vn b n. .......................................................................................................... 10 Tng kho ng cch gi a cc t .......................................................................................................... 10 Lm m t tc d ng c a ng bao c a m t th HTML. ................................................................ 10 Cc thu c tnh c a font ch v nh ngha font ch cho vn b n .................................................... 11
ng vi n v cc thu c tnh c a ng vi n .................................................................................... 13 Cc thu c tnh c a margin ................................................................................................................... 15 Thu c tnh ng bao ngoi (Outline) ................................................................................................ 16 CSS padding .......................................................................................................................................... 18 Lm th div c thanh cu n (scrollbar) gi ng iFrame ........................................................................ 19 Style m t ki u Bubble n gi n........................................................................................................... 21
http://www.viet-ebook.co.cc
Cc bi vi t c l y t cssyeah.com
Cc bi h c v CSS 1. 2. nh d ng HTML ......................................................................................................................... 21 nh d ng CSS .............................................................................................................................. 21
Cn b ng vo gi a mn hnh. .............................................................................................................. 23 Menu d ng tab - Ph n I. ....................................................................................................................... 24 K thu t lm ch hoa u dng (Drop cap) ....................................................................................... 26
1. Cch th nh t ................................................................................................................................ 26 2. Cch th hai .................................................................................................................................. 27 Trang tr cho danh sch c th t ....................................................................................................... 29 K thu t t i nh tr c b ng CSS ........................................................................................................ 30 Fix min-height cho IE ........................................................................................................................... 32 t min-width cho IE6 ......................................................................................................................... 33 CSS Transparency trn ton b cc trnh duy t ................................................................................ 34 Border v nh ng i u b n cha bi t .................................................................................................. 35 K thu t a footer xu ng cu i trang ............................................................................................... 36 t dng text vo gi a ( theo chi u cao) ............................................................................................. 38 Hi n th nh PNG trn IE .................................................................................................................... 39
Style cho th hr ...................................................................................................................................... 40 Thm kho ng cch gi a ng k v ph n n i dung. ................................................................... 40 K thu t slicing door v ng d ng ...................................................................................................... 41 1. T o nt b ng Photoshop ............................................................................................................... 41 2. C t nt ra thnh hai ph n. ........................................................................................................... 42 3. Th c hi n vi t m HTML v CSS. .............................................................................................. 42 Cch vi t gi n l c trong CSS ............................................................................................................. 44 1. Thu c tnh Color ........................................................................................................................... 44 2. Thu c tnh margin v padding. ................................................................................................... 44 3. Thu c tnh border. ........................................................................................................................ 45 4. Thu c tnh background. ............................................................................................................... 45 5. Thu c tnh font .............................................................................................................................. 46 5. List type.......................................................................................................................................... 46 6. Outline............................................................................................................................................ 46
Cc bi h c v CSS
C b n v CSS
Trong bi m u ny chng ta s i tm hi u m t s khi ni m v ta c n ch trong su t qu trnh lm vi c v i CSS c tnh c a CSS, m chng
I. CSS l g
CSS (Cascading Style Sheets) c hi u m t cch n gi n l cch m chng ta thm cc ki u hi n th (font ch , kch th c, mu s c...) cho m t ti li u Web
II. M t s
c tnh c b n c a CSS
1. CSS quy nh cch hi n th c a cc th HTML b ng cch quy nh cc thu c tnh c a cc th (font ch , mu s c). cho thu n ti n b n c th t ton b cc thu c tnh c a th vo trong m t file ring c ph n m r ng l ".css" CSS n ph v gi i h n trong thi t k Web, b i ch c n m t file CSS c th cho php b n qu n l nh d ng v layout trn nhi u trang khc nhau. Cc nh pht tri n Web c th nh ngha s n thu c tnh c a m t s th HTML no v sau n c th dng l i trn nhi u trang khc. 2. C th khai bo CSS b ng nhi u cch khc nhau. B n c th t o n CSS c a b n pha trong th <head>...</head>, ho c ghi n ra file ring v i ph n m r ng ".css", ngoi ra b n cn c th t chng trong t ng th HTML ring bi t Tuy nhin ty t ng cch t khc nhau m tin c a CSS s theo th t sau. 1. 2. 3. 4. M c u tin c a n cng khc nhau. M c u
Style t trong t ng th HTML ring bi t Style t trong ph n <head> Style t trong file m r ng .css Style m c nh c a trnh duy t u tin s gi m d n t trn xu ng d i. u
3. CSS c tnh k th a: gi s r ng b n c m t th <div id="vidu"> c khai bo file css v i cc thu c tnh nh sau:
4. 5. 6. 7. #vidu { width: 200px; height: 300px; }
Cc bi h c v CSS
m t ch no trong file css b n l i khai bo m t l n n a th <div id="vidu"> v i cc thu c tnh.

#vidu { width: 400px; background-color: #CC0000; }
Sau o n khai bo ny th th <div id="vidu"> s c thu c tnh:

#vidu { width: 400px; /* ln khai bo c */ height: 300px; background-color: #CC0000; }
Cc bi h c v CSS
C php c a CSS
Sau khi hi u l n m b t c m t s cch khai bo c a cc th CSS c tnh c a CSS chng ta ti p t c i tm hi u v c php v
C php c a CSS c chia lm 3 ph n. ph n th ch n (selector), ph n thu c tnh (property), ph n nhn (value).

selector {property: value}
N u nhn c a b n c nhi u t b n nn
p {font-family: "sans serif"}
t nhn c a b n vo trong d u nhy kp
Trong tr ng h p th ch n c a b n nhi u thu c tnh th cc thu c tnh s (;).

p {text-align:center;color:red}
c ngn cch b i d u
Khi th ch n c nhi u thu c tnh th chng ta nn

p { text-align: center; color: black; font-family: arial }
m i thu c tnh
trn m t dng ring bi t.
Cc bi h c v CSS
Lm sao chn CSS vo trong trang Web

B n c m t file CSS c a b n, by gi cng vi c ti p theo l lm th no chn nh ng o n CSS c a b n vo trong trang, V xem chng ho t ng nh th no. Trong ph n ny chng ta s i tm hi u chi ti t v cch chn m t o n style trong trang HTML hay lin k t t i m t file CSS vi t s n. Khi trnh duy t c n CSS, th ton b Website s c nh d ng theo cc thu c tnh c khai bo trong ph n CSS. C ba cch cho php chng ta chn nh d ng CSS vo trong Website.
1. CSS c khai bo trong file ring.

Ton b m CSS c ch a trong file ring c ph n m r ng .css l m t t ng c dng khi m t file CSS s c p d ng cho nhi u trang khc nhau. B n c th thay i cch hi n th c a ton b site m ch c n thay i m t file CSS. Trong cch ny th file CSS s c chn vo vn b n HTML thng qua th <link>...</link>. Ta c c php nh sau:
<html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css" medial="all" /> </head> <body> </body> </html>
Trnh duy t s c ton b cc vn b n HTML.
nh d ng c quy
nh trong file mystyle.css v
nh d ng cho
File CSS c th c so n th o b ng m t s trnh duy t khc nhau. Trong file khng c ch a m HTML, khi ghi l i chng ta b t bu c ph i ghi l i v i ph n m r ng l .css. Gi s chng trong file mystyle.css trn ch a o n m sau:
hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}
Khng bao gi s d ng kho ng tr ng trong nhn, gi s r ng n u b n dng margin-left: 20 px; thay cho margin-left: 20px; th IE6 s hi u cn cc trnh duy t nh Firefox, Opera s khng hi u
2. Chn CSS trong ti li u HTML
Cc bi h c v CSS
Chn th ng CSS trong ti li u c p d ng trong tr ng h p nh ng nh d ng CSS ny ch ginh ring cho ti li u HTML . Khi b n chn tr c ti p th o n m c a b n ph i t trong th <style> v t trong ph n <head>.
<head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head>
C m t s trnh duy t c s khng hi u th <style>, n s b qua th ny. Tuy nhin th n i dung trong th <style> v n hi n th ra trang HTML. V v y m chng ta s ph i dng nh d ng ch thch trong HTML ch a ph n n i dung c a th <style>.
<head> <style type="text/css"> <!-hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} --> </style> </head>
3. Chn tr c ti p vo th c a HTML(inline style)

Inline style c s d ng nhi u trong tr ng h p m t th HTML no c n c style ring cho n. Inline style c p d ng cho chnh th HTML , cch ny s c cch trn. D i y l m t v d m chng ta dng Inline style
<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>
u tin l n nh t so v i hai
4. Nhi u Stylesheet
Trong tr ng h p m c m t s th c cng Gi s nh sau:
h1, h2, h3 { margin-left: 10px; font-size: 150%; ... }
nh d ng, chng ta c th g p chng l i v i nhau.
Gi ng o n m trn th c ba th h1, h2, h3
u c cng 3 thu c tnh nh trn.
Cc bi h c v CSS
Cc v n
v vn b n v cch
nh d ng vn b n
Thu c tnh CSS text cho php b n hon ton c th qu n l c cc thu c tnh c a vn b n, b n c th qu n l c s n hi n c a n, thay i mu s c, tng ho c gi m kho ng cch gi a cc k t trong m t o n, cn ch nh vi c dng hng (align),... Cc thu c tnh c a text m CSS h tr
t mu cho m t o n vn b n
t mu cho m t o n vn b n chng ta c th dng thu c tnh: color: #m mu;
p { color: #333333; }
t mu n n cho o n vn b n.
B n c th #m mu; t mu n n (background) cho o n vn b n b ng thu c tnh background-color:
p { background-color: #FFFF00; }
Cn ch nh kho ng cch gi a cc k t .
Kho ng cch gi a cc k t trong m t o n vn b n c th letter-spacing: kho ng cch;
h3 { letter-spacing: 2em; } h1 { letter-spacing: -3em; }
c tng ho c gi m b i thu c tnh
Cn ch nh kho ng cch gi a cc dng.

Thu c tnh line-height: kho ng cch; s gip b n cn ch nh kho ng cch gi a cc dng trong m t o n vn b n.
p { line-height: 150%; // line-height: 15px;
Cc bi h c v CSS
}
Dng hng
ging hng cho m t o n vn b n chng ta s dng thu c tnh text-align: v tr;
p { text-align: left; /* left | center | right */ }
Trang hong thm cho o n vn b n.

M t ng g ch chn ho c ng g ch ngang dng vn b n s lm cho o n vn b n c a b n thm sinh ng. t i m thm cho o n vn b n chng ta s dng thu c tnh text-decoration: thu c tnh;
h3 { text-decoration: underline; /* G ch chn */ } h2 { text-decoration: line-through; /* G ch ngang */ } h1 { text-decoration: overline; /* k }
trn */
Ch nh v tr c a o n vn b n (indent).
Thu c tnh text-indent: v tr; s cn ch nh v tr c a dng vn b n theo chi u ngang.
h1 { text-indent: -2000px; /* text-indent: 30px; */ }
i u ki n cc k t trong m t o n vn b n.
B n c th i u khi n ton b transform: ki u ch ; o n vn b n l ch hoa hay ch th ng b i thu c tnh text-
p.uppercase { text-tranform: uppercase; } p.lowercase { text-tranform: lowercase; } p.capitalize { text-tranform: capitalize;
Cc bi h c v CSS
}
t h ng cho o n vn b n.
H ng c a o n vn b n c th t tri qua ph i hay t ph i qua tri chng ta c th b i thu c tnh direction: h ng;
div.rtl { direction: rtl; /* Right to left */ } div.ltr { direction: ltr; /* Left to right */ }
i u khi n
Tng kho ng cch gi a cc t .

Kho ng cch gi a cc t c th
word-spacing: 30px;
c tng b i thu c tnh word-spacing: kho ng cch;
Lm m t tc d ng c a ng bao c a m t th HTML.
lm m t tc d ng ng bao c a m t th HTML chng ta dng thu c tnh white-space: gi tr ;
p { white-space: nowrap; }
Thu c tnh white-space s lm cho ton b
o n vn b n
trn m t dng.
Cc bi h c v CSS
Cc thu c tnh c a font ch v b n

Cc thu c tnh v font ch s cho php b n thay kch th c (size) v ki u font (style). 01 t font cho o n vn b n.
nh ngha font ch cho vn

i h font (font family), m (boldness),
t m t lo i font ch no cho o n vn b n th chng ta s s d ng thu c tnh fontfamily:

p { font-family: Arial, Tahoma, Verdana, sans-serif; }
Thng th ng b n c n ph i khai bo h c a font cu i (trong v d trn th sans-serif l ch t i 1 h font) trong tr ng h p my c a ng i duy t Web khng c cc font nh mnh t th n s l y font m c nh c a h font trn. 02 t o n vn b n s d ng font nhn caption.
p.caption { font: caption; }
03
t kch th c font cho o n vn b n. c kch th c c a ch khc nhau, chng ta
Khi chng ta mu n nh ng o n vn b n ho c tiu c th s d ng thu c tnh font-size:

h1 { font-size: 20px; } h3 { font-size: 12px; }
04
nh l i kch th c font b ng thu c tnh font-size-ajust:
p { font-size-ajust: 0.60; }
05
t ki u font cho o n vn b n.
Cc bi h c v CSS
Ch
m, ch nghing,... c
t v i thu c tnh font-style:

| italic | oblique */
p { font-style: italic; /* normal }
06 Mu n hi n th font d ng small-caps ho c d ng normal th chng ta s s d ng thu c tnh font-variant. Thu c tnh ny c hai gi tr normal v small-caps
p { font-variant: normal; /* normal } | small-caps */
07
m nh t c a font.
Khi chng ta mu n thay i m nh t c a vn b n chng ta s dng thu c tnh font-weight:. Chng ta c th t gi 3 lo i gi tr cho thu c tnh ny 1. normal(bnh th ng), 2. bold( m), 3. 300( t d ng s )
h3 { font-weight: bold; }
08Khai bo cc thu c tnh font
d ng shorthand.
p { font: italic small-caps 900 12px arial; }
Cc bi h c v CSS
ng vi n v cc thu c tnh c a ng vi n
Cc thu c tnh c a ng vi n (border) s cho php t cc gi tr c bi t cho n vi n nh ki u ng vi n, kch th c, mu s c. Thu c tnh ny s c p d ng cho cc th HTML nh <div>, <li>, <table>,... Trong thu c tnh ng vi n (border) chng ta c 3 gi tr c b n l: 1. border-color: 2. border-width: 3. border-style: 01Thu c tnh mu c a ng vi n t mu cho ng vi n chng ta s
div.color { border-color: #CC0000; }
t thng s mu cho thu c tnh border-color:
02
t chi u r ng cho ng vi n (border) t chi u r ng c a ng vi n chng ta s t gi tr cho thu c tnh border-width:
N u mu n
div.borerwidth { border-width: 2px; }
STT Gi tr 1 thin 2 medium 3 thick 4 length 03Ch n ki u c a ng vi n B n c th s d ng thu c tnh border-style t ki u cho ng vi n. Chng ta c th gn cho thu c tnh ny 9 gi tr khc nhau tng ng v i 9 ki u ng vi n khc nhau.
div.borderstyle { border-style: solid; }
STT border-style 1 none
Cc bi h c v CSS
2 3 4 5 6 7 8 9 10
hidden dotted dashed solid double groove ridge inset outset i t ng ta c 4 thu c tnh border tng ng:
V i 4 pha c a 1. 2. 3. 4.
border-top: border-right: border-bottom: border-left: u c 3 gi tr (color, width, style)
ng v i ng vi n c a m i pha chng ta STT Pha 1 Thu c tnh border-top-color: top border-top-width: border-top-style: border-right-color: right border-right-width: border-right-style: border-bottom-color: bottom border-bottom-width: border-bottom-style: border-left-color: left border-left-width: border-left-style:
Chng ta c th dng phng php vi t m gi n l c (shorthand) vi t cc thu c tnh c a ng vi n g n hn. Gi s chng ta t thu c tnh border c a th <div> v i r ng b ng 1, ki u solid v mu l #CC0000
div.border { border: 1px solid #CC0000; }
Cc bi h c v CSS
Cc thu c tnh c a margin

Thu c tnh margin s nh ngha kho ng tr ng bao quanh m t ph n t HTML. N c th dng gi tr m l ng n i dung vo v i nhau. Tng ng v i 4 pha c a m t ph n t chng ta c 4 thu c tnh tng ng. M t khc vi t cho g n chng ta cng c th dng cch vi t gi n l c nh ngha cc gi tr cho thu c tnh margin. i v i cc trnh duy t Netcape v IE th gi tr m c nh c a thu c tnh margin l 8px. Nhng Opera th khng h tr nh v y. cho th ng nh t chng ta c th t margin m c nh cho ton b cc ph n t . Cc gi tr m thu c tnh margin c th nh n c l: auto, length, %. Chng ta no l ty thch c ng v i vi c tng ng t l v i cc ph n t khc. Tng ng v i 4 pha ta c 4 thu c tnh: 1. 2. 3. 4. margin-top: margin-right: margin-bottom: margin-left: t gi tr
cho g n chng ta cng c th vi t thu c tnh margin d i d ng shorthand

div.margin { margin: 10px 4px 5px 9px; /* top } | right | bottom | left*/
Cc bi h c v CSS
Thu c tnh ng bao ngoi (Outline)

Thu c tnh Outline s v m t ng bao ngoi ton b m t ph n t HTML, i v i ph n t c ng vi n (border) th ng bao ny s bao tr n ng vi n c a ph n t . Cng tng t nh ng vi n b n c th t cho n cc thu c tnh v mu sc, l n v ki u. C m t i u c n ch l cc thu c tnh c a ng bao ny c th khng c h tr trn IE 01 t thu c mu cho ng bao t mu cho ng bao chng ta c th s d ng thu c tnh outline-color:
N u mu n
p { outline-color: #CC0000; }
02
r ng cho ng bao. t r ng cho ng bao chng ta t gi tr l n cho thu c
Tng t nh ng vi n, tnh outline-width:

p { outline-width: 2px; }
03Ch n ki u ng bao ch n ki u cho ng bao chng ta s

p { outline-style: dotted; }
t l n l t cc gi tr cho thu c tnh outline-style:
STT outline-style 1 none 2 hidden 3 dotted 4 dashed 5 solid 6 double 7 groove 8 ridge 9 inset
Cc bi h c v CSS
10
outset
cho g n chng ta cng c th vi t cc gi tr c a thu c tnh Outline d i d ng shorthand nh sau:

div.outline { outline: 1px solid #000; }
Cc bi h c v CSS
CSS padding
CSS padding s nh ngha kho ng tr ng gi a mp c a cc ph n t t i cc ph n t con ho c n i dung bn trong. Chng ta khng th gn gi tr m cho thu c tnh ny. Cng gi ng nh margin thu c tnh padding cng tng ng v i 4 pha c a ph n t . Tng ng v i 4 pha c a ph n t chng ta c 4 thu c tnh padding tng ng l: 1. 2. 3. 4. padding-top: padding-right: padding-bottom: padding-left:
Cc gi tr c th gn cho cc thu c tnh ny l : % ho c length vi t cho g n chng ta cng c th vi t thu c tnh padding d i d ng shorthand.
div.padding { padding: 5px 3px 2px 8px; }
Cc bi h c v CSS
Lm th div c thanh cu n (scrollbar) gi ng iFrame

Bi vi t d i y s gi i thi u v i cc b n cch lm cho th <div> c thanh cu n gi ng khi ta s d ng iFrame load m t trang khc. Tr c h t chng ta c v d v o n m HTML nh sau:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>example page</title> </head> <body> <div id="page"> <h1>Title</h1> <div id="scroll_box"> <p> Put a long text in here. It will be crollable.<br/> Put a long text in here. It will be crollable.<br/> Put a long text in here. It will be crollable.<br/> Put a long text in here. It will be crollable.<br/> Put a long text in here. It will be crollable.<br/> Put a long text in here. It will be crollable.<br/> Put a long text in here. It will be crollable.<br/> </p> </div> <p> This content follows after the scrollable box. </p> </div> </body> </html>
By gi chng ta ti n hnh style cho th <div>, tr c h t chng ta c n ph i r ng v chi u cao c a cho th <div>
#scroll_box { height: 120px; width: 400px; ... }
tc
nh chi u
cho th <div> hi n th thanh cu n chng ta s

#scroll_box { height: 120px; width: 400px; display: auto; border: 1px solid #CCCCCC;
t thu c tnh display c a th <div> l auto
Cc bi h c v CSS
margin: 1em 0; }
Khi b n a n i dung di hn chi u cao v chi u r ng c a th <div> th trnh duy t s t ng sinh ra thanh cun ngang v thanh cu n d c gi ng nh iFrame. K thu t ny hi n c kh nhi u Website s d ng c cch th hi n n i dung ring bi t c a mnh.
Cc bi h c v CSS
Style m t ki u Bubble n gi n
Thng th ng khi chng ta duy t Web, chng ta s khng t i cch trnh by c a trang Web , m ch n thng tin c a n. Nhng n u chng ta m t cht th nh n th y r ng, n u Website no bi t v n d ng cc ki u Typography h p l th s gip ng i c phn bi t cc m c thng tin r t nhanh. i u s c tc ng t t i v i ng i c gip cc b n c thi quen p d ng cc ki u Typography vo trong Website c a mnh. Trong bi vi t ny ti xin h ng d n cc b n lm m t ki u bubble n gi n D ng bubble th ng c s d ng trong vi c trch d n l i ni c a m t tc gi no , ho c trong cc l i bnh lu n trong cc blog.
1.
nh d ng HTML
<div class="bubblewrapper"> <div class="comment"> y l v d c a m t ki u bubble n gi n, cc b n c th ng d ng chng vo ngay trong site c a mnh. Chc cc b n thnh cng! </div> <div class="commentfooter"> <span class="author">Tc gi :</span> <a href="www.cssyeah.com" target="_blank" title="Tc gi ">CSSYeah.com</a> </div> </div> lm ki u bublle n gi n ny chng ta s s d ng hai th <div>. Th <div class="comment"> ch a l i bnh lu n, cn th <div class="footercomment"< s thng tin tc gi . c dng ch a
Th <div class="bubblewrapper"> trong tr ng h p ny c tc d ng gi i h n kch th c cho hai th <div> bn trong. Khi a vo trong Website b n c th thay i kch th c c a n cho ph h p v i n i dung Website.
2.
Ta c
nh d ng CSS
nh d ng CSS c a ki u bublle trn nh sau:
#wrapper { width: 400px; margin: 0 auto; padding: 0; }
Cc bi h c v CSS
div.comment { margin: 0; padding: 10px; background: #E8ECEF; } div.commentfooter { padding: 8px 0 0 22px; background: url(arrow-down.gif) no-repeat 20px 0 #FFFFFF; } span.author { padding-left: 15px; background: url(author.gif) no-repeat left center; font-weight: bold; } div.commentfooter a { color: #CC0000; } div.commentfooter a:hover, div.commentfooter a:active { text-decoration: none; }
Trong ph n n i dung do chng ta c th dng nhi u l n d ng thu c tnh class cho th <div>
ng bubble ny, do v y chng ta
nh
Cc bi h c v CSS
Cn b ng vo gi a mn hnh.
Bnh th ng th b n mu n t m t table c chi u r ng c nh vo gi a mn hnh th b n lm th no? c ph i b n t thu c tnh align="center" vo trong th <table>?. N u b n lm nh v y th b n ch c k t qu ng nh b n trn m t s trnh duy t, cn m t s trnh duy t s khng th hi n k t qu nh b n mu n. Sau y ti mu n gi i thi u v i b n m t tips nh trong CSS nh vo gi a trang. t m t table c kch th c c
Gi s r ng b n c m t table nh sau: <table class="center">. N u by gi b n mu n t table vo gi a trang mn hnh b n ch vi c t cho hai thu c tnh margin-left v margin-right c a table c gi tr b ng auto. Chng ta c m CSS nh sau:
table.center { width: 780px; margin-left: auto; margin-right: auto; }
Cc bi h c v CSS
Menu d ng tab - Ph n I.
Trong chng ta ti gim ch c r ng khng cn t ng i v n cn m c c m v i nh ng menu d ng tab, khng ph i v n x u m lun ngh r ng lm n kh v c u trc c a n r t ph c t p. Chnh b n thn ti tr c y cng nh v y. Nhng th c ra c ph i nh v y khng? tr l i cu h i by gi chng ta cng nhau th Style cho m t ki u tab n gi n xem n c th c s kh nh chng ta v n th ng ngh khng?. Trong menu d ng ny bao gi cng g m 2 ph n, ph n 1 ch a cc tab v ph n th hai l ph n ch a n i dung c a cc tab. c hnh dung r hn chng ta s xem hnh nh minh h a d i y. u tin chng ta s
div#wrapper { margin: 50px; padding: 0; }
nh d ng cho ph n khung c a tab nh sau:
Chng ta s dng nh d ng c a th <ol> t o ln cc tab ph n 1. V nguyn t c th chng ta c th dng m t trong ba th <ul>, <ol>, <dl>. Nhng t i sao ti l i dng th <ol>, l b i v m t l do no m trnh duy t c a ng i xem khng t i c CSS t Website c a b n th h v n hi u c c u trc tab c a b n. nh d ng c a ph n m t nh sau
<ol class=tab> <li class=active>Trang ch </li> <a href=gioithieu.html title=Gi i thi u>Gi i thi u</a> <a href=sanpham.html title=S n ph m>S n ph m</a> <a href=tintuc.html title=Tin t c>Tin t c</a> <a href=lienhe.html title=Lin h >Lin h </a> </ol>
By gi chng ta s
nh d ng sao cho cc tab n m trn cng m t hng v c hnh dng c a tab.

nh 1px */
ol.tab { background: url(../dot.gif) repeat-x left bottom; /* list-style: none; margin: 0; padding: 6px 0; position: relative; } ol.tab li { background: #F2F5FA; border: 1px solid #D3DDED; display: inline; /* cc th margin-right: 5px;
li
trn m t dng */
Cc bi h c v CSS
padding: 0; }
Trong cch nh d ng ny ta c s d ng m t k thu t nh , l chng ta c s d ng m t nh .gif c kch th c 1px x 1px thay th border-bottom c a <ol> Khi ang trong trang no th tab c a trang s c mu khc v i nh ng tab khc, do v y chng ta s t cho tab m t class l active. V v y chng ta c n ph i nh d ng cho ring cho cc tab active nh sau:
ol.tab li.active { background: #FFF; border-bottom: 1px solid #FFF; font-weight: bold; padding: 5px 10px; }
Ti p theo chng ta s
nh d ng cho cc link n m trong th
ol.tab a { font-weight: bold; margin: 0; padding: 5px 10px; }
Cu i cng by gi chng ta s nh d ng ph n ch a n i dung c a m i tab. Ph n ny ch l chng ta nh d ng cho th <div> ch a n i dung.

div#content { border: 1px solid #D3DDED; border-top: none; padding: 10px; }
n gi n
Cc bi h c v CSS
K thu t lm ch hoa
u dng (Drop cap)
Drop cap l m t trong nh ng typography hay c dng trong cc t p ch trn gi y cng nh cc t p ch i n t . N th ng c dng u m i bi bo v i font ch l n v mu s c n i tr i. Theo quy lu t nhn c a m t n u m t i t ng n i b t hn cc i t ng xung quanh, nh n s c tc ng m nh t i th gic c a ng i quan st. Chnh v l do m ng i ta v n th ng dng cch ny cho cc bi bo n i b t c n s ch cao. Tuy nhin trong khun kh c a lnh v c nghin c u chng ta s ch hoa u dng (Drop cap). i tm hi u m t s k thu t lm
1. Cch th nh t
u tin chng ta s i tm hi u cch lm Drop cap chnh th ng. Trong cch ny chng ta s s d ng n k thu t selectors trong CSS. c th l chng ta s dng n thu c tnh :first-letter. Ta c nh d ng HTML:
<p class="pdropcap">Lorem ipsum dolor sit amet consectetuer at et Aenean ac dolor. Ligula nulla ac id pede sit consectetuer ipsum malesuada convallis habitant. Neque at pellentesque pharetra Aenean accumsan orci Proin leo tellus eu. Dictumst Integer ut adipiscing porttitor dolor Morbi ut id lorem auctor. Massa tellus Morbi enim tellus pede vel suscipit hac sapien Cras. Cursus velit hendrerit lobortis elit elit sed ut In.</p>
nh d ng CSS:
p.pdropcap:first-letter { float: left; padding: 4px 8px 0 0; display: block; color: #336699; font: 60px/50px Georgia, Times, serif; }
K t qu hi n th : Lorem ipsum dolor sit amet consectetuer at et Aenean ac dolor. Ligula nulla ac id pede sit consectetuer ipsum malesuada convallis habitant. Neque at pellentesque pharetra Aenean accumsan orci Proin leo tellus eu. Dictumst Integer ut adipiscing porttitor dolor Morbi ut id lorem auctor. Massa tellus Morbi enim tellus pede vel suscipit hac sapien Cras. Cursus velit hendrerit lobortis elit elit sed ut In.
Cc bi h c v CSS
Chng ta c n ph i t class cho th <p class="pdropcap"> nh m m c ch phn bi t n v i cc th <p> khc trong trang. Trong tr ng h p b n khng t class th ton b cc k t u dng c a th <p> trong trang s hi n th nh d ng ch hoa, m i u th khng ph i l i u mong mu n.
2. Cch th hai
Trong cch th hai ny ta s dng thm m t th <span class="dropcap"> u dng nh d ng HTML:
<p><span class="pdropcap">N</span>orem ipsum dolor sit amet consectetuer at et Aenean ac dolor. Ligula nulla ac id pede sit consectetuer ipsum malesuada convallis habitant. Neque at pellentesque pharetra Aenean accumsan orci Proin leo tellus eu. Dictumst Integer ut adipiscing porttitor dolor Morbi ut id lorem auctor. Massa tellus Morbi enim tellus pede vel suscipit hac sapien Cras. Cursus velit hendrerit lobortis elit elit sed ut In.</p>
bao k t ch hoa
nh d ng CSS:
.dropcap { float: left; padding: 4px 8px 0 0; display: block; color: #336699; font: 60px/50px Georgia, Times, serif; }
K t qu hi n th : Norem ipsum dolor sit amet consectetuer at et Aenean ac dolor. Ligula nulla ac id pede sit consectetuer ipsum malesuada convallis habitant. Neque at pellentesque pharetra Aenean accumsan orci Proin leo tellus eu. Dictumst Integer ut adipiscing porttitor dolor Morbi ut id lorem auctor. Massa tellus Morbi enim tellus pede vel suscipit hac sapien Cras. Cursus velit hendrerit lobortis elit elit sed ut In. Cch ny c m t u i m l k t hoa c th t b t c u trong bi vi t mi n l chng ta thm th <span class="dropcap"> vo k t m ta mu n chuy n thnh dang drop cap. cho phong ph chng ta cng c th thm m t s cc thu c tnh nh mu n n, mu ch ,... vo cho thm sinh ng. Ta c v d nh sau: Ac dolor. Ligula nulla ac id pede sit consectetuer ipsum malesuada convallis habitant. Neque at pellentesque pharetra Aenean accumsan orci Proin leo tellus eu. Dictumst Integer ut adipiscing
Cc bi h c v CSS
porttitor dolor Morbi ut id lorem auctor. Massa tellus Morbi enim tellus pede vel suscipit hac sapien Cras. Cursus velit hendrerit lobortis elit elit sed ut In.
Cc bi h c v CSS
Trang tr cho danh sch c th t

M c nh h u h t cc trnh duy t (Browser) u hi n th ch s c a danh sch c th t (order list) theo font m c nh m chng ta s d ng cho n i dung site. Trong bi ch d n ng n ny ti xin h ng d n cc b n lm th no s d ng hai th <ol> (orderlist) v <p> thm trang tr thm cho danh sch c th t orderlist. c hnh dung r hn cc b n hy nhn vo hnh v d i y:
Chng ta s s d ng font cho cc ch s l font "Georgia", cn font cho th <p> l font Arial. V i hnh v trn chng ta c m ngu n HTML nh sau:
<ol> <li> <p>This is line one</p> </li> <li> <p>Here is line two</p> </li> <li> <p>And last line</p> </li> </ol>
D i y l m CSS cho hai th <ol> v <p>

ol { font: italic 1em Georgia, Times, serif; color: #999999; } ol p { font: normal .8em Arial, Helvetica, sans-serif; color: #000000; }
Bi vi t c t ng h p t Web Designer Wall
Cc bi h c v CSS
K thu t t i nh tr c b ng CSS
Trong file CSS c a b n c s d ng n m t s nh background, nhng nh ng nh s khng c trnh duy t t i v trong b m (cache) trn my ngay t u, m khi no s d ng n th n m i c t i v . Chnh v v y i khi n s sinh ra tr khi chng ta l n u tin khi vo trang Web. Chng ta l y m t v d nh sau: Gi s r ng trong th <a> c a b n c s d ng hai nh, m t nh lm dng hi n th ngay t u, cn m t nh khc s d ng cho thu c tnh :hover. KHi l n u tin b n vo Website khi hover chu t ln th <a> th n s khng hi n th anh th hai ngay m sau m t kho ng th i gian kho ng 2 n 3 giy sau th m i hi n ty theo t c ng truy n. kh c ph c i u chng ta c m t th thu t (tips) nh nh sau: i v i m t s nh m chng ta c n s d ng lm background trong file css, m chng ta khng mu n c tr nh v d trn th chng ta c n c bi n php t i tr c nh ng nh v my. Chng ta s t ton b cc nh m mu n t i tr c v vo trong m t th CSS nh sau:
#preLoadImages { width: 0px; height: 0px; background: url(../images/anh1.gif); background: url(../images/anh2.gif); background: url(../images/anh3.gif); ... }
B n c th trang. V d
t o n m CSS trn vo trong file CSS c a b n, ho c
t vo trong th <head> c a
<html> <head> <style type="text/css"> #preLoadImages { width: 0px; height: 0px; background: url(../images/anh1.gif); background: url(../images/anh2.gif); background: url(../images/anh3.gif); ... } </style> </head>
Cc bi h c v CSS
Sau chng ta t o n th <div id="prLoadImages"> trn vo ngay d i th <body> c a Website c a b n. Khi trnh duy t c t i th <div> n s load ton b nh ng nh c li t k trong danh sch trn vo trong b m c a trnh duy t.
<body> <div id="preLoadImages"></div> ...
Cc bi h c v CSS
Fix min-height cho IE

Hi n t i h u h t cc trnh duy t nh Firefox, Opera, Safari,... u hi u c thu c tnh minheight: trong CSS, nhng IE l i khng th hi u c thu c tnh . Chnh v v y m khi chng ta mu n t min-height cho m t i t ng no th chng ta c n ph i Fix sao cho IE hi n th c gi ng nh nh ng trnh duy t khc. Gi s r ng chng ta c m t th <div class="box"> chng ta mu n ny. Khi chng ph i lm nh sau:
/* Cho t t c cc trnh duy t */ .box { width:20em; padding:0.5em; border:1px solid #000; min-height:8em; height:auto; } /* Fix cho IE */ /*\*/ * html .box { height: 8em; } /**/
t min-height cho th <div>
Update Chng ta cng c th dng gi i php nh sau:

selector { min-height:500px; height:auto !important; height:500px; }
Do IE6 khng hi u c thu c tnh min-height do chng ta ph i c nh chi u cao cho n. Trong tr ng h p n i dung c chi u cao l n hn height th chi u cao trong IE6 s t ng ko di xu ng cn trong Firefox v m t s trnh duy t khc s s d ng thu c tnh height: auto;.
Cc bi h c v CSS
t min-width cho IE6

Nh chng ta bi t v i s pht tri n nhanh chng c a ngnh cng nghi p ph n c ng, ngy cng c nhi u mn hnh c phn gi i cao. N cho php chng ta c m t khng gian lm vi c r ng hn, nhng i khi n cng l v n b t c p i v i Website c a chng ta. i v i m t s Website v n th ng chi u ngang l auto theo chi u r ng c a mn hnh th by gi ti ngh r ng c n c m t cht thay i nh . Chng ta ch t chi u r ng Website c a mnh auto t i m t kho ng nh t nh (gi s r ng t i 1024px,...) th chng ta s c nh chi u r ng c a n. i u s gip b n ch ng hn trong vi c thi t k giao di n h a c a mnh, trnh tnh tr ng Website s b v khi chi u ngang c a mn hnh qu l n. th c hi n i u chng ta s s d ng thu c tnh max-width trong CSS, nhng c m t v n y l cc trnh duy t nh Firefox, Opera, Safari,.. th hi u nhng ring IE6 l i khng th hi u c thu c tnh ny. c th th c hi n i u trn IE6 chng ta c m t gi i php l s d ng cu l nh i u ki n c a Javascript v nhng vo CSS: content { height: 75px; background-color: #000; color: #fff; width: expression(document.body.clientWidth < 742? "740px" : document.body.clientWidth > 1202? "1200px" : "auto"); min-width: 740px; max-width: 1200px; }
Cc bi h c v CSS
CSS Transparency trn ton b cc trnh duy t

Trong bi vi t "Hi n th nh PNG trn IE" chng ti c p n v n lm sao transparent ton b nh PNG trong Website trn IE. Trong bi vi t ny chng ta s c p c p nv n lm cho transparent background c a m t th no m chng ta mu n. M t khc trong k thu t ny chng ta n thu n dng k thu t trong CSS. Chng ta s p d ng cc thu c tnh sau cho m t ph n t HTML no mu n transparent.
.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }
1. opacity: 0.5; y l m t thu c tnh r t quan tr ng b i n l m t thu c tnh chu n c a CSS. N s lm vi c trn h u h t cc phin b n c a Firefox, Opera v Safari. Thu c tnh trn r t c n thi t cho nh ng trnh duy t h tr cc thu c tnh chu n c a CSS. 2. filter:alpha(opacity=50); Thu c tnh trn c dng cho IE. 3. -moz-opacity:0.5; N c n thi t cho cc phin b n c c a Mozilla cng nh Netscape Navigator. 4. -khtml-opacity: 0.5; c dng cho phin b n c c a Safari (1.x).
Cc bi h c v CSS
Border v nh ng i u b n cha bi t
Gi s r ng ti c m t th <div class="border"> v i
div.border { display: block; width: 1px; height: 1px; background: #FFF; border-top: 1px solid #F00; border-right: 1px solid #0F0; border-bottom: 1px solid #00F; border-left: 1px solid #000; overflow: hidden; }
nh d ng CSS nh sau:
Cc b n c ngh r ng n s hi n th gi ng nhau trn m i trnh duy t hay khng? Cu tr l i c a chng ta l khng, i u ny c th b n khng tin nhng l m t th c t v c ki m tr c qua th c nghi m. N u chng ta nhn thong qua th s khng th y i u , nhng khi b n c th phng to th <div> nhi u l n th b n s th y i u . D i y l m t s k t qu th y c khi xem b ng nhi u trnh duy t khc nhau.
i khi nh ng i u ny l i lm chng ta r t au u trong vi c fix cc l i gi a cc trnh duy t. Khi b n g p tr ng h p th a ho c thi u m t pixel trn layout c a b n th khi b n hy nh t i bi vi t ny c a chng ti.
Cc bi h c v CSS
K thu t a footer xu ng cu i trang

Khi chng ta thi t k layout c a trang Web d ng b ng (table) th vi c a ph n footer lc no cng pha d i l m t vi c h t s c n gi n. Nhng khi b n lm vi c v i layout d ng <div> th vi c a ph n footer lc no cng pha d i l m t i u r t kh khn. M c d nh v y cc Designer CSS v n ngh ra c cc th thu t (trick) th c hi n vi c . Sau y chng ta s i chi ti t v th thu t ny: c m t hnh dung c th chng ta cng xem v d minh h a sau.
Tr c khi i vo chi ti t
t ng ch o c a k thu t ny l chng ta s dng m t th <div> c chi u cao l 100% y ph n footer xu ng pha d i, khi th ph n footer s b y ra ngoi ph m vi c a trang v khng th nhn th y c. c th nhn th y c ph n footer chng ta s t thu c tnh margin-bottom c a ph n wrapper b ng m v i m c ch l gi m chi u cao c a ph n wrapper m t kho ng ng b ng chi u cao c a ph n footer. T chng ta c th hon ton nhn th y ph n footer. D a trn t ng nh v y chng ta c
/* BEGIN: WRAPPER */ <div class="wrapper"> <div class="header"> <h1>CSS Sticky Footer</h1> </div> <div class="content"> N i dung content... </div> <div class="push"></div> </div> /* END: WRAPPER */ /* BEGIN: FOOTER */ <div class="footer"> <p>N i dung footer...</p> </div> /* END: FOOTER*/
nh d ng HTML nh sau:
cho ph n wrapper c chi u cao 100% chng ta sau:

.wrapper { ...
nh d ng cc thu c tnh CSS c a n nh
Cc bi h c v CSS
min-height: 100%; /* Fix cho firefox */ height: auto !important; height: 100%; ... }
Khi ph n footer s b y ra ngoi trang, margin-bottom c a ph n wrapper b ng m.

.wrapper { ... margin: 0 auto -4em; ... }
cho n c th nhn th y c ta c n ph i
Ph n margin m ny ph i c chi u cao ng b ng chi u cao c a ph n footer. Khi ph n footer s c hi n th hon ton.
Cc bi h c v CSS
t dng text vo gi a ( theo chi u cao)

T m vi th tr c t i gi khi b n mu n t m t dng ch (gi s nh) tiu vo gi a m t th HTML c t chi u cao xc nh th b n lm th no? Theo truy n th ng dng <table> th chng ta ch c t thu c tnh valign="middle" vo trong m t th <td> l xong. Nhng n u khng ph i l <td> th b n s lm th no? tr l i th c m c sau y ti xin mch n c b n m t th thu t nh trong CSS. Gi s r ng b n dng m t th HTML d ng kh i (Block Element) c chi u cao xc nh height: 100px;. By gi b n mu n t m t dng tiu c n i dung Tin m i nh t vo gi a (theo chi u cao) c a th HTML . B n c th dng thu c tnh padding y dng ch vo gi a, nhng khng ph i l gi i php ng n nh t. Trong tr ng h p ny thu c tnh line-heigh s l m t gi php t t nh t, Chng ta s dng thu c tnh line-height cho th HTML . V d
div.textcenter { margin: 0; padding: 0; height: 100px; line-height: 100px; border: 1px solid #CCCCCC; }
Cc bi h c v CSS
Hi n th
nh PNG trn IE
Hi n nh d ng nh PNG ch c h tr b i m t s trnh duy t m i nh Firefox, Opera, IE7. Cn m t s trnh duy t c nh t IE6 tr xu ng u khng h tr nh d ng nh ny. Trong bi vi t ny chng ta s dng m t s th thu t nh d ng nh PNG c th hi n th t t trong IE. Trong khun kh bi vi t chng ta s khng i su vo phn tch nguyn l cng nh l cch th c lm cho nh d ng PNG hi n th t t trn IE. M chng ta ch d ng l i cch lm t c nh ng i u trn. Trong ti li u HTML c a b n cc nh .png v n c chn vo nh thng th ng.
<img scr="test.png" alt=" nh v d " title=" nh v d " />
nh .png c th hi n th t t khi b n dng IE duy t th b n c n ph i chn file script vo trong ti li u HTML c a b n. Gi s r ng file script b n trong th m c cng c p v i ti li u HTML.
<script language="javascript" type="text/javascript" src="PieNG.js"> </script> </body>
Ti p b n copy nh blank.gif vo cng th m c v i file script.
Cc bi h c v CSS
Style cho th hr
<hr> l m t th t ng, i u c ngha l n khng c n th ng nh nh ng th HTML khc. Th <hr> s t o ra m t ng k ngang trn trnh duy t v kho ng cch gi a ng k v n i dung th ph thu c vo cc trnh duy t khc nhau. Tuy nhin b n hon ton c th thay i cch hi n th c a th <hr> theo mnh trn m t s trnh duy t. i v i m t s trnh duy t m i (IE6, IE7, Firefox, Opera, Mozilla...) th cch nh d ng c a b n hon ton c th tng thch. Trong cch nh d ng th <hr> chng ta cng c n ph i ch m t cht v cch m cch trnh duy t x l i v i i t ng th <hr>. V i Internet Explore (IE) s s d ng thu c tnh color hi n th mu c a ng k v thu c tnh background s khng c tc d ng. Tuy nhin th Mozilla(Netscape) v Opera th l i dng thu c tnh background hi n th mu c a ng k . Chng ta cng c th s d ng thu c tnh border hi n th nh d ng, nhng khng ph i l m t cch m chng ta mu n. Chng ta c o n m CSS
hr { color: red; background: red; border: 0; height: 1px; }
nh d ng th <hr> nh sau:
Thm kho ng cch gi a ng k v ph n n i dung.

thm kho ng cch gi a ng k v n i dung chng ta s dng thu c tnh margin nh kho ng cch ny.
hr { color: red; background: red; border: 0; height: 1px; margin: 10px 0 20px; }
quy
Cc bi h c v CSS
K thu t slicing door v ng d ng

i v i nh ng desiger th ng xuyn lm vi c v i CSS th k thu t Sliding Doors khng c g m i m . Nhng i v i nh ng b n m i lm quen v i CSS th ti ngh r ng y l m t k thu t m b n nn tm hi u n. K thu t Sliding Doors(k thu t c a ko), l m t k thu t c ng d ng r t nhi u trong vi c t o ra cc button, hay cc menu ngang ki u tab,Trong bi vi t ny chng ta s i tm hi u t ng ch o c a k thu t v t o ra m t v d nh c s d ng k thu t trn. Ti ch c r ng t nh t chng ta m t l n nhn th y chi c c a ko ki u nh t b n. M t bn c a c nh v m t bn c a s linh ng c th ko ra ho c ko vo ty thch. B n ch t c a k thu t Sliding Doors cng gi ng nh v y. Chng ta s chia i t ng 2 ph n(ph n bn tri v ph n bn ph i). Ph n bn tri s l ph n c nh, cn ph n bn ph i s l ph n ng(Vi c phn chia ny ty theo thch c a b n, b n c th phn chia ph n bn ph i c nh v ph n bn tri l ph n ng). i u cng c ngha l ph n bn tri s c kch th c v a ph i, cn ph n bn ph i c n c kch th c lun l n hn ho c b ng n i dung m b n d nh a vo( m b o r ng i t ng c a chng ta gi ng nh b t gy). b n c m t hnh dung r hn ti xin a ra hnh v m t t ng c a k thu t ny nh sau:
Nh trn hnh v b n th y, ph n bn tri s c nh v ph n bn ph i s c ra ho c dn vo ty theo n i dung bn trong c a i t ng c n t o. Do v y v i cch lm nh trn th chng ta c n t o ph n bn ph i c n ph i di trnh tr ng h p b thi u nh khi n i dung di. Cc b n th y khng nghe th c v gh g m nhng v b n ch t th k thu t ny ch c v y thi, nhng cc b n ng coi th ng, tuy v y nhng n kh quan tr ng v c ng d ng r t r ng ri trong vi c t o button, t o menu ki u tab, minh h a cho i u ti v a trnh by by sau y ti xin a ra m t v d c s d ng k thu t ny. Trong v d ny chng ta s t o ra m t s button theo phong cch web 2.0, v c ty bi n n i dung cao(chng ta c th thay i n i dung trong m t cch ty ). Sau y l chi ti t t ng b c lm c th .
1. T o nt b ng Photoshop
Cc bi h c v CSS
Vi c u tin chng ta c n lm l chng ta c n t o ra hnh dng chi c nt thn yu c a ta, trong v d ny ti t o ra m t nt Sign Up Now! nh sau:
2. C t nt ra thnh hai ph n.
Nh ti trnh by trn, th c hi n c k thu t ny chng ta c n ph i c t i t ng ra lm 2 ph n. c th c t hnh c chnh xc ti khuyn b n nn s d ng cng c Slice(Slice Tools) trong Adobe Photoshop. Button c a chng ta s c slice nh sau: Chng ta c n ch l ph n bn ph i c n ph i di m b o r ng khng b thi u.
3. Th c hi n vi t m HTML v CSS.
Chng ta c nh d ng m HTML nh sau:
<a href=you link title=Your title> <span>N i dung</span> </a>
Gi i thch: 1. S d chng ta c n ph i s d ng 2 ph n th HTML trong vi c ny l do i t ng c a chng ta c chia lm 2 ph n, v m i ph n t s lm nhi m v gi m t ph n c a i t ng. 2. Chng ta s dng th <a> bao ngoi cng m b o r ng ton b nt s link c khi di chu t ln trn nt. ng th i th <a> ny s ch a ph n ng bn ph i. 3. Th <span> s lm nhi m v gi ph n c nh bn tri, ng th i s c nhi m v che ph n d c a nh n n bn ph i. th a mn v i yu c u t ra chng ta c m nh d ng CSS nh sau:
/* Sign up button style */ a.sign-up { font-family: Arial, Helvetica, sans-serif; font-size: 25px; font-weight: bold; color: #FFF; text-decoration: none; margin: 0; padding: 28px 0; display: block; background: url(images/signup-right-bg.gif) no-repeat right center; width: 270px; } a.sign-up:hover, a.sign-up:active {
Cc bi h c v CSS
color: #FF0; } a.sign-up span { margin: 0; padding: 28px 0 28px 90px; background: url(images/signup-left-bg.gif) no-repeat left center; }
Cc bi h c v CSS
Cch vi t gi n l c trong CSS

N u b n l ng i th c s mu n tm hi u v CSS, th b n khng th khng tm hi u cch vi t gi n l c(shorthand) trong CSS. Cch vi t ny th c s mang l i nh ng l i ch v ti n l i khi b n s d ng CSS. Tr c khi i vo phn tch nh ng ti n l i m n mang l i, ti xin l y m t v d n gi n nh sau. Gi s r ng chng ta mu n nh d ng cho m t th <div> c ng vi n bao quanh th chng ta c n ph i vi t.
border-width: 1px; border-style: solid; border-color: #CC0000;
Thay v ph i vi t nh v y chng ta ch c n vi t
border: 1px solid #CC0000;
Qua v d Th hai
n gi n
trn ta c th th y cch vi t ny mang l i cho chng ta m t s l i ch sau.
1. Th nh t: n gip chng ta gi m thi u c ng k th i gian ph i vi t m CSS. 2. Th hai: b n c t ng t ng r ng file CSS c a b n c t i vi ngn dng v dung l ng ln t i vi trm Kb, th cch vi t ny cn gip b n gi m thi u c ng k dung l ng c a file CSS v gip b n d dng theo di hn, khi s l ng dng c a trang c gi m xu ng. Sau y ti xin i vo chi ti t m t s thu c tnh trong CSs m chng ta c th dng cch vi t gi n l c.
1. Thu c tnh Color

C r t nhi u cch nh ngha m t mu trong CSS, chng ta c th nh ngha theo h s Hexa(trong h mu RGB), ho c chng ta c th vi t tn mu (v d : white, red). Nhng cch nh ngha theo h s Hexa c s d ng thng d ng nh t. nh ngha theo h Hexa chng ta s t d u (#) tr c sau n cc thng s mu (v d : #003366). Dy cc thng s mu c chia lm 3 ph n tng ng v i ba mu Red, Green, Blue (00: Red | 33: Green | 66: Blue). Trong cch nh ngha h s mu ta cng c cch vi t gi n l c nh sau: #000000 c th vi t #000 ho c #003366 c th vi t #036
2. Thu c tnh margin v padding.

margin-top: 10px; margin-right: 15px;
Cc bi h c v CSS
margin-bottom: 20px; margin-left: 25px;
c thay th b ng
margin: 10px 15px 20px 25px; /* top | right | bottom | left */
Tng t v i thu c tnh padding

padding-top: 10px; pading-right: 15px; padding-bottom: 20px; padding-left: 25px; padding: 10px 15px 20px 25px; /* top | right | bottom | left */
C hai thu c tnh margin v padding c hai ch nh sau: n u trong tr ng h p c hai thng s .
margin: 10px 20px; /* top bottom | right left */ padding: 10px 20px; /* top bottom | right left */
Th thng s th nh t tng ng v i top v bottom cn thng s th hai tng ng v i right v left Trong tr ng h p margin v padding c 3 thng s :
margin: 10px 20px 15px; /* top | right left | bottom */ padding: 10px 20px 15px; /* top | right left | bottom */
Th thng s th nh t tng ng v i top, thng s th hai tng ng v i right v left, thng s th 3 tng ng v i bottom
3. Thu c tnh border.

border-with: 1px; border-style: solid; border-color: #CC0000;
S vi t thnh
border: 1px solid #CC0000; /* width | style | color */
4. Thu c tnh background.

background-color: #CC0000; background-image: (image url); background-repeat: no-repeat; /* repeat-x, repeat-y */ background-position: top left;
Tng ng v i
Cc bi h c v CSS
background: #CC0000 url(image url) no-repeat top left;
5. Thu c tnh font

font-size: 1em; line-height: 1.5em; font-variant:small-caps; font-weight: bold; font-style: italic; font-famyli: Arial, Verdana, Sans-serif;
D ng vi t gi n l c
font: 1em/1.5em bold italic small-caps Arial,Verdana,Sans-serif;
5. List type
list-style: none;
C ngha l
list-style-type: none;
B n cng c th s d ng thu c tnh list-style-position v list-type-image nh d ng cho danh sch khng c th t unordered lists, s d ng hnh nh cho m i dng v s d ng list-type-style l hnh vung trong tr ng h p khng hi n th c nh. V hai cch vi t d i y l nh nhau.
list-style:square inside url(image.gif);
l gi n l c cho
list-style-type: square; list-style-position: inside; list-style-image: url(image.gif);
6. Outline
Thu c tnh ny r t t dng v c r t t cc trnh duy t hi n t i h tr thu c tnh ny, hi n t i ch c m t s trnh duy t h tr thu c tnh ny Safari, OmniWeb v Opera. Cch vi t gi n l c cc thu c tnh ny nh sau:
outline-color: #000; outline-style: solid; outline-with: 2px;
Cch vi t gi n l c s l
outline: #000 solid 2px;

CSS TiengViet

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

CSS TiengViet

Загружено:

Авторское право:

Доступные форматы

Cc bi h c v CSS

m t ch no trong file css b n l i khai bo m t l n n a th <div id="vidu"> v i cc thu c tnh.

Sau o n khai bo ny th th <div id="vidu"> s c thu c tnh:

C php c a CSS c chia lm 3 ph n. ph n th ch n (selector), ph n thu c tnh (property), ph n nhn (value).

t nhn c a b n vo trong d u nhy kp

Trong tr ng h p th ch n c a b n nhi u thu c tnh th cc thu c tnh s (;).

Khi th ch n c nhi u thu c tnh th chng ta nn

trn m t dng ring bi t.

Lm sao chn CSS vo trong trang Web

1. CSS c khai bo trong file ring.

Trnh duy t s c ton b cc vn b n HTML.

nh trong file mystyle.css v

2. Chn CSS trong ti li u HTML

3. Chn tr c ti p vo th c a HTML(inline style)

nh d ng, chng ta c th g p chng l i v i nhau.

Gi ng o n m trn th c ba th h1, h2, h3

u c cng 3 thu c tnh nh trn.

c tng ho c gi m b i thu c tnh

Cn ch nh kho ng cch gi a cc dng.

Trang hong thm cho o n vn b n.

p.uppercase { text-tranform: uppercase; } p.lowercase { text-tranform: lowercase; } p.capitalize { text-tranform: capitalize;

Tng kho ng cch gi a cc t .

c tng b i thu c tnh word-spacing: kho ng cch;

Thu c tnh white-space s lm cho ton b

Cc thu c tnh c a font ch v b n

nh ngha font ch cho vn

t m t lo i font ch no cho o n vn b n th chng ta s s d ng thu c tnh fontfamily:

p.caption { font: caption; }

t kch th c font cho o n vn b n. c kch th c c a ch khc nhau, chng ta

Khi chng ta mu n nh ng o n vn b n ho c tiu c th s d ng thu c tnh font-size:

nh l i kch th c font b ng thu c tnh font-size-ajust:

t v i thu c tnh font-style:

p { font-style: italic; /* normal }

08Khai bo cc thu c tnh font

p { font: italic small-caps 900 12px arial; }

t thng s mu cho thu c tnh border-color:

t chi u r ng cho ng vi n (border) t chi u r ng c a ng vi n chng ta s t gi tr cho thu c tnh border-width:

div.borerwidth { border-width: 2px; }

STT border-style 1 none

border-top: border-right: border-bottom: border-left: u c 3 gi tr (color, width, style)

Cc thu c tnh c a margin

cho g n chng ta cng c th vi t thu c tnh margin d i d ng shorthand

Thu c tnh ng bao ngoi (Outline)

r ng cho ng bao. t r ng cho ng bao chng ta t gi tr l n cho thu c

Tng t nh ng vi n, tnh outline-width:

03Ch n ki u ng bao ch n ki u cho ng bao chng ta s

t l n l t cc gi tr cho thu c tnh outline-style:

cho g n chng ta cng c th vi t cc gi tr c a thu c tnh Outline d i d ng shorthand nh sau:

Lm th div c thanh cu n (scrollbar) gi ng iFrame

cho th <div> hi n th thanh cu n chng ta s

t thu c tnh display c a th <div> l auto

#wrapper { width: 400px; margin: 0 auto; padding: 0; }

ng bubble ny, do v y chng ta

nh d ng cho ph n khung c a tab nh sau:

nh d ng sao cho cc tab n m trn cng m t hng v c hnh dng c a tab.

nh d ng cho cc link n m trong th

ol.tab a { font-weight: bold; margin: 0; padding: 5px 10px; }

Cu i cng by gi chng ta s nh d ng ph n ch a n i dung c a m i tab. Ph n ny ch l chng ta nh d ng cho th <div> ch a n i dung.

u dng (Drop cap)

Trang tr cho danh sch c th t

D i y l m CSS cho hai th <ol> v <p>

Bi vi t c t ng h p t Web Designer Wall

t o n m CSS trn vo trong file CSS c a b n, ho c

Fix min-height cho IE