03 - Noi Dung Web - Phan 3 - Html5 - Css3

7/22/2019 03 - Noi Dung Web - Phan 3 - Html5 - Css3

1/42

Lnh Thanh

B mnMng vTruyn thng My tnh

Khoa Cngngh Thng tinTrng i hc Cngngh, HQGHNE-mail: [email protected], [email protected]

Mobile: 0987.257.504

Biging

LP TRNH WEB


2/42

Ni dung webBi 3

Lnh Thanh, Biging Lp trnh web.


3/42

Ni dung

HTML CSS

JavaScript

DOM S phttrin: HTML5, CSS3



4/42

S phttrin ca HTML: HTML5

HTML 4 c s dng t 1999

HTML 5 ang c xut, tng lais thnhchun

Cc trnhduyt chnh (Safari, Chrome, Firefox,Opera, Internet Explorer) h tr dn HTML 5



5/42

Cclut cho HTML 5

Ccc trng mi da trn HTML, CSS, DOMv javascript

Gim cc plugin

X lli tt hn

Nhiu nh du thay chokch bn

c lp thit b



6/42


7/42

i tngnhp mu



8/42

i tngnhp ngy



9/42

i tngnhp gi



10/42

i tngnhp ngygi



11/42

i tngnhp ngygi a phng



12/42

i tngnhp tun



13/42


14/42

i tngnhp thng



15/42

i tngnhp s



16/42

i tngnhp gitr trongkhong



17/42

i tngnhp ni dung tmkim



18/42

i tngnhp in thoi



19/42

i tngnhp URL



20/42

i tngt ng honchnh nhp



21/42

i tngto kha



22/42

i tng ra



23/42

i tng video



24/42

iu khin chy video



25/42


26/42

Lu tr web: localStorage



27/42

Lu tr web: sessionStorage



28/42

S dng m

m giptng tc , gim ti cho server, cho phpduyt offline t thuc tnh manifest cho html


29/42

Web worker

Chng trnh javascriptchy nn nh ngha web worker tp .js

S dng postMessage(obj); a thng bo ra trang HTML

To web worker

if(typeof(Worker)!=="undefined") {if(typeof(w)=="undefined") {w=new Worker("workers.js");}

w.onmessage = function (event) {//access event.data;

};}

Dng web workerw.terminate();



30/42

S kin server gi

To i tng nhn s kin server giif(typeof(EventSource)!=="undefined") {var source=new EventSource("sse.php");source.onmessage=function(event) {

//access event.data

};}

M pha server



31/42

CSS3

Lchun CSSmi nht Thchng ngc Ccmun quantrng nht

B chn M hnhhp Nn vvin Hiu ng vn bn Bin i 2D/3D

Hot cnh Dnnhiu ct Giaodin ngi dng



32/42

To vin trn gc

border:2px solid;border-radius:25px;-moz-border-radius:25px; /* Old Firefox */



33/42

To bng

box-shadow: 10px 10px 5px #888888;



34/42

S dng nh lmvin

border-image:url(border.png) 30 30 round;-moz-border-image:url(border.png) 30 30round; /* Old Firefox */

-webkit-border-image:url(border.png) 30 30round; /* Safari and Chrome */-o-border-image:url(border.png) 30 30 round;

/* Opera */



35/42

nh dng nn

background:url(img_flwr.gif);background-repeat:no-repeat;background-size:100% 100%;

-webkit-background-origin:content-box; /*Safari */background-origin:content-box;



37/42

Bin i 2D

transform: rotate(30deg);-ms-transform: rotate(30deg); /* IE 9 */-webkit-transform: rotate(30deg); /* Safari and Chrome */-o-transform: rotate(30deg); /* Opera */-moz-transform: rotate(30deg); /* Firefox */

transform: translate(50px,100px);-ms-transform: translate(50px,100px); /* IE 9 */-webkit-transform: translate(50px,100px); /* Safari and Chrome */

-o-transform: translate(50px,100px); /* Opera */-moz-transform: translate(50px,100px); /* Firefox */ transform: scale(2,4);

-ms-transform: scale(2,4); /* IE 9 */-webkit-transform: scale(2,4); /* Safari and Chrome */-o-transform: scale(2,4); /* Opera */-moz-transform: scale(2,4); /* Firefox */

transform: skew(30deg,20deg);-ms-transform: skew(30deg,20deg); /* IE 9 */-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */-o-transform: skew(30deg,20deg); /* Opera */-moz-transform: skew(30deg,20deg); /* Firefox */



38/42

Bin i 3D

transform: rotateX(120deg);-webkit-transform: rotateX(120deg); /* Safariand Chrome */

-moz-transform: rotateX(120deg); /* Firefox */ transform: rotateY(130deg);

-webkit-transform: rotateY(130deg); /* Safari

and Chrome */-moz-transform: rotateY(130deg); /* Firefox */



39/42

Chuyn kiu

transition: property1 time1, property2time2, property3 time3;-moz-transition: width 2s, height 2s, -moz-

transform 2s;-webkit-transition: width 2s, height 2s, -webkit-transform 2s;

-o-transition: width 2s, height 2s,-o-transform2s;



40/42

Hot cnh

nh ngha cccnh tronghot cnh @keyframes kfname

{0% {background: red;}25% {background: yellow;}50% {background: blue;}100% {background: green;}}

S dng hot cnh animation-name: kfname; animation-duration:5s; animation-timing-function:linear; animation-delay:2s; animation-iteration-count:infinite; animation-direction:alternate; animation-play-state:running;



41/42

Nhiu ct

-moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3;

-moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px;

-moz-column-rule:4px outset #ff00ff; /* Firefox */ -webkit-column-rule:4px outset #ff00ff; /* Safari and

Chrome */ column-rule:4px outset #ff00ff;



42/42

Tip theo

Cng ngh web

03 - Noi Dung Web - Phan 3 - Html5 - Css3

Documents

Transcript of 03 - Noi Dung Web - Phan 3 - Html5 - Css3