Bạn đang tìm cách tạo nên những trang web đẹp mắt, hiện đại và tương tác tốt hơn? CSS3 chính là công cụ bạn cần. Là phiên bản nâng cấp mạnh mẽ của CSS, nó mang đến hàng loạt tính năng mới, giúp bạn thiết kế các giao diện web sống động và linh hoạt. Vậy những thuộc tính được bổ sung và cải tiến trong CSS3 là gì?
Trong bài viết này, hãy cùng Pima Digital khám phá những ưu điểm vượt trội của CSS3 so với phiên bản cũ, cũng như cách áp dụng hiệu quả các đặc điểm này vào dự án của bạn.
CSS3 là gì? Những cải tiến mới của CSS3 so với CSS
CSS3 là gì?
Đây là phiên bản cải tiến của Cascading Style Sheets (CSS), cũng được xem là ngôn ngữ dùng để định dạng và tạo kiểu cho giao diện website. Bên cạnh việc kế thừa những tính năng cơ bản, CSS3 còn bổ sung nhiều hiệu ứng chuyển động mượt mà, bố cục linh hoạt và tùy chỉnh phong phú, giúp bạn tạo ra những trải nghiệm người dùng hoàn toàn mới.
Quá trình phát triển của CSS3
CSS3 là một bước tiến lớn so với CSS2. Thay vì một tập hợp các quy tắc cứng nhắc, nó được chia thành các mô-đun nhỏ gọn, cho phép bạn tùy chỉnh từng phần tử trên trang web một cách linh hoạt.
Đồng thời, với bộ sưu tập các bộ chọn và thuộc tính đa dạng, phiên bản mới này mở ra vô vàn khả năng sáng tạo, giúp bạn tạo ra những giao diện web độc đáo và tương tác cao.
CSS3 là phiên bản mới nhất của CSS với nhiều tính năng nổi bật
Những ưu điểm nổi bật của CSS3
- Tương thích với HTML5: CSS3 là hỗ trợ thiết yếu khi HTML5 thay thế Flash, mang lại giao diện website hoàn hảo hơn.
- Hiển thị tốt trên mọi kích thước màn hình: Nhờ Media Queries, phiên bản này hỗ trợ tất cả các kích thước màn hình (size screen) mà không cần chỉnh sửa nội dung hiển thị.
- Tối ưu hóa cho SEO: Công nghệ này giúp loại bỏ mã HTML thừa, cải thiện hiệu quả của các công cụ tìm kiếm.
- Hoạt động trên tất cả các trình duyệt: Là tính năng được đánh giá cao vì đảm bảo rằng website giữ được sự nhất quán trên các trình duyệt khác nhau.
Sau khi biết những ưu điểm của CSS3 là gì, bạn sẽ hiểu rõ hơn tầm quan trọng của nó qua các tính năng cụ thể dưới đây.
CSS3 và HTML5 luôn đi đôi và hỗ trợ nhau trong xây dựng website
Các tính năng mới của CSS3 so với các phiên bản trước
Selectors (Bộ chọn)
CSS3 đã mở rộng đáng kể khả năng nhắm mục tiêu các phần tử trên trang web so với các phiên bản trước đó. Với 3 bộ chọn thuộc tính mới được thêm vào, bạn có thể:
- Bộ chọn thuộc tính bắt đầu với giá trị: Chọn phần tử (E) có thuộc tính (attr) bắt đầu với giá trị (val) cụ thể.
Cú pháp: E [attr ^ = val]
Ví dụ:
a[href^=’http://sales.’] {color: teal;}
Có nghĩa chọn tất cả các thẻ <a> có thuộc tính href bắt đầu bằng “http://sales.”.
- Bộ chọn thuộc tính kết thúc với giá trị: Chọn phần tử có thuộc tính kết thúc với giá trị cụ thể.
Cú pháp: E [href $ =’.jsp’]
Ví dụ:
a [href $ = ‘. jsp’] {màu: vàng;}
Các liên kết trong trang web mà có địa chỉ URL kết thúc bằng ‘.jsp’ sẽ được tô màu vàng khi hiển thị trên trình duyệt.
- Bộ chọn thuộc tính chứa giá trị: Chọn phần tử có thuộc tính chứa giá trị cụ thể ở bất kỳ vị trí nào trong thuộc tính.
Cú pháp: E [attr * = val]
Ví dụ:
img [src* = ‘tác phẩm nghệ thuật’] {viền màu: #C3B087 #FFF #FFF #C3B087;}
Có nghĩa chọn tất cả các thẻ <a> có thuộc tính href bắt đầu bằng “http://sales.”.
Từ những ví dụ trên có thể thấy CSS3 cho phép nhắm mục tiêu chính xác các phần tử mà không cần thêm class hoặc ID. Điều này giúp lập trình viên giảm thiểu lượng code cần viết mà vẫn đạt kết quả tương tự.
Bộ chọn của CSS3 được cải tiến với mã lệnh rút gọn hơn
CSS3 Pseudo – Classes (lớp giả)
Đó là những từ khóa đặc biệt trong CSS giúp bạn chọn các phần tử dựa trên trạng thái hoặc vị trí của chúng trong DOM. Nó cung cấp cách thức để tạo các kiểu tùy biến dựa trên các yếu cấu trúc hoặc hành vi của trang web. Ngoài các lớp giả quen thuộc như :link, :visited, :hover, :active, và :focus, phiên bản mới còn mang đến nhiều lựa chọn khác:
- “:root”: Chọn phần tử gốc của tài liệu (thường là thẻ <html>) mà không nhất thiết phải biết tên của nó
Ví dụ:
:root {overflow: auto;}
Thêm thanh cuộn cho toàn bộ trang web nếu nội dung của trang quá dài để hiển thị vừa trong cửa sổ trình duyệt
- “:first-child”, “:last-child”: Chọn phần tử con đầu tiên hoặc cuối cùng của một phần tử cha.
Ví dụ:
div.article> p: last-child {font-style: italic;}
Tạo kiểu cho đoạn cuối cùng của mỗi bài viết
- “:target”: Chọn phần tử có ID trùng với phần “#anchor” trong URL hiện tại.
Ví dụ:
span.notice: target {font-size: 2em; kiểu chữ: đậm;}
Tạo hiệu ứng khi click vào link nội bộ.
- “:not()”: Chọn tất cả các phần tử không khớp với bộ chọn bên trong dấu ngoặc.
Ví dụ:
img: not ([viền]) {viền: 1;}
Thêm viền cho các hình ảnh không có thuộc tính border.
Thuộc tính first-child, last-child và nth-child của CSS3
Màu sắc
CSS3 đã mở rộng các tùy chọn mô tả màu sắc. Trước đây, chúng ta thường dùng định dạng #FFF hoặc ký hiệu rgb() để khai báo màu. Với ngôn ngữ mới, danh sách từ khóa được mở rộng lên 147 màu và bổ sung thêm các định dạng mới như HSL, HSLA, và RGBA, giúp nhà thiết kế web dễ dàng tạo ra các màu sắc bán trong suốt.
CSS3 RGBA
RGBA hoạt động tương tự như RGB, nhưng thêm một giá trị alpha để điều chỉnh mức độ trong suốt của màu. Ba giá trị đầu tiên đại diện cho màu đỏ (Red), xanh lá cây (Green) và xanh dương (Blue) như trong RGB.
Giá trị alpha: Xác định mức độ trong suốt của màu sắc.
- Số 1: Hoàn toàn mờ đục (không trong suốt)
- Số 0: Hoàn toàn trong suốt
- Số 0.5: 50% mờ đục (nửa trong suốt)
Bạn có thể chọn bất kỳ giá trị nào trong khoảng từ 0 đến 1 để đạt được hiệu ứng mong muốn. Việc sử dụng RGBA giúp tạo ra các chuyển đổi màu sắc linh hoạt hơn, như màu sắc bán trong suốt hoặc lớp phủ mờ đục cho giao diện của mình.
Thuộc tính màu sắc RGBA có thêm giá trị alpha để điểu chỉnh độ trong suốt
HSL và HSLA (Độ bão hòa và độ sáng)
Đây là viết tắt cho Hue, Saturation, Lightness, cho phép bạn điều chỉnh gam màu theo ba yếu tố: độ màu sắc, độ bão hòa và độ sáng. Cú pháp của HSL bao gồm một giá trị số nguyên cho màu sắc, và hai giá trị phần trăm cho độ bão hòa và độ sáng.
Màu sắc (Hue): Được biểu diễn dưới dạng độ từ 0 đến 359, xác định màu cơ bản. Ví dụ:
- 0: Đỏ
- 60: Vàng
- 120: Xanh lá cây
- 180: Lục lam
- 240: Xanh lam
- 300: Đỏ tươi
Độ bão hòa (Saturation): Được đo bằng phần trăm, với 100% là màu sắc đậm và sống động, trong khi 0% là màu xám, làm mất đi sắc thái màu cơ bản.
Độ sáng (Lightness): Cũng được đo bằng phần trăm, với 50% là màu sắc nguyên gốc. 100% tương ứng với màu trắng, 0% là màu đen.
HSLA hoạt động tương tự như HSL, nhưng thêm một giá trị alpha (A) để điều chỉnh mức độ trong suốt tương tự như RGBA đã nói ở trên.
HSLA cũng được cập nhật alpha giúp điều tiết sắc độ màu đa dạng hơn
CSS3 Opacity (Hiệu ứng mờ)
Ngoài việc chỉ định độ trong suốt bằng cách sử dụng màu sắc với HSLA và RGBA, CSS3 còn cung cấp thuộc tính Opacity để điều chỉnh mức độ mờ của các phần tử.
Lưu ý khi sử dụng Opacity trong CSS3 là gì? Là toàn bộ nội dung bên trong phần tử sẽ bị ảnh hưởng, bao gồm cả các phần tử con. Ngược lại, alpha cho phép bạn điều chỉnh độ mờ của màu sắc mà không làm thay đổi độ trong suốt của các phần tử con.
Thuộc tính Opacity sẽ làm mờ toàn bộ nội dung bên trong element
Góc làm tròn (Bán kính đường viền)
Thuộc tính border-radius cho phép bạn tạo các góc tròn cho phần tử mà không cần dùng hình ảnh hay đánh dấu thêm. Để áp dụng hiệu ứng này, ta có:
Ví dụ:
border-radius: 25px;
Mã này sẽ làm cho các góc của phần tử trở nên tròn với bán kính 25px.
Box Shadows (Hiệu ứng đổ bóng)
CSS3 giúp bạn thêm chuyển động bóng đổ cho các element với thuộc tính box – shadow. Nó điều chỉnh màu sắc, kích thước, độ mờ và độ lệch của bóng đổ, tạo ra hiệu ứng nổi bật cho các phần tử mà không cần dùng đến hình ảnh bổ sung.
Cú pháp: box-shadow: offset-x offset-y blur-radius spread-radius color;
Ví dụ:
box-shadow: 2px 5px 0 0 rgba (72, 72, 72, 1);
- 2px (Offset X): Độ lệch của bóng đổ theo chiều ngang.
- 5px (Offset Y): Độ lệch của bóng đổ theo chiều dọc
- 0 (Blur Radius): Đây là độ mờ của bóng đổ. Giá trị 0 có nghĩa là sẽ không có độ mờ.
- 0 (Spread Radius): Giá trị điều chỉnh kích thước của bóng đổ. Số 0 nghĩa là không có sự thay đổi.
- rgba (72, 72, 72, 1) (Color): Ký hiệu màu đỏ, xanh lá cây và xanh dương (R, G, B) tương ứng, tất cả tạo ra màu xám đậm. Số “1” là giá trị alpha, xác định mức độ trong suốt của màu.
Độ mờ và độ lệch của bóng đổ khi áp dụng CSS3 Box Shadow
Text Shadow (Bóng văn bản)
Đây là một hiệu ứng thú vị trong CSS3 giúp văn bản của bạn trở nên sống động hơn. Thay vì phải tạo nhiều phần tử hoặc hình ảnh để tạo bóng như trước đây. Giờ đây bạn chỉ cần sử dụng thuộc tính text-shadow và điền vào các thông số như vị trí, màu sắc và độ mờ của bóng.
Cú pháp: text-shadow: offset-x offset-y blur-radius color;
Ví dụ:
text-shadow: 2px 2px 4px #888;
Đoạn code trên sẽ tạo ra một bóng mờ màu xám nhạt cho tiêu đề H1, với độ lệch 2px theo chiều ngang và dọc, và độ mờ là 4px.
Những mã lệnh tạo hiệu ứng Text Shadow trong CSS3
Linear Gradients (Độ dốc tuyến tính)
Đây là cách sử dụng thuộc tính linear-gradient trong CSS3 để tạo hiệu ứng độ dốc tuyến tính cho nền của một phần tử.
Cú pháp: background: linear-gradient(direction, color-stop1, color-stop2, …);
Ví dụ:
#grad {
background: linear-gradient(to right, blue, purple);
}
- to right: Độ dốc sẽ bắt đầu từ bên trái và chuyển dần sang bên phải
- blue: Màu bắt đầu của độ dốc nằm ở bên trái
- purple: Màu kết thúc của độ dốc nằm ở bên phải.
Kết quả là phần tử có nền màu xanh ở phía bên trái sẽ dần chuyển thành màu tím ở phía bên phải.
Thuộc tính Linear Gradients giúp chuyển đổi giữa 2 màu từ trái sang phải
Radial Gradients (Độ dốc xuyên tâm)
Tính năng tạo ra hiệu ứng chuyển màu từ một điểm trung tâm ra ngoài theo hình tròn hoặc hình elip. Thay vì chuyển màu theo một trục thẳng như với độ dốc tuyến tính, màu sắc trong độ dốc xuyên tâm trải đều từ điểm bắt đầu ra mọi hướng.
Cú pháp: background: radial-gradient(shape size at position, start-color, …, last-color);
Ví dụ:
#grad {
background: radial-gradient(circle, red, yellow, green);
}
Đoạn mã này tạo một độ dốc xuyên tâm hình tròn, bắt đầu từ màu đỏ ở trung tâm và chuyển dần qua màu vàng đến màu xanh lá cây.
Độ dốc xuyên tâm khiến màu sắc chuyển đổi từ trọng tâm ra nhiều hướng
Multiple Background Images (Nhiều hình nền)
CSS3 cho phép bạn thêm nhiều hình nền cho một phần tử, giúp tạo ra các thiết kế phức tạp và hiệu ứng nền đa lớp.
Cú pháp:
background-image:
url(image1.jpg),
url(image2.gif),
url(image3.png);
Ví dụ:
background-image: url(“images/weather.png”),
url(“images/rainbow.png”),
url(“images/raining.png”),
url(“images/sunny.png”);
Phiên bản mới cho phép tạo nhiều mã lệnh thể hiện hình nền cho một phần tử
>> Xem thêm: HTTP là gì?Giao thức HTTP và HTTPS khác nhau như thế nào?.
Câu hỏi thường gặp
CSS3 được sử dụng để làm gì?
Phiên bản thứ 3 được sử dụng để thiết kế và tạo kiểu cho các trang web. Nó cho phép điều chỉnh giao diện, bố cục, màu sắc, và các hiệu ứng trên các phần tử HTML, giúp tạo ra giao diện đẹp mắt và dễ sử dụng.
Sự khác biệt giữa CSS và CSS3 là gì?
CSS3 là phiên bản nâng cấp của CSS, cung cấp nhiều tính năng mới như hiệu ứng chuyển tiếp, bóng đổ, gradient, và các bộ chọn nâng cao. Trong khi CSS chỉ hỗ trợ những tính năng cơ bản, công nghệ mới mở rộng khả năng thiết kế với các công cụ và hiệu ứng tiên tiến hơn.
CSS3 có phải là một ngôn ngữ lập trình không?
KHÔNG. Nó là một ngôn ngữ định dạng được sử dụng để thiết kế và tạo kiểu cho các trang web. CSS3 không có khả năng thực thi logic hay xử lý dữ liệu như các ngôn ngữ lập trình.
Đối tượng nào nên sử dụng CSS3?
Các nhà thiết kế web và lập trình viên front-end sử dụng ngôn ngữ định dạng để cải thiện giao diện và trải nghiệm người dùng trên các trang web. Nó phù hợp cho bất kỳ ai muốn tạo ra thiết kế web hiện đại và hiệu quả mà không cần đến các công cụ hoặc plugin bổ sung.
Mong rằng qua bài viết trên, Pima Digital đã giúp bạn nắm rõ CSS3 là gì và những cải tiến vượt bậc mà phiên bản này mang lại. Nếu bạn có thắc mắc hoặc cần tìm hiểu thêm các tính năng mới của CSS3 để nâng cao chất lượng thiết kế web của mình, đừng ngần ngại bình luận bên dưới bài blog để được giải đáp chi tiết và hỗ trợ tận tình.
PIMA DIGITAL – CÔNG TY THIẾT KẾ WEBSITE UY TÍN, CHUYÊN NGHIỆP
- Địa chỉ: Tầng 3, NCC Office, 139/37-39 Nguyễn Văn Lượng, Phường 10, Gò Vấp, TP.HCM
- Hotline: 0973.463.486
- Email: info@pimadigital.vn
- Website: https://pimadigital.vn/
