CSS TiengViet

7/31/2019 CSS TiengViet

1/46

Cc bi hc v CSS

http://www.viet-ebook.co.cc Cc bi vit c ly t cssyeah.com

Mc lc

ContentsCbn v CSS......................................................................................................................................... 3

I. CSS l g ........................................................................................................................................... 3

II. Mt sc tnh cbn ca CSS ................................................................................................... 3

C php ca CSS .................................................................................................................................... 5

Lm sao chn CSS vo trong trang Web .............................................................................................. 6

1. CSS c khai bo trong file ring. .............................................................................................. 6

2. Chn CSS trong ti liu HTML ..................................................................................................... 6

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

4. Nhiu Stylesheet .............................................................................................................................. 7

Cc vn v vn bn v cch nh dng vn bn.............................................................................. 8

t mu cho mt on vn bn ......................................................................................................... 8

t mu nn cho on vn bn.......................................................................................................... 8

Cn chnh khong cch gia cc k t.............................................................................................. 8

Cn chnh khong cch gia cc dng. ............................................................................................. 8

Dng hng ............................................................................................................................................ 9

Trang hong thm cho on vn bn................................................................................................ 9

Chnh v tr ca on vn bn (indent). ............................................................................................ 9

iu kin cc k ttrong mt on vn bn.................................................................................... 9

t hng cho on vn bn. .......................................................................................................... 10

Tng khong cch gia cc t.......................................................................................................... 10

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

Cc thuc tnh ca font chv nh ngha font chcho vn bn .................................................... 11

ng vin v cc thuc tnh ca ng vin.................................................................................... 13

Cc thuc tnh ca margin ................................................................................................................... 15

Thuc tnh ng bao ngoi (Outline)................................................................................................ 16

CSS padding .......................................................................................................................................... 18

Lm th div c thanh cun (scrollbar) ging iFrame ........................................................................ 19

Style mt kiu Bubble n gin........................................................................................................... 21


2/46

Cc bi hc v CSS


1. nh dng HTML ......................................................................................................................... 21

2. nh dng CSS .............................................................................................................................. 21

Cn bng vo gia mn hnh. .............................................................................................................. 23

Menu dng tab - Phn I........................................................................................................................ 24

K thut lm chhoa u dng (Drop cap) ....................................................................................... 26

1. Cch thnht ................................................................................................................................ 26

2. Cch thhai .................................................................................................................................. 27

Trang tr cho danh sch c tht....................................................................................................... 29

K thut ti nh trc bng CSS ........................................................................................................ 30

Fix min-height cho IE ........................................................................................................................... 32

t min-width cho IE6 ......................................................................................................................... 33

CSS Transparency trn ton b cc trnh duyt................................................................................ 34Border v nhng iu bn cha bit .................................................................................................. 35

K thut a footer xung cui trang ............................................................................................... 36

t dng text vo gia ( theo chiu cao) ............................................................................................. 38

Hin thnh PNG trn IE .................................................................................................................... 39

Style cho th hr...................................................................................................................................... 40

Thm khong cch gia ng k v phn ni dung. ................................................................... 40

K thut slicing door v ng dng ...................................................................................................... 41

1. To nt bng Photoshop............................................................................................................... 41

2. Ct nt ra thnh hai phn. ........................................................................................................... 42

3. Thc hin vit m HTML v CSS. .............................................................................................. 42

Cch vit gin lc trong CSS ............................................................................................................. 44

1. Thuc tnh Color ........................................................................................................................... 44

2. Thuc tnh margin v padding. ................................................................................................... 44

3. Thuc tnh border. ........................................................................................................................ 45

4. Thuc tnh background. ............................................................................................................... 455. Thuc tnh font .............................................................................................................................. 46

5. List type.......................................................................................................................................... 46

6. Outline............................................................................................................................................ 46


3/46

Cc bi hc v CSS


Cbn v CSS

Trong bi mu ny chng ta si tm hiu mt s khi nim v c tnh ca CSS, m chngta 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 cckiu hin th (font ch, kch thc, mu sc...) cho mt ti liu Web

II. Mt sc tnh cbn 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 tht ton b cc thuc tnh cath vo trong mt file ring c phn mrng l ".css"

CSS n ph vgii hn trong thit k Web, bi ch cn mt file CSS c th cho php bnqun lnh dng v layout trn nhiu trang khc nhau. Cc nh pht trin Web c thnh ngha sn thuc tnh ca mt s th HTML no v sau n c th dng li trnnhiu trang khc.

2. C th khai bo CSS bng nhiu cch khc nhau. Bn c tht on CSS ca bn phatrong th ..., hoc ghi n ra file ring vi phn mrng ".css", ngoi rabn cn c tht chng trong tng th HTML ring bit

Tuy nhin ty tng cch t khc nhau m u tin ca n cng khc nhau. Mc utin 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 mrng .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 ufile css vi cc thuc tnh nh sau:

4. #vidu {5. width: 200px;6. height: 300px;7. }


4/46

Cc bi hc v CSS


mt ch no trong file css bn li khai bo mt ln na th vi ccthuc tnh.

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


}


5/46

Cc bi hc v CSS


C php ca CSS

Sau khi hiu l nm bt c mt sc tnh ca CSS chng ta tip tc i tm hiu v c php vcch 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 sc 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

}


6/46

Cc bi hc v CSS


Lm sao chn CSS vo trong trang Web

Bn c mt file CSS ca bn, by gicng vic tip theo l lm th no chn nhng onCSS ca bn vo trong trang, V xem chng hot ng nh th no. Trong phn ny chng ta si tm hiu chi tit v cch chn mt on style trong trang HTML hay lin kt ti mt file CSSvit sn.

Khi trnh duyt c n CSS, th ton b Website sc nh dng theo cc thuc tnh ckhai bo trong phn CSS. C ba cch cho php chng ta chn nh dng CSS vo trong Website.

1. CSS c khai bo trong file ring.

Ton b m CSS c cha trong file ring c phn mrng .css l mt tng c dng khi

mt file CSS sc p dng cho nhiu trang khc nhau. Bn c th thay i cch hin th caton b site m ch cn thay i mt file CSS. Trong cch ny th file CSS sc chn vo vnbn HTML thng qua th .... Ta c c php nh sau:

Trnh duyt sc ton b cc nh dng c quy nh trong file mystyle.css v nh dng chovn bn HTML.

File CSS c thc son tho bng mt s trnh duyt khc nhau. Trong file khng c cham HTML, khi ghi li chng ta bt buc phi ghi li vi phn mrng l .css. Gi s chngtrong file mystyle.css trn cha on m sau:

hr {color: sienna}

p {margin-left: 20px}

body {background-image: url("images/back40.gif")}

Khng bao gis 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


7/46

Cc bi hc v CSS


Chn thng CSS trong ti liu c p dng trong trng hp nhng nh dng CSS ny chginh ring cho ti liu HTML . Khi bn chn trc tip th on m ca bn phi t trong th v t trong phn .

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. Tuy nhin th ni dungtrong th vn hin th ra trang HTML. V vy m chng ta s phi dng nh dng chthch 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 c style ring chon.

Inline style c p dng cho chnh th HTML , cch ny s c u tin ln nht so vi haicch trn. Di y l mt v d m chng ta dng Inline style

This is a paragraph

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.


8/46

Cc bi hc v CSS


Cc vn v vn bn v cch nh dng vn bn

Thuc tnh CSS text cho php bn hon ton c th qun lc cc thuc tnh ca vn bn, bnc th qun lc sn hin ca n, thay i mu sc, tng hoc gim khong cch gia cc kt 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.

Bn c tht 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 thc tng hoc gim bi thuc tnhletter-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 trongmt on vn bn.

p {

line-height: 150%; // line-height: 15px;


9/46

Cc bi hc v CSS


}

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 bnthm 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 {

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 ttrong mt on vn bn.

Bn c thiu khin ton bon vn bn l ch hoa hay ch thng bi thuc tnh text-transform: kiu ch;

p.uppercase {text-tranform: uppercase;

}

p.lowercase {

text-tranform: lowercase;

}

p.capitalize {

text-tranform: capitalize;


10/46

Cc bi hc v CSS


}

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 {

direction: rtl; /* Right to left */

}

div.ltr {

direction: ltr; /* Left to right */

}

Tng khong cch gia cc t.

Khong cch gia cc t c thc 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: gitr;

p {

white-space: nowrap;

}

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


11/46

Cc bi hc v CSS


Cc thuc tnh ca font chv nh ngha font chcho vnbn

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 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 1h font) trong trng hp my ca ngi duyt Web khng c cc font nh mnh t th ns ly font mc nh ca h font trn.

02t on vn bn sdng 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 tac 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.


12/46

Cc bi hc v CSS


Chm, 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 tnhfont-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 tht 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;

}


13/46

Cc bi hc v CSS


ng vin v cc thuc tnh ca ng vin

Cc thuc tnh ca ng vin (border) s cho php t cc gi trc bit cho n vin nhkiu ng vin, kch thc, mu sc. Thuc tnh ny sc p dng cho cc th HTML nh, , ,...

Trong thuc tnh ng vin (border) chng ta c 3 gi tr cbn l:

1. border-color:2. border-width:3. border-style:

01Thuc tnh mu ca ng vin

t mu cho ng vin chng ta st 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 st gi tr cho thuc tnh border-width:

div.borerwidth {

border-width: 2px;}

STT Gi tr1 thin

2 medium

3 thick

4 length

03Chn kiu ca ng vin

Bn c th s dng thuc tnh border-stylet kiu cho ng vin. Chng ta c th gn chothuc 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


14/46

Cc bi hc v CSS


2 hidden

3 dotted

4 dashed

5 solid

6 double7 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:

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

STT Pha Thuc tnh

1 topborder-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 thuc tnh cang 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;

}


15/46

Cc bi hc v CSS


Cc thuc tnh ca margin

Thuc tnh margin snh ngha khong trng bao quanh mt phn t HTML. N c th dnggi tr m lng ni dung vo vi nhau. Tng ng vi 4 pha ca mt phn t chng ta c 4thuc 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. NhngOpera th khng h trnh vy. cho thng nht chng ta c tht margin mc nh choton b cc phn t.

Cc gi tr m thuc tnh margin c th nhn c l: auto, length, %. Chng ta t gi trno 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 shorthand

div.margin {

margin: 10px 4px 5px 9px; /* top | right | bottom | left*/

}


16/46

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, i vi phn t cng vin (border) th ng bao ny s bao trn ng vin ca phn t. Cng tng tnhng vin bn c tht 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 trtrn 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 nhng vin, t rng cho ng bao chng ta t gi tr ln cho thuctnh outline-width:

p {

outline-width: 2px;

}

03Chn kiu ng bao

chn kiu cho ng bao chng ta st ln lt cc gi tr cho thuc tnh outline-style:

p {

outline-style: dotted;

}

STT outline-style

1 none

2 hidden

3 dotted

4 dashed5 solid

6 double

7 groove

8 ridge

9 inset


17/46

Cc bi hc v CSS


10 outset

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

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

}


18/46

Cc bi hc v CSS


CSS padding

CSS padding snh ngha khong trng gia mp ca cc phn t ti cc phn t con hoc nidung bn trong. Chng ta khng th gn gi tr m cho thuc tnh ny. Cng ging nh marginthuc 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;

}


19/46

Cc bi hc v CSS


Lm th div c thanh cun (scrollbar) ging iFrame

Bi vit di y s gii thiu vi cc bn cch lm cho th c thanh cun ging khi ta sdng iFrame load mt trang khc.

Trc ht chng ta c v d von 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 gichng ta tin hnh style cho th , trc ht chng ta cn phi t cnh chiurng v chiu cao ca cho th

#scroll_box {

height: 120px;

width: 400px;

...

}

cho th hin th thanh cun chng ta st thuc tnh display ca th l auto

#scroll_box {

height: 120px;

width: 400px;

display: auto;

border: 1px solid #CCCCCC;


20/46

Cc bi hc v CSS


margin: 1em 0;

}

Khi bn a ni dung di hn chiu cao v chiu rng ca th th trnh duyt s tngsinh ra thanh cun ngang v thanh cun dc ging nh iFrame. K thut ny hin c kh nhiuWebsite s dng c cch th hin ni dung ring bit ca mnh.


21/46

Cc bi hc v CSS


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, nuWebsite 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. Trongbi vit ny ti xin hng dn cc bn lm mt kiu bubble n gin

Dng bubble thng c s dng trong vic trch dn li ni ca mt tc gi no , hoc trongcc li bnh lun trong cc blog.

1. nh dng HTML

y l v d ca mt kiu bubble n gin, cc bn c thng dng chng vo ngay trong siteca mnh. Chc cc bn thnh cng!Tc gi: CSSYeah.com

lm kiu bubllen gin ny chng ta s s dng hai th . Th cha li bnh lun, cn th


22/46

Cc bi hc v CSS


div.comment {

margin: 0;

padding: 10px;

background: #E8ECEF;

}

div.commentfooter {

padding: 8px 0 0 22px;

background: url(arrow-down.gif) no-repeat 20px 0 #FFFFFF;

}

span.author {

padding-left: 15px;

background: url(author.gif) no-repeat left center;

font-weight: bold;

}

div.commentfooter a {

color: #CC0000;

}

div.commentfooter a:hover,

div.commentfooter a:active {

text-decoration: none;

}

Trong phn ni dung do chng ta c th dng nhiu ln ng bubble ny, do vy chng ta nhdng thuc tnh class cho th


23/46

Cc bi hc v CSS


Cn bng vo gia mn hnh.

Bnh thng th bn mun t mt table c chiu rng cnh vo gia mn hnh th bn lm thno? c phi bn t thuc tnh align="center" vo trong th ?. Nu bn lm nh vy thbn chc kt qung nh bn trn mt s trnh duyt, cn mt s trnh duyt s khng thhin kt qu nh bn mun.

Sau y ti mun gii thiu vi bn mt tips nh trong CSS t mt table c kch thc cnh vo gia trang.

Gi s rng bn c mt table nh sau: . Nu by gibn mun t table vo gia trang mn hnh bn ch vic t cho hai thuc tnh margin-left v margin-right catable c gi tr bng auto.

Chng ta c m CSS nh sau:

table.center {

width: 780px;

margin-left: auto;

margin-right: auto;

}


24/46

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 nhng menu dngtab, khng phi v n xu m lun nghrng lm n kh v cu trc ca n rt phc tp. Chnhbn thn ti trc y cng nh vy. Nhng thc ra c phi nh vy khng? tr li cu hi by gichng ta cng nhau th Style cho mt kiu tab n gin xem n c thc s kh nhchng ta vn thng nghkhng?.

Trong menu dng ny bao gicng 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 diy.

u tin chng ta snh 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 nguyn tc th chng tac th dng mt trong ba th , , . Nhng ti sao ti li dng th , l bi v mtl do no m trnh duyt ca ngi xem khng ti c CSS t Website ca bn th h vnhiu c cu trc tab ca bn. nh dng ca phn mt nh sau

Trang chGii thiuSn phmTin tc

Lin h

By gichng ta snh 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;


25/46

Cc bi hc v CSS


padding: 0;

}

Trong cch nh dng ny ta c s dng mt k thut nh, l chng ta c s dng mt nh .gifc 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 tab khc, do vychng ta st cho tab mt class l active. V vy chng ta cn phi nh dng cho ring chocc 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 snh dng cho cc link nm trong th

ol.tab a {

font-weight: bold;

margin: 0;

padding: 5px 10px;

}

Cui cng by gichng ta snh dng phn cha ni dung ca mi tab. Phn ny chn ginl chng ta nh dng cho th cha ni dung.

div#content {

border: 1px solid #D3DDED;

border-top: none;padding: 10px;

}


26/46

Cc bi hc v CSS


K thut lm chhoa u dng (Drop cap)

Drop cap l mt trong nhng typography hay c dng trong cc tp ch trn giy cng nh cctp chin 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 sc tc ng mnh ti th gic ca ngi quan st. Chnh v l do m ngi ta vn thngdng cch ny cho cc bi bo ni bt cn s ch cao.

Tuy nhin trong khun kh ca lnh vc nghin cu chng ta si tm hiu mt s k thut lmch hoa u dng (Drop cap).

1. Cch thnht

u tin chng ta si tm hiu cch lm Drop cap chnh thng. Trong cch ny chng ta s sdng n k thut selectors trong CSS. c th l chng ta s dng n thuc tnh :first-letter.

Ta c nh dng HTML:

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.

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 sitconsectetuer ipsum malesuada convallis habitant. Neque at pellentesque pharetra Aeneanaccumsan orci Proin leo tellus eu. Dictumst Integer ut adipiscing porttitor dolor Morbi ut idlorem auctor. Massa tellus Morbi enim tellus pede vel suscipit hac sapien Cras. Cursus velithendrerit lobortis elit elit sed ut In.


27/46

Cc bi hc v CSS


Chng ta cn phi t class cho th

nhm mc ch phn bit n vi ccth

khc trong trang. Trong trng hp bn khng t class th ton b cc k tu dngca th

trong trang s hin thnh dng ch hoa, m iu th khng phi l iu mongmun.

2. Cch thhai

Trong cch th hai ny ta s dng thm mt th bao k t ch hoau dng

nh dng HTML:

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 velsuscipit hac sapien Cras. Cursus velit hendrerit lobortis

elit 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 id pede sitconsectetuer ipsum malesuada convallis habitant. Neque at pellentesque pharetra Aeneanaccumsan orci Proin leo tellus eu. Dictumst Integer ut adipiscing porttitor dolor Morbi ut idlorem auctor. Massa tellus Morbi enim tellus pede vel suscipit hac sapien Cras. Cursus velithendrerit lobortis elit elit sed ut In.

Cch ny c mt u im l k t hoa c tht bt cu trong bi vit min l chng ta

thm th vo k t m ta mun chuyn thnh 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 convallis habitant. Neque atpellentesque pharetra Aenean accumsan orci Proin leo tellus eu. Dictumst Integer ut adipiscing


28/46

Cc bi hc v CSS


porttitor dolor Morbi ut id lorem auctor. Massa tellus Morbi enim tellus pede vel suscipit hacsapien Cras. Cursus velit hendrerit lobortis elit elit sed ut In.


29/46

Cc bi hc v CSS


Trang tr cho danh sch c tht

Mc nh hu ht cc trnh duyt (Browser) u hin th ch s ca danh sch c th t (orderlist) theo font mc nh m chng ta s dng cho ni dung site. Trong bi ch dn ngn ny tixin hng dn cc bn lm th no s dng hai th (orderlist) v

thm trang trthm 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 tWeb Designer Wall


30/46

Cc bi hc v CSS


K thut ti nh trc bng CSS

Trong file CSS ca bn c s dng n mt snh background, nhng nhng nh s khngc trnh duyt ti v trong bm (cache) trn my ngay tu, m khi no s dng n thn mi c ti v. Chnh v vy i khi n s sinh ra tr khi chng ta ln u tin khi votrang Web.

Chng ta ly mt v d nh sau: Gi s rng trong th ca bn c s dng hai nh, mt nhlm dng hin th ngay tu, cn mt nh khc s dng cho thuc tnh :hover. KHi ln utin bn vo Website khi hover chut ln th th n s khng hin th anh th hai ngaym 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 snh m chng ta cn s dng lm background trong file css, m chng ta khngmun c tr nh v d trn th chng ta cn c bin php ti trc nhng nh v my.

Chng ta st 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 tht on m CSS trn vo trong file CSS ca bn, hoc t vo trong th catrang. V d

#preLoadImages {

width: 0px;

height: 0px;


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

...

}


31/46

Cc bi hc v CSS


Sau chng ta t on th trn vo ngay di th caWebsite ca bn. Khi trnh duyt c ti th n s load ton b nhng nh c lit ktrong danh sch trn vo trong bm ca trnh duyt.

...


32/46

Cc bi hc v CSS


Fix min-height cho IE

Hin ti hu ht cc trnh duyt nh Firefox, Opera, Safari,... u hiu c thuc tnh min-height: trong CSS, nhng IE li khng th hiu c thuc tnh . Chnh v vy m khi chngta mun t min-height cho mt i tng no th chng ta cn phi Fix sao cho IE hinthc ging nh nhng trnh duyt khc.

Gi s rng chng ta c mt th chng ta mun t min-height cho 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;

}

/**/

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 cnh chiu cao cho n.Trong trng hp ni dung c chiu cao ln hn height th chiu cao trong IE6 s tng kodi xung cn trong Firefox v mt s trnh duyt khc s s dng thuc tnh height: auto;.


33/46

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, ngycng c nhiu mn hnh c phn gii cao. N cho php chng ta c mt khng gian lm vicrng hn, nhng i khi n cng l vn bt cp i vi Website ca chng ta.

i vi mt sWebsite vn thng chiu ngang l auto theo chiu rng ca mn hnh th bygiti nghrng cn c mt cht thay i nh.

Chng ta cht chiu rng Website ca mnh auto ti mt khong nht nh (gi s rng ti1024px,...) th chng ta s cnh chiu rng ca n. iu s gip bn chng hn trongvic thit k giao din ha ca mnh, trnh tnh trng Website s b vkhi chiu ngang camn hnh qu ln.

thc hin iu chng ta s s dng thuc tnh max-width trong CSS, nhng c mt vny l cc trnh duyt nh Firefox, Opera, Safari,.. th hiu nhng ring IE6 li khng thhiu c thuc tnh ny.

c th thc hin iu trn IE6 chng ta c mt gii php l s dng cu lnh iu kin caJavascript 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;

}


34/46

Cc bi hc v CSS


CSS Transparency trn ton b cc trnh duyt

Trong bi vit "Hin thnh PNG trn IE" chng ti cp n vn lm sao transparentton bnh 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 thutny 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;

}

1. opacity: 0.5;y l mt thuc tnh rt quan trng bi n l mt thuc tnh chun caCSS. N s lm vic trn hu ht cc phin bn ca Firefox, Opera v Safari. Thuc tnhtrn 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).


35/46

Cc bi hc v CSS


Border v nhng iu bn cha bit

Gi 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 nghrng 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 , nhngkhi bn c th phng to th nhiu ln th bn s thy iu . Di y l mt s kt quthy 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 nhtibi vit ny ca chng ti.


36/46

Cc bi hc v CSS


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 nocng pha di l mt vic ht sc n gin. Nhng khi bn lm vic vi layout dng thvic a phn footer lc no cng pha di l mt iu rt kh khn. Mc d nh vy ccDesigner CSS vn nghra c cc th thut (trick) thc hin vic .

Sau y chng ta si 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.

tng cho ca k thut ny l chng ta s dng mt th c chiu cao l 100% y phn footer xung pha di, khi th phn footer s by ra ngoi phm vi ca trang v

khng th nhn thy c.

c th nhn thy c phn footer chng ta st thuc tnh margin-bottom ca phnwrapper bng m vi mc ch l gim chiu cao ca phn wrapper mt khong ng bng chiucao 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 */

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 CSS ca n nhsau:

.wrapper {

...


37/46

Cc bi hc v CSS


min-height: 100%; /* Fix cho firefox */

height: auto !important;

height: 100%;

...

}

Khi phn footer s by ra ngoi trang, cho n c th nhn thy c ta cn phi tmargin-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 footersc hin th hon ton.


38/46

Cc bi hc v CSS


t dng text vo gia ( theo chiu cao)

T trc ti gikhi bn mun t mt dng ch (gi s nh) tiu vo gia mt th HTML cmt chiu cao xc nh th bn lm th no? Theo truyn thng dng th chng ta chvic t thuc tnh valign="middle" vo trong mt th l xong. Nhng nu khng phi lth 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 gibn mun t mt dng tiu c ni dung Tin mi nht vo gia (theo chiucao) ca th HTML .

Bn c th dng thuc tnh paddingy dng ch vo gia, nhng khng phi l giiphp 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;

}


39/46

Cc bi hc v CSS


Hin thnh PNG trn IE

Hin nh dng nh PNG chc h trbi mt s trnh duyt mi nhFirefox, Opera, IE7.Cn mt s trnh duyt c nh t IE6 trxung u khng h trnh dng nh ny. Trong bivit 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 cchthc lm cho nh dng PNG hin th tt trn IE. M chng ta ch dng li cch lm tc 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 file script votrong ti liu HTML ca bn. Gi s rng file script bn trong th mc cng cp vi ti liuHTML.

Tip bn copy nh blank.gifvo cng th mc vi file script.


40/46

Cc bi hc v CSS


Style cho th hr

l mt th tng, iu c ngha l n khng cn thng nh nhng th HTML khc.Th s to ra mt ng k ngang trn trnh duyt v khong cch gia ng k v nidung th ph thuc vo cc trnh duyt khc nhau.

Tuy nhin bn hon ton c th thay i cch hin th ca th theo mnh trn mt s trnhduyt. i vi mt s trnh duyt mi (IE6, IE7, Firefox, Opera, Mozilla...) th cch nh dngca bn hon ton c th tng thch.

Trong cch nh dng th chng ta cng cn phi ch mt cht v cch m cch trnhduyt x li vi i tng th . 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 thnh dng, nhng khng phi lmt 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 tnh margin quynh khong cch ny.

hr {

color: red;

background: red;

border: 0;

height: 1px;

margin: 10px 0 20px; }


41/46

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 gmi m. Nhng i vi nhng bn mi lm quen vi CSS th ti nghrng y l mt k thutm bn nn tm hiu n.

K thut Sliding Doors(k thut ca ko), l mt k thut c ng dng rt nhiu trong vic tora cc button, hay cc menu ngang kiu tab,Trong bi vit ny chng ta si tm hiu tngcho 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 cnh v mt bn ca s linh ng c th ko ra hoc ko vo ty thch. Bn cht ca k thutSliding 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 cnh, cn phn bn phi s l phn ng(Vic phn chia ny ty theo thch ca bn, bn c thphn chia phn bn phi cnh v phn bn tri l phn ng). iu cng c ngha l phnbn tri s c kch thc va phi, cn phn bn phi cn c kch thc lun ln hn hoc bngni dung m bn dnh a vo(m bo rng i tng ca chng ta ging nh btgy).

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 cnh v phn bn phi s c ra hoc dn voty theo ni dung bn trong ca i tng cn to. Do vy vi cch lm nh trn th chng ta cnto 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 ritrong vic to button, to menu kiu tab, minh ha cho iu ti va trnh by by sau yti 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 nidung cao(chng ta c th thay i ni dung trong mt cch ty ). Sau y l chi tit tng bclm c th.

1. To nt bng Photoshop


42/46

Cc bi hc v CSS


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:

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 ralm 2 phn. c th ct hnh c chnh xc ti khuyn bn nn s dng cng c Slice(SliceTools) 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 b thiu.

3. Thc hin vit m HTML v CSS.

Chng ta c nh dng m HTML nh sau:

Ni dung

Gii thch:

1. Sdchng ta cn phi s dng 2 phn th HTML trong vic ny l do i tng cachng ta c chia lm 2 phn, v mi phn t s lm nhim v gi mt phn ca itng.

2. Chng ta s dng th bao ngoi cng m bo rng ton b nt s link c khi

di chut ln trn nt. ng thi th ny s cha phn ng bn phi.3. Th s lm nhim v gi phn cnh 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 {


43/46

Cc bi hc v CSS


color: #FF0;

}

a.sign-up span {

margin: 0;

padding: 28px 0 28px 90px;

background: url(images/signup-left-bg.gif) no-repeat left center;

}


44/46

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 vitgin lc(shorthand) trong CSS. Cch vit ny thc s mang li nhng li ch v tin li khi bns dng CSS.

Trc khi i vo phn tch nhng tin li m n mang li, ti xin ly mt v dn gin nh sau.Gi s rng chng ta mun nh dng cho mt th c ng vin bao quanh th chng tacn phi vit.

border-width: 1px;



Thay v phi vit nh vy chng ta ch cn vit

border: 1px solid #CC0000;

Qua v dn 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 lngca 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 vitgin lc.

1. Thuc tnh Color

C rt nhiu cch nh ngha mt mu trong CSS, chng ta c thnh ngha theo h sHexa(trong h mu RGB), hoc chng ta c th vit tn mu (v d: white, red). Nhng cchnh ngha theo h s Hexa c s dng thng dng nht. nh ngha theo h Hexa chng tast 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). Trongcch nh ngha h s mu ta cng c cch vit gin lc nh sau: #000000 c th vit #000hoc #003366 c th vit #036

2. Thuc tnh margin v padding.

margin-top: 10px;

margin-right: 15px;


45/46

Cc bi hc v CSS


margin-bottom: 20px;

margin-left: 25px;

c thay th bng

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


46/46

Cc bi hc v CSS

background: #CC0000 url(image url) no-repeat top left;

5. Thuc tnh font

font-size: 1em;

line-height: 1.5em;

font-variant:small-caps;font-weight: bold;

font-style: italic;

font-famyli: Arial, Verdana, Sans-serif;

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 danhsch khng c th t unordered lists, s dng hnh nh cho mi dng v s dng list-type-stylel 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 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 trthuc tnh ny, hin ti ch cmt s trnh duyt h trthuc tnh ny Safari, OmniWeb v Opera. Cch vit gin lc ccthuc tnh ny nh sau:

outline-color: #000;

outline-style: solid;

outline-with: 2px;

Cch vit gin lc s l

Documents

CSS TiengViet