Nghiên cứu các đặc trưng và khả năng ứng dụng của một số loại Bentonit Việt Nam
PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên...
Transcript of PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên...
![Page 1: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/1.jpg)
Lê Đình ThanhBộ môn Mạng và Truyền thông Máy tính
Khoa Công nghệ Thông tinTrường Đại học Công nghệ, ĐHQGHN
E-mail: [email protected], [email protected]: 0987.257.504
Bài giảng
PHÁT TRIỂN ỨNG DỤNG WEB
![Page 2: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/2.jpg)
Nội dung webBài 3
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 3: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/3.jpg)
Nội dung
• HTML • CSS• JavaScript• DOM• Sự phát triển: HTML5, CSS3
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 4: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/4.jpg)
Sự phát triển của HTML: HTML5
• HTML 4 được sử dụng từ 1999• HTML 5 đang được đề xuất, tương lai
sẽ thành chuẩn• Các trình duyệt chính (Safari,
Chrome, Firefox, Opera, Internet Explorer) hỗ trợ dần HTML 5
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 5: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/5.jpg)
Các luật cho HTML 5
• Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript
• Giảm các plugin• Xử lý lỗi tốt hơn• Nhiều đánh dấu thay cho kịch bản• Độc lập thiết bị
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 6: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/6.jpg)
Các đặc trưng mới
• Đối tượng <canvas> cho độ họa 2D• Đối tượng <video> và <audio> cho
media• Các đối tượng theo nội dung như
<article>, <footer>, <header>, <nav>, <section>
• Các điều khiển form mới như calendar, date, time, email, url, search
• Hỗ trợ lưu trữ cục bộ
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 7: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/7.jpg)
Đối tượng nhập màu
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 8: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/8.jpg)
Đối tượng nhập ngày
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 9: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/9.jpg)
Đối tượng nhập giờ
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 10: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/10.jpg)
Đối tượng nhập ngày giờ
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 11: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/11.jpg)
Đối tượng nhập ngày giờ địa phương
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 12: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/12.jpg)
Đối tượng nhập tuần
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 13: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/13.jpg)
Đối tượng nhập email
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 14: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/14.jpg)
Đối tượng nhập tháng
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 15: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/15.jpg)
Đối tượng nhập số
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 16: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/16.jpg)
Đối tượng nhập giá trị trong khoảng
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 17: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/17.jpg)
Đối tượng nhập nội dung tìm kiếm
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 18: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/18.jpg)
Đối tượng nhập điện thoại
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 19: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/19.jpg)
Đối tượng nhập URL
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 20: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/20.jpg)
Đối tượng tự động hoàn chỉnh nhập
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 21: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/21.jpg)
Đối tượng tạo khóa
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 22: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/22.jpg)
Đối tượng ra
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 23: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/23.jpg)
Đối tượng video
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 24: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/24.jpg)
Điều khiển chạy video
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 25: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/25.jpg)
Đối tượng audio
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 26: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/26.jpg)
Lưu trữ web: localStorage
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 27: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/27.jpg)
Lưu trữ web: sessionStorage
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 28: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/28.jpg)
Sử dụng đệm• Đệm giúp tăng tốc độ, giảm tải cho server, cho phép duyệt offline• Đặt thuộc tính manifest cho html
<html manifest=“cache.appcache">
• Tạo tệp .appcacheCACHE MANIFEST
# Các tệp được đặt cache/theme.css/logo.gif/main.js
NETWORK:#Các tệp không được đặt cache
login.php
FALLBACK:#Tệp thay thế khi có lỗi
/html/ /offline.html
Khi các tệp trên server thay đổi, cần phải cập nhật tệp .appcache
để trình duyệt cập nhật cache
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 29: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/29.jpg)
Web worker
• Chương trình javascript chạy nền• Định nghĩa web worker ở tệp .js
– Sử dụng postMessage(obj); để đưa thông báo ra trang HTML
• Tạo web workerif(typeof(Worker)!=="undefined") {
if(typeof(w)=="undefined") { w=new Worker("workers.js"); } w.onmessage = function (event) { //access event.data; };}
• Dừng web workerw.terminate();
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 30: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/30.jpg)
Sự kiện server gửi• Tạo đối tượng nhận sự kiện server gửi
if(typeof(EventSource)!=="undefined") { var source=new EventSource("sse.php"); source.onmessage=function(event) {
//access event.data }; }
• Mã phía server<?php
header('Content-Type: text/event-stream');header('Cache-Control: no-cache');echo “\n\n”;echo "data: whatever you want to send to client.\n\n";flush();?>
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 31: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/31.jpg)
CSS3
• Là chuẩn CSS mới nhất• Thích ứng ngược • Các môđun quan trọng nhất
– Bộ chọn– Mô hình hộp– Nền và viền– Hiệu ứng văn bản– Biến đổi 2D/3D– Hoạt cảnh– Dàn nhiều cột– Giao diện người dùng
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 32: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/32.jpg)
Tạo viền tròn góc
• border:2px solid;border-radius:25px;-moz-border-radius:25px; /* Old Firefox */
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 33: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/33.jpg)
Tạo bóng
• box-shadow: 10px 10px 5px #888888;
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 34: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/34.jpg)
Sử dụng ảnh làm viền
• border-image:url(border.png) 30 30 round;-moz-border-image:url(border.png) 30 30 round; /* Old Firefox */-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */-o-border-image:url(border.png) 30 30 round; /* Opera */
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 35: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/35.jpg)
Định dạng nền
• background:url(img_flwr.gif);background-repeat:no-repeat;background-size:100% 100%;-webkit-background-origin:content-box; /* Safari */background-origin:content-box;
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 36: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/36.jpg)
Hiệu ứng văn bản
• text-shadow: 5px 5px 5px #FF0000;• word-wrap: normal|break-word;• word-break: normal|break-all|
hyphenate;• text-overflow: clip|ellipsis|string;
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 37: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/37.jpg)
Biến đổ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 */
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 38: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/38.jpg)
Biến đổi 3D
• transform: rotateX(120deg);-webkit-transform: rotateX(120deg); /* Safari and Chrome */-moz-transform: rotateX(120deg); /* Firefox */
• transform: rotateY(130deg);-webkit-transform: rotateY(130deg); /* Safari and Chrome */-moz-transform: rotateY(130deg); /* Firefox */
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 39: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/39.jpg)
Chuyển kiểu
• transition: property1 time1, property2 time2, 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-transform 2s;
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 40: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/40.jpg)
Hoạt cảnh• Định nghĩa các cảnh trong hoạt cảnh
– @keyframes kfname{0% {background: red;}25% {background: yellow;}50% {background: blue;}100% {background: green;}}
• Sử dụng hoạt cảnh– animation-name: kfname;– animation-duration:5s;– animation-timing-function:linear;– animation-delay:2s;– animation-iteration-count:infinite;– animation-direction:alternate;– animation-play-state:running;
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 41: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/41.jpg)
Nhiều cột
• -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;
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.
![Page 42: PHÁT TRIỂN ỨNG DỤNG WEB · Các luật cho HTML 5 • Các đặc trưng mới dựa trên HTML, CSS, DOM và javascript • Giảm các plugin • Xử lý lỗi tốt hơn](https://reader033.fdocument.pub/reader033/viewer/2022041420/5e1e6e8179db6a210b3e9a50/html5/thumbnails/42.jpg)
Tiếp theoCông nghệ web
Lê Đình Thanh, Bài giảng Phát triển ứng dụng web.