Bài giảng HTML5-CSS3

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


<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

<


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


Web form

• Hỗ trợ validation form

7


<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


Border-image

11


CSS3 gradient

• Có 2 kiểu Gradient là Linear Gradient và Radial Gradient để tạo 1 background đổ mầu gradient

• Linear Gradient :

12


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); }


CSS3 gradient(t)

14


Transform

• Cho phép xoay , kéo dãn ,phóng to , kéo nghiêng thành phần trên trang …

15


Transition

• Thay đổi kích thước theo thời gian khi hover qua .

16


Animation

• Xác định một chuyển động của 1 thẻ hay một hình ảnh .

17


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


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


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


CSS3 media queries (t)

• Sử dụng CSS3 media queries để cung cấp layout phù hợp cho layout mobile

21


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


CSS3 layout (t)

23


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


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

Education

Bài giảng HTML5-CSS3