KHOA CNTT - TUD

CSS Advanced
Trn Khi Hong Khoa CNTT TD. H Tn c Thng

Ni dung
CSS Display CSS Position CSS Float CSS Align CSS Navigation Bar CSS Image Gallery CSS Image Sprite CSS Image Opacity

Ni dung
CSS Display CSS Position CSS Float CSS Align CSS Navigation Bar CSS Image Gallery CSS Image Sprite CSS Image Opacity

CSS Display
Thuc tnh display qui nh cch 1 element hin th. Thuc tnh visibility qui nh 1 element s c hin th hay n i

n element
Ta c th n 1 element bng cch s dng :
display:none; visibility :hidden;

visibility:hidden; n element nhng khong khng ti v tr element vn c gi nguyn display:none; element s khng chim gi bt k khong khng no. Trnh duyt s hin th nh khng c element ny.

Demo n element
DisplayHidden.html

Block v inline element

Block element l 1 element khi hin th s chim ton b chiu ngang c th v c xung dng pha trc v pha sau n.
V d block element : <h1>,<h2>,<p>,<div>

Inline element l 1 element khi hin th ch chim chiu ngang hin th ni dung, v khng c xung dng pha trc hay pha sau
V d inline element : <a>,<span>

Ta c th thay i cch hin th mc nh ca 1 element s dng display:

display:inline; display:block;

Demo i kiu hin th

DisplayBlockInline.html

Ni dung
CSS Display CSS Position CSS Float CSS Align CSS Navigation Bar CSS Image Gallery CSS Image Sprite CSS Image Opacity

CSS position
Cc thuc tnh CSS position cho php :
Ta c th t v tr xut hin ca cc element. Thm ch t 1 element pha trn hay pha di 1 element khc. Hoc qui nh cch hin th khi ni dung element ln vt qu kch thc ca element

Thuc tnh position

Thuc tnh position qui nh v tr ca element. C cc kiu position sau :
position:static; l kiu hin th mc nh ca trnh duyt. Cc element s hin th theo kiu bnh thng. Element no xut hin trc s trn, ri n cc element k tip position:fixed; position:relative; position:absolute;

Fixed position
position:fixed; => element s c tng i so vi ca s trnh duyt. N thm ch khng b di chuyn khi ca s b cun Lc ny ta kt hp vi cc thuc tnh left, right, top, bottom qui nh cc element s cch bn tri, phi, trn hoc di ca ca s bao nhiu pixel ? Lu : IE ch h tr fixed postioned khi HTML c th ! DOCTYPE fixed element s b loi khi cch hin th thng thng. Trnh duyt s hin th v tr cc element khc nh khng c fixed element

Demo fixed element

PositionFixed.html

Relative position
position:relative; => element s c v tr tng i so vi v tr ca n lc hin th bnh thng (static) Ni dung ca relative position c th di chuyn ln cc element khc (ty thuc vo thuc tnh left, right, top, bottom) nhng khong khng dnh cho element ny vn c gi li.

Demo relative element

PositionRelative.html

Absolute position
position:absolute; => element s c v tr tng i so vi element cha gn nht m c position l relative. Mc nh body c position:relative;

Demo absolute position

AbsolutePosition.html

Overlap element
Nu 2 element b chng ln nhau(overlap) khi hin th th ta c th s dng thuc tnh z-index qui nh element no s c nm trn Gi tr z-index l 1 s nguyn (c th m) z-index cng cao th s nm trn.

Demo overlap
PositionOverlap.html

Ni dung
CSS Display CSS Position CSS Float CSS Align CSS Navigation Bar CSS Image Gallery CSS Image Sprite CSS Image Opacity

20

CSS Float
Vi CSS float, 1 element c th tri v bn tri hoc bn phi cho cc element khc c th nm bao quanh n CSS float rt hu ch khi hin th nh hoc lm layout 1 float element s tri v bn tri hoc phi cho n khi ng bin hoc 1 element khc Cc element pha sau 1 float element s nm bao quanh n Cc element pha trc 1 float lement s khng b nh hng Nu 1 nh tri v bn phi, vn bn s bao quanh n bn tri

Demo float
Float.html

Tt float
Cc element pha sau s t ng bao quanh float element. trnh chuyn ny xy ra ta c th thm thuc tnh clear
clear:left; => khng cho float bn tri clear:right; => khng cho float bn phi clear:both; => khng cho float c 2 bn

Demo float clear

FloatClear.html

Ni dung
CSS Display CSS Position CSS Float CSS Align CSS Navigation Bar CSS Image Gallery CSS Image Sprite CSS Image Opacity

25

Align
Ta c th align 1 block element s dng :
margin position

Nu mun align text s dng thuc tnh text-align

Align gia
Ta c th align 1 block element chnh gia bng cch
t width t margin-left v margin-right l auto

V d :

Align tri, phi

align tri 1 element ta :
t position: absolute; t left : 0px;

align phi 1 element ta :

t position: absolute; t right: 0px;

Demo align block left,right,center

Ni dung
CSS Display CSS Position CSS Float CSS Align CSS Navigation Bar CSS Image Gallery CSS Image Sprite CSS Image Opacity

30

Demo cch to navigation bar ngang

Demo cch to navigation bar dc

Ni dung
CSS Display CSS Position CSS Float CSS Align CSS Navigation Bar CSS Image Gallery CSS Image Sprite CSS Image Opacity

33

Lm 1 gallery

Ni dung
CSS Display CSS Position CSS Float CSS Align CSS Navigation Bar CSS Image Gallery CSS Image Sprite CSS Image Opacity

35

Demo image sprite

ImageSprite.html

Ni dung
CSS Display CSS Position CSS Float CSS Align CSS Navigation Bar CSS Image Gallery CSS Image Sprite CSS Image Opacity

37

Opacity
Ta c th lm m i 1 hnh nh bng cch s dng thuc tnh :
opacity :1.0; (cho FF) filter:alpha(opacity=100); (cho IE)

1.0 (100) : Khng trong sut 0.0 (0) : Trong sut hon ton (khng th nhn thy)

Demo image opacity

ImageOpacity