Cascading Style Sheets Level 3

(CSS3)

Contents

Tổng Quan Về CSS31

Các module trong CSS32

demo3

Tổng Quan CSS3

• Là tiêu chuẩn mới 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 nhỏ và bổ sung các thành phần mới.

Một số module quan trọng:• Selector.• Box Model.• Backgrounds and Border.• Text Effects• Font• 2D/3D Transformations• Animations• Multiple Column Layout• User Interface

CSS3 Border

• Tạo góc tròn, tạo bóng cho box, sử dụng hình ảnh làm border.

• Các thuộc tính border:– border-radius– box-shadow– border-image

Border-radius

• Tạo bốn góc bo tròn tùy theo mức độ điều chỉnh cho đường viền.

• Cú pháp chung:<style> div{border: độ lớn viền ,kiểu viền, màu viền;padding: căn lề;background: màu nền;Width: độ rộng của bản;border-radius: độ cong ;}</style>

Ví dụ

Box-shadow

• Cú pháp chung:<style> div{width: chiều rộng khung viền ;height: chiều cao khung viền ;background-color: màu nền ;box-shadow: h-shadow v-shadow blur spread color inset;}</style>

Border-image

• Cho phép sử dụng một hình ảnh để tạo viền cho khung

Border-image

• Cú pháp chung:<style> div{background: hình ảnh cần chèn;background-size: (_px _px)/ (% %) /length/

percentage/ cover/ contain;background-repeat:no-repeat/repeat;}</style>

CSS3 Background

• Chỉnh sửa các thuộc tính cho hình nền web

• 2 thuộc tính mới là:

Background-size

• Xác định kích thước cho ảnh nền• Cú pháp chung:<style> div{background: hình ảnh cần chèn;background-size: (_px _px)/ (% %) /length/

percentage/ cover/ contain;background-repeat:no-repeat/repeat;}</style>

Background-origin

• Chèn ảnh làm hình nền cho trang web• Cú pháp chung<style> div{border: độ lớn viền (_px),kiểu,màu viền;padding: căn lề (_px);background-image: hình ảnh nền cần chèn;background-position: vị trí hình ảnh;Background-origin: border-box/padding-box/content-box}</style>

CSS3 Fonts

• Cho phép nhúng font chữ vào web bằng cách khai báo font đó và đặt trên web server.

• Cú pháp chung:@font-face{font-family: myFirstFont;src: url(sansation_light.woff);}

div{font-family:myFirstFont;}

Các mô tả Font

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

• Tạo hiệu ứng• Các phương thức nổi bật– translate()– rotate()– scale()– skew()–matrix()

CSS3 2D Transforms

Translate() Method

• Di chuyển phần tử từ vị trí hiện tại đến vị trí mới phụ thuộc vào 2 tham số X( trục ngang), Y ( trục dọc)

• Cú pháptransform: translate(X,Y);-ms-transform: translate(X,Y); /* IE 9 */-webkit-transform: translate(X,Y); /* Safari and Chrome */

Rotate() Method

• Xoay phần tử theo chiều kim đồng hồ( khi tham số đầu vào có giá trị dương) hoặc ngược chiều kim đồng hồ( khi tham số đầu vào có giá trị âm)

• Cú pháptransform: rotate(30deg);-ms-transform: rotate(30deg); /* IE 9 */-webkit-transform: rotate(30deg); /* Safari and Chrome */

Scale() Method

• Scale () Method : Phóng to hoặc thu nhỏ phần tử hiện tại, phụ thuộc vào giá trị 2 tham số đầu vào X( chiều ngang), y( chiều dọc)

• Cú pháptransform: scale(X,Y);-ms-transform: scale(X,Y); /* IE 9 */-webkit-transform: scale(X,Y); /* Safari and Chrome */

Skew() Method

• Các yếu tố ( chiều dọc, chiều ngang) của phần tử hiện tại thay đổi một góc độ nhất định, tùy thuộc vào giá trị tham số đầu vào X( trục ngang), Y( trục dọc)

• Cú pháchtransform: skew(30deg,20deg);-ms-transform: skew(30deg,20deg); /* IE 9 */-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */

Matrix() Method

• Dựa vào 6 tham số đầu vào, phần tử ban đầu có thể xoay, phóng to hay thu nhỏ, nghiêng một góc nhất định

• Cú pháchtransform:matrix(n,n,n,n,n,n);-ms-transform:matrix(n,n,n,n,n,n); /* IE 9 */-webkit-transform:matrix(n,n,n,n,n,n); /* Safari and Chrome */

CSS3 3D Transforms

• CSS3 cho phép bạn định dạng các yếu tố của bạn sử dụng yếu tố 3D

• hai phương pháp biến đổi 3DrotateX()rotateY()

Rotate() Method

• Các phần tử xoay quanh trục X với một mức nhất định

• Cú phápDiv{transform:rotateX(12deg);webkit-transform:rotateX(12deg); /* Safari and Chrome */}

RotateY() method

• Các phần tử xoay quanh trục y với một mức nhất định

• Cú phápdiv{transform:rotateY(130deg);-webkit-transform:rotateY(130deg); /* Safari and Chrome */}

CSS3 Transition

• Hỗ trợ trình duyệtThêm hiệu ứng khi chuyển đổi từ một phong cách khác mà không cần phải sử dụng Flash hay javasrips

Transition

• Hiệu ứng chuyển tiếp vào property,duration

• Cú phápDiv{Transition: width 2s;Wedkit- transition: width 2s;/*salary*/}

• Chỉ định di chuột cho các yếu tố <div>

• Cú phápdiv:hover{width:300px;}

• Thêm các hiệu ứng về chiều rộng ,chiều cao và sự chuyển đổi

• Cú phápDiv {transition:width 2s, height 2s;webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */}

CSS3 Animation

• Liên kết hình anh động bằng cách xác định ít nhất hai thuộc tính

Chỉ định tên của hình ảnh độngXác định thời gian của hình ảnh động

• Cú phápDiv {animation:myfirst 5s;-webkit-animation:myfirst 5s; /* Safari and Chrome */}

• Thay đổi màu nền khi các hình ảnh động thay đổi.

• Cú pháp@keyframes myfirst{0% {background:red;}25% {background:yellow;}50% {background:blue;}100% {background:green;}}

CSS3 multiple columns

• Các thuộc tínhSố cột Khoảng cách so với viềnViền

• CSS3 tạo nhiều cột• Cú pháp

div{-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrome */column-count:3;}

• CSS3 Xác định khoảng cách giữa các cột

• Cú phápdiv{-moz-column-gap:40px; /* Firefox */-webkit-column-gap:40px; /* Safari and Chrome */column-gap:40px;}

• CSS3 Xác định khoảng cách giữa các cột

• Cú phápdiv{-moz-column-gap:40px; /* Firefox */-webkit-column-gap:40px; /* Safari and Chrome */column-gap:40px;}

• CSS3 Viền cột• Cú pháp

div{-moz-column-rule:3px outset #ff00ff; /* Firefox */-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */column-rule:3px outset #ff00ff;}

CSS3 User Interface

• Trong CSS3, một số tính năng giao diện người dùng mới là những yếu tố thay đổi kích thước, hộp kích thước, và phác thảo.

• Các thuộc tínhThay đổi kích thướcVạch kích thướcVạch ra độ lệch

• CSS3 thay đổi kích thước• Cú pháp

div{resize:both;overflow:auto;}

• CSS3 Hộp kích thước• Cú pháp

div{box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */width:50%;float:left;}

• CSS3 Ước chừng độ lệch• Ước tính khác nhau từ biên trong hai cách:

ước tính không mất không gian ước tính có thể là không phải hình chữ nhật

• Cú phápdiv{border:2px solid black;outline:2px solid red;outline-offset:15px;}

Thank You!