Contents
CSS3 là gì?
CSS3 là phiên bản mới nhất của Thuộc tính CSS. Thuật ngữ CSS3 không chỉ là một tham chiếu đến các tính năng mới trong CSS, mà là cấp độ thứ 3 trong tiến trình của Thuộc tính CSS. CSS3 chứa tất cả mọi thứ có trong CSS2.1 (phiên bản trước). Nó cũng bổ sung các tính năng mới để giúp các nhà phát triển giải quyết một số vấn đề mà không cần đánh dấu phi ngữ nghĩa, tập lệnh phức tạp hoặc hình ảnh bổ sung.
Sự khác nhau giữa CSS và CSS3
Thay đổi lớn nhất hiện của CSS3 là việc giới thiệu các mô-đun. Ưu điểm của các mô-đun là cho phép thuộc tính được hoàn thành và phê duyệt nhanh hơn vì các phân đoạn được hoàn thành và được phê duyệt theo từng khối.
Các tính năng được bao gồm trong CSS3 bao gồm hỗ trợ cho các bộ chọn bổ sung, đổ bóng, góc tròn, nhiều hình nền, hình động, độ trong suốt ..vv... Nó chứa “thuộc tính CSS” (đã được chia thành các phần nhỏ hơn). Ngoài ra còn có các mô-đun mới được thêm vào. Một số mô-đun quan trọng 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
Hầu hết các thuộc tính CSS3 mới được triển khai trong các trình duyệt mới.
Một số tính năng mới của CSS3
1. 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. 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. 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.
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 khớp 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ó thuộc tính attr kết thúc bằng val. Nói cách khác, val khớp với phần cuối của giá trị thuộc tính.
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 khớp với val ở bất kỳ đâu trong thuộc tính. Nó tương tự như E [attr ~ = val], ngoại trừ val có thể là 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;
}2. 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;}Để 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;}Một bộ chọn Pseudo-Classes tương tác người dùng mới đã được thêm vào, bộ chọn : target . Để thu hút sự chú ý của người dù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 đầu tiên bên dưới sẽ hoạt động; liên kết sẽ trông giống 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 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;}
2. 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 tôi 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, ngoại trừ việc nó thêm một giá trị thứ 4: 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.
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.
3. 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;
CSS3 cung cấp khả năng thêm bóng đổ cho các thành phần bằng cách sử dụng thuộc tính bóng hộp. Thuộc tính 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 phần tử.
hộp bóng: 2px 5px 0 0 rgba (72,72,72,1);
5. 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;
6. Độ 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. #grad {
background: linear-gradient(to right, red , yellow);
}7. 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, màu sắc hòa trộn từ điểm bắt đầu theo mọi hướng.
Syntax : background: radial-gradient(shape size at position, start-color, ..., last-color);
e.g. #grad {
background: radial-gradient(red, yellow, green);
}//Default
#grad {
background: radial-gradient(circle, red, yellow, green);
}//Circle8. 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);
