Css Tiengviet 7877

Cc bi hc v CSS
Cc bi vit c ly t cssyeah.com
Mc lc
Contents
C bn v CSS........................................................................................................... 3
I. CSS l g.............................................................................................................. 3
II. Mt s c tnh c bn ca CSS.............................................................................. 3
C php ca CSS........................................................................................................ 4
Lm sao chn CSS vo trong trang Web..........................................................................4
1. CSS c khai bo trong file ring...........................................................................5
2. Chn CSS trong ti liu HTML................................................................................ 5
3. Chn trc tip vo th ca HTML(inline style)...........................................................6
4. Nhiu Stylesheet................................................................................................... 6
Cc vn v vn bn v cch nh dng vn bn.............................................................6
t mu cho mt on vn bn................................................................................... 6
t mu nn cho on vn bn...................................................................................6
Cn chnh khong cch gia cc k t..........................................................................7
Cn chnh khong cch gia cc dng..........................................................................7
Dng hng.............................................................................................................. 7
Trang hong thm cho on vn bn............................................................................7
Chnh v tr ca on vn bn (indent).........................................................................8
iu kin cc k t trong mt on vn bn..................................................................8
t hng cho on vn bn...................................................................................... 8
Tng khong cch gia cc t..................................................................................... 8
Lm mt tc dng ca ng bao ca mt th HTML.....................................................8
Cc thuc tnh ca font ch v nh ngha font ch cho vn bn...........................................9
ng vin v cc thuc tnh ca ng vin.................................................................10
Cc thuc tnh ca margin.......................................................................................... 12
Thuc tnh ng bao ngoi (Outline)...........................................................................13
CSS padding............................................................................................................ 14
Lm th div c thanh cun (scrollbar) ging iFrame........................................................14
Style mt kiu Bubble n gin..................................................................................15
1. nh dng HTML............................................................................................... 16
2. nh dng CSS................................................................................................... 16
http://www.viet-ebook.co.cc
Trang 1
Cc bi hc v CSS
Cn bng vo gia mn hnh....................................................................................... 17

Menu dng tab - Phn I.............................................................................................. 17
K thut lm ch hoa u dng (Drop cap)....................................................................19
1. Cch th nht.................................................................................................... 19
2. Cch th hai...................................................................................................... 20
Trang tr cho danh sch c th t.................................................................................21
K thut ti nh trc bng CSS.................................................................................. 22
Fix min-height cho IE................................................................................................. 23
t min-width cho IE6............................................................................................... 24
CSS Transparency trn ton b cc trnh duyt...............................................................24
Border v nhng iu bn cha bit............................................................................25
K thut a footer xung cui trang.......................................................................25
t dng text vo gia ( theo chiu cao).........................................................................27
Hin th nh PNG trn IE........................................................................................... 28
Style cho th hr......................................................................................................... 28
Thm khong cch gia ng k v phn ni dung.....................................................29
K thut slicing door v ng dng................................................................................30
1. To nt bng Photoshop....................................................................................... 30
2. Ct nt ra thnh hai phn.....................................................................................31
3. Thc hin vit m HTML v CSS...........................................................................31
Cch vit gin lc trong CSS..................................................................................... 32
1. Thuc tnh Color................................................................................................ 32
2. Thuc tnh margin v padding............................................................................... 32
3. Thuc tnh border............................................................................................... 33
4. Thuc tnh background........................................................................................ 33
5. Thuc tnh font................................................................................................... 33
5. List type............................................................................................................ 34
6. Outline.............................................................................................................. 34
C bn v CSS
Trang 2
Cc bi hc v CSS
Trong bi m u ny chng ta s i tm hiu mt s khi nim v c tnh ca CSS, m chng

ta cn ch trong sut qu trnh lm vic vi CSS
I. CSS l g
CSS (Cascading Style Sheets) c hiu mt cch n gin l cch m chng ta thm cc
kiu hin th (font ch, kch thc, mu sc...) cho mt ti liu Web
II. Mt s c tnh c bn ca CSS

1. CSS quy nh cch hin th ca cc th HTML bng cch quy nh cc thuc tnh ca cc
th (font ch, mu sc). cho thun tin bn c th t ton b cc thuc tnh ca
th vo trong mt file ring c phn m rng l ".css"
CSS n ph v gii hn trong thit k Web, bi ch cn mt file CSS c th cho php bn
qun l nh dng v layout trn nhiu trang khc nhau. Cc nh pht trin Web c th
nh ngha sn thuc tnh ca mt s th HTML no v sau n c th dng li trn
nhiu trang khc.
2. C th khai bo CSS bng nhiu cch khc nhau. Bn c th t on CSS ca bn pha
trong th <head>...</head>, hoc ghi n ra file ring vi phn m rng ".css", ngoi ra
bn cn c th t chng trong tng th HTML ring bit
Tuy nhin ty tng cch t khc nhau m u tin ca n cng khc nhau. Mc u
tin ca CSS s theo th t sau.
1. Style t trong tng th HTML ring bit
2. Style t trong phn <head>
3. Style t trong file m rng .css
4. Style mc nh ca trnh duyt
Mc u tin s gim dn t trn xung di.
3. CSS c tnh k tha: gi s rng bn c mt th <div id="vidu"> c khai bo u
file css vi cc thuc tnh nh sau:
4. #vidu {
5.
width: 200px;
6.
height: 300px;
7. }
mt ch no trong file css bn li khai bo mt ln na th <div id="vidu"> vi cc

thuc tnh.
#vidu {
width: 400px;
background-color: #CC0000;
}
Trang 3
Cc bi hc v CSS
Sau on khai bo ny th th <div id="vidu"> s c thuc tnh:

#vidu {
width: 400px; /* ln khai bo c */
height: 300px;
}
C php ca CSS
Sau khi hiu l nm bt c mt s c tnh ca CSS chng ta tip tc i tm hiu v c php v
cch khai bo ca cc th CSS
C php ca CSS c chia lm 3 phn. phn th chn (selector), phn thuc tnh (property),
phn nhn (value).
selector {property: value}
Nu nhn ca bn c nhiu t bn nn t nhn ca bn vo trong du nhy kp

p {font-family: "sans serif"}
Trong trng hp th chn ca bn nhiu thuc tnh th cc thuc tnh s c ngn cch bi du
(;).
p {text-align:center;color:red}
Khi th chn c nhiu thuc tnh th chng ta nn mi thuc tnh trn mt dng ring bit.
p {
text-align: center;
color: black;
font-family: arial
}
Lm sao chn CSS vo trong trang Web

Bn c mt file CSS ca bn, by gi cng vic tip theo l lm th no chn nhng on
CSS ca bn vo trong trang, V xem chng hot ng nh th no. Trong phn ny chng ta s
i tm hiu chi tit v cch chn mt on style trong trang HTML hay lin kt ti mt file CSS
vit sn.
Khi trnh duyt c n CSS, th ton b Website s c nh dng theo cc thuc tnh c
khai bo trong phn CSS. C ba cch cho php chng ta chn nh dng CSS vo trong Website.
Trang 4
Cc bi hc v CSS
1. CSS c khai bo trong file ring.

Ton b m CSS c cha trong file ring c phn m rng .css l mt tng c dng khi
mt file CSS s c p dng cho nhiu trang khc nhau. Bn c th thay i cch hin th ca
ton b site m ch cn thay i mt file CSS. Trong cch ny th file CSS s c chn vo vn
bn 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 duyt s c ton b cc nh dng c quy nh trong file mystyle.css v nh dng cho
vn bn HTML.
File CSS c th c son tho bng mt s trnh duyt khc nhau. Trong file khng c cha
m HTML, khi ghi li chng ta bt buc phi ghi li vi phn m rng l .css. Gi s chng
trong file mystyle.css trn cha on m sau:
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
Khng bao gi s dng khong trng trong nhn, gi s rng nu bn dng margin-left: 20 px;
thay cho margin-left: 20px; th IE6 s hiu cn cc trnh duyt nh Firefox, Opera s khng hiu
2. Chn CSS trong ti liu HTML

Chn thng CSS trong ti liu c p dng trong trng hp nhng nh dng CSS ny ch
ginh ring cho ti liu HTML . Khi bn chn trc tip th on m ca bn phi t trong th
<style> v t trong phn <head>.
<head>
<style type="text/css">
hr {color: sienna}
</style>
</head>
C mt s trnh duyt c s khng hiu th <style>, n s b qua th ny. Tuy nhin th ni dung
trong th <style> vn hin th ra trang HTML. V vy m chng ta s phi dng nh dng ch
thch trong HTML cha phn ni dung ca th <style>.
<head>
Trang 5
Cc bi hc v CSS
<!-hr {color: sienna}

-->
</style>
</head>
3. Chn trc tip vo th ca HTML(inline style)

Inline style c s dng nhiu trong trng hp mt th HTML no cn c style ring cho
n.
Inline style c p dng cho chnh th HTML , cch ny s c u tin ln nht so vi hai
cch trn. Di y l mt v d m chng ta dng Inline style
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
4. Nhiu Stylesheet
Trong trng hp m c mt s th c cng nh dng, chng ta c th gp chng li vi nhau.
Gi s nh sau:
h1, h2, h3 {
margin-left: 10px;
font-size: 150%;
...
}
Ging on m trn th c ba th h1, h2, h3 u c cng 3 thuc tnh nh trn.
Cc vn v vn bn v cch nh dng vn bn
Thuc tnh CSS text cho php bn hon ton c th qun l c cc thuc tnh ca vn bn, bn
c th qun l c s n hin ca n, thay i mu sc, tng hoc gim khong cch gia cc k
t trong mt on, cn chnh vic dng hng (align),...
Cc thuc tnh ca text m CSS h tr
t mu cho mt on vn bn
t mu cho mt on vn bn chng ta c th dng thuc tnh: color: #m mu;
p {
color: #333333;
}
t mu nn cho on vn bn.
Trang 6
Cc bi hc v CSS
Bn c th t mu nn (background) cho on vn bn bng thuc tnh background-color:

#m mu;
p {
background-color: #FFFF00;
}
Cn chnh khong cch gia cc k t.

Khong cch gia cc k t trong mt on vn bn c th c tng hoc gim bi thuc tnh
letter-spacing: khong cch;
h3 {
letter-spacing: 2em;
}
h1 {
letter-spacing: -3em;
}
Cn chnh khong cch gia cc dng.

Thuc tnh line-height: khong cch; s gip bn cn chnh khong cch gia cc dng trong
mt on vn bn.
p {
line-height: 150%; // line-height: 15px;
}
Dng hng
ging hng cho mt on vn bn chng ta s dng thuc tnh text-align: v tr;
p {
text-align: left; /* left | center | right */
}
Trang hong thm cho on vn bn.

Mt ng gch chn hoc ng gch ngang dng vn bn s lm cho on vn bn ca bn
thm sinh ng. t im thm cho on vn bn chng ta s dng thuc tnh text-decoration:
thuc tnh;
h3 {
text-decoration: underline; /* Gch chn */
}
h2 {
text-decoration: line-through; /* Gch ngang */
}
h1 {
Trang 7
Cc bi hc v CSS
text-decoration: overline; /* k trn */

}
Chnh v tr ca on vn bn (indent).
Thuc tnh text-indent: v tr; s cn chnh v tr ca dng vn bn theo chiu ngang.
h1 {
text-indent: -2000px; /* text-indent: 30px; */
}
iu kin cc k t trong mt on vn bn.

Bn c th iu khin ton b on vn bn l ch hoa hay ch thng bi thuc tnh texttransform: kiu ch;
p.uppercase {
text-tranform: uppercase;
}
p.lowercase {
text-tranform: lowercase;
}
p.capitalize {
text-tranform: capitalize;
}
t hng cho on vn bn.

Hng ca on vn bn c th t tri qua phi hay t phi qua tri chng ta c th iu khin
bi thuc tnh direction: hng;
div.rtl {
direction: rtl; /* Right to left */
}
div.ltr {
direction: ltr; /* Left to right */
}
Tng khong cch gia cc t.

Khong cch gia cc t c th c tng bi thuc tnh word-spacing: khong cch;
word-spacing: 30px;
Lm mt tc dng ca ng bao ca mt th HTML.

lm mt tc dng ng bao ca mt th HTML chng ta dng thuc tnh white-space: gi
tr;
Trang 8
Cc bi hc v CSS
p {
white-space: nowrap;
}
Thuc tnh white-space s lm cho ton b on vn bn trn mt dng.
Cc thuc tnh ca font ch v nh ngha font ch cho vn

bn
Cc thuc tnh v font ch s cho php bn thay i h font (font family), m (boldness),
kch thc (size) v kiu font (style).
01t font cho on vn bn.
t mt loi font ch no cho on vn bn th chng ta s s dng thuc tnh fontfamily:
p {
font-family: Arial, Tahoma, Verdana, sans-serif;
}
Thng thng bn cn phi khai bo h ca font cui (trong v d trn th sans-serif l ch ti 1

h font) trong trng hp my ca ngi duyt Web khng c cc font nh mnh t th n
s ly font mc nh ca h font trn.
02t on vn bn s dng font nhn caption.
p.caption {
font: caption;
}
03t kch thc font cho on vn bn.

Khi chng ta mun nhng on vn bn hoc tiu c kch thc ca ch khc nhau, chng ta
c th s dng thuc tnh font-size:
h1 {
font-size: 20px;
}
h3 {
font-size: 12px;
}
04nh li kch thc font bng thuc tnh font-size-ajust:

p {
font-size-ajust: 0.60;
}
Trang 9
Cc bi hc v CSS
05t kiu font cho on vn bn.

Ch m, ch nghing,... c t vi thuc tnh font-style:
p {
font-style: italic; /* normal
}
italic |
oblique */
06
Mun hin th font dng small-caps hoc dng normal th chng ta s s dng thuc tnh
font-variant. Thuc tnh ny c hai gi tr normal v small-caps
p {
font-variant: normal; /* normal
}
small-caps */
07t m nht ca font.

Khi chng ta mun thay i m nht ca vn bn chng ta s dng thuc tnh font-weight:.
Chng ta c th t gi 3 loi gi tr cho thuc tnh ny 1. normal(bnh thng), 2. bold(m), 3.
300(t dng s)
h3 {
font-weight: bold;
}
08Khai bo cc thuc tnh font dng shorthand.

p {
font: italic small-caps 900 12px arial;
}
ng vin v cc thuc tnh ca ng vin

Cc thuc tnh ca ng vin (border) s cho php t cc gi tr c bit cho n vin nh
kiu ng vin, kch thc, mu sc. Thuc tnh ny s c p dng cho cc th HTML nh
<div>, <li>, <table>,...
Trong thuc tnh ng vin (border) chng ta c 3 gi tr c bn l:
1. border-color:
2. border-width:
3. border-style:
01Thuc tnh mu ca ng vin
Trang 10
Cc bi hc v CSS
t mu cho ng vin chng ta s t thng s mu cho thuc tnh border-color:

div.color {
border-color: #CC0000;
}
02t chiu rng cho ng vin (border)

Nu mun t chiu rng ca ng vin chng ta s t gi tr cho thuc tnh border-width:
div.borerwidth {
border-width: 2px;
}
STT Gi tr
1
thin
2
medium
3
thick
4
length
03Chn kiu ca ng vin
Bn c th s dng thuc tnh border-style t kiu cho ng vin. Chng ta c th gn cho
thuc tnh ny 9 gi tr khc nhau tng ng vi 9 kiu ng vin khc nhau.
div.borderstyle {
border-style: solid;
}
STT border-style
1
none
2
hidden
3
dotted
4
dashed
5
solid
6
double
7
groove
8
ridge
9
inset
10 outset
Vi 4 pha ca i tng ta c 4 thuc tnh border tng ng:
1. border-top:
2. border-right:
3. border-bottom:
4. border-left:
Trang 11
Cc bi hc v CSS
ng vi ng vin ca mi pha chng ta u c 3 gi tr (color, width, style)

STT Pha
1
2
3
4
Thuc 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 vit m gin lc (shorthand) vit cc thuc tnh ca
ng vin gn hn. Gi s chng ta t thuc tnh border ca th <div> vi rng bng 1,
kiu solid v mu l #CC0000
div.border {
border: 1px solid #CC0000;
}
Cc thuc tnh ca margin

Thuc tnh margin s nh ngha khong trng bao quanh mt phn t HTML. N c th dng
gi tr m lng ni dung vo vi nhau. Tng ng vi 4 pha ca mt phn t chng ta c 4
thuc tnh tng ng. Mt khc vit cho gn chng ta cng c th dng cch vit gin lc
nh ngha cc gi tr cho thuc tnh margin.
i vi cc trnh duyt Netcape v IE th gi tr mc nh ca thuc tnh margin l 8px. Nhng
Opera th khng h tr nh vy. cho thng nht chng ta c th t margin mc nh cho
ton b cc phn t.
Cc gi tr m thuc tnh margin c th nhn c l: auto, length, %. Chng ta t gi tr
no l ty thch cng vi vic tng ng t l vi cc phn t khc.
Tng ng vi 4 pha ta c 4 thuc tnh:
1. margin-top:
2. margin-right:
3. margin-bottom:
4. margin-left:
Trang 12
Cc bi hc v CSS
cho gn chng ta cng c th vit thuc tnh margin di dng shorthand

div.margin {
margin: 10px 4px 5px 9px; /* top
}
right
bottom
left*/
Thuc tnh ng bao ngoi (Outline)

Thuc tnh Outline s v mt ng bao ngoi ton b mt phn t HTML, i vi phn t c
ng vin (border) th ng bao ny s bao trn ng vin ca phn t . Cng tng t
nh ng vin bn c th t cho n cc thuc tnh v mu sc, ln v kiu.
C mt iu cn ch l cc thuc tnh ca ng bao ny c th khng c h tr trn IE
01t thuc mu cho ng bao
Nu mun t mu cho ng bao chng ta c th s dng thuc tnh outline-color:
p {
outline-color: #CC0000;
}
02t rng cho ng bao.

Tng t nh ng vin, t rng cho ng bao chng ta t gi tr ln cho thuc
tnh outline-width:
p {
outline-width: 2px;
}
03Chn kiu ng bao

chn kiu cho ng bao chng ta s t ln lt cc gi tr cho thuc tnh outline-style:
p {
outline-style: dotted;
}
STT outline-style
1
none
2
hidden
3
dotted
4
dashed
5
solid
6
double
7
groove
8
ridge
Trang 13
Cc bi hc v CSS
9
10
inset
outset
cho gn chng ta cng c th vit cc gi tr ca thuc tnh Outline di dng shorthand nh

sau:
div.outline {
outline: 1px solid #000;
}
CSS padding
CSS padding s nh ngha khong trng gia mp ca cc phn t ti cc phn t con hoc ni
dung bn trong. Chng ta khng th gn gi tr m cho thuc tnh ny. Cng ging nh margin
thuc tnh padding cng tng ng vi 4 pha ca phn t.
Tng ng vi 4 pha ca phn t chng ta c 4 thuc tnh padding tng ng l:
1. padding-top:
2. padding-right:
3. padding-bottom:
4. padding-left:
Cc gi tr c th gn cho cc thuc tnh ny l : % hoc length
vit cho gn chng ta cng c th vit thuc tnh padding di dng shorthand.
div.padding {
padding: 5px 3px 2px 8px;
}
Lm th div c thanh cun (scrollbar) ging iFrame

Bi vit di y s gii thiu vi cc bn cch lm cho th <div> c thanh cun ging khi ta s
dng iFrame load mt trang khc.
Trc ht chng ta c v d v on 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>
Trang 14
Cc bi hc v CSS
<body>
<div id="page">
<h1>Title</h1>
<div id="scroll_box">
<p>
Put a long text in here.
</p>
</div>
<p>
This content follows after
</p>
</div>
</body>
</html>
It
It
It
It
It
It
It
will
will
will
will
will
will
will
be
be
be
be
be
be
be
crollable.<br/>
crollable.<br/>
crollable.<br/>
crollable.<br/>
crollable.<br/>
crollable.<br/>
crollable.<br/>
the scrollable box.
By gi chng ta tin hnh style cho th <div>, trc ht chng ta cn phi t c nh chiu
rng v chiu cao ca cho th <div>
#scroll_box {
height: 120px;
width: 400px;
...
}
cho th <div> hin th thanh cun chng ta s t thuc tnh display ca th <div> l auto
#scroll_box {
height: 120px;
width: 400px;
display: auto;
border: 1px solid #CCCCCC;
margin: 1em 0;
}
Khi bn a ni dung di hn chiu cao v chiu rng ca th <div> th trnh duyt s t ng

sinh ra thanh cun ngang v thanh cun dc ging nh iFrame. K thut ny hin c kh nhiu
Website s dng c cch th hin ni dung ring bit ca mnh.
Style mt kiu Bubble n gin

Thng thng khi chng ta duyt Web, chng ta s khng ti cch trnh by ca trang Web
, m ch n thng tin ca n. Nhng nu chng ta mt cht th nhn thy rng, nu
Website no bit vn dng cc kiu Typography hp l th s gip ngi c phn bit cc mc
thng tin rt nhanh. iu s c tc ng tt i vi ngi c
gip cc bn c thi quen p dng cc kiu Typography vo trong Website ca mnh. Trong
bi vit ny ti xin hng dn cc bn lm mt kiu bubble n gin
Trang 15
Cc bi hc v CSS
Dng bubble thng c s dng trong vic trch dn li ni ca mt tc gi no , hoc trong

cc li bnh lun trong cc blog.
1. nh dng HTML
<div class="bubblewrapper">
<div class="comment">
y l v d ca mt kiu bubble n gin, cc bn c th ng dng chng vo ngay trong site
ca mnh. Chc cc bn 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 kiu bublle n gin ny chng ta s s dng hai th <div>. Th <div
class="comment"> cha li bnh lun, cn th <div class="footercomment"< s c dng cha
thng tin tc gi.
Th <div class="bubblewrapper"> trong trng hp ny c tc dng gii hn kch thc cho hai
th <div> bn trong. Khi a vo trong Website bn c th thay i kch thc ca n cho
ph hp vi ni dung Website.
2. nh dng CSS
Ta c nh dng CSS ca kiu bublle trn nh sau:
#wrapper {
width: 400px;
margin: 0 auto;
padding: 0;
}
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 {
Trang 16
Cc bi hc v CSS
color: #CC0000;
}
div.commentfooter a:hover,
div.commentfooter a:active {
text-decoration: none;
}
Trong phn ni dung do chng ta c th dng nhiu ln ng bubble ny, do vy chng ta nh

dng thuc tnh class cho th <div>
Cn bng vo gia mn hnh.

Bnh thng th bn mun t mt table c chiu rng c nh vo gia mn hnh th bn lm th
no? c phi bn t thuc tnh align="center" vo trong th <table>?. Nu bn lm nh vy th
bn ch c kt qu ng nh bn trn mt s trnh duyt, cn mt s trnh duyt s khng th
hin kt qu nh bn mun.
Sau y ti mun gii thiu vi bn mt tips nh trong CSS t mt table c kch thc c
nh vo gia trang.
Gi s rng bn c mt table nh sau: <table class="center">. Nu by gi bn mun t table
vo gia trang mn hnh bn ch vic t cho hai thuc tnh margin-left v margin-right ca
table c gi tr bng auto.
Chng ta c m CSS nh sau:
table.center {
width: 780px;
margin-left: auto;
margin-right: auto;
}
Menu dng tab - Phn I.

Trong chng ta ti gim chc rng khng cn t ngi vn cn mc cm vi nhng menu dng
tab, khng phi v n xu m lun ngh rng lm n kh v cu trc ca n rt phc tp. Chnh
bn thn ti trc y cng nh vy. Nhng thc ra c phi nh vy khng? tr li cu hi
by gi chng ta cng nhau th Style cho mt kiu tab n gin xem n c thc s kh nh
chng ta vn thng ngh khng?.
Trong menu dng ny bao gi cng gm 2 phn, phn 1 cha cc tab v phn th hai l phn
cha ni dung ca cc tab. c hnh dung r hn chng ta s xem hnh nh minh ha di
y.
u tin chng ta s nh dng cho phn khung ca tab nh sau:
Trang 17
Cc bi hc v CSS
div#wrapper {
margin: 50px;
padding: 0;
}
Chng ta s dng nh dng ca th <ol> to ln cc tab phn 1. V nguyn tc th chng ta

c th dng mt trong ba th <ul>, <ol>, <dl>. Nhng ti sao ti li dng th <ol>, l bi v mt
l do no m trnh duyt ca ngi xem khng ti c CSS t Website ca bn th h vn
hiu c cu trc tab ca bn. nh dng ca phn mt nh sau
<ol class=tab>
<li class=active>Trang ch</li>
<a href=gioithieu.html title=Gii thiu>Gii thiu</a>
<a href=sanpham.html title=Sn phm>Sn phm</a>
<a href=tintuc.html title=Tin tc>Tin tc</a>
<a href=lienhe.html title=Lin h>Lin h</a>
</ol>
By gi chng ta s nh dng sao cho cc tab nm trn cng mt hng v c hnh dng ca tab.
ol.tab {
background: url(../dot.gif) repeat-x left bottom; /* nh 1px */
list-style: none;
margin: 0;
padding: 6px 0;
position: relative;
}
ol.tab li {
background: #F2F5FA;
border: 1px solid #D3DDED;
display: inline; /* cc th li trn mt dng */
margin-right: 5px;
padding: 0;
}
Trong cch nh dng ny ta c s dng mt k thut nh, l chng ta c s dng mt nh .gif

c kch thc 1px x 1px thay th border-bottom ca <ol>
Khi ang trong trang no th tab ca trang s c mu khc vi nhng tab khc, do vy
chng ta s t cho tab mt class l active. V vy chng ta cn phi nh dng 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;
}
Tip theo chng ta s nh dng cho cc link nm trong th

ol.tab a {
Trang 18
Cc bi hc v CSS
font-weight: bold;
margin: 0;
padding: 5px 10px;
}
Cui cng by gi chng ta s nh dng phn cha ni dung ca mi tab. Phn ny ch n gin
l chng ta nh dng cho th <div> cha ni dung.
div#content {
border: 1px solid #D3DDED;
border-top: none;
padding: 10px;
}
K thut lm ch hoa u dng (Drop cap)

Drop cap l mt trong nhng typography hay c dng trong cc tp ch trn giy cng nh cc
tp ch in t. N thng c dng u mi bi bo vi font ch ln v mu sc ni tri.
Theo quy lut nhn ca mt nu mt i tng ni bt hn cc i tng xung quanh, nh n s
c tc ng mnh ti th gic ca ngi quan st. Chnh v l do m ngi ta vn thng
dng cch ny cho cc bi bo ni bt cn s ch cao.
Tuy nhin trong khun kh ca lnh vc nghin cu chng ta s i tm hiu mt s k thut lm
ch hoa u dng (Drop cap).
1. Cch th nht
u tin chng ta s i tm hiu cch lm Drop cap chnh thng. Trong cch ny chng ta s s
dng n k thut selectors trong CSS. c th l chng ta s dng n thuc tnh :first-letter.
Ta c nh dng 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 dng CSS:
p.pdropcap:first-letter {
float: left;
padding: 4px 8px 0 0;
display: block;
color: #336699;
font: 60px/50px Georgia, Times, serif;
}
Trang 19
Cc bi hc v CSS
Kt qu hin 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.
Chng ta cn phi t class cho th <p class="pdropcap"> nhm mc ch phn bit n vi cc
th <p> khc trong trang. Trong trng hp bn khng t class th ton b cc k t u dng
ca th <p> trong trang s hin th nh dng ch hoa, m iu th khng phi l iu mong
mun.
2. Cch th hai
Trong cch th hai ny ta s dng thm mt th <span class="dropcap"> bao k t ch hoa
u dng
nh dng 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>
nh dng CSS:
.dropcap {
float: left;
padding: 4px 8px 0 0;
display: block;
color: #336699;
font: 60px/50px Georgia, Times, serif;
}
Kt qu hin 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 mt u im l k t hoa c th t bt c u trong bi vit min l chng ta
thm th <span class="dropcap"> vo k t m ta mun chuyn thnh dang drop cap.
Trang 20
Cc bi hc v CSS
cho phong ph chng ta cng c th thm mt s cc thuc tnh nh mu nn, 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
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.
Trang tr cho danh sch c th t

Mc nh hu ht cc trnh duyt (Browser) u hin th ch s ca danh sch c th t (order
list) theo font mc nh m chng ta s dng cho ni dung site. Trong bi ch dn ngn ny ti
xin hng dn cc bn lm th no s dng hai th <ol> (orderlist) v <p> thm trang tr
thm cho danh sch c th t orderlist.
c hnh dung r hn cc bn hy nhn vo hnh v di y:
Chng ta s s dng font cho cc ch s l font "Georgia", cn font cho th <p> l font Arial.
Vi hnh v trn chng ta c m ngun 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>
Di y l m CSS cho hai th <ol> v <p>

ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}
ol p {
Trang 21
Cc bi hc v CSS
font: normal .8em Arial, Helvetica, sans-serif;

color: #000000;
Bi vit c tng hp t Web Designer Wall
K thut ti nh trc bng CSS

Trong file CSS ca bn c s dng n mt s nh background, nhng nhng nh s khng
c trnh duyt ti v trong b m (cache) trn my ngay t u, m khi no s dng n th
n mi c ti v. Chnh v vy i khi n s sinh ra tr khi chng ta ln u tin khi vo
trang Web.
Chng ta ly mt v d nh sau: Gi s rng trong th <a> ca bn c s dng hai nh, mt nh
lm dng hin th ngay t u, cn mt nh khc s dng cho thuc tnh :hover. KHi ln u
tin bn vo Website khi hover chut ln th <a> th n s khng hin th anh th hai ngay
m sau mt khong thi gian khong 2 n 3 giy sau th mi hin ty theo tc ng truyn.
khc phc iu chng ta c mt th thut (tips) nh nh sau:
i vi mt s nh m chng ta cn s dng lm background trong file css, m chng ta khng
mun c tr nh v d trn th chng ta cn c bin php ti trc nhng nh v my.
Chng ta s t ton b cc nh m mun ti trc v vo trong mt th CSS nh sau:
#preLoadImages {
width: 0px;
height: 0px;
background: url(../images/anh1.gif);
...
}
Bn c th t on m CSS trn vo trong file CSS ca bn, hoc t vo trong th <head> ca

trang. V d
<html>
<head>
#preLoadImages {
width: 0px;
height: 0px;
...
}
</style>
</head>
Trang 22
Cc bi hc v CSS
Sau chng ta t on th <div id="prLoadImages"> trn vo ngay di th <body> ca

Website ca bn. Khi trnh duyt c ti th <div> n s load ton b nhng nh c lit k
trong danh sch trn vo trong b m ca trnh duyt.
<body>
<div id="preLoadImages"></div>
...
Fix min-height cho IE

Hin ti hu ht cc trnh duyt nh Firefox, Opera, Safari,... u hiu c thuc tnh minheight: trong CSS, nhng IE li khng th hiu c thuc tnh . Chnh v vy m khi chng
ta mun t min-height cho mt i tng no th chng ta cn phi Fix sao cho IE hin
th c ging nh nhng trnh duyt khc.
Gi s rng chng ta c mt th <div class="box"> chng ta mun t min-height cho th <div>
ny. Khi chng phi lm nh sau:
/* Cho tt c cc trnh duyt */
.box {
width:20em;
padding:0.5em;
border:1px solid #000;
min-height:8em;
height:auto;
}
/* Fix cho IE */
/*\*/
* html .box {
height: 8em;
}
/**/
Update
Chng ta cng c th dng gii php nh sau:
selector {
min-height:500px;
height:auto !important;
height:500px;
}
Do IE6 khng hiu c thuc tnh min-height do chng ta phi c nh chiu cao cho n.
Trong trng hp ni dung c chiu cao ln hn height th chiu cao trong IE6 s t ng ko
di xung cn trong Firefox v mt s trnh duyt khc s s dng thuc tnh height: auto;.
Trang 23
Cc bi hc v CSS
t min-width cho IE6

Nh chng ta bit vi s pht trin nhanh chng ca ngnh cng nghip phn cng, ngy
cng c nhiu mn hnh c phn gii cao. N cho php chng ta c mt khng gian lm vic
rng hn, nhng i khi n cng l vn bt cp i vi Website ca chng ta.
i vi mt s Website vn thng chiu ngang l auto theo chiu rng ca mn hnh th by
gi ti ngh rng cn c mt cht thay i nh.
Chng ta ch t chiu rng Website ca mnh auto ti mt khong nht nh (gi s rng ti
1024px,...) th chng ta s c nh chiu rng ca n. iu s gip bn ch ng hn trong
vic thit k giao din ha ca mnh, trnh tnh trng Website s b v khi chiu ngang ca
mn hnh qu ln.
thc hin iu chng ta s s dng thuc tnh max-width trong CSS, nhng c mt vn
y l cc trnh duyt nh Firefox, Opera, Safari,.. th hiu nhng ring IE6 li khng th
hiu c thuc tnh ny.
c th thc hin iu trn IE6 chng ta c mt gii php l s dng cu lnh iu kin ca
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;
}
CSS Transparency trn ton b cc trnh duyt

Trong bi vit "Hin th nh PNG trn IE" chng ti cp n vn lm sao transparent
ton b nh PNG trong Website trn IE. Trong bi vit ny chng ta s cp cp n vn
lm cho transparent background ca mt th no m chng ta mun. Mt khc trong k thut
ny chng ta n thun dng k thut trong CSS.
Chng ta s p dng cc thuc tnh sau cho mt phn t HTML no mun transparent.
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
Trang 24
Cc bi hc v CSS
1. opacity: 0.5; y l mt thuc tnh rt quan trng bi n l mt thuc tnh chun ca

CSS. N s lm vic trn hu ht cc phin bn ca Firefox, Opera v Safari. Thuc tnh
trn rt cn thit cho nhng trnh duyt h tr cc thuc tnh chun ca CSS.
2. filter:alpha(opacity=50); Thuc tnh trn c dng cho IE.
3. -moz-opacity:0.5; N cn thit cho cc phin bn c ca Mozilla cng nh Netscape
Navigator.
4. -khtml-opacity: 0.5; c dng cho phin bn c ca Safari (1.x).
Border v nhng iu bn cha bit

Gi s rng ti c mt th <div class="border"> vi nh dng CSS nh sau:
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;
}
Cc bn c ngh rng n s hin th ging nhau trn mi trnh duyt hay khng?
Cu tr li ca chng ta l khng, iu ny c th bn khng tin nhng l mt thc t v
c kim trc qua thc nghim. Nu chng ta nhn thong qua th s khng thy iu , nhng
khi bn c th phng to th <div> nhiu ln th bn s thy iu . Di y l mt s kt qu
thy c khi xem bng nhiu trnh duyt khc nhau.
i khi nhng iu ny li lm chng ta rt au u trong vic fix cc li gia cc trnh duyt.
Khi bn gp trng hp tha hoc thiu mt pixel trn layout ca bn th khi bn hy nh ti
bi vit ny ca chng ti.
K thut a footer xung cui trang

Khi chng ta thit k layout ca trang Web dng bng (table) th vic a phn footer lc no
cng pha di l mt vic ht sc n gin. Nhng khi bn lm vic vi layout dng <div> th
vic a phn footer lc no cng pha di l mt iu rt kh khn. Mc d nh vy cc
Designer CSS vn ngh ra c cc th thut (trick) thc hin vic .
Sau y chng ta s i chi tit v th thut ny:
Trc khi i vo chi tit c mt hnh dung c th chng ta cng xem v d minh ha sau.
Trang 25
Cc bi hc v CSS
tng ch o ca k thut ny l chng ta s dng mt th <div> c chiu cao l 100%

y phn footer xung pha di, khi th phn footer s b y ra ngoi phm vi ca trang v
khng th nhn thy c.
c th nhn thy c phn footer chng ta s t thuc tnh margin-bottom ca phn
wrapper bng m vi mc ch l gim chiu cao ca phn wrapper mt khong ng bng chiu
cao ca phn footer. T chng ta c th hon ton nhn thy phn footer.
Da trn tng nh vy chng ta c nh dng HTML nh sau:
/* BEGIN: WRAPPER */
<div class="wrapper">
<div class="header">
<h1>CSS Sticky Footer</h1>
</div>
<div class="content">
Ni dung content...
</div>
<div class="push"></div>
</div>
/* END: WRAPPER */
/* BEGIN: FOOTER */
<div class="footer">
<p>Ni dung footer...</p>
</div>
/* END: FOOTER*/
cho phn wrapper c chiu cao 100% chng ta nh dng cc thuc tnh CSS ca n nh
sau:
.wrapper {
...
min-height: 100%; /* Fix cho firefox */
height: auto !important;
height: 100%;
...
}
Khi phn footer s b y ra ngoi trang, cho n c th nhn thy c ta cn phi t

margin-bottom ca phn wrapper bng m.
.wrapper {
...
margin: 0 auto -4em;
...
}
Phn margin m ny phi c chiu cao ng bng chiu cao ca phn footer. Khi phn footer
s c hin th hon ton.
Trang 26
Cc bi hc v CSS
t dng text vo gia ( theo chiu cao)

T trc ti gi khi bn mun t mt dng ch (gi s nh) tiu vo gia mt th HTML c
mt chiu cao xc nh th bn lm th no? Theo truyn thng dng <table> th chng ta ch
vic t thuc tnh valign="middle" vo trong mt th <td> l xong. Nhng nu khng phi l
th <td> th bn s lm th no?
tr li thc mc sau y ti xin mch nc bn mt th thut nh trong CSS.
Gi s rng bn dng mt th HTML dng khi (Block Element) c chiu cao xc nh height:
100px;. By gi bn mun t mt dng tiu c ni dung Tin mi nht vo gia (theo chiu
cao) ca th HTML .
Bn c th dng thuc tnh padding y dng ch vo gia, nhng khng phi l gii
php ng n nht. Trong trng hp ny thuc tnh line-heigh s l mt gi php tt nht,
Chng ta s dng thuc tnh line-height cho th HTML .
V d
div.textcenter {
margin: 0;
padding: 0;
height: 100px;
line-height: 100px;
border: 1px solid #CCCCCC;
}
Trang 27
Cc bi hc v CSS
Hin th nh PNG trn IE

Hin nh dng nh PNG ch c h tr bi mt s trnh duyt mi nh Firefox, Opera, IE7.
Cn mt s trnh duyt c nh t IE6 tr xung u khng h tr nh dng nh ny. Trong bi
vit ny chng ta s dng mt s th thut nh dng nh PNG c th hin th tt trong IE.
Trong khun kh bi vit chng ta s khng i su vo phn tch nguyn l cng nh l cch
thc lm cho nh dng PNG hin th tt trn IE. M chng ta ch dng li cch lm t
c nhng iu trn.
Trong ti liu HTML ca bn cc nh .png vn c chn vo nh thng thng.
<img scr="test.png" alt="nh v d" title="nh v d" />
nh .png c th hin th tt khi bn dng IE duyt th bn cn phi chn file script vo

trong ti liu HTML ca bn. Gi s rng file script bn trong th mc cng cp vi ti liu
HTML.
<script language="javascript" type="text/javascript" src="PieNG.js">
</script>
</body>
Tip bn copy nh blank.gif vo cng th mc vi file script.
Style cho th hr
<hr> l mt th t ng, iu c ngha l n khng cn th ng nh nhng th HTML khc.
Th <hr> s to ra mt ng k ngang trn trnh duyt v khong cch gia ng k v ni
dung th ph thuc vo cc trnh duyt khc nhau.
Tuy nhin bn hon ton c th thay i cch hin th ca th <hr> theo mnh trn mt s trnh
duyt. i vi mt s trnh duyt mi (IE6, IE7, Firefox, Opera, Mozilla...) th cch nh dng
ca bn hon ton c th tng thch.
Trong cch nh dng th <hr> chng ta cng cn phi ch mt cht v cch m cch trnh
duyt x l i vi i tng th <hr>. Vi Internet Explore (IE) s s dng thuc tnh color
hin th mu ca ng k v thuc tnh background s khng c tc dng. Tuy nhin th
Mozilla(Netscape) v Opera th li dng thuc tnh background hin th mu ca ng k.
Chng ta cng c th s dng thuc tnh border hin th nh dng, nhng khng phi l
mt cch m chng ta mun.
Chng ta c on m CSS nh dng th <hr> nh sau:
hr {
color: red;
background: red;
border: 0;
height: 1px;
Trang 28
Cc bi hc v CSS
Thm khong cch gia ng k v phn ni dung.

thm khong cch gia ng k v ni dung chng ta s dng thuc tnh margin quy
nh khong cch ny.
hr {
color: red;
background: red;
border: 0;
height: 1px;
margin: 10px 0 20px; }
Trang 29
Cc bi hc v CSS
K thut slicing door v ng dng

i vi nhng desiger thng xuyn lm vic vi CSS th k thut Sliding Doors khng c g
mi m. Nhng i vi nhng bn mi lm quen vi CSS th ti ngh rng y l mt k thut
m bn nn tm hiu n.
K thut Sliding Doors(k thut ca ko), l mt k thut c ng dng rt nhiu trong vic to
ra cc button, hay cc menu ngang kiu tab,Trong bi vit ny chng ta s i tm hiu tng
ch o ca k thut v to ra mt v d nh c s dng k thut trn.
Ti chc rng t nht chng ta mt ln nhn thy chic ca ko kiu nht bn. Mt bn ca c
nh v mt bn ca s linh ng c th ko ra hoc ko vo ty thch. Bn cht ca k thut
Sliding Doors cng ging nh vy.
Chng ta s chia i tng 2 phn(phn bn tri v phn bn phi). Phn bn tri s l phn c
nh, cn phn bn phi s l phn ng(Vic phn chia ny ty theo thch ca bn, bn c th
phn chia phn bn phi c nh v phn bn tri l phn ng). iu cng c ngha l phn
bn tri s c kch thc va phi, cn phn bn phi cn c kch thc lun ln hn hoc bng
ni dung m bn d nh a vo( m bo rng i tng ca chng ta ging nh b t
gy).
bn c mt hnh dung r hn ti xin a ra hnh v m t tng ca k thut ny nh sau:
Nh trn hnh v bn thy, phn bn tri s c nh v phn bn phi s c ra hoc dn vo

ty theo ni dung bn trong ca i tng cn to. Do vy vi cch lm nh trn th chng ta cn
to phn bn phi cn phi di trnh trng hp b thiu nh khi ni dung di.
Cc bn thy khng nghe th c v gh gm nhng v bn cht th k thut ny ch c vy thi,
nhng cc bn ng coi thng, tuy vy nhng n kh quan trng v c ng dng rt rng ri
trong vic to button, to menu kiu tab, minh ha cho iu ti va trnh by by sau y
ti xin a ra mt v d c s dng k thut ny.
Trong v d ny chng ta s to ra mt s button theo phong cch web 2.0, v c ty bin ni
dung cao(chng ta c th thay i ni dung trong mt cch ty ). Sau y l chi tit tng bc
lm c th.
1. To nt bng Photoshop
Vic u tin chng ta cn lm l chng ta cn to ra hnh dng chic nt thn yu ca ta,
trong v d ny ti to ra mt nt Sign Up Now! nh sau:
Trang 30
Cc bi hc v CSS
2. Ct nt ra thnh hai phn.

Nh ti trnh by trn, thc hin c k thut ny chng ta cn phi ct i tng ra
lm 2 phn. c th ct hnh c chnh xc ti khuyn bn nn s dng cng c Slice(Slice
Tools) trong Adobe Photoshop. Button ca chng ta s c slice nh sau:
Chng ta cn ch l phn bn phi cn phi di m bo rng khng b thiu.
3. Thc hin vit m HTML v CSS.

Chng ta c nh dng m HTML nh sau:
<a href=you link title=Your title>
<span>Ni dung</span>
</a>
Gii thch:
1. S d chng ta cn phi s dng 2 phn th HTML trong vic ny l do i tng ca
chng ta c chia lm 2 phn, v mi phn t s lm nhim v gi mt phn ca i
tng.
2. Chng ta s dng th <a> bao ngoi cng m bo rng ton b nt s link c khi
di chut ln trn nt. ng thi th <a> ny s cha phn ng bn phi.
3. Th <span> s lm nhim v gi phn c nh bn tri, ng thi s c nhim v che
phn d ca nh nn bn phi.
tha mn vi yu cu t ra chng ta c m nh dng 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 {
color: #FF0;
}
a.sign-up span {
margin: 0;
padding: 28px 0 28px 90px;
background: url(images/signup-left-bg.gif) no-repeat left center;
Trang 31
Cc bi hc v CSS
Trang 32
Cc bi hc v CSS
Cch vit gin lc trong CSS

Nu bn l ngi thc s mun tm hiu v CSS, th bn khng th khng tm hiu cch vit
gin lc(shorthand) trong CSS. Cch vit ny thc s mang li nhng li ch v tin li khi bn
s dng CSS.
Trc khi i vo phn tch nhng tin li m n mang li, ti xin ly mt v d n gin nh sau.
Gi s rng chng ta mun nh dng cho mt th <div> c ng vin bao quanh th chng ta
cn phi vit.
border-width: 1px;
Thay v phi vit nh vy chng ta ch cn vit

border: 1px solid #CC0000;
Qua v d n gin trn ta c th thy cch vit ny mang li cho chng ta mt s li ch sau.
Th hai
1. Th nht: n gip chng ta gim thiu c ng k thi gian phi vit m CSS.
2. Th hai: bn c tng tng rng file CSS ca bn c ti vi ngn dng v dung lng
ln ti vi trm Kb, th cch vit ny cn gip bn gim thiu c ng k dung lng
ca file CSS v gip bn d dng theo di hn, khi s lng dng ca trang c gim
xung.
Sau y ti xin i vo chi tit mt s thuc tnh trong CSs m chng ta c th dng cch vit
gin lc.
1. Thuc tnh Color

C rt nhiu cch nh ngha mt mu trong CSS, chng ta c th nh ngha theo h s
Hexa(trong h mu RGB), hoc chng ta c th vit tn mu (v d: white, red). Nhng cch
nh ngha theo h s Hexa c s dng thng dng nht. nh ngha theo h Hexa chng ta
s t du (#) trc sau n cc thng s mu (v d: #003366). Dy cc thng s mu c
chia lm 3 phn tng ng vi ba mu Red, Green, Blue (00: Red | 33: Green | 66: Blue). Trong
cch nh ngha h s mu ta cng c cch vit gin lc nh sau: #000000 c th vit #000
hoc #003366 c th vit #036
2. Thuc tnh margin v padding.

margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;
c thay th bng
Trang 33
Cc bi hc v CSS
margin: 10px 15px 20px 25px; /* top | right | bottom | left */
Tng t vi thuc 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 thuc tnh margin v padding c hai ch nh sau: nu trong trng hp c hai thng s.
margin: 10px 20px; /* top bottom | right left */
padding: 10px 20px; /* top bottom | right left */
Th thng s th nht tng ng vi top v bottom cn thng s th hai tng ng vi

right v left
Trong trng hp 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 nht tng ng vi top, thng s th hai tng ng vi right v left,

thng s th 3 tng ng vi bottom
3. Thuc tnh border.

border-with: 1px;
S vit thnh
border: 1px solid #CC0000; /* width | style | color */
4. Thuc tnh background.

background-image: (image url);
background-repeat: no-repeat; /* repeat-x, repeat-y */
background-position: top left;
Tng ng vi
background: #CC0000 url(image url) no-repeat top left;
5. Thuc tnh font

font-size: 1em;
line-height: 1.5em;
Trang 34
Cc bi hc v CSS
font-variant:small-caps;
font-weight: bold;
font-style: italic;
font-famyli: Arial, Verdana, Sans-serif;
Dng vit gin lc

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;
Bn cng c th s dng thuc tnh list-style-position v list-type-image nh dng cho danh

sch khng c th t unordered lists, s dng hnh nh cho mi dng v s dng list-type-style
l hnh vung trong trng hp khng hin th c nh. V hai cch vit di y l nh nhau.
list-style:square inside url(image.gif);
l gin lc cho
list-style-type: square;
list-style-position: inside;
list-style-image: url(image.gif);
6. Outline
Thuc tnh ny rt t dng v c rt t cc trnh duyt hin ti h tr thuc tnh ny, hin ti ch c
mt s trnh duyt h tr thuc tnh ny Safari, OmniWeb v Opera. Cch vit gin lc cc
thuc tnh ny nh sau:
outline-color: #000;
outline-style: solid;
outline-with: 2px;
Cch vit gin lc s l

outline: #000 solid 2px;
Trang 35

Css Tiengviet 7877

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css Tiengviet 7877

Uploaded by

Copyright:

Available Formats

Cc bi hc v CSS

Cn bng vo gia mn hnh....................................................................................... 17

Trong bi m u ny chng ta s i tm hiu mt s khi nim v c tnh ca CSS, m chng

II. Mt s c tnh c bn ca CSS

mt ch no trong file css bn li khai bo mt ln na th <div id="vidu"> vi cc

Sau on khai bo ny th th <div id="vidu"> s c thuc tnh:

Nu nhn ca bn c nhiu t bn nn t nhn ca bn vo trong du nhy kp

Lm sao chn CSS vo trong trang Web

1. CSS c khai bo trong file ring.

2. Chn CSS trong ti liu HTML

<!-hr {color: sienna}

3. Chn trc tip vo th ca HTML(inline style)

Ging on m trn th c ba th h1, h2, h3 u c cng 3 thuc tnh nh trn.

Bn c th t mu nn (background) cho on vn bn bng thuc tnh background-color:

Cn chnh khong cch gia cc k t.

Cn chnh khong cch gia cc dng.

Trang hong thm cho on vn bn.

text-decoration: overline; /* k trn */

iu kin cc k t trong mt on vn bn.

t hng cho on vn bn.

Tng khong cch gia cc t.

Lm mt tc dng ca ng bao ca mt th HTML.

Thuc tnh white-space s lm cho ton b on vn bn trn mt dng.

Cc thuc tnh ca font ch v nh ngha font ch cho vn

Thng thng bn cn phi khai bo h ca font cui (trong v d trn th sans-serif l ch ti 1

03t kch thc font cho on vn bn.

04nh li kch thc font bng thuc tnh font-size-ajust:

05t kiu font cho on vn bn.

07t m nht ca font.

08Khai bo cc thuc tnh font dng shorthand.

ng vin v cc thuc tnh ca ng vin

t mu cho ng vin chng ta s t thng s mu cho thuc tnh border-color:

02t chiu rng cho ng vin (border)

ng vi ng vin ca mi pha chng ta u c 3 gi tr (color, width, style)

Cc thuc tnh ca margin

cho gn chng ta cng c th vit thuc tnh margin di dng shorthand

Thuc tnh ng bao ngoi (Outline)

02t rng cho ng bao.

03Chn kiu ng bao

cho gn chng ta cng c th vit cc gi tr ca thuc tnh Outline di dng shorthand nh

Lm th div c thanh cun (scrollbar) ging iFrame

the scrollable box.

Khi bn a ni dung di hn chiu cao v chiu rng ca th <div> th trnh duyt s t ng

Style mt kiu Bubble n gin

Dng bubble thng c s dng trong vic trch dn li ni ca mt tc gi no , hoc trong

Trong phn ni dung do chng ta c th dng nhiu ln ng bubble ny, do vy chng ta nh

Cn bng vo gia mn hnh.

Menu dng tab - Phn I.

Chng ta s dng nh dng ca th <ol> to ln cc tab phn 1. V nguyn tc th chng ta

Trong cch nh dng ny ta c s dng mt k thut nh, l chng ta c s dng mt nh .gif

Tip theo chng ta s nh dng cho cc link nm trong th

K thut lm ch hoa u dng (Drop cap)

cho phong ph chng ta cng c th thm mt s cc thuc tnh nh mu nn, mu ch,...

Trang tr cho danh sch c th t

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

font: normal .8em Arial, Helvetica, sans-serif;

Bi vit c tng hp t Web Designer Wall

K thut ti nh trc bng CSS

Bn c th t on m CSS trn vo trong file CSS ca bn, hoc t vo trong th <head> ca

Sau chng ta t on th <div id="prLoadImages"> trn vo ngay di th <body> ca

Fix min-height cho IE

t min-width cho IE6

CSS Transparency trn ton b cc trnh duyt

1. opacity: 0.5; y l mt thuc tnh rt quan trng bi n l mt thuc tnh chun ca