CSS3 là gì? Chi tiết tính năng mới của CSS3 so với CSS
CSS là gì?
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 đơn giản 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ữ…của website.
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 mà thôi.
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 cải thiện nhiều tính năng so với CSS
Một số tính năng mới của CSS3 so với CSS
Bộ chọn
Bộ chọn là trung tâm của CSS. Ban đầu, CSS cho phép kết hợp các phần tử theo loại, lớp hoặc ID. CSS2.1 đã thêm các phần tử giả, lớp giả và tổ hợp. Với CSS3, bạn có thể nhắm mục tiêu hầu hết mọi yếu tố trên trang với một loạt các bộ chọn.
Trong khi CSS2 đã giới thiệu một số bộ chọn thuộc tính, chúng cho phép kết hợp các yếu tố dựa trên các thuộc tính có sẵn và CSS3 mở rộng dựa trên các bộ chọn thuộc tính đó. Thêm 3 bộ chọn thuộc tính đã được thêm vào trong CSS3, 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).
Màu trong CSS3
CSS3 mang đến sự hỗ trợ cho một số cách mô tả màu sắc mới. Trước CSS3, chúng ta hầu như luôn khai báo màu bằng định dạng thập lục phân (#FFF hoặc #FFFFFF cho màu trắng). Cũng có thể khai báo màu bằng cách sử dụng ký hiệu rgb (), cung cấp số nguyên (0 trừ255) hoặc tỷ lệ phần trăm.
Danh sách từ khóa màu đã được mở rộng trong mô-đun màu CSS3 để bao gồm 147 màu từ khóa bổ sung, CSS3 cũng cung cấp một số tùy chọn khác: 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.
RGBA
RGBA hoạt động giống như RGB, chỉ thêm vào một giá trị là alpha, mức độ mờ đục hoặc 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.
Đối với giá trị alpha, 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.
Pseudo-Classes
Một số Pseudo-Classes quen thuộc tương tác người dùng, cụ thể là: link , :visited , : hover , : active và :focus.
Một vài bộ chọn Pseudo-Classes khác đã được thêm vào CSS3. Một là : root, cho phép các nhà thiết kế trỏ đến phần tử gốc của tài liệu. Trong HTML, nó sẽ là <html>. Vì: root là chung, nó cho phép một nhà thiết kế chọn phần tử gốc của tài liệu XML mà không nhất thiết phải biết tên của nó. Để cho phép thanh cuộn khi cần, quy tắc này hoạt động như sau: : root {tràn: auto;}
CSS3 có nhiều chức nâng cải thiện so với CSS
Để bổ sung cho : :first-child đầu tiên, :last-child đã được thêm vào. Với nó, người ta có thể chọn phần tử cuối cùng được đặt tên của một phần tử cha. Đối với trang web có các bài viết chứa trong thẻ <div class = ‘article’> </ div>, trong đó mỗi trang có một đoạn cuối với một số thông tin cần được cách điệu thống nhất, quy tắc này sẽ thay đổi phông chữ cho đoạn cuối của mỗi bài viết.
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; kiểu chữ: đậm;}
span.notice:target{font-size: 2em; font-style: bold;}
<a href=’#section2′>Section 2</a>
<p id=’section2′></p>
Một ký hiệu chức năng để chọn các yếu tố được chỉ định không đạt yêu cầu đã được tạo. Bộ chọn Pseudo-Classes định phủ định , : not thể được ghép với hầu hết các bộ chọn khác đã được triển khai.
Ví dụ: để đặt đường viền xung quanh hình ảnh không có đường viền được chỉ định, hãy sử dụng quy tắc như thế này:
img: not ([viền]) {viền: 1;}
HSL và HSLA
HSL là viết tắt của màu sắc, độ bão hòa và độ sáng. Không giống như RGB, nơi bạn cần thao tác độ bão hòa hoặc độ sáng của màu bằng cách thay đổ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 trong khi vẫn giữ nguyên màu sắc cơ bản. Cú pháp cho 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ẽ là màu sắc đầy đủ và độ bão hòa 0 sẽ cung cấp cho bạn một màu xám – về cơ bản làm cho giá trị màu sắc bị bỏ qua.
- Một tỷ lệ phần trăm cho sự nhẹ nhàng với 50% là tiêu chuẩn. Độ sáng 100% sẽ là màu trắng, 50% sẽ là màu sắc thực tế và 0% sẽ là màu đen.
Chữ a trong hsla () ở đây cũng hoạt động giống như trong rgba ()
Opacity
Ngoài việc chỉ định độ trong suốt với các màu HSLA và RGBA, CSS3 cung cấp cho chúng ta thuộc tính độ mờ, độ mờ đặt độ mờ đục của phần tử được khai báo, tương tự như alpha.
Mặc dù việc sử dụng cả hai ký hiệu alpha và opacity có vẻ giống nhau, nhưng có một sự khác biệt trong chức năng.
Góc làm tròn: Bán kính đường viền
Thuộc tính bán kính đường viền cho phép bạn tạo các góc tròn mà không cần hình ảnh hoặc đánh dấu bổ sung. Để thêm các góc tròn vào hộp của chúng tôi, chỉ cần thêm:
border-radius: 25px;
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);
Bóng văn bản
Text-Shadow thêm bóng cho các ký tự riêng lẻ trong các nút văn bản. Trước CSS3, điều này sẽ được thực hiện bằng cách 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ó.
text-Shadow: topPackset leftPackset màu BlurRadius;
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
Độ dốc xuyên tâm là độ dốc hình tròn hoặc hình elip. Thay vì tiếp tục đi dọc theo một trục thẳng, màu sắc hòa trộn từ điểm bắt đầu theo mọi hướng.
Cú pháp : background: radial-gradient(shape size at position, start-color, …, last-color);
Nhiều hình nền
Trong CSS3 nó cung cấp khả năng thêm nhiều hơn một hình nền.
background-image:
url(firstImage.jpg),
url(secondImage.gif),
url(thirdImage.png);
Các ưu điểm nổi bật của CSS3
CSS3 là cặp đôi ăn ý với HTML
Là cặp đôi ăn ý với HTML5: Ngôn ngữ HTML5 là phiên bản thứ 5 của HTML, để hoạt động tốt trên mọi trình duyệt nó cần tới sự hỗ trợ của CSS3.
Tính năng đáng chú ý đó là Media Queries, giúp hiển thị website trên mọi kích thước màn hình Responsive
Tương thích với mọi trình duyệt như Google Chrome, Firefox…
Tối ưu hóa công cụ tìm kiếm: CSS3 có thể loại bỏ những đoạn code HTML dư thừa khiến cho quá trình duyệt web nhanh hơn, làm tăng tốc độ tải trang.
- Website: Hostify.vn
- Liên hệ Kinh doanh: 0247 10 12 369
- Facebook: https://www.facebook.com/hostify.vn
Xem thêm: Landing page là gì? Sự khác nhau giữa Landipage và Website