View
68
Download
5
Category
Preview:
Citation preview
Giới thiệu HTML5 & CSS3
1
Giảng viên : Lương Bá Hợp
I .Tìm hiểu HTML5
2
HTML5 làm được gì ?
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
2 .Một số thành phần mới
4
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
<
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
2 .Một số thành phần mới
Web form
• Hỗ trợ validation form
7
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
II .Tìm hiểu CSS3
9
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
Một số thuộc tính mới trong CSS3
Border-image
11
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
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); }
Một số thuộc tính mới trong CSS3
CSS3 gradient(t)
14
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
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
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
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
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
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
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
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
Một số thuộc tính mới trong CSS3
CSS3 layout (t)
23
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
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
THANK YOU FOR YOUR ATTENTION !
26
Recommended