Tìm hiểu về CSS3 và những chức năng CSS3 năm 2020 – CSS3 là phiên bản mới nhất của CSS được phát hành trên toàn thế giới vào thời điểm hiện tại. Vậy CSS3 là gì và những thay đổi mới nhất của nó so các phiên bản trước của CSS3 là gì? Chúng ta hãy cùng đi tìm hiểu trong bài viết này nhé.
Xem thêm: Hướng dẫn về box-sizing trong css mới nhất 2020
CSS3 là phiên bản thứ 3 và cũng là mới nhất của CSS, CSS3 được cập nhật thêm nhiều chức năng mới tối ưu CSS hơn cho quý khách hàng. Được thừa hưởng toàn bộ những gì có trong version trước và bổ sung các tính năng mới, CSS3 hiện rất được ưa chuộng trong tạo dựng Website. Các tính năng mới của CSS3 là gì? Cùng tìm hiểu nhé!
Để đề cập về CSS3 thì phải 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 dùng để tạo nên cách điệu (phong cách) cho trang Web.
Liệu CSS3 có gì khác biệt so với CSS hay không?
Là version mới nhất của CSS nên CSS3 có toàn bộ những tính năng sẵn có từ các phiên bản trước. Gần như sẽ không có quá nhiều khác biệt trong việc triển khai ngoài những update mới.
Sự khác biệt đáng chú ý nhất của CSS3 chính là xuất hiện của các module. module cho phép các thuộc tính được hoàn thiện và phê duyệt nhanh hơn vì các phân đoạn được hoàn thiện và phê duyệt theo từng khối.
Một vài module được đánh giá cao nhất trong CSS3 là:
- Bộ chọn
- Mô hình hộp
- Hình nền và đường viền
- Giá trị hình ảnh và nội dung thay thế
- Hiệu ứng văn bản
- Chuyển đổi 2D / 3D
- Ảnh động
- Bố cục nhiều cột
- Giao diện người dùng
Tóm Tắt
Ưu thế của CSS3 là gì?
- Thân thiện với HTML5
Trong thời điểm mà HTML5 đang dần thay thế Flash, thì CSS3 chính là công cụ quan trọng để có một giao diện Web hoàn hảo.
- Hiển thị với các kích thước khác nhau với đa dạng thiết bị
Media Queries mới ra mắt trong CSS3 là bước ngoặt lớn cho các Web. 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 thông tin 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 developer ưa dùng là tính năng loại bỏ những đoạn code HTML bị thừa. Giúp các bộ máy tìm kiếm có thể hoạt động tối ưu hơn.
Xem thêm: Thiết kế website chuẩn SEO và những điều cần biết
- Hoạt động tốt với mọi
trình duyệt web
CSS3 cũng được nhận xét rất cao về tính năng tương thích khi có thể hoạt động bình thường 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 web khác nhau tuy nhiên Web vẫn khá nhất quán.
Các tính năng mới đáng chú ý của CSS3 là gì?
Bộ chọn
Bộ chọn có thể xem là trung tâm của CSS. Trước đây, 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 gần như mọi yếu tố trên trang với một loạt các bộ chọn. CSS2 đã giới thiệu một vài bộ chọn thuộc tính. Chúng cho phép kết hợp các nhân tố dựa trên các tính chất đã có sẵn. CSS3 mở rộng dựa trên các bộ chọn thuộc tính đấy. Thêm 3 bộ chọn thuộc tính đã được chèn vào trong CSS3, cho phép chọn lựa chuỗi con.
1. Ghép bất kỳ phần tử E nào có thuộc tính attr bắt đầu bằng giá trị val. Nói cách khác, val chuẩn với phần đầu của giá trị thuộc tính.
E [attr ^ = val]VD
. A [href ^ = 'http: // sales.']color: teal;
2. Ghép bất kỳ phần tử E nào có tính chất attr kết thúc bằng val. Nói cách khác, val tối ưu với phần cuối của giá trị tính chất.
E [attr $ = val]VD
. A [href $ = '. Jsp']màu: tím;
3. Ghép bất kỳ phần tử E nào có thuộc tính attr chuẩn với val ở bất kỳ đâu trong tính chất. Nó tương tự như E [attr ~ = val], ngoại trừ val có khả năng thuộc một phần của một từ.
E [attr * = val]VD
. Img [src * = 'tác phẩm nghệ thuật']viền màu: # C3B087 #FFF #FFF # C3B087;
Pseudo-Classes
Một số Pseudo-Classes thân thuộc trao đổi qua lại người dùng, cụ thể là: link , :visited , : hover , : active và :focus.
Một số 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 {overflow: auto;}
Để bổ sung cho : :first-child trước tiên, :last-child đã được chèn vào. Với nó, người ta có khả năng chọn phần tử cuối cùng được đặt tên của một phần tử cha. Đối với Web có các nội dung bài viết chứa trong thẻ <div class=’article’></div> , trong số đó mỗi trang có một đoạn cuối với một vài nội dung cần được phong cách thống nhất, quy tắc này sẽ chuyển đổi font chữ cho đoạn cuối của mỗi bài viết.
div.article> p: last-child {font-style: italic;}
Một bộ chọn Pseudo-Classes tác động qua lại người dùng mới đã được thêm vào, bộ chọn : target . Để thu hút sự quan tâm của khách hàng vào một đoạn văn bản khi người dùng nhấp vào liên kết cùng trang, một quy tắc như dòng trước tiên phía dưới sẽ hoạt động; liên kết sẽ trông kiểu như dòng thứ hai, nhịp được tô sáng như dòng thứ ba.
span.notice: target {font-size: 2em; kiểu chữ: đậm;}
<a href='#section2'> Phần 2 </a>
<p id = 'phần2'> ... </ p>
Một ký hiệu chức năng để chọn các nhân 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 khai triển. 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;
Màu trong CSS3
CSS3 có thể mang lại hỗ trợ cho một số cách mô tả màu sắc mới. Trước CSS3, chúng ta gần 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ó khả năng 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 Keyword màu đã được mở rộng trong module 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à tính năng khai báo các màu bán trong suốt .
RGBA:
RGBA hoạt động giống như RGB, ngoại trừ việc nó thêm một giá trị thứ 4: alpha, cấp độ mờ đục hoặc cấp độ trong suốt alpha. Ba giá trị trước 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 nghĩa của nó 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ể dùng bất kỳ số nào trong khoảng từ 0 đế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 kiểu 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 việc chuyển đổi cả ba giá trị màu, với HSL, bạn có thể xoay chỉnh độ bão hòa hoặc độ sáng trong khi vẫn giữ nguyên màu sắc căn bản. Cú pháp cho HSL gồm có một giá trị số nguyên cho sắc màu và giá trị phần trăm cho độ bão hòa và độ sáng.
Khai báo hsl () chấp thuận ba giá trị:
– Sắc màu theo độ từ 0 đến 359. một vài 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 khiến 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 trao cho chúng ta tính chất độ mờ, độ mờ đặt độ mờ đục của phần tử được khai báo, tương tự như alpha.
Cho dù việc sử dụng cả hai ký hiệu alpha và opacity có vẻ giống nhau, tuy nhiên 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
Tính chất 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 đổ
CSS3 cung cấp tính năng thêm bóng đổ cho các phần tử bằng việc vận dụng thuộc tính bóng hộp. Tính chất này cho phép bạn chỉ định màu sắc, chiều cao, chiều rộng, độ mờ và độ lệch của một hoặc nhiều bóng đổ bên trong hoặc bên ngoài trên các thành phần.
hộp bóng: 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 văn bản. Bằng CSS3, việc này sẽ được làm 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;
Độ dốc tuyến tính
W3C đã thêm cú pháp để tạo độ dốc tuyến tính bằng CSS3.
Syntax: background: linear-gradient(direction, color-stop1, color-stop2, ...);
e.g. #Gradbackground: linear-gradient(to right, red , yellow);
Radial Gradients
Độ 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, sắc màu hòa trộn từ điểm khởi đầu theo mọi hướng.
Syntax : background: radial-gradient(shape size at position, start-color, ..., last-color);
e.g. #Gradbackground: radial-gradient(red, yellow, green);
//Default #gradbackground: radial-gradient(circle, red, yellow, green);
//Circle
Nhiều hình nền
Trong CSS3 nó mang lại tính 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);
Kết luận
Bài viết này, chúng ta đã cùng nhau tìm hiểu về CSS3 là gì và những tính năng mới đầy chất lượng của CSS3 là gì. Chúc các bạn thành công!!!
