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

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 địn

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

!