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 chnh sa trn nhiu trang Web ca bn.
Kin thc tin quyt

Trc khi tp trung nghin cu v CSS bn cn nm vng cc kin thc v: WWW, HTML v cc khi nim c bn v xy dng 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 cm t thut ng ting Anh( V d: HTML, Style Sheet, Head, p,...) nhng cm 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 cm t ting Anh l "Cascading Style Sheet" Styles nh ngha cch cc thnh phn HTML hin th nh th no. Cc Styles thng thng c lu tr trong mt Style Sheets Cc Style c c thm vo t cng b HTML bn 4.0 C ba cch chn Style: 1.External Style Sheets 2.Internal Style Sheets v 3.Inline Style nhng gii thch v cc loi ny di. External Style Sheets c th tit kim c nhiu thi gian cho cng vic ca bn. External Style Sheets c lu trong nhng tp c phn m rng l CSS. Nhiu nh ngha Style trong mt tp th c gi l Cascade(xp lp) Style Sheet.
M phng CSS
Vi CSS, vn bn HTML ca bn c th c hin th vi rt nhiu kiu dng khc nhau. Mi bn xem bi ....Cc bi m phng CSS.
Style gii quyt nhng vn chung

Th HTML khi u c thit k nh ngha ni dung ca mt vn bn. Chng c h tr m t cho trinh duyt hiu v th hin ngha nh "y l mt Dng u trang", "y l mt on", "y l mt bng",... bng cch s dng nhng th nh <h1>, <p>,<table> v.v..Vic phc tho vn bn c h tr bi trnh duyt m khng c bt c mt th nh dng no. Vi hai trnh duyt chnh l Netscape v Internet Explorer tip a thm nhng th HTML mi v nhng thuc tnh(ging nh th <font> v cc thuc tnh ging nh mu sc) cho ch nh HTML ban u th vic to ra cc Website cng kh khn hn, ni 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 IE 4.0 u h tr cc CSS.
Style Sheet c th tit kim rt nhiu cng sc lm vic ca bn

Cc Style trong HTML 4.0 nh ngha cc thnh phn HTML hin th nh th no, ging nh thuc tnh ca th font v color trong HTML 3.2. Cc Style thng thng c lu 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 ch vi vic son tho mt tp CSS n l. Nu nh 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 nh th no. CSS l mt si ch xuyn sut trong thit k Web bi v n cho php ngi pht trin kim sot kiu cch v s sp t ca nhiu trang mt ln. to ra s thay i mang tnh tng th, n gin l bn ch cn thay i Style v tt c cc thnh phn khc(m nhn Style ny) s t ng cp nht theo.
Nhiu Style c th xp lp trong mt

Style Sheet cho php thng tin c xc nh theo rt nhiu cch. Cc Style c th c xc nh bn trong mt thnh phn HTML n, 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 c tham chiu trong mt ti liu HTML n.
Th t xp lp
Style no s c s dng khi c hn mt style c ch nh cho mt thnh phn HTML? What style will be used when there is more than one style specified for an HTML element? Thng thng 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, ni m Style v tr th t c quyn u tin cao nht: 1. Theo mc nh 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 u tin l cao nht, iu c ngha l n s trm ln tt c cc style c khai bo bn trong th <head>, trong mt Style Sheet bn ngoi v gi tr mc nh ca Browser.
C php CSS C php

C php ca mt CSS c to nn t ba phn: mt "b chn - selector", mt "thuc tnh property" v mt "gi tr - value": b trn{thuc tnh:gi tr} "b chn" thng thng l cc phn t/th HTML m bn mun ch nh, thuc tnh l cc tnh cht m bn mun thay i, v mi thuc tnh c th mang c mt gi tr. Thuc tnh v gi tr c phn cch bi mt du ":" v c bao bi mt du mc nhn. V d:
body{color:black} th: body: l "B chn". color: l "thuc tnh". black: l "value"
Nu gi tr c mt chui cc t lin tip ch ra mt tn no , ta phi t chng trong du nhy kp nh th ny "...", p {font-family: "sans serif " } V d:
v phng ch c tn l "sans serif" v bn cht l c khong trng gia t "sans" v "serif" v th phi c t trong nhy kp.
Lu : Nu bn mun ch nh nhiu hn mt thuc tnh, bn phi phn cch mi mt thuc tnh bng mt du chm phy. V d di y ch ra cch lm th no nh ngha mt phn on c cn gia vi dng ch c mu p {text-align:center;color:red} to ra nhng nh ngha v style d c hn, bn c th m t mi thuc tnh trn mt dng ging nh sau: p { text-align: center; color: black; font-family: arial }
Nhm cc phn t vi nhau(Grouping)

Bn c th nhm cc b chn. Phn cch mi b chn bng mt du chm phy. Trong v d di 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 }
B chn Lp(The class Selector)

Vi mt "b chn lp" bn c th nh ngha cc style khc nhau cho cng mt kiu thnh phn HTML. iu ny ni nn rng nu nh 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 dng "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> Lu : Ch mt thuc tnh lp c th c ch nh trn mt thnh phn HTML! V d di 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 nh ngha mt style ci m s c s dng bi tt c cc thnh phn trong HTML m c mt trong mt lp no . Trong v d pha di, tt c cc thnh phn HTML vi class="center" s c cn gia: .center {text-align: center} Trong on m pha di 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>
B chn M(The id Selector)

B chn m th khc vi b chn lp. Trong khi mt b chn lp c th ng dng cho mt vi phn t trong mt trang, th mt b trn m lun lun p dng cho ch mt phn t Mt thuc tnh ID(m s) phi l duy nht bn trong mt vn bn Lut v style pha di s tng ng vi mt phn t "p" m c gi tr id l "para1": p#para1 { text-align: center; color: red } Lut v style pha di s tng ng vi phn t u tin m c gi tr id l "wer345": *#wer345 {color: green} Lut trn s tng ng vi thnh phn h1 ny: <h1 id="wer345">Some text</h1> Lut di y s tng ng vi mt thnh phn p m c gi tr id l "wer345": p#wer345 {color: green} Lut trn y s khng p ng vi thnh phn h2: <h2 id="wer345">Some text</h2>
Li ch thch trong CSS

Bn c th chn mt on ch thch gii thch mc ch on m ca bn, n c th gip gi nh li cho bn sau nhiu ngy lm vic. Mt li ch thch s khng c trnh duyt hin th. Mt li ch thch ca CSS bt u bng du "/*" v kt thc bng du "*/", ging nh 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 lm th no...
Lm th no chn mt Style Sheet
Khi mt trnh duyt c mt style sheet, n s nh dng vn bn theo cc quy nh c trong Style Sheet . C ba cch chn mt Style Sheet:
Style Sheet Ngoi

Mt Style Sheet ngoi l l tng khi style c ng dng cho nhiu trang. Vi mt Style Sheet ngoi, bn c th thay i cch nhn ca ton b mt Website ch cn vi mt file thay i. Mi trang mun lin kt vi Style Sheet cn phi s dng 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 ch nh v style t file "mystyle.css", v nh dng vn bn theo file ny. Mt Style Sheet Ngoi c th c vit trong mt b son tho vn bn no . Tp khng c cha cc th html. Style Sheet ca bn nn c lu li vi phn m rng l "tn_file.css". Mt v d v mt tp Style Sheet c biu din pha di: hr {color: sienna} p {margin-left: 20px}
body {background-image: url("images/back40.gif")} Lu : ng khong trng gia gi tr ca thuc tnh v n v! Nu bn s dng cu lnh: "margin-left:10 px" thay v "margin-left: 10px" th n s ch lm vic mt cch hp l trong trnh duyt Internet Explorer 6 nhng n s khng lm vic trong hai trnh duyt Mozilla hoc Netscape.
Style Sheet Trong

Mt Style Sheet Trong cn phi c s dng khi mt vn bn n c mt style duy nht. Bn nh ngha cc Style Trong bn trong phn u bng cch s dng th <style> ging nh 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 ch nh style, v nh dng vn bn theo cc ch nh trong .
Lu : Mt trnh duyt thng thng th s b qua nhng th m n khng hiu. iu ny c ngha l mt trnh duyt phin bn c m khng h tr cc Style, s b qua cc th <style>, nhng ni dung ca th <style> s hin th trn trang. C th ngn cn mt trnh duyt c hin th ni dung bng cch n n trong thnh phn gii thch ca HTML. <head> <style type="text/css"> <!-hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} --> </style> </head>
Style Ni tuyn(Inline Styles)

Mt Style ni tuyn mt rt nhiu u im ca cc Style Sheet bnh thng bi vic trn ln ni dung vi vic th hin. S dng phng php tit kim ny, ging nh khi mt style c p dng cho mt s kin ring l ca mt thnh phn. s dng cc Style ni tuyn bn s dng thuc tnh style trong th c lin quan. Thuc tnh th c th bao gm bt c mu CSS no. V d di y s a 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 chu nhiu hiu ng Style Sheets(Multiple Style Sheets) Nu mt vi thuc tnh cng c thit lp cho cng b chn vi style sheets khc nhau, gi tr s c k tha nhiu hn t cc ch nh . V d, mt Style sheet Ngoi c nhng thuc tnh cho b chn h3 nh sau: h3 {
color: red; text-align: left; font-size: 8pt }
V mt Style Sheet Trong cng c cc cc thuc tnh cho b chn h3 nh sau: h3 { text-align: right; font-size: 20pt } And an internal style sheet has these properties for the h3 selector: h3 { text-align: right; font-size: 20pt } Nu trang Web c 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-size: 20pt Mu cho h3 s k tha t Style Sheet Ngoi v cc thuc tnh text-alignment v font-size s thay th bi Style Sheet Trong(ng theo tnh cht u tin)
Cc thuc tnh Border trong
CSS
Cc thuc tnh Border trong CSS nh ngha ng bao( bin) xung quanh mt thnh phn.
Cc v d:
Thit lp kiu cch ca bn ng bao V d ny m phng lm th no thit lp kiu cch ca bn ng bao Thit lp cc ng bao khc nhau trn mi cnh V d ny m t lm th no thit lp cc ng bao khc nhau trn mi cnh ca phn t Thit lp mu ca bn ng bao V d ny m t lm th no thit lp mu ca bn ng bao. N c th thit lp t cnh th nht n cnh th bn. Thit lp rng ca ng bao y V d ny m t lm th no thit lp rng ca ng bao y Thit lp rng ca ng bao tri V d ny m t lm th no thit lp rng ca ng bao bn tri Thit lp rng ca ng bao phi V d ny m t lm th no thit lp rng ca ng bao bn phi. Tng t nh thuc tnh border_left_width. Xem cch dng bng thuc tnh pha di. Thit lp rng ca ng bao nh V d ny m t lm th no thit lp rng ca ng bao nh Tt c cc thuc tnh ng bao y trong mt khai bo V d ny m t mt thuc tnh nhanh chng thit lp tt c cc thuc tnh cho ng bao y trong mt khai bo. Tt c cc thuc tnh ng bao tri trong mt khai bo V d ny m t mt thuc tnh nhanh chng thit lp tt c cc thuc tnh cho ng bao tri trong mt khai bo Tt c cc thuc tnh ng bao phi trong mt khai bo V d ny m t mt thuc tnh nhanh chng thit lp tt c cc thuc tnh cho ng bao tri trong mt khai bo Tt c cc thuc tnh ng bao nh trong mt khai bo V d ny m t mt thuc tnh nhanh chng thit lp tt c cc thuc tnh cho ng bao nh trong mt khai bo
Tt c cc thuc tnh v rng ca ng bao trong mt khai bo V d ny m t mt thuc tnh nhanh chng thit lp tt c cc thuc tnh cho rng ng bao trong mt khai bo, c th thit lp cho t mt n bn ng bao. Tt c cc thuc tnh ng bao trong mt khai bo V d ny m t mt thuc tnh nhanh chng thit lp tt c cc thuc tnh cho bn ng bao y trong mt khai bo, c th thit lp cho t mt n bn ng bao.
Cc ng bao trong CSS

Thuc tnh Border cho php bn ch nh kiu cch, mu sc v rng ca ng bao ca mt thnh phn. Trong HTML chng ta s dng bng to ra cc ng bao xung quanh mt vn bn, nhng vi cc thuc tnh Border trong CSS chng ta c th to cc ng bao vi hiu ng p v n c th ng dng cho phn t bt k.
Thuc tnh Border:

NN: Netscape, IE: Internet Explorer, W3C: Web Standard
Thuc tnh
border
M t
Mt thuc tnh tc hnh thit lp thuc tnh cho ton khai bo.
V d
border-width border-style
NN
4.0
IE
4.0
W3C
CSS1
b c 4 ng bao trong mt border-color border-bottom Mt thuc tnh tc hnh thit lp thuc tnh cho ng bao y trong mt khai bo. border-bottom-color border-bottom-style border-bottom-width Thit lp mu sc ca ng border-color bao y Thit lp kiu cch ca ng bao y. Thit lp rng ca ng thin bao y medium thick length border-color Thit lp mu sc ca bn ng bao, c th t mu t mt n bn. border-left Mt thuc tnh tc hnh border-left-width 6.0 4.0 CSS1 color 6.0 4.0 CSS1 4.0 4.0 CSS1 border-style 6.0 4.0 CSS2 6.0 4.0 CSS2 border-bottom-width border-style border-color 6.0 4.0 CSS1
thit lp thuc tnh cho ng bao tri trong mt khai bo. border-left-color border-left-style border-left-width
border-style border-color 6.0 6.0 4.0 4.0 4.0 4.0 CSS2 CSS2 CSS1
Thit lp mu sc ca ng border-color bao tri. Thit lp kiu cch ca ng bao tri. Thit lp rng ca ng thin bao tri. medium thick length border-style
border-right
Mt thuc tnh tc hnh thit lp thuc tnh cho ng bao phi trong mt khai bo.
border-right-width border-style border-color
6.0
4.0
CSS1
border-right-color border-right-style border-right-width
Thit lp mu sc ca ng border-color bao phi. Thit lp kiu cch ca ng bao phi. Thit lp rng ca ng thin bao phi. medium thick length border-style
6.0 6.0 4.0
4.0 4.0 4.0
CSS2 CSS2 CSS1
border-style
Thit lp kiu cch ca c bn ng bao, c th t c 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 thit lp thuc tnh cho ng bao nh trong mt khai bo.
border-top-width border-style border-color
6.0
4.0
CSS1
border-top-color
Thit lp mu sc ca ng border-color
6.0
4.0
CSS2
bao nh. border-top-style border-top-width Thit lp kiu cch ca ng bao nh. Thit lp rng ca ng thin bao nh medium thick length border-width Mt thuc tnh tc hnh thit lp rng ca bn ng bao trong mt khai bo, c th c t mt n bn gi tr. thin medium thick length 4.0 4.0 CSS1 4.0 4.0 CSS1 border-style 6.0 4.0 CSS2
Thuc tnh Font trong CSS

Thuc tnh phng trong CSS xc nh phng ch trong vn bn
V d
Thit lp phng ch trong mt vn bn V d ny m phng mt phng ch c thit lp nh th no. Thit lp kch c cho phng ch V d ny m phng thit lp kch c phng ch nh th no. Thit lp kiu cch ca phng ch V d ny m phng thit lp kiu cch phng ch nh th no. Thit lp bin th ca phng V d ny m phng cch thit lp cc bin th ca phng ch nh th no. Thit lp ng bao ca phng ch V d ny m phng thit lp m ca phng ch nh th no. Tt c thuc tnh trong mt khai bo. V d ny m phng s dng thuc tnh tc hnh thit lp thuc tnh cho tt c cc phng ch trong mt khai bo nh th no.
Cc phng trong CSS

Thuc tnh Font cho php bn thay i h phng, m, kch c v kiu cch phng ch ca vn bn.
Cc Lu - Mo hu ch
Cc Phng ch th c xc nh bi tn ca chng trong CSS1. Lu rng nu mt trnh duyt khng h tr thuc tnh phng c ch nh th n s s dng phng mc nh.
Thuc tnh Font:

NN: Netscape, IE: Internet Explorer, W3C: Chun Web Thuc tnh font M t Gi tr NN 4.0 IE 4.0 W3C CSS1
Mt thuc tnh nh thit font-style lp tt c thuc tnh cho mt font-variant phng trong mt khai bo. font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar Mt danh sch u tin ca family-name cc h phng cho mt thnh generic-family phn. Thit lp kch c cho mt phng ch. xx-small x-small small medium large x-large xx-large smaller larger length % normal wider narrower ultra-condensed extra-condensed condensed
font-family
4.0
3.0
CSS1
font-size
4.0
3.0
CSS1
font-stretch
Nhng rt gn hoc m rng ca phng.
CSS2
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 th vn bn trong mt normal phng ch HOA NH hoc small-caps mt phng ch thng. Thit lp trng lng ca phng. normal bold bolder lighter 100 200 300 400 500 600 700 800 900
6.0
4.0
CSS1
font-weight
4.0
4.0
CSS1
Thuc tnh List trong CSS

Thuc tnh List cho php bn thay i gia cc im_nh_du_mc_danh_sch khc nhau, thit lp mt nh nh mt im_nh_du_mc_danh_sch v thit lp ni t im_nh_du_mc_danh_sch.
V d
Cc im_nh_du mc khc nhau trong mt danh sch khng c th t V d ny m t cc im_nh_du_mc_danh_sch khc nhau trong CSS Cc im_nh_du mc khc nhau trong mt danh sch c th t V d ny m t cc im_nh_du_mc_danh_sch khc nhau trong CSS Thit lp mt nh nh im_nh_du_mc_danh_sch V d ny m phng cch thit lp mt nh nh mt im_nh_du_mc_danh_sch t mt im_nh_du_mc_danh_sch V d ny m phng ni t ch cho im nh du mc danh sch
Tt c cc thuc tnh danh sch trong mt khai bo V d ny m t mt cch nhanh chng thit lp cho ton b cc thuc tnh cho mt danh sch trong mt khai bo.
Thuc tnh ca Danh sch

NN: Netscape, IE: Internet Explorer, W3C: Chun Web Thuc tnh list-style M t Gi tr A shorthand property for setting all list-style-type of the properties for a list in one list-style-position declaration list-style-image Mt thuc tnh ngn gn thit lp cho ton b thuc tnh ca danh sch trong mt khai bo Sets an image as the list-item none marker url Thit lp mt nh nh mt im_nh_du_mc_danh_sch. Places the list-item marker in the inside list outside t mt im_nh_du_mc_danh_sch trong danh sch. Sets the type of the list-item none marker disc Thit lp kiu ca circle im_nh_du_mc_danh_sch. square decimal decimal-leadingzero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha auto length NN IE W3C 6.0 4.0 CSS1
list-style-image
6.0
4.0
CSS1
list-style-position
6.0
4.0
CSS1
list-style-type
4.0
4.0
CSS1
marker-offset
CSS2
Thuc tnh Text trong CSS

Thuc tnh Text trong CSS xc nh din mo ca vn bn.
V d
Thit lp mu ca vn bn V d ny m t lm th no thit lp mu ca vn bn Thit lp mu nn ca vn bn V d ny m t lm th no thit lp mu nn ca mt phn ca vn bn Ch nh khong cch gia cc k t V d ny m t lm th no tng hoc gim khong trng gia cc k t Cn vn bn V d ny m t lm th no cn chnh vn bn Trang tr cho vn bn V d ny m t lm th no thm trang tr cho vn bn. Tht u dng vn bn V d ny m t lm th no tht u dng u tin ca mt on Kim sot ch trong vn bn V d ny m t lm th no kim sot ch trong mt vn bn
Text trong 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 t trong mt vn bn, cn chnh mt vn bn, trang tr cho vn bn, tht dng u tin v nhiu hiu ng khc.
Thuc tnh Text

NN: Netscape, IE: Internet Explorer, W3C: Web Standard Thuc tnh color direction letter-spacing M t Thit lp mu cho ch Thit lp hng cho ch Tng hoc gim khong trng gia cc k t Cn chnh vn bn trong mt thnh phn Gi tr kh d NN color ltr rtl normal length left text-align right center justify none underline text-decoration Thm trang tr cho vn bn overline line-through blink text-indent Tht dng u vn bn trong mt thnh phn length % none text-shadow color length none text-transform Kim sot k t trong mt thnh phn capitalize uppercase lowercase white-space word-spacing Thit lp bao nhiu khong trng trong mt thnh phn Tng hoc gim khong trng gia normal pre nowrap normal 6.0 6.0 CSS1 4.0 5.5 CSS1 4.0 4.0 CSS1 4.0 4.0 CSS1 4.0 4.0 CSS1 4.0 4.0 CSS1 6.0 4.0 CSS1 4.0 IE 3.0 W3C CSS1 CSS2
cc t
length
Thuc tnh Padding

Thuc tnh Padding ca CSS xc nh khong trng gia thnh phn ng bao v ni dung.
V d:
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 nh 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 d 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 tr.
Padding trong CSS

Thuc tnh Padding xc nh khong trng gia phn t ng bao v ni dung. Khng cho php cc gi tr m. Khong trng m ca nh, phi, di v tri c th c thay i mt cch c lp s dng cc thuc tnh ring bit. Mt thuc tnh khong m ngn gn th cng c to ra kim sot nhiu cnh cng lc.
Cc thuc tnh ca Padding

NN: Netscape, IE: Internet Explorer, W3C: Web Standard Thuc tnh M t Mt thuc tnh ngn gn thit padding lp tt c cc khong m ch vi mt ln khai bo. padding-bottom padding-left padding-right padding-top Gi tr padding-top padding-right padding-bottom padding-left 4.0 4.0 4.0 4.0 4.0 4.0 4.0 4.0 CSS1 CSS1 CSS1 CSS1 % length % length % length % NN 4.0 IE 4.0 W3C CSS1
Thit lp khong m ti y ca length mt phn t Thit lp khong m pha tri ca mt phn t. Thit lp khong m pha phi ca mt phn t. Thit lp khong m trn nh ca mt phn t.
Cc thuc tnh Background trong CSS

Cc thuc tnh Background trong CSS nh ngha cc hiu ng ca mt thnh phn
V d:
Thit lp mu nn V d ny m phng cch lm th no thit lp mu nn cho mt thnh phn Thit lp mt nh nh mt nn V d ny m phng cch lm th no thit lp mt nh nh mt nn. Lm th no lp mt nh nn V d ny m phng cch lm th no lp mt nh nn ch theo chiu dc Lm th no t mt nh nn V d ny m phng cch lm th no t mt nh trn mt trang Lm th no thit lp mt nh nn c nh
V d ny m phng cch lm th no thit lp mt nh nn c nh. nh s khng cun theo phn cn li ca vn bn. Tt c cc thuc tnh nn trong mt khai bo V d ny m phng cch lm th no s dng mt thuc tnh ngn gn thit lp tt c cc thuc tnh nn trong mt khai bo.
Thuc tnh Background trong CSS

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

NN: Netscape, IE: Internet Explorer, W3C: Web Standard Thuc tnh background M t Gi tr NN 6.0 IE 4.0 W3C CSS1
Mt thuc tnh ngn gn background-color thit lp tt c cc thuc tnh background-image nn trong mt khai bo. background-repeat backgroundattachment background-position Thit lp liu mt nh c scroll ng c nh mt ch hay fixed cun theo phn vn bn cn li ca trang. Thit lp mu nn ca mt phn t color-rgb color-hex color-name transparent url none
backgroundattachment
6.0
4.0
CSS1
background-color
4.0
4.0
CSS1
background-image
Thit lp mt nh nh nn ca trang.
4.0 6.0
4.0 4.0
CSS1 CSS1
background-position Thit lp im xut pht ca top left mt nh nn top center top right center left center center center right bottom left
bottom center bottom right x-% y-% x-pos y-pos background-repeat Thit lp cch mt nh s c lp li nh th no. repeat repeat-x repeat-y no-repeat 4.0 4.0 CSS1
Thuc tnh Margin trong CSS
Thuc tnh Margin trong CSS xc nh khong trng xung quanh phn t. V d: Thit lp l y ca mt vn bn V d ny m phng lm th no thit lp l y ca mt vn bn. Tt c cc thuc tnh l trong mt khai bo thit lp mt tnh cht nhanh chng thit lp tt c cc thuc tnh l trong mt khai bo.
Cc l trong CSS Thuc tnh cn l xc nh khong trng xung quanh cc phn t. N c th s dng c gi tr m gi ln ni dung. Cc thuc tnh cn l nh, phi, y v tri c th c thay i mt cch c lp s dng cc thuc tnh ring r. Mt thuc tnh cn l nhanh c th c dng thay i tt c cc l mt ln. Lu v trnh duyt: Netscape v IE thit lp mc nh l cho th body l 8px. Trnh duyt Opera khng thit lp! thay th, Opera p dng mt khong m l 8px, v th nu mt ngi mun cn chnh l cho ton b mt trang v hin th mt cch ng n trong Opera, th khong m cho body cng phi c thit lp.
Cc thuc tnh ca Margin: NN: Netscape, IE: Internet Explorer, W3C: chun v Web Thuc tnh M t Gi tr NN IE W3C
margin-top margin Mt thuc tnh nhanh thit lp thuc margin-right tnh cho l trong mt khai bo. margin-bottom margin-left auto margin-bottom Thit lp l y ca mt phn t. length % auto margin-left Thit lp l tri ca mt phn t. length % auto margin-right Thit lp l phi ca mt phn t. length % auto margin-top Thit lp l nh ca mt phn t. length %
4.0
4.0
CSS1
4.0
4.0
CSS1
4.0
3.0
CSS1
4.0
3.0
CSS1
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

Kin thc tin quyt

Tha thun vi ngi c

Style gii quyt nhng vn chung

C hai trnh duyt Netscape 4.0 v IE 4.0 u h tr cc CSS.

Style Sheet c th tit kim rt nhiu cng sc lm vic ca bn

Nhiu Style c th xp lp trong mt

C php CSS C php

Nhm cc phn t vi nhau(Grouping)

B chn Lp(The class Selector)

<p class="right" class="center"> This is a paragraph. </p>

<p class="center"> This paragraph will also be center-aligned. </p>

B chn M(The id Selector)

Li ch thch trong CSS

Style Sheet Ngoi

<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>

Style Sheet Trong

Trnh duyt lc ny s c cc ch nh style, v nh dng vn bn theo cc ch nh trong .

Style Ni tuyn(Inline Styles)

color: red; text-align: left; font-size: 8pt }

Cc thuc tnh Border trong

Cc ng bao trong CSS

Thuc tnh Border:

border-right-width border-style border-color

border-right-color border-right-style border-right-width

6.0 6.0 4.0

4.0 4.0 4.0

CSS2 CSS2 CSS1

Thit lp kiu cch ca c bn ng bao, c th t c kiu t mt n bn.

border-top-width border-style border-color

Thuc tnh Font trong CSS

Cc phng trong CSS

Thuc tnh Font:

Nhng rt gn hoc m rng ca phng.

Thuc tnh List trong CSS

Thuc tnh ca Danh sch

Thuc tnh Text trong CSS

Text trong CSS

Thuc tnh Text

Thuc tnh Padding

Padding trong CSS

Cc thuc tnh ca Padding

Cc thuc tnh Background trong CSS

Thuc tnh Background trong CSS

Cc thuc tnh Background

Thuc tnh Margin trong CSS

You might also like