Học css tiếng việt

8/14/2019 Hc css ting vit

1/43

Cc bi hc v CSS

Mc lcContentsContents ..................................................................................................................... 1

C bn v CSSTrong bi m u ny chng ta s i tm hiu mt s khi nim v c tnh caCSS, m chng ta cn ch trong sut qu trnh lm vic vi CSSI. CSS l gCSS (Cascading Style Sheets) c hiu mt cch n gin l cch m chng tathm cc kiu hin th (font ch, kch thc, mu sc...) cho mt ti liu WebII. 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 tton 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 thcho php bn qun l nh dng v layout trn nhiu trang khc nhau. Ccnh pht trin Web c th nh ngha sn thuc tnh ca mt s th HTMLno 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 CSSca bn pha trong th ..., hoc ghi n ra file ring vi phnm rng ".css", ngoi ra bn cn c th t chng trong tng th HTML

ring bitTuy nhin ty tng cch t khc nhau m u tin ca n cng khcnhau. Mc u tin ca CSS s theo th t sau.

1. Style t trong tng th HTML ring bit2. Style t trong phn 3. Style t trong file m rng .css4. 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 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 vi cc thuc tnh.

http://k4ktdtb.forumup.com/ Cc bi vit c ly t cssyeah.com


2/43

Cc bi hc v CSS

#vidu {width: 400px;background-color: #CC0000;

}Sau on khai bo ny th th s c thuc tnh:#vidu {

width: 400px; /* ln khai bo c */height: 300px;background-color: #CC0000;

}



3/43

Cc bi hc v CSS

C php ca CSSSau khi hiu l nm bt c mt s c tnh ca CSS chng ta tip tc i tm hiuv c php v cch khai bo ca cc th CSSC 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 kpp {font-family: "sans serif"}

Trong trng hp th chn ca bn nhiu thuc tnh th cc thuc tnh s cngn cch bi du (;).

p {text-align:center;color:red}Khi th chn c nhiu thuc tnh th chng ta nn mi thuc tnh trn mtdng ring bit.

p {text-align: center;color: black;font-family: arial

}



4/43

Cc bi hc v CSS

Lm sao chn CSS vo trong trang WebBn c mt file CSS ca bn, by gi cng vic tip theo l lm th no chnnhng 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 trongtrang 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 ccthuc tnh c khai bo trong phn CSS. C ba cch cho php chng ta chnnh dng CSS vo trong Website.1. CSS c khai bo trong file ring.Ton b m CSS c cha trong file ring c phn m rng .css l mt tngc dng khi mt file CSS s c p dng cho nhiu trang khc nhau. Bn cth thay i cch hin th ca ton b site m ch cn thay i mt file CSS. Trongcch ny th file CSS s c chn vo vn bn HTML thng qua th

.... Ta c c php nh sau:

Trnh duyt s c ton b cc nh dng c quy nh trong file mystyle.css vnh dng cho vn bn HTML.File CSS c th c son tho bng mt s trnh duyt khc nhau. Trong filekhng c cha m HTML, khi ghi li chng ta bt buc phi ghi li vi phnm 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 duytnh Firefox, Opera s khng hiu2. Chn CSS trong ti liu HTMLChn thng CSS trong ti liu c p dng trong trng hp nhng nh dngCSS ny ch ginh ring cho ti liu HTML . Khi bn chn trc tip th on mca bn phi t trong th v t trong phn .



5/43

Cc bi hc v CSS

hr {color: sienna}

p {margin-left: 20px}body {background-image: url("images/back40.gif")}C mt s trnh duyt c s khng hiu th , n s b qua th ny. Tuynhin th ni dung trong th vn hin th ra trang HTML. V vy m chngta s phi dng nh dng ch thch trong HTML cha phn ni dung ca th.3. Chn trc tip vo th ca HTML(inline style)Inline style c s dng nhiu trong trng hp mt th HTML no cn cstyle ring cho n.Inline style c p dng cho chnh th HTML , cch ny s c u tin lnnht so vi hai cch trn. Di y l mt v d m chng ta dng Inline style

This is a paragraph
4. Nhiu StylesheetTrong trng hp m c mt s th c cng nh dng, chng ta c th gp chngli 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.



6/43

Cc bi hc v CSS

Cc vn v vn bn v cch nh dng vn bnThuc tnh CSS text cho php bn hon ton c th qun l c cc thuc tnh cavn bn, bn c th qun l c s n hin ca n, thay i mu sc, tng hocgim khong cch gia cc k t trong mt on, cn chnh vic dng hng(align),...Cc thuc tnh ca text m CSS h trt mu cho mt on vn bn t mu cho mt on vn bn chng ta c th dng thuc tnh: color: #mmu;

p {color: #333333;

}t mu nn cho on vn bn.

Bn c th t mu nn (background) cho on vn bn bng thuc tnhbackground-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 ccdng 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: vtr;

p {text-align: left; /* left | center | right */



7/43

Cc bi hc v CSS

}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 dngthuc tnh text-decoration: thuc tnh;h3 {text-decoration: underline; /* Gch chn */

}

h2 {text-decoration: line-through; /* Gch ngang */

}

h1 {

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 chiungang.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 thuctnh text-transform: 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 thiu khin bi thuc tnh direction: hng;div.rtl {



8/43

Cc bi hc v CSS

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: khongcch;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 tnhwhite-space: gi tr;

p {

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



9/43

Cc bi hc v CSS

Cc thuc tnh ca font ch v nh ngha font ch cho vn bnCc 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 thuctnh font-family:

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 ccc 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 khcnhau, 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;

}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 */

}06Mun hin th font dng small-caps hoc dng normal th chng ta s s dngthuc tnh font-variant. Thuc tnh ny c hai gi tr normal v small-caps

p {



10/43

Cc bi hc v CSS

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 tnhfont-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;

}

http://www.cssyeah.com/css/thu-thuat-css/cach_viet_gian_luoc_trong_css.htmlhttp://www.cssyeah.com/css/thu-thuat-css/cach_viet_gian_luoc_trong_css.html


11/43

Cc bi hc v CSS

ng vin v cc thuc tnh ca ng vinCc thuc tnh ca ng vin (border) s cho php t cc gi tr c bit chon vin nh kiu ng vin, kch thc, mu sc. Thuc tnh ny s c pdng cho cc th HTML nh , , ,...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 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 tnhborder-width:div.borerwidth {border-width: 2px;

}STT Gi tr1 thin

2 medium3 thick 4 length03Chn kiu ca ng vinBn c th s dng thuc tnh border-style t kiu cho ng vin. Chng tac th gn cho thuc tnh ny 9 gi tr khc nhau tng ng vi 9 kiu ng vinkhc nhau.div.borderstyle {border-style: solid;

}STT border-style1 none2 hidden3 dotted4 dashed5 solid



12/43

Cc bi hc v CSS

6 double7 groove8 ridge9 inset

10 outsetVi 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:

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

1 top

border-top-color:

border-top-width:border-top-style:

2 rightborder-right-color:border-right-width:border-right-style:

3 bottomborder-bottom-color:border-bottom-width:border-bottom-style:

4 leftborder-left-color:border-left-width:border-left-style:

Chng ta c th dng phng php vit m gin lc (shorthand) vit cc thuctnh ca ng vin gn hn. Gi s chng ta t thuc tnh border ca th vi rng bng 1, kiu solid v mu l #CC0000div.border {border: 1px solid #CC0000;

}



13/43

Cc bi hc v CSS

Cc thuc tnh ca marginThuc tnh margin s nh ngha khong trng bao quanh mt phn t HTML. Nc th dng gi tr m lng ni dung vo vi nhau. Tng ng vi 4 pha camt phn t chng ta c 4 thuc tnh tng ng. Mt khc vit cho gn chng tacng c th dng cch vit gin lc nh ngha cc gi tr cho thuc tnhmargin.i vi cc trnh duyt Netcape v IE th gi tr mc nh ca thuc tnh margin l8px. Nhng Opera th khng h tr nh vy. cho thng nht chng ta c th tmargin mc nh cho ton b cc phn t.Cc gi tr m thuc tnh margin c th nhn c l: auto, length, %. Chng tat 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:

cho gn chng ta cng c th vit thuc tnh margin di dng shorthanddiv.margin {margin: 10px 4px 5px 9px; /* top | right | bottom | left*/

}



14/43

Cc bi hc v CSS

Thuc tnh ng bao ngoi (Outline)Thuc tnh Outline s v mt ng bao ngoi ton b mt phn t HTML, ivi 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 vmu sc, ln v kiu.C mt iu cn ch l cc thuc tnh ca ng bao ny c th khng c htr trn IE01t 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 lncho 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 tnhoutline-style:

p {outline-style: dotted;

}STT outline-style1 none2 hidden3 dotted4 dashed5 solid

6 double7 groove8 ridge9 inset10 outset cho gn chng ta cng c th vit cc gi tr ca thuc tnh Outline di dngshorthand nh sau:



15/43

Cc bi hc v CSS

div.outline {outline: 1px solid #000;

}



16/43

Cc bi hc v CSS

CSS paddingCSS padding s nh ngha khong trng gia mp ca cc phn t ti cc phn tcon hoc ni dung bn trong. Chng ta khng th gn gi tr m cho thuc tnhny. 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;

}



17/43

Cc bi hc v CSS

Lm th div c thanh cun (scrollbar) ging iFrameBi vit di y s gii thiu vi cc bn cch lm cho th c thanh cunging khi ta s dng iFrame load mt trang khc.Trc ht chng ta c v d v on m HTML nh sau:example page

Title

Put a long text in here. It will be crollable.

This content follows after the scrollable box.
By gi chng ta tin hnh style cho th , trc ht chng ta cn phi t cnh chiu rng v chiu cao ca cho th
#scroll_box {height: 120px;width: 400px;...

} cho th hin th thanh cun chng ta s t thuc tnh display ca th l auto



18/43

Cc bi hc v CSS

#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 th trnh duyts t ng sinh ra thanh cun ngang v thanh cun dc ging nh iFrame. K thutny hin c kh nhiu Website s dng c cch th hin ni dung ring bit camnh.



19/43

Cc bi hc v CSS

Style mt kiu Bubble n ginThng thng khi chng ta duyt Web, chng ta s khng ti cch trnh byca trang Web , m ch n thng tin ca n. Nhng nu chng ta mtcht th nhn thy rng, nu Website no bit vn dng cc kiu Typography hpl th s gip ngi c phn bit cc mc thng tin rt nhanh. iu s ctc ng tt i vi ngi c gip cc bn c thi quen p dng cc kiu Typography vo trong Website camnh. Trong bi vit ny ti xin hng dn cc bn lm mt kiu bubble n ginDng 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

y l v d ca mt kiu bubble n gin, cc bn c th ng dng chng vongay trong site ca mnh. Chc cc bn thnh cng!Tc gi: CSSYeah.com lm kiu bublle n gin ny chng ta s s dng hai th . Th cha li bnh lun, cn th


20/43

Cc bi hc v CSS

}

div.commentfooter {padding: 8px 0 0 22px;background: url(arrow-down.gif) no-repeat 20px 0 #FFFFFF;

}

span.author {padding-left: 15px;background: url(author.gif) no-repeat left center;font-weight: bold;

}

div.commentfooter a {

color: #CC0000;}

div.commentfooter a:hover,div.commentfooter a:active {

text-decoration: none;}Trong phn ni dung do chng ta c th dng nhiu ln ng bubble ny, do vychng ta nh dng thuc tnh class cho th



21/43

Cc bi hc v CSS

Cn bng vo gia mn hnh.Bnh thng th bn mun t mt table c chiu rng c nh vo gia mn hnhth bn lm th no? c phi bn t thuc tnh align="center" vo trong th?. Nu bn lm nh vy th bn ch c kt qu ng nh bn trn mts 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 ckch thc c nh vo gia trang.Gi s rng bn c mt table nh sau: . Nu by gi bnmun t table vo gia trang mn hnh bn ch vic t cho hai thuc tnhmargin-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;

}



22/43

Cc bi hc v CSS

Menu dng tab - Phn I.Trong chng ta ti gim chc rng khng cn t ngi vn cn mc cm vi nhngmenu dng tab, khng phi v n xu m lun ngh rng lm n kh v cu trc can rt phc tp. Chnh bn thn ti trc y cng nh vy. Nhng thc ra c phinh vy khng? tr li cu hi by gi chng ta cng nhau th Style cho mtkiu 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 phnth hai l phn cha ni dung ca cc tab. c hnh dung r hn chng ta sxem hnh nh minh ha di y.u tin chng ta s nh dng cho phn khung ca tab nh sau:div#wrapper {margin: 50px;padding: 0;

}Chng ta s dng nh dng ca th to ln cc tab phn 1. V nguyntc th chng ta c th dng mt trong ba th , , . Nhng ti sao tili dng th , l bi v mt l do no m trnh duyt ca ngi xem khngti c CSS t Website ca bn th h vn hiu c cu trc tab ca bn. nhdng ca phn mt nh sauTrang chGii thiuSn phmTin tc

Lin hBy gi chng ta s nh dng sao cho cc tab nm trn cng mt hng v c hnhdng 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;



23/43

Cc bi hc v CSS

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 sdng mt nh .gif c kch thc 1px x 1px thay th border-bottom ca Khi ang trong trang no th tab ca trang s c mu khc vi nhng tabkhc, 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 thol.tab a {font-weight: bold;margin: 0;padding: 5px 10px;

}Cui cng by gi chng ta s nh dng phn cha ni dung ca mi tab. Phnny ch n gin l chng ta nh dng cho th cha ni dung.div#content {border: 1px solid #D3DDED;border-top: none;padding: 10px;

}



24/43

Cc bi hc v CSS

K thut lm ch hoa u dng (Drop cap)Drop cap l mt trong nhng typography hay c dng trong cc tp ch trn giycng nh cc tp ch in t. N thng c dng u mi bi bo vi font chln v mu sc ni tri. Theo quy lut nhn ca mt nu mt i tng ni bt hncc i tng xung quanh, nh n s c tc ng mnh ti th gic ca ngi quanst. 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 sk thut lm ch hoa u dng (Drop cap).1. Cch th nhtu tin chng ta s i tm hiu cch lm Drop cap chnh thng. Trong cch nychng ta s s dng n k thut selectors trong CSS. c th l chng ta s dngn thuc tnh :first-letter.

Ta c nh dng HTML:

Lorem ipsum dolor sit amet consectetuer at etAenean ac dolor. Ligula nulla ac id pede sit consectetuer ipsummalesuada convallis habitant. Neque at pellentesque pharetra Aeneanaccumsan orci Proin leo tellus eu. Dictumst Integer ut adipiscing

porttitor dolor Morbi ut id lorem auctor. Massa tellus Morbi enimtellus pede vel suscipit hac sapien Cras. Cursus velit hendreritlobortis elit elit sed ut In.
nh dng CSS:
p.pdropcap:first-letter {float: left;padding: 4px 8px 0 0;display: block;color: #336699;font: 60px/50px Georgia, Times, serif;

}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 adipiscingporttitor dolor Morbi ut id lorem auctor. Massa tellus Morbi enim tellus pede velsuscipit hac sapien Cras. Cursus velit hendrerit lobortis elit elit sed ut In.Chng ta cn phi t class cho th

nhm mc ch phn

bit n vi cc th

khc trong trang. Trong trng hp bn khng t class thton b cc k t u dng ca th

trong trang s hin th nh dng ch hoa,m iu th khng phi l iu mong mun.



25/43

Cc bi hc v CSS

2. Cch th haiTrong cch th hai ny ta s dng thm mt th baok t ch hoa u dngnh dng HTML:

Norem ipsum dolor sit ametconsectetuer at et Aenean ac dolor. Ligula nulla ac id pedesit consectetuer ipsum malesuada convallis habitant. Nequeat pellentesque pharetra Aenean accumsan orci Proin leotellus eu. Dictumst Integer ut adipiscing porttitor dolor Morbiut id lorem auctor. Massa tellus Morbi enim tellus pede velsuscipit hac sapien Cras. Cursus velit hendrerit lobortiselit elit sed ut In.
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 idpede sit consectetuer ipsum malesuada convallis habitant. Neque at pellentesquepharetra Aenean accumsan orci Proin leo tellus eu. Dictumst Integer ut adipiscingporttitor dolor Morbi ut id lorem auctor. Massa tellus Morbi enim tellus pede velsuscipit 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 vitmin l chng ta thm th vo k t m ta mun chuynthnh dang drop cap. 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 convallishabitant. Neque at pellentesque pharetra Aenean accumsan orci Proin leo tellus eu.Dictumst Integer ut adipiscing porttitor dolor Morbi ut id lorem auctor. Massatellus Morbi enim tellus pede vel suscipit hac sapien Cras. Cursus velit hendreritlobortis elit elit sed ut In.



26/43

Cc bi hc v CSS

Trang tr cho danh sch c th tMc nh hu ht cc trnh duyt (Browser) u hin th ch s ca danh sch cth 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 (orderlist) v

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

l

font Arial.Vi hnh v trn chng ta c m ngun HTML nh sau:

This is line one

Here is line two

And last line
Di y l m CSS cho hai th v
ol {font: italic 1em Georgia, Times, serif;color: #999999;

}

ol p {font: normal .8em Arial, Helvetica, sans-serif;color: #000000;

}Bi vit c tng hp t Web Designer Wall



27/43

Cc bi hc v CSS

K thut ti nh trc bng CSSTrong 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, mkhi 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 ca bn c s dng hainh, mt nh lm dng hin th ngay t u, cn mt nh khc s dng chothuc tnh :hover. KHi ln u tin bn vo Website khi hover chut ln th th n s khng hin th anh th hai ngay m sau mt khong thi gian khong 2n 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, mchng 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 nhsau:#preLoadImages {width: 0px;height: 0px;background: url(../images/anh1.gif);background: url(../images/anh2.gif);background: url(../images/anh3.gif);...

}Bn c th t on m CSS trn vo trong file CSS ca bn, hoc t vo trongth ca trang. V d

#preLoadImages {

width: 0px;height: 0px;

background: url(../images/anh1.gif);background: url(../images/anh2.gif);background: url(../images/anh3.gif);...

}



28/43

Cc bi hc v CSS

Sau chng ta t on th trn vo ngay di th ca Website ca bn. Khi trnh duyt c ti th n s load ton

b nhng nh c lit k trong danh sch trn vo trong b m ca trnh duyt.

...

http://www.cssyeah.com/tu-van/tu-van-doanh-nghiep/website-va-cac-khai-niem-lien-quan-pt1.htmlhttp://www.cssyeah.com/tu-van/tu-van-doanh-nghiep/website-va-cac-khai-niem-lien-quan-pt1.html


29/43

Cc bi hc v CSS

Fix min-height cho IEHin ti hu ht cc trnh duyt nh Firefox, Opera, Safari,... u hiu c thuctnh min-height: 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 thchng ta cn phi Fix sao cho IE hin th c ging nh nhng trnh duytkhc.Gi s rng chng ta c mt th chng ta mun t min-heightcho th 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;

}/**/UpdateChng 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 chiucao 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 ss dng thuc tnh height: auto;.



30/43

Cc bi hc v CSS

t min-width cho IE6Nh chng ta bit vi s pht trin nhanh chng ca ngnh cng nghip phncng, ngy cng c nhiu mn hnh c phn gii cao. N cho php chng ta cmt khng gian lm vic rng hn, nhng i khi n cng l vn bt cp i viWebsite ca chng ta.i vi mt s Website vn thng chiu ngang l auto theo chiu rng camn 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 (gis 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 trngWebsite 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, nhngc 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 lnhiu 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;

}

http://www.cssyeah.com/tu-van/tu-van-doanh-nghiep/website-va-cac-khai-niem-lien-quan-pt1.htmlhttp://www.cssyeah.com/tu-van/tu-van-doanh-nghiep/website-va-cac-khai-niem-lien-quan-pt1.htmlhttp://www.cssyeah.com/tu-van/tu-van-doanh-nghiep/website-va-cac-khai-niem-lien-quan-pt1.htmlhttp://www.cssyeah.com/tu-van/tu-van-doanh-nghiep/website-va-cac-khai-niem-lien-quan-pt1.htmlhttp://www.cssyeah.com/tu-van/tu-van-doanh-nghiep/website-va-cac-khai-niem-lien-quan-pt1.htmlhttp://www.cssyeah.com/tu-van/tu-van-doanh-nghiep/website-va-cac-khai-niem-lien-quan-pt1.htmlhttp://www.cssyeah.com/tu-van/tu-van-doanh-nghiep/website-va-cac-khai-niem-lien-quan-pt1.htmlhttp://www.cssyeah.com/tu-van/tu-van-doanh-nghiep/website-va-cac-khai-niem-lien-quan-pt1.html


31/43

Cc bi hc v CSS

CSS Transparency trn ton b cc trnh duytTrong 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 tas 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 thuttrong CSS.Chng ta s p dng cc thuc tnh sau cho mt phn t HTML no muntransparent..transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;

}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 trcc 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).

http://www.cssyeah.com/css/thu-thuat-css/hien-thi-anh-png-tren-ie.htmlhttp://www.cssyeah.com/css/thu-thuat-css/hien-thi-anh-png-tren-ie.html


32/43

Cc bi hc v CSS

Border v nhng iu bn cha bitGi s rng ti c mt th 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 mtthc t v c kim trc qua thc nghim. Nu chng ta nhn thong qua th skhng thy iu , nhng khi bn c th phng to th nhiu ln th bn sthy iu . Di y l mt s kt qu thy c khi xem bng nhiu trnh duytkhc nhau.

i khi nhng iu ny li lm chng ta rt au u trong vic fix cc li gia cctrnh 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.



33/43

Cc bi hc v CSS

K thut a footer xung cui trangKhi chng ta thit k layout ca trang Web dng bng (table) th vic a phnfooter lc no cng pha di l mt vic ht sc n gin. Nhng khi bn lmvic vi layout dng th vic a phn footer lc no cng pha di lmt iu rt kh khn. Mc d nh vy cc Designer CSS vn ngh ra c cc ththut (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 minhha sau. tng ch o ca k thut ny l chng ta s dng mt th c chiu caol 100% y phn footer xung pha di, khi th phn footer s b y rangoi 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 mtkhong ng bng chiu cao ca phn footer. T chng ta c th hon ton nhnthy phn footer.Da trn tng nh vy chng ta c nh dng HTML nh sau:/* BEGIN: WRAPPER */CSS Sticky Footer

Ni dung content...

/* END: WRAPPER */

/* BEGIN: FOOTER */

Ni dung footer...

/* END: FOOTER*/ cho phn wrapper c chiu cao 100% chng ta nh dng cc thuc tnh CSSca n nh sau:

http://www.cssyeah.com/demo/sticky-footer/index.htmlhttp://www.cssyeah.com/demo/sticky-footer/index.html


34/43

Cc bi hc v CSS

.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.



35/43

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 mtth HTML c mt chiu cao xc nh th bn lm th no? Theo truyn thng dng th chng ta ch vic t thuc tnh valign="middle" vo trong mt th l xong. Nhng nu khng phi l th 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 xcnh height: 100px;. By gi bn mun t mt dng tiu c ni dung Tin minht 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-heighs l mt gi php tt nht, Chng ta s dng thuc tnh line-height cho th HTML.

V ddiv.textcenter {margin: 0;padding: 0;height: 100px;line-height: 100px;border: 1px solid #CCCCCC;

}



36/43

Cc bi hc v CSS

Hin th nh PNG trn IEHin 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 nhdng nh ny. Trong bi vit ny chng ta s dng mt s th thut nh dngnh PNG c th hin th tt trong IE.Trong khun kh bi vit chng ta s khng i su vo phn tch nguyn l cngnh l cch thc lm cho nh dng PNG hin th tt trn IE. M chng ta chdng li cch lm t c nhng iu trn.Trong ti liu HTML ca bn cc nh .png vn c chn vo nh thng thng. nh .png c th hin th tt khi bn dng IE duyt th bn cn phi chn filescript vo trong ti liu HTML ca bn. Gi s rng file script bn trong thmc cng cp vi ti liu HTML.

Tip bn copy nhblank.gifvo cng th mc vi file script.

http://www.cssyeah.com/www.firefox.comhttp://www.cssyeah.com/www.opera.comhttp://www.cssyeah.com/downloads/PieNG.jshttp://www.cssyeah.com/downloads/PieNG.jshttp://www.cssyeah.com/downloads/blank.gifhttp://www.cssyeah.com/www.firefox.comhttp://www.cssyeah.com/www.opera.comhttp://www.cssyeah.com/downloads/PieNG.jshttp://www.cssyeah.com/downloads/PieNG.jshttp://www.cssyeah.com/downloads/blank.gif


37/43

Cc bi hc v CSS

Style cho th hr l mt th t ng, iu c ngha l n khng cn th ng nh nhng thHTML khc. Th s to ra mt ng k ngang trn trnh duyt v khongcch 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 theo mnhtrn 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 chng ta cng cn phi ch mt cht v cch mcch trnh duyt x l i vi i tng th . Vi Internet Explore (IE) s sdng thuc tnh color hin th mu ca ng k v thuc tnh background skhng c tc dng. Tuy nhin th Mozilla(Netscape) v Opera th li dng thuctnh background hin th mu ca ng k. Chng ta cng c th s dngthuc 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 nh sau:hr {color: red;background: red;border: 0;height: 1px;

}Thm khong cch gia ng k v phn ni dung. thm khong cch gia ng k v ni dung chng ta s dng thuc tnhmargin quy nh khong cch ny.hr {color: red;background: red;border: 0;height: 1px;margin: 10px 0 20px; }



38/43

Cc bi hc v CSS

K thut slicing door v ng dngi vi nhng desiger thng xuyn lm vic vi CSS th k thut Sliding Doorskhng c g mi m. Nhng i vi nhng bn mi lm quen vi CSS th ti nghrng 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 nhiutrong vic to ra cc button, hay cc menu ngang kiu tab,Trong bi vit nychng ta s i tm hiu tng ch o ca k thut v to ra mt v d nh c sdng 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 tythch. 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 tris 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 lphn ng). iu cng c ngha l phn bn tri s c kch thc va phi, cnphn bn phi cn c kch thc lun ln hn hoc bng ni dung m bn d nha 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 thutny nh sau:

Nh trn hnh v bn thy, phn bn tri s c nh v phn bn phi s c rahoc 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 trnghp 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 chc vy thi, nhng cc bn ng coi thng, tuy vy nhng n kh quan trng vc ng dng rt rng ri trong vic to button, to menu kiu tab, minh hacho iu ti va trnh by by sau y ti xin a ra mt v d c s dng k thutny.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 PhotoshopVic u tin chng ta cn lm l chng ta cn to ra hnh dng chic nt thnyu ca ta, trong v d ny ti to ra mt nt Sign Up Now! nh sau:



39/43

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 cti tng ra lm 2 phn. c th ct hnh c chnh xc ti khuyn bn nn sdng cng c Slice(Slice Tools) trong Adobe Photoshop. Button ca chng ta sc slice nh sau:Chng ta cn ch l phn bn phi cn phi di m bo rng khng bthiu.3. Thc hin vit m HTML v CSS.Chng ta c nh dng m HTML nh sau:Ni dungGii 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 vgi mt phn ca i tng.

2. Chng ta s dng th bao ngoi cng m bo rng ton b nt slink c khi di chut ln trn nt. ng thi th ny s cha phnng bn phi.

3. Th s lm nhim v gi phn c nh bn tri, ng thi s cnhim 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;

}



40/43

Cc bi hc v CSS

a.sign-up span {margin: 0;padding: 28px 0 28px 90px;background: url(images/signup-left-bg.gif) no-repeat left center;

}



41/43

Cc bi hc v CSS

Cch vit gin lc trong CSSNu bn l ngi thc s mun tm hiu v CSS, th bn khng th khng tm hiucch vit gin lc(shorthand) trong CSS. Cch vit ny thc s mang li nhngli 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 ngin nh sau. Gi s rng chng ta mun nh dng cho mt th c ngvin bao quanh th chng ta cn phi vit.

border-width: 1px;border-style: solid;border-color: #CC0000;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 hai1. 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 thiuc 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 dngcch vit gin lc.1. Thuc tnh ColorC rt nhiu cch nh ngha mt mu trong CSS, chng ta c th nh nghatheo 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 dngnht. nh ngha theo h Hexa chng ta s t du (#) trc sau n ccthng s mu (v d: #003366). Dy cc thng s mu c chia lm 3 phn tngng vi ba mu Red, Green, Blue (00: Red | 33: Green | 66: Blue). Trong cch nhngha h s mu ta cng c cch vit gin lc nh sau: #000000 c th vit #000hoc #003366 c th vit #0362. Thuc tnh margin v padding.

margin-top: 10px;margin-right: 15px;margin-bottom: 20px;margin-left: 25px;c thay th bngmargin: 10px 15px 20px 25px; /* top | right | bottom | left */Tng t vi thuc tnh padding



42/43

Cc bi hc v CSS

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 chai 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 tngng vi right v leftTrong 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 viright v left, thng s th 3 tng ng vi bottom3. Thuc tnh border.

border-with: 1px;border-style: solid;border-color: #CC0000;S vit thnh

border: 1px solid #CC0000; /* width | style | color */4. Thuc tnh background.

background-color: #CC0000;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 fontfont-size: 1em;line-height: 1.5em;font-variant:small-caps;

font-weight: bold;font-style: italic;font-famyli: Arial, Verdana, Sans-serif;Dng vit gin lcfont: 1em/1.5em bold italic small-caps Arial,Verdana,Sans-serif;5. List typelist-style: none;



43/43

Cc bi hc v CSS

C ngha llist-style-type: none;Bn cng c th s dng thuc tnh list-style-position v list-type-image nhdng cho danh sch khng c th t unordered lists, s dng hnh nh cho midng v s dng list-type-style l hnh vung trong trng hp khng hin thc nh. V hai cch vit di y l nh nhau.list-style:square inside url(image.gif);l gin lc cholist-style-type: square;list-style-position: inside;list-style-image: url(image.gif);6. OutlineThuc 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 loutline: #000 solid 2px;

Documents

Học css tiếng việt