Các tính năng mới của CSS3 vượt trội hơn so với CSS là gì
Share
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
You must login to ask a question.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
Các tính năng mới của CSS3 vượt trội hơn so với CSS là gì
Nếu bạn tìm được nội dung hữu ích,
vui lòng đánh giá 5 sao nhé.
Điểm trung bình 0 / 5. Phiếu bầu 0
Cảm ơn bạn đã bình chọn.
This site uses Akismet to reduce spam. Learn how your comment data is processed.
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 bổ sung, đổ bóng, góc tròn, nhiều hình nền, hình động, độ trong suốt…
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.
CSS3 Pseudo-Classes là gì?
Pseudo-Classes chính là những tương tác như
. 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ó:
đượ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ẻ
, chúng ta muốn style cho phần tử cuối cùng: 
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.
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:
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ị:
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ụ:
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:
Linear Gradients – Độ dốc tuyến tính
Cú pháp:
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ụ:
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:
Ví dụ:
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ụ:
Tham khảo thêm: CSS3 là gì? Từ A đến Z các tính năng mới của CSS3 so với CSS