CSS là gì ?

Cascading Style Sheets (CSS) là cơ chế đơn giản cho việc thêm các style (sắc tố, phông chữ, …) cho tài liệu web.

Bạn Đang Xem: CSS3 có gì mới ?

CSS3 là gì ?

CSS3 là bản nâng cấp phát mới nhất của CSS với mục tiêu mở rộng CSS2.1 . CSS3 bổ sung, mang đến nhiều tính năng mới như bo tròn góc, tạo độ bóng, gradient, transitions hay animations cũng như các bố cục tổng quan mới như multiple-column, flexbox hay grid layout.

Có gì mới ?

CSS3 selectors:

Selector là trái tim =)) của CSS. Lúc đầu CSS được cho phép phối hợp các thành phần theo type, class và Id. CSS2.1 đã thêm psudo-elements, pseudo-classes và combinators. Với CSS3, ta có thể thao tác chọn với bất kỳ thành phần nào trên website với bộ selectors phong phú.

CSS2 được giới thiệu một phải attribute selectors. Những cái này được cho phép lựa chọn các thành phần dựa trên tính chất của chúng. CSS3 mở rộng hơn những attribute selectors này. Ba bộ chọn tính chất được thêm vào CSS3, được cho phép lựa chọn chuỗi con.

• Chọn bất kỳ thành phần E nào mà tính chất attr của nó khai mạc với giá trị val.

Ví dụ: a[href^=https://viblo.asia’] {color: red;}

• Chọn bất kỳ thành phần mà tính chất của nó kết thúc bằng giá trị val.

Ví dụ: a[href$=’.html’] {color: green;}

• Chọn bất kỳ thành phần nào mà tính chất của nó khớp với giá trị của nó

Ví dụ: img[src*=’artwork’] { border-color: #C3B087 #FFF #FFF #C3B087; }

Pseudo-classes

Một vài ví dụ như :link, :visited, :hover, :active, và :focus.

Một vài pseudo-class được thêm vào CSS3. Một là :root, được cho phép chỉ đến thành phần gốc của một tài liệu. Trong HTML, đó là thẻ <htmlvàgt;. Vì :root là chung, nên nó được cho phép lập trình viên lựa chọn thành phần root của một tài liệu XML mà không nên tìm hiểu tên của nó. Để được cho phép scrollbar khi cần trong tài liệu HTML, ta có: :root{overflow:auto;}

Như thể một bổ sung tới :first-child selector, :last-child đã được thêm vào, với selector này, ta có thể lựa chọn thành phần cuối cùng của thành phần cha. Ví dụ một trang với những bài báo được chứa trong thẻ <div class=’article’></divvàgt;, tất cả chúng ta muốn style cho thành phần cuối cùng: div.article > p:last-child{font-style: italic;}

Xem Thêm : Scroll Lock là gì? Cách thiết lập chức năng sử dụng phím Scroll Lock hiệu quả hơn

Một bộ chọn pseudo-class được thêm vào là :target. Để tăng sự lưu ý cho tiêu đề của một chiếc tab khi được người dùng click, link này sẽ được in đậm lên, như sau:

span.notice:target{font-size: 2em; font-style: bold;}

<a href=’#section2′>Section 2vàlt;/avàgt;

<p id=’section2′></pvàgt;

Selector phủ định, *:not *có thể ghép với những bộ chọn khác. Ví dụ để tại vị tính chất border xung quanh img mà chưa xuất hiện border, tất cả chúng ta có thể dùng:

img:not([border]){border: 1;}

CSS3 Colors:

CSS3 đem tới một vài khác thể hiện màu mới, trước CSS3, tất cả chúng ta hầu như sử dụng định dạng màu hexadecimal (#FFF, #FFFFF). Nó cũng có thể có thể khai báo kiểu rgb(), cung cấp các số integer (0-255) hoặc phần trăm.

List từ khóa sắc tố đã được mở rộng trong module màu CSS3 với 147 từ khóa sắc tố bổ sung. CSS3 cũng cung cấp cho tất cả chúng ta với một số tùy chọn khác: HSL, HSLA và RGBA. Đáng lưu ý nhất là việc thay đổi của kiểu màu mà có thể thay đổi độ trong suốt. Bo tròn các góc:

Tính chất border-radius giúp tạo ra các góc được bo tròn mà không phải sử dụng hình ảnh hay các markup bổ sung. Ví dụ: border-radius: 14px;

Viết tường minh: border-radius: 4px 9px 14px 19px;

Drop Shadows

CSS3 cung cấp khả năng thêm các đổ bóng cho những thành phần sử dụng tính chất box-shadow. Tính chất này để bạn xác định màu, độ cao, độ rộng, blur và offset của một hoặc nhiều đổ bóng bên trong và/ hoặc phía bên ngoài cho những thành phần.

Xem Thêm : Giải Thích Neobux Là Gì ? Có Lừa Đảo Hay Uy Tín Không

Ví dụ: box-shadow: 2px 5px 0 0 rgba(72,72,72,1);

Text Shadow

Text-shadow thêm các đổ bóng cho chữ, cú pháp: text-shadow: topOffset leftOffset blurRadius color;

Linear Gradients

W3C đã thêm phương pháp để tạo ra một linear gradient trong CSS3. Cú pháp: background: linear-gradient(direction, color-stop1, color-stop2, …);

Ví dụ: #grad { background: linear-gradient(to right, red , yellow); }

Có thể xác định vị trí hướng của gradient trên bằng đơn vị độ, bằng phương pháp thay “to right” thành số cụ thể cho độ.

Radial Gradients

Radical gradient là gradient hình tròn hoặc elip. Thay vì gradient là một trục thẳng thì radical gradient có màu trộn từ điểm khai mạc ra xung quanh theo mọi hướng. Cú pháp: background: radial-gradient(shape size at position, start-color, …, last-color);

Ví dụ: #grad { background: radial-gradient(red, yellow, green); }

#grad { background: radial-gradient(circle, red, yellow, green); }

Multiple Background Images

Trong CSS3, không cần thêm một thành phần cho một hình nền. CSS3 cung cấp cho tất cả chúng ta khả năng thêm một hoặc nhiều hình ảnh nền cho bất kỳ thành phần nào kể cả pseudo-elements.

background-image: url(firstImage.jpg), url(secondImage.gif), url(thirdImage.png);

Trên đây là một trong số những update của CSS3 còn tồn tại thêm nhiều update khác về CSS3 Transitions, quảng cáo truyền thông queries, multi-column layout, Web fonts, speech…