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

CSS3 là gì? Nó khác với CSS thường được sử dụng như thế nào? Câu hỏi này được hỏi bởi nhiều người dùng. Trong bài viết này, BKSN sẽ giúp bạn giải đáp thắc mắc và cung cấp những thông tin hữu ích về CSS3.

CSS3 là gì?

CSS3 là tên viết tắt của cụm từ “Cascading Style Sheets”. Công cụ ví như một ngôn ngữ, được sử dụng để tạo phong cách cho website. CSS3 là phiên bản thứ ba và cũng là phiên bản mới nhất của CSS, CSS3 được bổ sung thêm nhiều tính năng mới thuận tiện hơn cho người dùng so với CSS.

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

CSS3 tương thích khá tốt với HTML5 vì HTML5 đang dần thay thế Flash nên CSS3 là sự hỗ trợ cần thiết để tạo nên một giao diện web hoàn hảo.

Hiển thị cho các kích thước thiết bị khác nhau. Media Queries mới trong CSS3 là một bước ngoặt lớn cho các trang web. Hỗ trợ tương thích với kích thước màn hình mà không thay đổi nội dung màn hình.

Tối ưu hóa SEO là một điểm mạnh khác của CSS3 mà nhiều nhà phát triển yêu thích là khả năng loại bỏ mã HTML không cần thiết. Giúp các công cụ tìm kiếm hoạt động tốt hơn.

CSS3 cũng được đánh giá cao về khả năng tương thích vì hoạt động tốt với hầu hết các trình duyệt phổ biến. Mặc dù trang có thể chạy mượt mà trong một số trình duyệt khác nhau nhưng website vẫn khả nhất quán.

Xem thêm: HTML là gì? Tất cả thông tin về ngôn ngữ HTML dễ hiểu nhất

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

CSS3 vượt trội hơn nhiều so với bản CSS tiền nhiệm bởi các tính năng mới có thể kể đến như:

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.

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

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

+ [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”.

+ [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”.

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.

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.

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

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 lại phổ biến như vậy?

Hiện tại, CSS3 và HTML5 được coi là ngôn ngữ phổ biến nhất để thiết kế web. Nó cũng không cần plug-in để xem nội dung đa phương tiện, điều này mang lại trải nghiệm tối ưu về mặt xử lý và tốc độ.

Ngoài ra, trong xu thế phát triển của marketing trực tuyến. Khi nhu cầu Tối ưu hóa công cụ tìm kiếm (SEO) ngày càng trở nên quan trọng, CSS3 chính là cầu nối giúp cấu trúc website trở nên nhất quán và thân thiện hơn với các công cụ tìm kiếm như Google.

CSS3 tương thích tốt với hầu hết các trình duyệt phổ biến hiện nay. CSS3 tự động thay đổi kích thước tất cả các loại thiết bị mà không ảnh hưởng đến nội dung. Nói cách khác, đó là sự thân thiện của giao diện người dùng của website đối với thiết bị di động (Mobile-Friendly).

Hiện tại, SERPs ưu tiên các trang web dành cho thiết bị di động. CSS3 đóng một vai trò quan trọng trong thiết kế web đáp ứng nhờ Bootstrap. Sẽ thật vô nghĩa nếu bạn không tìm hiểu Bootstrap là gì? Để tối ưu hóa giao diện người dùng đáp ứng của trang web.

Xem thêm: Bootstrap là gì? Cài đặt và nhúng Bootstrap vào HTML

Lời kết

Hi vọng bài viết của BKNS đã giúp bạn có được những thông tin chính xác và hữu ích nhất về CSS3. Với những chia sẻ trên, các cá nhân và doanh nghiệp có thể tìm ra cách tối ưu nhất để sử dụng CSS3 trên website của mình và mang lại lợi nhuận hiệu quả.