BÁO CÁO GIỚI THIỆU VỀ CSS3, TÌM HIỂU VỀ CSS3

GIỚI THIỆU VỀ CSS3
Trường Đại Học Kinh Tế - Luật
Khoa Hệ Thống Thông Tin
Giảng viên hướng dẫn: Phạm Công Thành
Nhóm 8
Sinh viên thực hiện:
1. Lê Đặng Quang Sơn K124061025
2. Nguyễn Hoàng Việt K124061071
3. Nguyễn Hoàng Phúc K124062303
4. Nguyễn Ngọc Quang K124062304
5. Lâm Thị Tiến Thùy K124062312
CSS LÀ GÌ ?

Cascading Style Sheet,

CSS chỉ đơn thuần là một file có phần mở rộng là .css;
trong file này chứa những câu lệnh CSS; mỗi câu lệnh
sẽ định dạng một thành phần nhất định của tài liệu
HTML như màu sắc, font chữ, hiệu ứng…

Được chia ra làm 3 loại:

Css nội tuyến

Css ngoại tuyến

Css cục bộ
TỔNG QUAN VỀ CSS3
- Là tiêu chuẩn mới nhất của CSS.
- Hoàn toàn tương thích với các phiên bản trước.
- 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.
MỘT SỐ MODULE QUAN TRỌNG
TRONG CSS3

CSS3 Selectors

CSS3 Box Model

CSS3 Backgrounds

CSS3 Borders

CSS3 Text Effects

CSS3 2D Transformations

CSS3 3D Transformations

CSS3 Multiple Column Layout

CSS3 User Interface

CSS3 Transitions

CSS3 Gradient

CSS3 Fonts

CSS3 Animations

CSS3 Border
Border – Radius (Bo tròn góc)
Cú pháp :
-webkit-(-moz-/-o-)-border-radius: số px
CSS3 Border
Border – Image
Cú pháp :
-border-image: source slice width outset repeat;
Hoặc:
-border-image-source: url;
-border-image-slice: giá trị;
-border-image-width: giá trị;
-border-image-outset: giá trị;
-border-image-repeat: giá trị;
CSS3 Gradient
(Tạo hiệu ứng trộn màu)
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
CSS3
Sử dụng các thuộc tính định nghĩa gradient
8
CSS3 Gradient
(Tạo hiệu ứng trộn màu)
<style>
div
{
height:200px;

width:600px
background: linear-gradient(red, blue);
}
</style>
CSS3 Gradient
(Tạo hiệu ứng trộng màu)
background-image: linear-gradient(45deg, white, green, black);
background-image: -moz-radial-gradient(60% 60%, circle closest-corner, white, black);
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 và kiểm soát tốt hơn.
CSS3 Gradient
(Tạo hiệu ứng trộn màu)
Lặp lại Gradient
background-image: -moz-repeating-linear-gradient(left, white 80%, black, white);
CSS3 Transform
Cho phép xoay, kéo dãn, kéo nghiêng thành phần trên
trang
<style>
div
{
width:200px;
height:100px;
background-color:yellow;
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
</style>
CSS3 Transition
Sử dụng link để thực hiện Transition (move hover)

<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div:hover
{
width:300px;
}
</style>
CSS3 Animation
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}
}
</style>
THANK YOU !