Tài liệu giới thiệu về HTML5 và CSS3, nêu rõ các tính năng mới như thẻ video, âm thanh, và các thuộc tính CSS3 như border-radius, gradient, và animation. Nó cũng đề cập đến tính năng hỗ trợ của CSS3 cho việc thiết kế giao diện người dùng và cải thiện trải nghiệm trên các thiết bị khác nhau. Cuối cùng, tài liệu hướng dẫn cách sử dụng media queries và layout nhiều cột để tối ưu hóa cấu trúc website.

1. Giới thiệu HTML5 & CSS3
1
Giảng viên : Lương Bá Hợp

2. I .Tìm hiểu HTML5
2
HTML5 làm
được gì ?

3. 1 .Thẻ HTML5 layout mới
3
HTML5 giới thiệu một số thẻ / thành phần mới .
Giúp cấu trúc website được logic hơn

4. 2 .Một số thành phần mới
4

5. 2 .Một số thành phần mới
<video> và <audio>
• Cho phép nhúng video và file âm thanh vào trang
web .
• Không cần sử dụng tới plugin của trình duyệt
5
Video Âm thanh
<

6. 2 .Một số thành phần mới
Web form
• Thành phần form mới trong html khi được thực
thi sẽ giúp quá trình làm việc với các form dễ dàng
hơn so với hiện tại .
6

7. 2 .Một số thành phần mới
Web form
• Hỗ trợ validation form
7

8. 2 .Một số thành phần mới
<figure> và <figcaption>
• <figure> và <figcaption> gán nhãn (hoặc chú thích
ảnh) cho các hình ảnh trên trang web .
8

9. II .Tìm hiểu CSS3
9

10. Một số thuộc tính mới trong CSS3
Border-radius
• Border-radius : tạo ra 4 góc bo tròn cho đường
viền
• -webkit-border-radius : giúp IE9+ hỗ trợ
• -moz-border-radius : giúp firefox hỗ trợ
10

11. Một số thuộc tính mới trong CSS3
Border-image
11

12. Một số thuộc tính mới trong CSS3
CSS3 gradient
• Có 2 kiểu Gradient là Linear Gradient và Radial
Gradient để tạo 1 background đổ mầu gradient
• Linear Gradient :
12

13. Một số thuộc tính mới trong CSS3
CSS3 gradient(t)
• Radial Gradient :
13
#grad
{
background: -webkit-radial-gradient(red, green, blue);
background: -o-radial-gradient(red, green, blue);
background: -moz-radial-gradient(red, green, blue);
background: radial-gradient(red, green, blue);
}

14. Một số thuộc tính mới trong CSS3
CSS3 gradient(t)
14

15. Một số thuộc tính mới trong CSS3
Transform
• Cho phép xoay , kéo dãn ,phóng to , kéo nghiêng
thành phần trên trang …
15

16. Một số thuộc tính mới trong CSS3
Transition
• Thay đổi kích thước theo thời gian khi hover qua .
16

17. Một số thuộc tính mới trong CSS3
Animation
• Xác định một chuyển động của 1 thẻ hay một hình
ảnh .
17

18. Một số thuộc tính mới trong CSS3
Font web
• @font-face : Cho phép nhúng font chữ vào trang bằng cách
khai báo font đó và đặt font chữ trên web server . Đây là giải pháp
khắc phục việc phải cài đặt font chữ trên máy tính .
18

19. Một số thuộc tính mới trong CSS3
Hình nền với CSS3
• Thực hiện chèn nhiều hình ảnh làm nền cho web
với vị trí chính xác .
19

20. Một số thuộc tính mới trong CSS3
CSS3 media queries
• Hình thức nhận biết thiết bị .
• Kiểm tra khả năng của người dùng truy cập
vào trang web
• Nhận biết được : chiều cao , chiều rộng của
trình duyệt , thiết bị , độ phân giải
20

21. Một số thuộc tính mới trong CSS3
CSS3 media queries (t)
• Sử dụng CSS3 media queries để cung cấp
layout phù hợp cho layout mobile
21

22. Một số thuộc tính mới trong CSS3
CSS3 layout
• Layout nhiều cột sử dụng CSS3:
 CSS3 cung cấp các thuộc tính để thuận tiện cho việc thiết kế
layout dạng nhiều cột
Column-count : quy định cụ thể số lượng các cột một phần tử
được chia thành .
Column-width : quy định cụ thể chiều rộng của các cột .
Column-gap : quy định khoảng cách giữa các cột .
Column-rule : là thuộc tính viết tắt , cho phép thiết lập tất cả
các thuộc tính : chiều rộng , style , màu sắc giữa các cột
22

23. Một số thuộc tính mới trong CSS3
CSS3 layout (t)
23

24. Một số thuộc tính mới trong CSS3
CSS3 user interface
CSS3 cung cấp một số tính năng về phía người
dùng : Thay đổi kích thước thành phần trên trang ,
thay đổi kích thước hộp , phác thảo .
Các thuộc tính quy định : resize , box-sizing ,
outline-offset
24

25. Một số thuộc tính mới trong CSS3
CSS3 user interface (t)
CSS3 resize : Quy định một thành phần có thể
hay không thể thay đổi kích thước bởi người dùng
CSS3 box sizing : Kích thước của phần tử không
bị ảnh hưởng bởi padding , border
- CSS3 Outline Offset : Qui định một đường biên
bao phía ngoài đường biên mặc định
25

26. THANK YOU FOR YOUR ATTENTION !
26