CSS3 là gì? Tính năng mới của CSS3

Css3 là gì là một chủ đề trong khóa học css cơ bản, hôm nay mình sẽ giới thiệu cho các bạn về khái niệm của CSS3 và bên cạnh đó một số tính năng mới của css3, các bạn có thể tham khảo bài viết này nếu có gì sai sót hay comment ở bên dưới để trao đổi kinh nghiệm, kiến thức là vô biên. Chúc các bạn học tập thật tốt.

Css3 là gì?

CSS3 là phiên bản thứ 3 và cũng là mới nhất của CSS, CSS3 được bổ sung thêm nhiều tính năng mới tiện lợi hơn CSS cho người dùng. Được thừa hưởng tất cả những gì có trong phiên bản trước và bổ sung các tính năng mới, CSS3 hiện rất được ưa chuộng trong thiết kế website.

Css3 được xem là một trong những chương trình hỗ trỡ thiết kế web tối ưu nhất hiện nay với những vai trò quan trọng mà css mang lại cho các lập trình viên frontend.

Có thể hiểu CSS đóng vai trò như một công cụ giúp chúng ta thêm vào những thay đổi về mặt hình thức như đổi bố cục, màu sắc, font chữ,…
CSS hoạt động bằng cách khoanh vùng chọn dựa vào tên một thẻ HTML, ID hay Class. Từ đó, áp dụng những thuộc tính cần thay đổi lên vùng được chọn.
Nếu một website không có CSS thì đó sẽ chỉ đơn thuần là một trang chứa văn bản với 2 màu chủ đạo là trắng và đen.

Các tính năng mới của CSS3 là gì?

Nói đến các tính năng mới trong CSS3 thực sự có rất nhiều. Tuy nhiên, có thể kể đến những tính năng nổi bật như:

Bộ chọn
CSS3 Pseudo-Classes
Màu trong CSS3
CSS3 RGBA
CSS3 HSL và HSLA
CSS3 Opacity
Góc làm tròn: Bán kính đường viền
Drop Shadows – Hiệu ứng bóng đổ
Text Shadow – Bóng văn bản
Linear Gradients – Độ dốc tuyến tính
Radial Gradients – Độ dốc xuyên tâm
Multiple Background Images – Nhiều hình nền
Dưới đây là thông tin chi tiết về từng loại tính năng.

Bộ chọn

CSS cấp 1 cho phép kết hợp các phần tử theo loại, lớp hay ID. Đối với CSS3, bạn hoàn toàn có thể nhắm đến mọi yếu tố trên trang với các bộ chọn.

Ngoài việc mở rộng dựa trên các bộ chọn thuộc tính đã giới thiệu trong CSS2. CSS3 đã thêm 3 bộ chọn thuộc tính cho phép lựa chọn chuỗi con.

[attribute^=value] Chọn tất cả thành phần với thuộc tính có giá trị bắt đầu bằng “value”.

Ví dụ: p[class^=test] Chọn tất cả thành phần <p> với thuộc tính class có giá trị bắt đầu là test

[attribute$=value] Chọn tất cả thành phần với thuộc tính có giá trị kết thúc bằng “value”.

Ví dụ: p[class$=test] Chọn tất cả thành phần <p> với thuộc tính class có giá trị kết thúc là test

[attribute*=value] Chọn tất cả thành phần với thuộc tính có giá trị đặc biệt bằng “value”.

Ví dụ: p[class*=test] Chọn tất cả thành phần <p> với thuộc tính class có giá trị đặc biệt bằng test (tức là lúc này chữ test nằm ở đầu, cuối hay giữa đều được chọn).

CSS3 mở rộng các lựa chọn cho bộ chọn thuộc tính

CSS3 Pseudo-Classes là gì?

Pseudo-Classes chính là những tương tác như :link, :hover, :active, :visited, :focus . Trong phiên bản CSS3 các bộ chọn Pseudo-Classes mới đã được thêm vào.

:root cho phép trỏ đến phần tử gốc của tài liệu, trong HTML đó là thẻ <html> . Vì :root là chung, nên nó cho phép lựa chọn phần tử root của một tài liệu XML mà không cần biết tên của nó. Để cho phép scrollbar khi cần trong tài liệu HTML, ta có: :root{overflow:auto;}

:first-child selector , :last-child được thêm vào cho phép lựa chọn phần tử đầu hay cuối cùng của phần tử cha. Ví dụ một trang với các bài báo được chứa trong thẻ <div class=’article’></div> , chúng ta muốn style cho phần tử cuối cùng:div.article > p:last-child{font-style: italic;}

Bộ chọn :target sử dụng khi cần tăng sự chú ý cho các tiêu đề trong bài viết. Khi người dùng click vào một link trên cùng trang ngoài việc di chuyển đến tab đó, link sẽ còn được thêm các định dạng để làm nổi bật.

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

<a href='#section2'>Section 2</a>

<p id='section2'></p>

Bộ chọn phủ định, :not có thể ghép với các bộ chọn khác. Ví dụ để đặt thuộc tính border xung quanh img mà chưa có border:

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

Màu trong CSS3

Tương tự như bộ chọn, màu trong CSS3 cũng được hỗ trợ thêm nhiều phương thức mô tả mới. Danh sách từ khóa màu đã được mở rộng trong mô-đun màu CSS3 bao gồm 147 màu.

CSS3 còn cung cấp một số tùy chọn khác như HSL , HSLA và RGBA . Sự thay đổi đáng chú ý nhất với các loại màu mới này là khả năng khai báo các màu bán trong suốt.

CSS3 RGBA là gì?

RGBA: có cách sử dụng giống như RGB, chỉ thêm vào giá trị thứ 4: alpha, mức độ mờ đục hay mức độ trong suốt alpha. Ba giá trị đầu tiên vẫn đại diện cho màu đỏ, xanh lá cây và xanh dương.

Giá trị alpha có giá trị dao động từ 0 đến 1 với 1 có nghĩa là hoàn toàn mờ đục, 0 hoàn toàn trong suốt và 0,5 là 50% mờ đục. Bạn có thể sử dụng bất kỳ số nào trong khoảng từ 0 đến 1 để điều chỉnh độ mờ mong muốn.

CSS3 mang đến các tùy chọn màu sắc với bảng màu 147 màu

CSS3 HSL và HSLA là gì?

HSL là viết tắt của màu sắc, độ bão hòa và độ sáng. Khác với RGB, để thay đổi độ bão hòa hay độ sáng của màu bạn cần đổi cả ba giá trị màu, với HSL, bạn có thể điều chỉnh độ bão hòa hoặc độ sáng mà vẫn giữ nguyên màu sắc cơ bản. Cú pháp HSL bao gồm một giá trị số nguyên cho màu sắc và giá trị phần trăm cho độ bão hòa và độ sáng.

Khai báo HSL () chấp nhận ba giá trị:

Màu sắc theo độ từ 0 đến 359. Một số ví dụ là: 0 = đỏ, 60 = vàng, 120 = xanh lá cây, 180 = lục lam, 240 = xanh lam và 300 = đỏ tươi.

Độ bão hòa dưới dạng phần trăm với 100% là chỉ tiêu. Độ bão hòa 100% sẽ cho màu sắc đầy đủ và độ bão hòa 0 sẽ cho bạn một màu xám – có thể hiểu là làm cho giá trị màu sắc bị bỏ qua.

Một tỷ lệ phần trăm để độ sáng với 100% sẽ là màu trắng, 50% sẽ là màu sắc thực tế và 0% sẽ là màu đen (độ sáng bằng 0).

Chữ a trong HSLA () ở đây cũng hoạt động giống như trong RGBA () tức alpha.

CSS3 Opacity là gì?

Ngoài việc chỉ định độ trong suốt với các màu HSLA và RGBA. Trong CSS3 Opacity còn đóng vai trò cung cấp thuộc tính độ mờ. Tương tự như alpha, nó cho phép chỉnh độ mờ, đục của phần tử được khai báo.

Mặc dù cách dùng của opacity và alpha có nét giống nhau, nhưng lại khác nhau về chức năng.

Góc làm tròn: Bán kính đường viền

CSS3 sử dụng thuộc tính border-radius để 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;

Drop Shadows – Hiệu ứng bóng đổ

Một hiệu ứng khác cũng được bổ sung trong CSS3 giúp người lập trình không phải tạo ra các hình ảnh đó là hiệu ứng đổ bóng. Bằng cách sử dụng thuộc tính box-shadow.

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 bên ngoài cho các phần tử. Ví dụ:

box-shadow: 2px 5px 0 0 rgba(72,72,72,1);

Text Shadow – Bóng văn bản

Thuộc tính Text-Shadow dùng để thêm bóng cho các ký tự riêng lẻ trong các nút văn bản. Trước CSS3, để làm điều này cần sử dụng một hình ảnh hoặc sao chép một thành phần văn bản và sau đó định vị nó.

Cú pháp:

text-shadow: topOffset leftOffset blurRadius color;

CSS3 phát triển các tính năng đổ bóng cho hình ảnh đầy sáng tạo

Linear Gradients – Độ dốc tuyến tính

Cú pháp: background: linear-gradient(direction, color-stop1, color-stop2, …); Bằng cách này các lập trình viên có thể tạo ra một linear gradient trong CSS3 một cách nhanh chóng.

Ví dụ:

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

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

Radial Gradients – Độ dốc xuyên tâm

Radial Gradients là gradient hình tròn hoặc elip, radical gradient có màu trộn từ điểm bắt đầu 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 – Nhiều hình nền

Trong CSS3 bạn không cần thêm một phần tử cho một hình nền. Vì lúc này chúng ta có thể thêm một hoặc nhiều hình ảnh nền cho bất kỳ phần tử nào kể cả pseudo-elements.