Giới thiệu về ngôn ngữ lập trình web CSS3

THUỘC TÍNH MỚI TRONG CSS3• Thực hiện chèn nhiều hình ảnh làm nền cho web... THUỘC TÍNH MỚI TRONG CSS3 CSS3 Gradient: • Gradient là thành phần phổ biến trên trang web • Gradient thường b

THUỘC TÍNH MỚI TRONG CSS3

Cách viết đầy đủ của thuộc tính radius:

Border-THUỘC TÍNH MỚI TRONG CSS3

Border-image:đặt border dạng hình ảnh

• Cú pháp:

THUỘC TÍNH MỚI TRONG CSS3

• Thực hiện chèn nhiều hình ảnh làm nền cho web

THUỘC TÍNH MỚI TRONG CSS3

• Chèn nhiều hình nền với vị trí chính xác:

THUỘC TÍNH MỚI TRONG CSS3

 CSS3 Gradient:

• Gradient là thành phần phổ biến trên trang web

• Gradient thường bao gồm:

-2 điểm dừng màu (color stop)

-1 điểm chuyển màu

• Trước khi có CSS3:

• Với CSS3: sử dụng các thuộc tính định nghĩa gradient:

- Linear-gradient

- Radial-gradient

THUỘC TÍNH MỚI TRONG CSS3

• Tạo gradient với CSS3

THUỘC TÍNH MỚI TRONG CSS3

• Thêm góc độ và nhiều điểm dừng

• Mục đích:

–Tăng thêm sự đa dạng của gradient

–Kiểm soát tốt hơn

THUỘC TÍNH MỚI TRONG CSS3

• Lặp lại gradient:

• Sử dụng hệ màu RGBA để định nghĩa gradient:

 Transform:

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

THUỘC TÍNH MỚI TRONG CSS3

THUỘC TÍNH MỚI TRONG CSS3

• Lặp lại gradient:

• Sử dụng hệ màu RGBA để định nghĩa gradient:

Transform

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

 Transition:

• Sử dụng link để thực hiện transition

• transition-duration:quy định thời gian chuyển đổi

• transition-timing-function:xác địnhtốc độ đường cong của hiệu ứng chuyển tiếp.

 Transition:

• Một số giá trị củatransition-timing-function

 CSS animation

 Định nghĩa các thuộc tính của CSS animation:

 CSS animation

• Hỗ trợ tạo hình ảnh dạng động/ hoạt hình

• Với cách này, hình ảnh động được tạo ra bằng cách: thay đổi

thuộc tính từ tập hợp style này sang thuộc tính của tập hợp style khác

• Các trình duyệt hỗ trợ:

• Cú pháp:

 CSS animation

• Ví dụ:

 CSS animation

Mở rộng:

• Thay đổinhiều styletrong một hình động

• Thay đổi nhiềukeyframe selectorsvới nhiều thuộc tính CSS

FONT WEB

o Kiểu định dạng font chữ

FONT WEB

o Sử dụng dịch vụ web để tạo nhiều font

CSS3 MEDIA QUERIES

• Đối với tất cả trình duyệt/thiết bị giao tiếp với máy chủ lưu trữ

website và tự được định dạng với user agent String

• 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 trang web

 Nhận biết được: chiều cao, chiều rộng của trình duyệt, thiết bị, thiết

bị định hướng, độ phân giải

CSS3 MEDIA QUERIES

• Sử dụng CSS3 MEDIA QUERIES để cung cấp layout phù hợp với layout mobile

CSS3 MEDIA QUERIES

• Quy định chiều rộng của trang được hiển thị trên thiết bị

chiều rộng, style, màu sắc giữa các cột.

CSS3 LAYOUT

• Cách thiết lập:

CSS3 USER INTERFACE

• 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

CSS3 USER INTERFACE

• 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 USER INTERFACE

• CSS3 box-sizing:

 Cho xác định yếu tố phù hợp với một khu vực

CSS3 USER INTERFACE

• CSS3 outline-offset:

 Quy định một đường biên bao phía bên ngoài đường biên mặc định

 Hai cách tạo đường outline

-Không mất không gian

-Không phải dạng hình chữ nhật