5. CSS Advanced

7/27/2019 5. CSS Advanced

1/39

KHOA CNTT - TUDKHOA CNTT - TUD

CSS AdvancedCSS Advanced

Trn Khi Hong

Khoa CNTT TD.

H Tn c Thng


2/39

Ni dung

CSS Display

CSS Position

CSS Float

CSS Align

CSS Navigation Bar

CSS Image Gallery

CSS Image Sprite CSS Image Opacity

2


3/39

Ni dung

CSS Display

CSS Position

CSS Float

CSS Align

CSS Navigation Bar

CSS Image Gallery


3


4/39

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


5/39

n element

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

visibility :hidden;

visibility:hidden; n element nhng khong khng tiv tr element vn c gi nguyn

display:none; element s khng chim gi bt kkhong khng no. Trnh duyt s hin th nh khngc element ny.


6/39

Demo n element

DisplayHidden.html


7/39

Block v inline element

Block element l 1 element khi hin th s chim ton b chiungang c th v c xung dng pha trc v pha sau n.

V d block element : ,,

,

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 : ,

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

display:inline;

display:block;


8/39

Demo i kiu hin th

DisplayBlockInline.html


9/39

Ni dung

CSS Display

CSS Position

CSS Float

CSS Align

CSS Navigation Bar

CSS Image Gallery


9


10/39

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

Hoc qui nh cch hin th khi ni dung element ln vtqu kch thc ca element


11/39

Thuc tnh position

Thuc tnh position qui nh v tr ca element. C cckiu position sau :

position:static; l kiu hin th mc nh ca trnh duyt. Ccelement s hin th theo kiu bnh thng. Element no xuthin trc s trn, ri n cc element k tip

position:fixed;

position:relative;

position:absolute;


12/39

Fixed position

position:fixed; => element s c tng i so vi ca strnh duyt. N thm ch khng b di chuyn khi ca s bcun

Lc ny ta kt hp vi cc thuc tnh left, right, top, bottom qui nh cc element s cch bn tri, phi, trn hoc dica 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 cfixed element


13/39

Demo fixed element

PositionFixed.html


14/39

Relative position

position:relative; => element s c v tr tng i sovi v tr ca n lc hin th bnh thng (static)

Ni dung ca relative position c th di chuyn lncc element khc (ty thuc vo thuc tnh left, right,

top, bottom) nhng khong khng dnh cho elementny vn c gi li.


15/39

Demo relative element

PositionRelative.html


16/39

Absolute position

position:absolute; => element s c v tr tng i sovi element cha gn nht m c position l relative.

Mc nh body c position:relative;


17/39

Demo absolute position

AbsolutePosition.html


18/39

Overlap element

Nu 2 element b chng ln nhau(overlap) khi hin thth ta c th s dng thuc tnh z-index qui nhelement no s c nm trn

Gi tr z-index l 1 s nguyn (c th m)

z-index cng cao th s nm trn.


19/39

Demo overlap

PositionOverlap.html


20/39

Ni dung

CSS Display

CSS Position

CSS Float

CSS Align

CSS Navigation Bar

CSS Image Gallery


20


21/39

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


22/39

Demo float

Float.html


23/39

Tt float

Cc element pha sau s t ng bao quanh floatelement. trnh chuyn ny xy ra ta c th thmthuc tnh clear

clear:left; => khng cho float bn tri

clear:right; => khng cho float bn phi clear:both; => khng cho float c 2 bn


24/39

Demo float clear

FloatClear.html


25/39

Ni dung

CSS Display

CSS Position

CSS Float

CSS Align

CSS Navigation Bar

CSS Image Gallery

CSS Image Sprite

CSS Image Opacity

25


26/39

Align

Ta c th align 1 block element s dng : margin

position

Nu mun align text s dng thuc tnh text-align


27/39

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 :


28/39

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;


29/39

Demo align block left,right,center


30/39

Ni dung

CSS Display

CSS Position

CSS Float

CSS Align

CSS Navigation Bar

CSS Image Gallery

CSS Image Sprite

CSS Image Opacity

30


31/39

Demo cch to navigation bar ngang


32/39

Demo cch to navigation bar dc


33/39

Ni dung

CSS Display

CSS Position

CSS Float

CSS Align CSS Navigation Bar

CSS Image Gallery

CSS Image Sprite

CSS Image Opacity

33


34/39

Lm 1 gallery


35/39

Ni dung

CSS Display

CSS Position

CSS Float


CSS Image Gallery

CSS Image Sprite

CSS Image Opacity

35


36/39

Demo image sprite

ImageSprite.html


37/39

Ni dung

CSS Display

CSS Position

CSS Float


CSS Image Gallery

CSS Image Sprite

CSS Image Opacity

37


38/39

Opacity

Ta c th lm m i 1 hnh nh bng cch s dngthuc 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)


39/39

Demo image opacity

ImageOpacity

5. CSS Advanced

Documents