CSS3 Là Gì? Từ A đến Z Các Tính Năng Mới Của CSS3 So Với CSS

1. CSS3 là gì?
2. CSS là gì?
3. So sánh CSS3 và CSS
   1. Điểm giống nhau giữa CSS và CSS3 là gì?
   2. Điểm khác nhau giữa CSS và CSS3 là gì?
4. Lịch sử phát triển của CSS3
   1. Sự phát triển của CSS
   2. Sự phát triển của CSS3
5. Ưu điểm của CSS3 là gì?
6. Các tính năng mới của CSS3 là gì?
   1. Bộ chọn
   2. CSS3 Pseudo-Classes là gì?
   3. Màu trong CSS3
   4. CSS3 RGBA là gì?
   5. CSS3 HSL và HSLA là gì?
   6. CSS3 Opacity là gì?
   7. Góc làm tròn: Bán kính đường viền
   8. Drop Shadows – Hiệu ứng bóng đổ
   9. Text Shadow – Bóng văn bản
   10. Linear Gradients – Độ dốc tuyến tính
   11. Radial Gradients – Độ dốc xuyên tâm
   12. Multiple Background Images – Nhiều hình nền
7. Tại sao CSS3 được ưa chuộng?
8. Tổng kết CSS3 là gì?

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. Các tính năng mới của CSS3 là gì? Cùng tìm hiểu nhé!

CSS là gì?

Để nói về CSS3 chắc chắn không thể không nhắc đến tiền thân của nó là CSS. CSS là từ viết tắt của cụm từ Cascading Style Sheets, ngôn ngữ được sử dụng để tạo nên phong cách cho website.

• 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.

Bạn có thể tham khảo thêm về HTML và HTML5 trong bài viết “HTML5 là gì?“.

So sánh CSS3 và CSS

Liệu CSS3 có gì khác biệt so với CSS. Hãy cùng Mắt Bão tìm hiểu ngay dưới đây!

Điểm giống nhau giữa CSS và CSS3 là gì?

Là phiên bản mới nhất của CSS nên CSS3 được thừa hưởng tất cả những gì đã có ở 2 phiên bản trước. Nhìn chung sẽ không có quá nhiều khác biệt trong việc triển khai ngoài những cập nhật mới.

Điểm khác nhau giữa CSS và CSS3 là gì?

Sự khác biệt lớn nhất của CSS3 chính là xuất hiện của các mô-đun. Mô-đun cho phép các thuộc tính được hoàn thành và phê duyệt nhanh hơn vì các phân đoạn được hoàn thành và phê duyệt theo từng khối.

Lịch sử phát triển của CSS3

Sự phát triển của CSS

CSS được đề xuất lần đầu tiên vào ngày 10/10/1994 bởi Håkon Wium Lie. Kể từ đó, các phiên bản của CSS dần được hình thành qua nhiều giai đoạn. Tính từ lúc xuất hiện đến nay, CSS đã có nhiều phiên bản khác nhau. Các phiên bản mới sẽ giúp vá các lỗi của phiên bản cũ và mang đến nhiều cải tiến hơn.

Với phiên bản đầu tiên hay còn được gọi là CSS cấp 1 có những đặc điểm cụ thể như: thuộc tính font chữ, màu văn bản, hình nền, các thuộc tính văn bản, căn lề, định vị cho các yếu tố, nhận dạng duy nhất và phân loại chung các nhóm thuộc tính.

Phiên bản CSS cấp 2 được W3C phát triển vào tháng 5 năm 1998. Với những cải tiến từ phiên bản CSS cấp 1 và mang đến những cải tiến mới như định vị tuyệt đối, tương đối và cố định các yếu tố chỉ mục z. Khái niệm về các loại phương tiện, hỗ trợ cho các biểu định kiểu âm thanh và văn bản hai chiều. Xuất hiện các kiểu font chữ mới để định dạng văn bản.

Ngoài ra, sau phiên bản cấp 2 còn có một sự nâng cấp khác là CSS 2.1 được đề xuất vào tháng 4 năm 2011. Nhằm mục đích sửa lỗi và loại bỏ những tính năng kém hoặc không tương thích cho người dùng.

Sự phát triển của CSS3

CSS3 là phiên bản thay thế cho CSS2 với sự thay đổi đáng chú ý là mô-đun. Các mô-đun có khả năng mới hoặc mở rộng các tính năng được xác định trong CSS2. Nhằm duy trì khả năng tương thích ngược.

Đặc biệt, CSS3 mang đến các bộ chọn và thuộc tính mới cho phép linh hoạt hơn với bố cục và trình bày trang. Nhờ đó, người lập trình có thể tạo ra các hiệu ứng hình ảnh mà không cần tạo ra hình ảnh trước đó.

Ưu điểm của CSS3 là gì?

• Tương thích với HTML5

Khi mà HTML5 đang dần thay thế Flash, thì CSS3 chính là sự hỗ trợ cần thiết để có một giao diện website hoàn hảo.

• Hiển thị cho các thiết bị có kích thước khác nhau

Media Queries mới ra mắt trong CSS3 là bước ngoặt lớn cho các website. Hỗ trợ tương thích với các kích thước màn hình mà không cần chỉnh sửa nội dung hiển thị.

• Tối ưu hóa công cụ tìm kiếm SEO

Một điểm mạnh nữa của CSS3 được rất nhiều lập trình viên ưa chuộng là khả năng loại bỏ những đoạn code HTML bị thừa. Giúp các công cụ tìm kiếm có thể hoạt động tốt hơn. Xem thêm về phương pháp tối ưu hóa Website cho các công cụ tìm kiếm trong bài viết “SEO là gì?“

• Tương thích với mọi trình duyệt

CSS3 cũng được đánh giá rất cao về khả năng tương thích khi có thể hoạt động tốt trên hầu hết các trình duyệt phổ biến. Dù hiển thị trên nhiều trình duyệt khác nhau nhưng website vẫn khá nhất quán.

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 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 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;

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.

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

Tại sao CSS3 được ưa chuộng?

Hiện nay, CSS3 và HTML5 được xem là những ngôn ngữ được ưa chuộng nhất trong thiết kế website. Không cần bất kì plugin nào vẫn có thể xem các nội dung media, mang đến trải nghiệm tối ưu về mặt xử lý và tốc độ.

Bên cạnh đó, trong xu thế phát triển của ngành Marketing Online. Nhu cầu tối ưu hóa công cụ tìm kiếm (SEO) ngày một quan trọng hơn, CSS3 sẽ là cầu nối giúp cấu trúc website trở nên mạch lạc và thân thiện hơn với các công cụ tìm kiếm như google.

CSS3 sở hữu khả năng tương thích cao với hầu hết mọi trình duyệt phổ biến hiện nay. CSS3 tự động cân chỉnh kích thước phù hợp với các loại thiết bị mà không làm ảnh hưởng nội dung. Hay nói cách khác đó là sự thân thiện của giao diện website đối với các thiết bị di động (Mobile-Friendly). Hiện nay các SERPs đang rất ưu tiên website có sự thân thiện với di động (mobile first-index).

CSS3 đóng vai trò quan trọng trong việc định hình Web Responsive nhờ có Bootstrap. Sẽ là sự thiết sót nếu bạn không nghiên cứu Bootstrap là gì? Để tối ưu giao diện phản hồi của website.

Tổng kết CSS3 là gì?

CSS3 không chỉ dừng lại ở việc tạo ra các giao diện trang web. Nó còn mang đến khả năng tạo nên các tựa game di động trên nền tảng web. Đặc biệt, giúp người dùng lưu trữ thông tin và tiện ích internet và sử dụng khi offline. Và còn rất rất nhiều những ưu điểm khác mà CSS3 mang lại. CSS3 ngày một phổ biến và được sử dụng rộng rãi.

Hy vọng bài viết trên đã giúp bạn có những thông tin cụ thể và hữu ích nhất về CSS3. Qua những chia sẻ trên, cá nhân và doanh nghiệp sẽ tìm được hướng khai thác CSS3 tối ưu nhất cho website của mình và mang lại lợi nhuận hiệu quả. Đến với Mắt Bão – nhà cung cấp dịch vụ web hosting tốt nhất hiện nay, bạn sẽ được tư vấn, hỗ trợ tận tâm nhất. Từ đăng ký tên miền, đăng ký hosting đến thiết kế, quản trị website, Mắt Bão đều có thể tự tin mang đến cho bạn dịch vụ tốt nhất.