Side bài giảng HTML5-CSS3 - Vietpro

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