BI 6

LM VIC VI THNH PHN M RNG CA CSS3

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

MC TIU BI HC
Gii thiu CSS3 Media Queries
Lm vic vi CSS3 layout dng nhiu ct (Multicolumns) v cu trc hp Flex (Flexboxes)
CSS3 user interface

Slide 6 - Lm vic vi thnh phn m rng ca CSS3

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

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; backgroundimage:url(images/smoothieworld_logo_mobile.jpg); backgroundrepeat: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

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

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

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

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

Slide 6 - Lm vic vi thnh phn m rng ca CSS3

11

CSS3 LAYOUT
Cch thit lp:
#introduction-content
{
width: 600px;
-moz-column-count:
3;
-webkit-columncount: 3;
column-count: 3;
}

Slide 6 - Lm vic vi thnh phn m rng ca CSS3

12

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

Slide 6 - Lm vic vi thnh phn m rng ca CSS3

20