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.
1. Bộ chọn
Bộ chọn là TT của CSS. Ban đầu, CSS được cho phép tích hợp những thành phần theo loại, lớp hoặc ID. CSS2. 1 đã thêm những thành phần giả, lớp giả và tổng hợp. Với CSS3, bạn hoàn toàn có thể nhắm tiềm năng hầu hết mọi yếu tố trên trang với một loạt những bộ chọn. CSS2 đã trình làng một số ít bộ chọn thuộc tính. Chúng được cho phép tích hợp những yếu tố dựa trên những thuộc tính có sẵn. CSS3 lan rộng ra dựa trên những bộ chọn thuộc tính đó. Thêm 3 bộ chọn thuộc tính đã được thêm vào trong CSS3, được cho phép lựa chọn chuỗi con .1. Ghép bất kể thành phần E nào có thuộc tính attr mở màn 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ể thành phần 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ể thành phần 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ư như E [ attr ~ = val ], ngoại trừ val hoàn toàn 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, đơn cử 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à . 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ẻ
, 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. Để lôi cuốn sự chú ý quan tâm 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 link cùng trang, một quy tắc như dòng tiên phong bên dưới sẽ hoạt động giải trí ; link 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;}
Phần 2
...
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ự tương hỗ cho 1 số ít cách miêu tả sắc tố mới. Trước CSS3, chúng tôi phần đông 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 hoàn toàn có thể khai báo màu bằng cách sử dụng ký hiệu rgb ( ), phân phối số nguyên ( 0 trừ255 ) hoặc tỷ suất 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ải trí 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ị tiên phong vẫn đại diện thay mặt cho màu đỏ, xanh lá cây và xanh dương. Đối với giá trị alpha, 1 có nghĩa là trọn vẹn mờ đục, 0 trọn vẹn trong suốt và 0,5 là 50 % mờ đục. Bạn hoàn toàn có thể sử dụng bất kể số nào trong khoảng chừng từ 0 đến 1 .
HSL và HSLA
HSL là viết tắt của sắc tố, độ 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 đổi khác cả ba giá trị màu, với HSL, bạn hoàn toàn có thể kiểm soát và điều chỉnh độ bão hòa hoặc độ sáng trong khi vẫn giữ nguyên sắc tố cơ bản. Cú pháp cho HSL gồm có một giá trị số nguyên cho sắc tố và giá trị Phần Trăm cho độ bão hòa và độ sáng .Khai báo hsl ( ) đồng ý 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ải trí 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ẻ như giống nhau, nhưng có một sự độc lạ trong tính năng .
3. Góc làm tròn: Bán kính đường viền
Thuộc tính nửa đường kính đường viền được cho phép bạn tạo những góc tròn mà không cần hình ảnh hoặc ghi lại bổ trợ. Để thêm những góc tròn vào hộp của chúng tôi, chỉ cần thêm :
border-radius: 25px;
Source: https://final-blade.com
Category : Kiến thức Internet
