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

Trường Đại Học Kinh Tế - Luật Khoa Hệ Thống Thơng Tin GIỚI THIỆU VỀ CSS3 Nhóm Sinh viên thực hiện: Lê Đặng Quang Sơn K124061025 Nguyễn Hoàng Việt K124061071 Nguyễn Hoàng Phúc K124062303 Nguyễn Ngọc Quang K124062304 Lâm Thị Tiến Thùy K124062312 Giảng viên hướng dẫn: Phạm Cơng Thành CSS LÀ GÌ ?  Cascading Style Sheet,  CSS đơn file có phần mở rộng css; file chứa câu lệnh CSS; câu lệnh định dạng thành phần định tài liệu HTML màu sắc, font chữ, hiệu ứng…  Được chia làm loại:  Css nội tuyến  Css ngoại tuyến  Css cục TỔNG QUAN VỀ CSS3 - Là tiêu chuẩn CSS - Hồn tồn tương thích với phiên trước - CSS3 chia thành module - Các thành phần cũ chia nhỏ bổ sung thành phần MỘT SỐ MODULE QUAN TRỌNG TRONG CSS3 CSS3 Selectors CSS3 Transitions CSS3 Box Model CSS3 Gradient CSS3 Backgrounds CSS3 Fonts CSS3 Borders CSS3 Animations CSS3 Text Effects CSS3 2D Transformations CSS3 3D Transformations CSS3 Multiple Column Layout CSS3 User Interface 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 thành phần phổ biến trang web Gradient thường bao gồm: - điểm dừng màu (color stop) - điểm chuyển màu Trước có CSS3 CSS3 Sử dụng thuộc tính định nghĩa gradient CSS3 Gradient (Tạo hiệu ứng trộn màu) div { height:200px; width:600px background: linear-gradient(red, blue); } CSS3 Gradient (Tạo hiệu ứng trộng màu) Thêm góc độ nhiều điểm dừng Mục đích: tăng thêm đa dạng gradient kiểm soát tốt background-image: linear-gradient(45deg, white, green, black); background-image: -moz-radial-gradient(60% 60%, circle closest-corner, white, black); 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 trang div { width:200px; height:100px; background-color:yellow; transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE */ -webkit-transform:rotate(30deg); /* Safari and Chrome */ } CSS3 Transition Sử dụng link để thực Transition (move hover) div { width:100px; height:100px; background:red; transition:width 2s; -webkit-transition:width 2s; /* Safari */ } div:hover { width:300px; } CSS3 Animation 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;} } THANK YOU ! ... Selectors ? ?CSS3 Transitions ? ?CSS3 Box Model ? ?CSS3 Gradient ? ?CSS3 Backgrounds ? ?CSS3 Fonts ? ?CSS3 Borders ? ?CSS3 Animations ? ?CSS3 Text Effects ? ?CSS3 2D Transformations ? ?CSS3 3D Transformations ? ?CSS3 Multiple... TỔNG QUAN VỀ CSS3 - Là tiêu chuẩn CSS - Hồn tồn tương thích với phiên trước - CSS3 chia thành module - Các thành phần cũ chia nhỏ bổ sung thành phần MỘT SỐ MODULE QUAN TRỌNG TRONG CSS3 ? ?CSS3 Selectors... Transformations ? ?CSS3 Multiple Column Layout ? ?CSS3 User Interface 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: