Slide6 - Co ban HTML5

download Slide6 - Co ban HTML5

If you can't read please download the document

  • date post

    27-May-2015
  • Category

    Technology

  • view

    326
  • download

    2

Embed Size (px)

Transcript of Slide6 - Co ban HTML5

  • 1. BI 6 LM VIC VI THNH PHN M RNG CA CSS3

2. 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 3. 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 4. CSS3 MEDIA QUERIES 5. 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 6. CSS3 MEDIA QUERIES S dng CSS3 media queries cung cp layout ph hp vi cho layout mobile Slide 6 - Lm vic vi thnh phn m rng ca CSS3 6 @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; } Quynhchiurnglnnhtkhi hinth:480px Sdngmin-width,max-widthkhaibochiu rnghinthschtrongkhong 7. CSS3 MEDIA QUERIES Quy nh chiu rng ca trang c hin th trn thit b Slide 6 - Lm vic vi thnh phn m rng ca CSS3 7 @media only screen and (max-device-width: 480px) KtquhinthtrntrnhduytcaiPhone 8. 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 9. CSS3 MEDIA QUERIES V d: Slide 6 - Lm vic vi thnh phn m rng ca CSS3 9 #mainnav {height: auto;} #mainnav li { float: none; width: auto; text-align: left; border-top: 1px grey solid; border-bottom: 1px grey solid; } 10. CSS3 LAYOUT 11. 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 Slide 6 - Lm vic vi thnh phn m rng ca CSS3 11 12. CSS3 LAYOUT Cch thit lp: Slide 6 - Lm vic vi thnh phn m rng ca CSS3 12 #introduction-content { width: 600px; -moz-column-count: 3; -webkit-column- count: 3; column-count: 3; } 13. 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 Slide 6 - Lm vic vi thnh phn m rng ca CSS3 13 #introduction-content { width: 600px; height: 150px; border: 1px solid #821738; display: -webkit-box; -webkit-box-orient: horizontal; display: - moz-box; -moz-box-orient: horizontal; } 14. CSS3 USER INTERFACE (GIAO DIN NGI DNG) 15. 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 16. CSS3 USER INTERFACE CSS3 resize: Quy nh mt thnh phn c th hay khng th thay i kch thc bi ngi dng Slide 6 - Lm vic vi thnh phn m rng ca CSS3 16 .show_boxre{ border:2px solid; padding:10px 40px; width:300px; resize:both; overflow:auto; } 17. CSS3 USER INTERFACE CSS3 box-sizing: Cho xc nh yu t ph hp vi mt khu vc Slide 6 - Lm vic vi thnh phn m rng ca CSS3 17 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:

This div occupies the left half.
This div occupies the right half.

18. 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 19. CSS3 USER INTERFACE CSS3 Outline Offset: Slide 6 - Lm vic vi thnh phn m rng ca CSS3 19 div { margin:20px; width:150px; padding:10px; height:70px; border:2px solid black; outline:2px solid red; outline-offset:15px; }

Note: Internet Explorer and Opera does not support the outline-offset property.

This div has an outline border 15px outside the border edge.

20. 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 Slide 6 - Lm vic vi thnh phn m rng ca CSS3 20