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

CSS3

T ng quan v CSS3ổ ề

M t s thu c tính m i trong CSS3:ộ ố ộ ớ
•
Border-radius
•
Border-image
•
Gradient
TỔNG QUAN VỀ CSS3
•
Là tiêu chu n m i nh t c a CSSẩ ớ ấ ủ
•
CSS3 đ c chia thành các module, các thành ượ
ph nầ
cũ đ c chia nh và b sung các thành ph n m iượ ỏ ổ ầ ớ
TỔNG QUAN VỀ CSS3

Một số module quan trọng trong CSS3:
•
Selectors
•
Box Model
•
Backgrounds and Borders
•
Text Effects
•
2D/3D Transformations

•
Animations
•
Multiple Column Layout
•
User Interface
THUỘC TÍNH MỚI TRONG CSS3

Border-radius:
•
Border-radius: tạo ra góc bo tròn
cho đường viền
•
-webkit-border-radius: giúp hỗ
trợ IE9
•
-moz-border-radius: giúp hỗ trợ
Firefox
Cách viết đầy đủ của thuộc tính Border-
radius:
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ần
trên trang.
THUỘC TÍNH MỚI TRONG CSS3

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.
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–TRANSITION-ANIMATION

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
@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
•
Là giải pháp khắc phục việc phải cài đặt font chữ trên máy tính
FONT WEB
o
Kiểu định dạng font chữ