Các colorbất động sản trong CSS đặt màu sắc của văn bản và văn bản trang trí.
p ( color: blue; )Giá trị
Các colorbất động sản có thể chấp nhận bất kỳ giá trị màu CSS.
- Các màu được đặt tên: ví dụ: “nước”.
- Màu hệ lục phân: ví dụ: # 00FFFF hoặc # 0FF.
- Màu RGB và RGBa: ví dụ: rgb (0, 255, 255) và rgba (0, 255, 255, .5).
- Màu HSL và HSLa: ví dụ: hsl (180, 100%, 50%) và hsla (180, 100%, 50%, .5).
Màu được đặt tên
p ( color: aqua; )Màu được đặt tên còn được gọi là màu từ khóa, màu X11 hoặc màu SVG. Tất cả các màu được đặt tên là mờ theo mặc định transparent, ngoại trừ màu hoàn toàn trong suốt hoặc “trong suốt”. Xem đoạn mã Màu được đặt tên và Tương đương hệ thập lục phân của chúng tôi để biết danh sách các màu được đặt tên.
Màu Hex
Màu hệ lục phân, hoặc màu thập phân, được chỉ định bằng các giá trị chữ và số. Cặp ký tự đầu tiên biểu thị giá trị màu đỏ, cặp ký tự thứ hai biểu thị giá trị màu xanh lá cây và cặp ký tự thứ ba biểu thị giá trị màu xanh lam, tất cả đều nằm trong phạm vi từ 00 đến FF.
p ( color: #00FFFF; )Nếu các cặp giá trị đỏ, lam và lục đều là gấp đôi, bạn có thể viết tắt giá trị hex thành viết tắt 3 ký tự - ví dụ: # 00FFFF có thể được viết tắt thành # 0FF.
.full-hex ( color: #00FFFF; /* aqua */ ) .abbreviated-hex ( color: #0FF; /* also aqua */ )Màu RGB và RGBa
Màu RGB được chỉ định bằng danh sách được phân tách bằng dấu phẩy gồm ba giá trị số (từ 0 đến 255) hoặc giá trị phần trăm (trong khoảng từ 0% đến 100%). Giá trị đầu tiên đại diện cho giá trị màu đỏ, giá trị thứ hai đại diện cho giá trị màu xanh lá cây và giá trị thứ ba đại diện cho giá trị màu xanh lam. Màu RGB mờ theo mặc định.
p ( color: rgb(0, 255, 255); )RGBa thêm giá trị thứ tư cho kênh alpha, giá trị này đặt độ mờ của màu. Giá trị alpha là một số trong phạm vi từ 0,0 (hoàn toàn trong suốt) đến 1 (hoàn toàn không trong suốt).
p ( color: rgba(0, 255, 255, .5); )Màu HSL và HSLa
Màu HSL được chỉ định bằng một danh sách được phân tách bằng dấu phẩy gồm ba giá trị: mức độ Huế (một số từ 0 đến 360), phần trăm độ bão hòa (trong khoảng từ 0% đến 100%) và phần trăm độ sáng (trong khoảng từ 0% đến 100%). Màu sắc HSL là không rõ ràng theo mặc định.
p ( color: hsl(180, 100%, 50%); )HSLa thêm giá trị thứ tư cho kênh alpha để kiểm soát độ mờ của màu. Giá trị alpha là một số trong phạm vi từ 0,0 (hoàn toàn trong suốt) đến 1 (hoàn toàn không trong suốt).
p ( color: hsla(180, 100%, 50%, .5); )Bản giới thiệu
Xem các giá trị màu Pen theo CSS-Tricks (@ css-trick) trên CodePen.
Ghi chú sử dụng
Tài colorsản đổ xuống. Nếu bạn đặt nó trên phần thân, tất cả các phần tử con sẽ kế thừa màu đó, trừ khi chúng có bộ màu riêng trong biểu định kiểu tác nhân người dùng.
Các đường viền kế thừa colortrừ khi một giá trị màu được chỉ định trong borderkhai báo.
Các colorbất động sản áp dụng cho text-decorationdòng. Trong các trình duyệt hỗ trợ thuộc text-decoration-colortính, bạn có thể chỉ định các màu khác nhau cho văn bản và các đường trang trí của nó.
colorcũng áp dụng cho các điểm đánh dấu mục danh sách (như dấu đầu dòng và số). Bạn không thể đặt màu riêng cho điểm đánh dấu mục danh sách, nhưng bạn có thể thay thế nó bằng một hình ảnh có thuộc list-styletính.
Mặc dù các màu được đặt tên và màu hex không có kênh alpha, bạn có thể đặt độ mờ của chúng bằng thuộc opacitytính trong tất cả các trình duyệt hiện tại và IE9 +.
Có liên quan
fonttext-decoration-coloropacity
Thêm thông tin
colortrong thông số kỹ thuật W3Ccolortại MDN- Bài viết CSS-Tricks Yay cho HSLa
Hỗ trợ trình duyệt
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| Bất kì | Bất kì | Bất kì | Bất kì | Bất kì * | Bất kì | Bất kì |
* HSL, HSLa và RGBa được hỗ trợ trong IE9 +.