NHC LI BI TRC Lm vic vi cc thuc tnh mi trong CSS3: Border-radius Border-image Gradient Transform, transition, animation Lm vic vi font web Chn nhiu hnh nn vi CSS3
Slide 6 - Lm vic vi thnh phn m rng ca CSS3 2
MC TIU BI HC Gii thiu CSS3 Media Queries Lm vic vi CSS3 layout dng nhiu ct (Multi- columns) v cu trc hp Flex (Flexboxes) CSS3 user interface
Slide 6 - Lm vic vi thnh phn m rng ca CSS3 3
CSS3 MEDIA QUERIES CSS3 MEDIA QUERIES i vi tt c cc trnh duyt/ thit b giao tip vi my ch lu tr website v t c nh dng vi user agent String CSS3 media queries: Hnh thc nhn bit thit b Kim tra kh nng ca ngi dng truy cp vo trang web Nhn bit (pht hin) c: chiu cao, chiu rng ca trnh duyt, thit b, thit b nh hng (phong cnh/ chn dung), phn gii
Slide 6 - Lm vic vi thnh phn m rng ca CSS3 5
CSS3 MEDIA QUERIES S dng CSS3 media queries cung cp layout ph hp vi cho layout mobile @media only screen and (max-width: 480px) { body { padding: 5px; background-color:#FFF; background- image:url(images/smoothieworld_logo_mobile.jpg); background- repeat:no-repeat; }
Quy
nh
chiu
rng
ln
nht
khi
hin
th
:
480px
S
dng
min-width,
max-width
khai
bo
chiu
rng
hin
th
s
ch
trong
khong
Slide 6 - Lm vic vi thnh phn m rng ca CSS3 6
CSS3 MEDIA QUERIES Quy nh chiu rng ca trang c hin th trn thit b @media only screen and (max-device-width: 480px)
Kt
qu
hin
th
trn
trnh
duyt
ca
iPhone
Slide 6 - Lm vic vi thnh phn m rng ca CSS3 7
CSS3 MEDIA QUERIES iu hng trn thit b di ng: Nn thit k v tr iu hng n gin hn khi hin th trn trnh duyt my tnh Gi : Nn c, nn gn u mn hnh d truy cp Lp li iu hng pha di trang Vi thit b cm ng, s dng kch thc ln cho link ca iu hng Trnh iu hng t hnh nh, nn da trn danh sch chuyn hng dng CSS
Slide 6 - Lm vic vi thnh phn m rng ca CSS3 8
CSS3 MEDIA QUERIES V d: #mainnav {height: auto;} #mainnav li { float: none; width: auto; text-align: left; border-top: 1px grey solid; border-bottom: 1px grey solid; }
Slide 6 - Lm vic vi thnh phn m rng ca CSS3 9
CSS3 LAYOUT CSS3 LAYOUT Layout nhiu ct s dng CSS3: CSS3 cung cp cc thuc tnh thun tin cho vic thit k layout dng nhiu ct: Column-count: quy nh c th s lng cc ct mt phn t c chia thnh. Column-width: quy nh c th chiu rng ca cc ct Column-gap: quy nh khong cch gia cc ct Column-rule: l thuc tnh vit tt, cho php thit lp tt c cc thuc tnh: chiu rng, style, mu sc gia cc ct
CSS3 LAYOUT Thit lp layout dng hp Flexible (hp linh hot): L dng b cc mi trong CSS3 i din cho mt trong bn dng layout ang c h tr bi CSS2.1 #introduction-content { width: 600px; height: 150px; border: 1px solid #821738; display: -webkit-box; -webkit-box-orient: horizontal; display: - moz-box; -moz-box-orient: horizontal; }
Slide 6 - Lm vic vi thnh phn m rng ca CSS3 13
CSS3 USER INTERFACE (GIAO DIN NGI DNG) CSS3 USER INTERFACE CSS3 cung cp mt s tnh nng v pha ngi dng: Thay i kch thc thnh phn trn trang Thay i kch thc hp Phc tho Cc thuc tnh quy nh: Resize box-sizing outline-offset
Slide 6 - Lm vic vi thnh phn m rng ca CSS3 15
CSS3 USER INTERFACE CSS3 resize: Quy nh mt thnh phn c th hay khng th thay i kch thc bi ngi dng .show_boxre{ border:2px solid; padding:10px 40px; width:300px; resize:both; overflow:auto; }
Slide 6 - Lm vic vi thnh phn m rng ca CSS3 16
CSS3 USER INTERFACE CSS3 box-sizing: Cho xc nh yu t ph hp vi mt khu vc CSS3: div.Container { width:30em; border:1em solid;} div.box{box-sizing: border-box; -moz-box-sizing:border-box; -webkit-box- sizing:border-box; width:50%; border:1em solid red; float:left;} HTML: <div class="container"> <div class="box">This div occupies the left half.</div> <div class="box">This div occupies the right half.</div> </div>
Slide 6 - Lm vic vi thnh phn m rng ca CSS3 17
CSS3 USER INTERFACE CSS3 Outline Offset: Quy nh mt ng bin, bao pha bn ngoi ng bin mc nh 2 cch to ng outline: khng mt khng gian Khng phi dng hnh ch nht
Slide 6 - Lm vic vi thnh phn m rng ca CSS3 18
CSS3 USER INTERFACE CSS3 Outline Offset: div { margin:20px; width:150px; padding:10px; height:70px; border:2px solid black; outline:2px solid red; outline-offset:15px; }
<p><b>Note:</b> Internet Explorer and Opera does not support the
outline-offset property.</p>
<div>This div has an outline border 15px outside the border edge.</div>
Slide 6 - Lm vic vi thnh phn m rng ca CSS3 19
TNG KT S dng CSS3 media queries thit k layout ph hp vi trnh duyt, thit b CSS3 gip ngi thit k to c dng layout nhiu ct hn. Gip b tr thng tin thun tin, r rng cho ngi dng CSS3 cung cp mt s thuc tnh tng tc vi ngi dng khi duyt web. Ngi dng c th thay i kch thc cc thnh phn trn trang