Tai Lieu Css

Gii thiu CSS
www.dohoavn.net | http://dohoavn.vn
Ti liu do killer su tm
Phn cc bi hc ny s mang ti cho bn mt s kin thc khc to cho Website c thm
mt phong cch hay mt kiu cch thng nht m bn khng phi mt nhiu thi gian v cng
sc chinh sa trn nhiu trang Web ca bn.
Kin thc tin quyt
Truc khi tp trung nghin cu v CSS bn cn nm vng cc kin thc v:
WWW, HTML v cc khi nim co bn v xy dung Website.
Tha thun vi ngi c
cho bn khng hiu lm mt s t ng chuyn mn, v th chng ti s gi nguyn bn cc
cum t thut ng ting Anh( V d: HTML, Style Sheet, Head, p,...) nhng cum t ny s c
gii thch ngha ngay khi bn c chng ln u tin trong ti liu ny.
CSS l g
CSS thay th cho mt cum t ting Anh l "Cascading Style Sheet"
Styles jnh ngha cch cc thnh phn HTML hin thj nhu th no.
Cc Styles thng thung uoc luu tr trong mt Style Sheets
Cc Style uoc uoc thm vo t cng b HTML bn 4.0
C ba cch chn Style: 1.External Style Sheets 2.nternal Style Sheets v 3.nline Style
nhng gii thch v cc loi ny dui.
External Style Sheets c th tit kim uoc nhiu thi gian cho cng vic ca bn.
External Style Sheets uoc luu trong nhng tp c phn m rng l CSS.
Nhiu jnh ngha Style trong mt tp th uoc gi l Cascade(xp lp) Style Sheet.
!" #hng CSS
Vi CSS, vn bn HTML ca bn c th uoc hin thj vi rt nhiu kiu dng khc nhau.
Mi bn xem bi ....Cc bi m phng CSS.
Styl$ gi%i quyt nh&ng v'n ( chung
Th HTML khi u uoc thit k jnh ngha ni dung ca mt vn bn. Chng uoc h tro
m t cho trinh duyt hiu v th hin ngha nhu "y l mt Dng u trang", "y l mt
on", "y l mt bng",... bng cch s dung nhng th nhu <h1>, <p>,<table> v.v..Vic phc
tho vn bn uoc h tro bi trnh duyt m khng c bt c mt th jnh dng no.
Vi hai trnh duyt chnh l Netscape v nternet Explorer tip ua thm nhng th HTML mi v
nhng thuc tnh(ging nhu th <font> v cc thuc tnh ging nhu mu sc) cho chi jnh HTML
ban u th vic to ra cc Website cng kh khn hon, noi m ni dung ca vn bn HTML
ngy cng phn chia i vi th hin ca giao din trang.
gii quyt vn ny, W3C to ra STYLES thm vo HTML 4.0

C hai trnh duyt Netscape 4.0 v E 4.0 u h tro cc CSS.
Styl$ Sh$$t c) th* tit +i, -'t nhi(u c"ng .c l, vic
c/a 01n
Cc Style trong HTML 4.0 jnh ngha cc thnh phn HTML hin thj nhu th no, ging nhu
thuc tnh ca th font v color trong HTML 3.2. Cc Style thng thung uoc luu trong nhng
file bn ngoi ca vn bn HTML. "External style sheets" hay Style Sheet Ngoi cho php bn
thay i dng v bn ngoi ca cc trang Web chi vi vic son tho mt tp CSS on l. Nu
nhu bn th thay i phng ch v mu sc cho cc dng tiu cho mt vn bn di trong
trang Web ca bn, bn s hiu CSS c th tit kim cng sc ca bn nhu th no.
CSS l mt soi chi xuyn sut trong thit k Web bi v n cho php ngui pht trin kim sot
kiu cch v su sp t ca nhiu trang mt ln. to ra su thay i mang tnh tng th, on
gin l bn chi cn thay i Style v tt c cc thnh phn khc(m nhn Style ny) s tu ng
cp nht theo.
2hi(u Styl$ c) th* 3# l# t-4ng ,5t
Style Sheet cho php thng tin uoc xc jnh theo rt nhiu cch. Cc Style c th uoc xc
jnh bn trong mt thnh phn HTML on, bn trong thnh phn <head> ca mt trang HTML,
hoc trong mt file CSS bn ngoi. Thm ch nhiu Style Sheet bn ngoi c th uoc tham
chiu trong mt ti liu HTML on.

Th t6 3# l#
Style no s uoc s dung khi c hon mt style uoc chi jnh cho mt thnh phn HTML?
What style will be used when there is more than one style specified for an HTML element?
Thng thung ni rng chng ta c th pht biu l tt c cc style s "xp chng" vo trong mt
Style Sheet "o" mi bng nhng lut sau, noi m Style vj tr th tu c quyn uu tin cao nht:
1. Theo mc jnh ca trnh duyt.
2. Style Sheet bn ngoi.
3. Style Sheet bn trong.(bn trong cp th <head>)
4. Style ni tuyn.(bn trong cc thnh phn HTML)
V th, mt Style ni tuyn c quyn uu tin l cao nht, iu c ngha l n s trm ln tt c
cc style uoc khai bo bn trong th <head>, trong mt Style Sheet bn ngoi v gi trj mc
jnh ca Browser.
C7 #h8# CSS
C7 #h8#
C php ca mt CSS uoc to nn t ba phn: mt "b chn - selector", mt "thuc tnh -
property" v mt "gi trj - value":
b trn{thuc tnh:gi trj}
"b chn" thng thung l cc phn t/th HTML m bn mun chi jnh, thuc tnh l cc tnh
cht m bn mun thay i, v mi thuc tnh c th mang uoc mt gi trj. Thuc tnh v gi trj
uoc phn cch bi mt du ":" v uoc bao bi mt du mc nhn.
V d:
bod!"olor:bla"k#
th:
body: l "B chn".
color: l "thuc tnh".
black: l "value"

Nu gi trj c mt chui cc t lin tip chi ra mt tn no , ta phi t chng trong du
nhy kp nhu th ny "...", V d:
p {font-family: "sans serif " }
v phng ch c tn l "sans serif" v bn cht l c khong trng gia t "sans" v "serif" v th
phi uoc t trong nhy kp.
$u %: Nu bn mun chi jnh nhiu hon mt thuc tnh, bn phi phn cch mi mt thuc
tnh bng mt du chm phy. V du dui y chi ra cch lm th no jnh ngha mt phn
on uoc cn gia vi dng ch c mu
p {text-align:center;color:red}
to ra nhng jnh ngha v style d c hon, bn c th m t mi thuc tnh trn mt dng
ging nhu sau:
p
{
text-align: center;
color: black;
font-family: arial
}
2h), c8c #h9n t: vi nhau;G-4u#ing<
Bn c th nhm cc b chn. Phn cch mi b chn bng mt du chm phy. Trong v du
dui y chng ta nhm tt c cc thnh phn "Header". Mi mt thnh phn header s c mu
xanh l cy:
h1,h2,h3,h4,h5,h6
{
color: green
}

=5 chn >#;Th$ cla.. S$l$ct4-<
Vi mt "b chn lp" bn c th jnh ngha cc style khc nhau cho cng mt kiu thnh phn
HTML. iu ny ni nn rng nu nhu bn mun c hai kiu ca phn on trong vn bn: mt
on cn phi, mt on cn gia. y l nhng g bn c th lm vi nhng kiu :
p.right {text-align: right}
p.center {text-align: center}
Bn phi s dung "thuc tnh lp" trong vn bn HTML ca bn:

<p class="right">
Phan doan nay se can ben phai.
</p>
<p class="center">
Phn on ny s cn gia.
</p>
$u %: Chi mt thuc tnh lp c th uoc chi jnh trn mt thnh phn HTML! V du dui
y l sai(v c 2 lp trn mt phn t "p")

<p class="right" class="center">
This is a paragraph.
</p>
Bn c th cng c th b qua tn th trong b trn jnh ngha mt style ci m s uoc s
dung bi tt c cc thnh phn trong HTML m c mt trong mt lp no . Trong v du pha
dui, tt c cc thnh phn HTML vi class="center" s uoc cn gia:
.center {text-align: center}
Trong on m pha dui th thnh phn "h1" v thnh phn "p" c class="center". iu ny c
ngha l c hai phn t s tun theo nhng lut trong b chn ".center":
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
=5 chn !?;Th$ i@ S$l$ct4-<
B chn m th khc vi b chn lp. Trong khi mt b chn lp c th ng dung cho mt vi
phn t trong mt trang, th mt b trn m lun lun p dung cho chi mt phn t
Mt thuc tnh D(m s) phi l duy nht bn trong mt vn bn
Lut v style pha dui s tuong ng vi mt phn t "p" m c gi trj id l "para1":
p#para1
{
text-align: center;
color: red
}
Lut v style pha dui s tuong ng vi phn t u tin m c gi trj id l "wer345":
*#wer345 {color: green}
Lut trn s tuong ng vi thnh phn h1 ny:
<h1 id="wer345">Some text</h1>
Lut dui y s tuong ng vi mt thnh phn p m c gi trj id l "wer345":
p#wer345 {color: green}
Lut trn y s khng p ng vi thnh phn h2:
<h2 id="wer345">Some text</h2>

>i ch7 thAch t-4ng CSS
Bn c th chn mt on ch thch gii thch muc ch on m ca bn, n c th gip goi
nh li cho bn sau nhiu ngy lm vic. Mt li ch thch s khng uoc trnh duyt hin thj.
Mt li ch thch ca CSS bt u bng du "/*" v kt thc bng du "*/", ging nhu nhng
dng ch mu th ny:
/* y l dng ch thch */
p
{
text-align: center;
/* y l dng ch thch khc */
color: black;
font-family: arial
}

CSS l, th n4BBB
>, th n4 * chCn ,5t Styl$ Sh$$t
Khi mt trnh duyt c mt style sheet, n s jnh dng vn bn theo cc quy jnh c trong
Style Sheet . C ba cch chn mt Style Sheet:
Styl$ Sh$$t 2g4i
Mt Style Sheet ngoi l l tung khi style uoc ng dung cho nhiu trang. Vi mt Style
Sheet ngoi, bn c th thay i cch nhn ca ton b mt Website chi cn vi mt file thay i.
Mi trang mun lin kt vi Style Sheet cn phi s dung th <link>. Th <link> ng bn trong
on <head>...</head>:

<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
Trnh duyt s c chi jnh v style t file "mystyle.css", v jnh dng vn bn theo file ny.
Mt Style Sheet Ngoi c th uoc vit trong mt b son tho vn bn no . Tp khng
uoc cha cc th html. Style Sheet ca bn nn uoc luu li vi phn m rng l
"tnfile.css". Mt v du v mt tp Style Sheet uoc biu din pha dui:
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
$u %: ng khong trng gia gi trj ca thuc tnh v on vj! Nu bn s dung cu
lnh:
"margin-left:10 px" thay v "margin-left: 10px"
th n s chi lm vic mt cch hop l trong trnh duyt nternet Explorer 6 nhung n s khng
lm vic trong hai trnh duyt Moilla hoc Netscape.
Styl$ Sh$$t T-4ng
Mt Style Sheet Trong cn phi uoc s dung khi mt vn bn on c mt style duy nht. Bn
jnh ngha cc Style Trong bn trong phn u bng cch s dung th <style> ging nhu th
ny:
<head>
<style type="text/css">
hr
{
color: sienna
}
p
{
margin-left: 20px
}
body {
background-image: url("images/back40.gif")
}
</style>
</head>
Trnh duyt lc ny s c cc chi jnh style, v jnh dng vn bn theo cc chi jnh trong .

$u %: Mt trnh duyt thng thung th s b qua nhng th m n khng hiu. iu ny c
ngha l mt trnh duyt phin bn c m khng h tro cc Style, s b qua cc th <style>,
nhung ni dung ca th <style> s hin thj trn trang. C th ngn cn mt trnh duyt c hin thj
ni dung bng cch n n trong thnh phn gii thch ca HTML.
<head>
<style type="text/css">

</style>
</head>

Styl$ 25i tuyn;Dnlin$ Styl$.<
Mt Style ni tuyn mt rt nhiu uu im ca cc Style Sheet bnh thung bi vic trn ln ni
dung vi vic th hin. S dung phuong php tit kim ny, ging nhu khi mt style uoc p
dung cho mt su kin ring l ca mt thnh phn.
s dung cc Style ni tuyn bn s dung thuc tnh style trong th c lin quan. Thuc tnh
th c th bao gm bt c mu CSS no. V du dui y s ua ra cch lm th no thay i
mu v vic cn tri cho mt on:
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
Khi mt trang chju nhiu hiu ng Style Sheets(Multiple Style Sheets)
Nu mt vi thuc tnh cng uoc thit lp cho cng b chn vi style sheets khc nhau, gi trj
s uoc k tha nhiu hon t cc chi jnh .
V d, mt Style sheet Ngoi c nhng thuc tnh cho b chn h3 nhu sau:
h3
{
color: red;
text-align: left;
font-sie: pt
}

V mt Style Sheet Trong cng c cc cc thuc tnh cho b chn h3 nhu sau:
h3
{
text-align: right;
font-sie: 20pt
}
And an internal style sheet has these properties for the h3 selector:
h3
{
text-align: right;
font-sie: 20pt
}
Nu trang Web uoc thit lp Style Sheet Trong m ng thi cng gi Style Sheet Ngoi th
thuc tnh chung cho h3 s l:
color: red;
text-align: right;
font-sie: 20pt
Mu cho h3 s k tha t Style Sheet Ngoi v cc thuc tnh text-alignment v font-sie s thay
th bi Style Sheet Trong(ng theo tnh cht uu tin)
C8c thu5c tAnh =4-@$- t-4ng
CSS

&'" thu(" tnh )order tron* &++ ,-nh n*h.a ,/n* bao0 bi1n2 3un* 4uanh m(t thnh
phn.
C8c vA @EF
Thit lp kiu cch ca bn ung bao
V du ny m phng lm th no thit lp kiu cch ca bn ung bao
Thit lp cc ung bao khc nhau trn mi cnh
V du ny m t lm th no thit lp cc ung bao khc nhau trn mi cnh ca phn t
Thit lp mu ca bn ung bao
V du ny m t lm th no thit lp mu ca bn ung bao. N c th thit lp t cnh th
nht n cnh th bn.
Thit lp rng ca ung bao y
V du ny m t lm th no thit lp rng ca ung bao y
Thit lp rng ca ung bao tri
V du ny m t lm th no thit lp rng ca ung bao bn tri
Thit lp rng ca ung bao phi
V du ny m t lm th no thit lp rng ca ung bao bn phi. Tuong tu nhu thuc
tnh borderleftwidth. em cch dng bng thuc tnh pha dui.
Thit lp rng ca ung bao inh
V du ny m t lm th no thit lp rng ca ung bao inh
Tt c cc thuc tnh ung bao y trong mt khai bo
V du ny m t mt thuc tnh nhanh chng thit lp tt c cc thuc tnh cho ung bao y
trong mt khai bo.
Tt c cc thuc tnh ung bao tri trong mt khai bo
V du ny m t mt thuc tnh nhanh chng thit lp tt c cc thuc tnh cho ung bao tri
trong mt khai bo
Tt c cc thuc tnh ung bao phi trong mt khai bo
V du ny m t mt thuc tnh nhanh chng thit lp tt c cc thuc tnh cho ung bao tri
trong mt khai bo
Tt c cc thuc tnh ung bao inh trong mt khai bo
V du ny m t mt thuc tnh nhanh chng thit lp tt c cc thuc tnh cho ung bao
inh trong mt khai bo
Tt c cc thuc tnh v rng ca ung bao trong mt khai bo
V du ny m t mt thuc tnh nhanh chng thit lp tt c cc thuc tnh cho rng ung
bao trong mt khai bo, c th thit lp cho t mt n bn ung bao.
Tt c cc thuc tnh ung bao trong mt khai bo
V du ny m t mt thuc tnh nhanh chng thit lp tt c cc thuc tnh cho bn ung bao
y trong mt khai bo, c th thit lp cho t mt n bn ung bao.
C8c ng 0a4 t-4ng CSS
Thuc tnh Border cho php bn chi jnh kiu cch, mu sc v rng ca ung bao ca mt
thnh phn. Trong HTML chng ta s dung bng to ra cc ung bao xung quanh mt vn
bn, nhung vi cc thuc tnh Border trong CSS chng ta c th to cc ung bao vi hiu ng
p v n c th ng dung cho phn t bt k.
Thu5c tAnh =4-@$-F
55: Netscape, 67: nternet Explorer, 89&: Web Standard
Thu(" tnh :; t< V d 55 67 89&
border Mt thuc tnh tc hnh
thit lp thuc tnh cho ton
b c 4 ung bao trong mt
khai bo.
border-width
border-style
border-color
4.0 4.0 CSS1
border-bottom Mt thuc tnh tc hnh
thit lp thuc tnh cho
ung bao y trong mt
khai bo.
border-bottom-width
border-style
border-color
6.0 4.0 CSS1
border-bottom-color Thit lp mu sc ca ung
bao y
border-color 6.0 4.0 CSS2
border-bottom-style Thit lp kiu cch ca
ung bao y.
border-style 6.0 4.0 CSS2
border-bottom-width Thit lp rng ca ung
bao y
thin
medium
thick
length
4.0 4.0 CSS1
border-color Thit lp mu sc ca bn
ung bao, c th t mu
t mt n bn.
color 6.0 4.0 CSS1
border-left Mt thuc tnh tc hnh
ung bao tri trong mt
khai bo.
border-left-width
border-style
border-color
6.0 4.0 CSS1
border-left-color Thit lp mu sc ca ung
bao tri.
border-left-style Thit lp kiu cch ca
ung bao tri.
border-left-width Thit lp rng ca ung
bao tri.
thin
medium
thick
length
4.0 4.0 CSS1
border-right Mt thuc tnh tc hnh
ung bao phi trong mt
khai bo.
border-right-width
border-style
border-color
6.0 4.0 CSS1
border-right-color Thit lp mu sc ca ung
bao phi.
border-right-style Thit lp kiu cch ca
ung bao phi.
border-right-width Thit lp rng ca ung
bao phi.
thin
medium
thick
length
4.0 4.0 CSS1
border-style Thit lp kiu cch ca c
bn ung bao, c th t
uoc kiu t mt n bn.
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
6.0 4.0 CSS1
border-top Mt thuc tnh tc hnh
ung bao inh trong mt
khai bo.
border-top-width
border-style
border-color
6.0 4.0 CSS1
border-top-color Thit lp mu sc ca ung border-color 6.0 4.0 CSS2
bao inh.
border-top-style Thit lp kiu cch ca
ung bao inh.
border-top-width Thit lp rng ca ung
bao inh
thin
medium
thick
length
4.0 4.0 CSS1
border-width Mt thuc tnh tc hnh
thit lp rng ca
bn ung bao trong mt
khai bo, c th c t mt
n bn gi trj.
thin
medium
thick
length
4.0 4.0 CSS1
Thu5c tAnh G4nt t-4ng CSS

Thu(" tnh ph;n* tron* &++ 3'" ,-nh ph;n* "h= tron* v>n b<n
HA @E
Thit lp phng ch trong mt vn bn
V du ny m phng mt phng ch uoc thit lp nhu th no.
Thit lp kch c cho phng ch
V du ny m phng thit lp kch c phng ch nhu th no.
Thit lp kiu cch ca phng ch
V du ny m phng thit lp kiu cch phng ch nhu th no.
Thit lp bin th ca phng
V du ny m phng cch thit lp cc bin th ca phng ch nhu th no.
Thit lp ung bao ca phng ch
V du ny m phng thit lp m ca phng ch nhu th no.
Tt c thuc tnh trong mt khai bo.
V du ny m phng s dung thuc tnh tc hnh thit lp thuc tnh cho tt c cc phng ch
trong mt khai bo nhu th no.
C8c #h"ng t-4ng CSS
Thuc tnh ont cho php bn thay i h phng, m, kch c v kiu cch phng ch ca
vn bn.
C8c >u I J !K4 h&u Ach
Cc Phng ch th uoc xc jnh bi tn ca chng trong CSS1. Luu rng nu mt trnh duyt
khng h tro thuc tnh phng uoc chi jnh th n s s dung phng mc jnh.
Thu5c tAnh G4ntF
55: Netscape, 67: nternet Explorer, 89&: Chun Web
Thu(" tnh :; t< ?i' tr- 55 67 89&
font Mt thuc tnh nh thit
lp tt c thuc tnh cho mt
phng trong mt khai bo.
font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
4.0 4.0 CSS1
font-family Mt danh sch uu tin ca
cc h phng cho mt thnh
phn.
family-name
generic-family
4.0 3.0 CSS1
font-sie Thit lp kch c cho mt
phng ch.
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
4.0 3.0 CSS1
font-stretch Nhng rt gn hoc m
rng ca phng.
normal
wider

CSS2
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
font-style Thit lp kiu cch ca
phng.
normal
italic
oblique
4.0 4.0 CSS1
font-variant Hin thj vn bn trong mt
phng ch HA NH hoc
mt phng ch thung.
normal
small-caps
6.0 4.0 CSS1
font-weight Thit lp trng luong ca
phng.
normal
bold
bolder
lighter
100
200
300
400
500
600
00
00
00
4.0 4.0 CSS1
Thu5c tAnh >i.t t-4ng CSS
Thu(" tnh $ist "ho ph@p bAn tha ,Bi *i=a "'" ,iCmD,'nhDdEuDm"DdanhDs'"h kh'"
nhauF thiGt lHp m(t <nh nh m(t ,iCmD,'nhDdEuDm"DdanhDs'"h v thiGt lHp nIi ,C ,Jt
,iCmD,'nhDdEuDm"DdanhDs'"h.
HA @E
Cc imnhdu muc khc nhau trong mt danh sch khng c th tu
V du ny m t cc imnhdumucdanhsch khc nhau trong CSS
Cc imnhdu muc khc nhau trong mt danh sch c th tu
V du ny m t cc imnhdumucdanhsch khc nhau trong CSS
Thit lp mt nh nhu imnhdumucdanhsch
V du ny m phng cch thit lp mt nh nhu mt imnhdumucdanhsch
t mt imnhdumucdanhsch
V du ny m phng noi t ch cho im nh du muc danh sch
Tt c cc thuc tnh danh sch trong mt khai bo
V du ny m t mt cch nhanh chng thit lp cho ton b cc thuc tnh cho mt danh
sch trong mt khai bo.
Thu5c tAnh c/a Lanh .8ch
55: Netscape, 67: nternet Explorer, 89&: Chun Web
Thu(" tnh :; t< ?i' tr- 55 67 89&
list-style A shorthand property for setting all
of the properties for a list in one
declaration
Mt thuc tnh ngn gn thit
lp cho ton b thuc tnh ca
danh sch trong mt khai bo
list-style-type
list-style-position
list-style-image
6.0 4.0 CSS1
list-style-image Sets an image as the list-item
marker
Thit lp mt nh nhu mt
imnhdumucdanhsch.
none
url
6.0 4.0 CSS1
list-style-position Places the list-item marker in the
list
t mt
imnhdumucdanhsch
trong danh sch.
inside
outside
6.0 4.0 CSS1
list-style-type Sets the type of the list-item
marker
Thit lp kiu ca
imnhdumucdanhsch.
none
disc
circle
square
decimal
decimal-leading-
ero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
ck-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
4.0 4.0 CSS1
marker-offset

auto
length

CSS2
Thu5c tAnh T$3t t-4ng CSS

Thu(" tnh Te3t tron* &++ 3'" ,-nh din mAo "Ka v>n b<n.

HA @E
Thit lp mu ca vn bn
V du ny m t lm th no thit lp mu ca vn bn
Thit lp mu nn ca vn bn
V du ny m t lm th no thit lp mu nn ca mt phn ca vn bn
Chi jnh khong cch gia cc k tu
V du ny m t lm th no tng hoc gim khong trng gia cc k tu
Cn vn bn
V du ny m t lm th no cn chinh vn bn
Trang tr cho vn bn
V du ny m t lm th no thm trang tr cho vn bn.
Thut u dng vn bn
V du ny m t lm th no thut u dng u tin ca mt on
Kim sot ch trong vn bn
V du ny m t lm th no kim sot ch trong mt vn bn
T$3t t-4ng CSS
Thuc tnh Text cho php bn kim sot din mo ca vn bn. N cng c th thay i mu ca
vn bn, tng hoc gim khong cch gia cc k tu trong mt vn bn, cn chinh mt vn bn,
trang tr cho vn bn, thut dng u tin v nhiu hiu ng khc.
Thu5c tAnh T$3t
Thu5c tAnh !" t% Gi8 t-M +h% @N 22 DO PQC
color Thit lp mu cho ch color 4.0 3.0 CSS1
direction Thit lp hung cho ch
ltr
rtl

CSS2
letter-spacing
Tng hoc gim khong trng gia
cc k tu
normal
length
6.0 4.0 CSS1
text-align
Cn chinh vn bn trong mt thnh
phn
left
right
center
ustify
4.0 4.0 CSS1
text-decoration Thm trang tr cho vn bn
none
underline
overline
line-through
blink
4.0 4.0 CSS1
text-indent
Thut dng u vn bn trong mt
thnh phn
length
%
4.0 4.0 CSS1
text-shadow

none
color
length

text-transform Kim sot k tu trong mt thnh phn none 4.0 4.0 CSS1
capitalie
uppercase
lowercase
white-space
Thit lp bao nhiu khong trng
trong mt thnh phn
normal
pre
nowrap
4.0 5.5 CSS1
word-spacing
Tng hoc gim khong trng gia
cc t
normal
length
6.0 6.0 CSS1

Thu5c tAnh Ra@@ing

Thu(" tnh Laddin* "Ka &++ 3'" ,-nh kho<n* trMn* *i=a thnh phn ,/n* bao v n(i
dun*.
HA @EF

Thit lp left padding
Thuc tnh ny m phng lm th no thit lp khong m pha bn tri ca mt ca bng
Thit lp right padding
Thuc tnh ny m phng lm th no thit lp khong m pha bn phi ca mt ca bng
Thit lp top padding
Thuc tnh ny m phng lm th no thit lp khong m vi inh ca mt ca bng
Thit lp bottom padding
Thuc tnh ny m phng lm th no thit lp khong m vi y ca mt ca bng
Tt c cc thuc tnh padding trong mt khai bo
V du ny m phng mt thuc tnh ngn thit lp tt c cc thuc tnh padding trong mt khai
bo, c th nhn t mt ti bn gi trj.

Ra@@ing t-4ng CSS

Thuc tnh Padding xc jnh khong trng gia phn t ung bao v ni dung. Khng cho php
cc gi trj m. Khong trng m ca inh, phi, dui v tri c th uoc thay i mt cch c lp
s dung cc thuc tnh ring bit. Mt thuc tnh khong m ngn gn th cng uoc to ra
kim sot nhiu cnh cng lc.

C8c thu5c tAnh c/a Ra@@ing

Thu(" tnh :; t< ?i' tr- 55 67 89&
padding
Mt thuc tnh ngn gn thit
lp tt c cc khong m chi vi
mt ln khai bo.
padding-top
padding-right
padding-bottom
padding-left
4.0 4.0 CSS1
padding-bottom
Thit lp khong m ti y ca
mt phn t
length
%
4.0 4.0 CSS1
padding-left
Thit lp khong m pha tri
ca mt phn t.
length
%
4.0 4.0 CSS1
padding-right
Thit lp khong m pha phi
ca mt phn t.
length
%
4.0 4.0 CSS1
padding-top
Thit lp khong m trn inh
ca mt phn t.
length
%
4.0 4.0 CSS1
C8c thu5c tAnh =ac+g-4un@ t-4ng CSS
&'" thu(" tnh )a"k*round tron* &++ ,-nh n*h.a "'" hiu Nn* "Ka m(t thnh phn
HA @EF
Thit lp mu nn
V du ny m phng cch lm th no thit lp mu nn cho mt thnh phn
Thit lp mt nh nhu mt nn
V du ny m phng cch lm th no thit lp mt nh nhu mt nn.
Lm th no lp mt nh nn
V du ny m phng cch lm th no lp mt nh nn chi theo chiu dc
Lm th no t mt nh nn
V du ny m phng cch lm th no t mt nh trn mt trang
Lm th no thit lp mt nh nn c jnh
V du ny m phng cch lm th no thit lp mt nh nn c jnh. nh s khng cun theo
phn cn li ca vn bn.
Tt c cc thuc tnh nn trong mt khai bo
V du ny m phng cch lm th no s dung mt thuc tnh ngn gn thit lp tt c cc
thuc tnh nn trong mt khai bo.

Thu5c tAnh =ac+g-4un@ t-4ng CSS

Thuc tnh nn cho php bn kim sot mu nn ca mt thnh phn, thit lp mt nh nhu nn
trong vn bn, lp li mt nh nn theo chiu dc hoc chiu ngang v vj tr ca mt nh trn mt
trang.

C8c thu5c tAnh =ac+g-4un@

Thu5c tAnh !" t% Gi8 t-M 22 DO PQC
background Mt thuc tnh ngn gn
thit lp tt c cc thuc tnh
nn trong mt khai bo.
background-color
background-image
background-repeat
background-
attachment
background-position
6.0 4.0 CSS1
background-
attachment
Thit lp liu mt nh c
ng c jnh mt ch hay
cun theo phn vn bn cn
li ca trang.
scroll
fixed
6.0 4.0 CSS1
background-color Thit lp mu nn ca mt
phn t
color-rgb
color-hex
color-name
transparent
4.0 4.0 CSS1
background-image Thit lp mt nh nhu nn
ca trang.
url
none
4.0 4.0 CSS1
background-position Thit lp im xut pht ca
mt nh nn
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
6.0 4.0 CSS1
background-repeat Thit lp cch mt nh s
uoc lp li nhu th no.
repeat
repeat-x
repeat-y
no-repeat
4.0 4.0 CSS1

Thu(" tnh :ar*in tron* &++

Thu(" tnh :ar*in tron* &++ 3'" ,-nh kho<n* trMn* 3un* 4uanh phn tO.
V d:
ThiGt lHp lP ,' "Ka m(t v>n b<n
V d n m; phQn* lm thG no ,C thiGt lHp lP ,' "Ka m(t v>n b<n.
TEt "< "'" thu(" tnh lP tron* m(t khai b'o
thiGt lHp m(t tnh "hEt nhanh "hRn* ,C thiGt lHp tEt "< "'" thu(" tnh lP tron* m(t khai b'o.

&'" lP tron* &++

Thu(" tnh ">n lP 3'" ,-nh kho<n* trMn* 3un* 4uanh "'" phn tO. 5R "R thC sO dn* "< *i'
tr- Sm *Mi l1n n(i dun*. &'" thu(" tnh ">n lP ,TnhF ph<iF ,' v tr'i "R thC ,U" tha ,Bi m(t
"'"h ,(" lHp sO dn* "'" thu(" tnh ri1n* rV. :(t thu(" tnh ">n lP nhanh "R thC ,U" dWn*
,C tha ,Bi tEt "< "'" lP m(t ln.
$u % vP trXnh dut: 5ets"ape v 67 thiGt lHp mJ" ,-nh lP "ho thY bod l Zp3. TrXnh dut
[pera kh;n* thiGt lHp\ ]C tha thGF [pera 'p dn* m(t kho<n* ,m l Zp3F vX thG nGu m(t
n*/i muMn ">n "hTnh lP "ho ton b( m(t tran* v hiCn th- m(t "'"h ,^n* ,_n tron* [peraF
thX kho<n* ,m "ho bod "`n* ph<i ,U" thiGt lHp.

&'" thu(" tnh "Ka :ar*in:
55: 5ets"apeF 67: 6nternet 73plorerF 89&: "huan vP 8eb
Thu(" tnh :; t< ?i' tr- 55 67 89&
margin
Mt thuc tnh nhanh thit lp thuc
tnh cho l trong mt khai bo.
margin-top
margin-right
margin-bottom
margin-left
4.0 4.0 CSS1
margin-bottom Thit lp l y ca mt phn t.
auto
length
%
4.0 4.0 CSS1
margin-left Thit lp l tri ca mt phn t.
auto
length
%
4.0 3.0 CSS1
margin-right Thit lp l phi ca mt phn t.
auto
length
%
4.0 3.0 CSS1
margin-top Thit lp l inh ca mt phn t.
auto
length
%
4.0 3.0 CSS1

Tai Lieu Css

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

Tai Lieu Css

Uploaded by

Copyright:

Available Formats

Gii thiu CSS

You might also like