❮ Tham chiếu chức năng CSS
Thí dụ
Xác định các màu RGB khác nhau:
#p1 {màu nền: RGB [255,0,0]; [0,0,0,255];} / * màu xanh * /
#p2 {background-color:rgb[0,255,0];} /* green */
#p3 {background-color:rgb[0,0,255];} /* blue */
Hãy tự mình thử »
Định nghĩa và cách sử dụng
Hàm RGB [] xác định màu sắc bằng mô hình màu đỏ xanh [RGB] màu đỏ [RGB].
Một giá trị màu RGB được chỉ định với: RGB [đỏ, xanh lá cây, xanh dương]. Mỗi tham số xác định cường độ của màu đó và có thể là một số nguyên từ 0 đến 255 hoặc giá trị phần trăm [từ 0% đến 100%].
Ví dụ: giá trị RGB [0,0,255] được hiển thị dưới dạng màu xanh lam, vì tham số màu xanh được đặt thành giá trị cao nhất của nó [255] và các tham số khác được đặt thành 0.
CSS2 |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ chức năng.
RGB [] | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS Cú pháp
màu đỏ | Xác định cường độ của màu đỏ là một số nguyên từ 0 đến 255, hoặc dưới dạng giá trị phần trăm từ 0% đến 100% |
màu xanh lá | Xác định cường độ màu xanh lá cây là một số nguyên từ 0 đến 255, hoặc dưới dạng giá trị phần trăm từ 0% đến 100% |
màu xanh da trời | Xác định cường độ của màu xanh là một số nguyên từ 0 đến 255, hoặc dưới dạng giá trị phần trăm từ 0% đến 100% |
❮ Tham chiếu chức năng CSS
Giá trị màu RGB đại diện cho các nguồn ánh sáng đỏ, xanh lá cây và xanh dương.
Giá trị RGB
Trong CSS, một màu có thể được chỉ định là giá trị RGB, sử dụng công thức này:
RGB [đỏ, xanh lá cây, xanh dương]
Mỗi tham số [đỏ, xanh lá cây và xanh dương] xác định cường độ của màu trong khoảng từ 0 đến 255.
Ví dụ: RGB [255, 0, 0] được hiển thị dưới dạng màu đỏ, vì màu đỏ được đặt thành giá trị cao nhất [255] và các loại khác được đặt thành 0.
Để hiển thị màu đen, đặt tất cả các tham số màu thành 0, như thế này: RGB [0, 0, 0].
Để hiển thị màu trắng, đặt tất cả các tham số màu thành 255, như thế này: RGB [255, 255, 255].
Thử nghiệm bằng cách trộn các giá trị RGB dưới đây:
Các sắc thái của màu xám thường được xác định bằng cách sử dụng các giá trị bằng nhau cho tất cả 3 nguồn ánh sáng:
Giá trị RGBA
Các giá trị màu RGBA là một phần mở rộng của các giá trị màu RGB với kênh alpha - chỉ định độ mờ cho một màu.
Giá trị màu RGBA được chỉ định với:
RGBA [đỏ, xanh lá cây, xanh dương, alpha]
Tham số alpha là một số giữa 0,0 [hoàn toàn trong suốt] và 1.0 [hoàn toàn không trong suốt]:
Thử nghiệm bằng cách trộn các giá trị RGBA dưới đây:
Ký hiệu chức năng Lưu ý: Màu sắc CSS Cấp 4 đã thực hiện một số thay đổi đối với Thông số kỹ thuật cấp 4 cũng cho phép phân tách không gian ngoài các giá trị được phân tách bằng dấu phẩy.rgb[]
thể hiện một màu theo các thành phần màu đỏ, xanh lá cây và xanh lam của nó. Một thành phần alpha tùy chọn thể hiện độ trong suốt của màu.rgb[]
functional notation expresses a color according to its red, green, and blue components. An optional alpha component represents the color's transparency.Thử nó
rgb[]
. Trong các trình duyệt hỗ trợ tiêu chuẩn rgba[]
là bí danh cho rgb[]
, họ chấp nhận các tham số tương tự và hoạt động theo cùng một cách. CSS Colors Level 4 made
some changes to rgb[]
. In browsers that support the standard rgba[]
is an alias for rgb[]
, they accept the same parameters and behave the same way.Cú pháp
rgb[255, 255, 255] /* white */
rgb[255, 255, 255,.5] /* white with 50% opacity */
rgb[255 255 255] /* CSS Colors 4 space-separated values */
rgb[255 255 255 / .5]; /* white with 50% opacity, using CSS Colors 4 space-separated values */
Giá trị
Ký hiệu chức năng:
p {
color: red;
}
0p {
color: red;
}
1 [màu đỏ], p {
color: red;
}
2 [màu xanh lá cây] và p {
color: red;
}
3 [màu xanh] có thể là p {
color: red;
}
4S hoặc p {
color: red;
}
5S, trong đó số p {
color: red;
}
6 tương ứng với p {
color: red;
}
7. p {
color: red;
}
8 [alpha] có thể là p {
color: red;
}
4 giữa p { color: rgb[0, 0, 0]; } /* black */
h2 { color: rgb[255, 255, 255]; } /* white */
ul { color: rgb[128, 80, 200]; } /* purple */
/* Percentages work too */
h2 { color: rgb[100%, 100%, 100%]; } /* white */
0 và p { color: rgb[0, 0, 0]; } /* black */
h2 { color: rgb[255, 255, 255]; } /* white */
ul { color: rgb[128, 80, 200]; } /* purple */
/* Percentages work too */
h2 { color: rgb[100%, 100%, 100%]; } /* white */
1 hoặc p {
color: red;
}
5, trong đó số p { color: rgb[0, 0, 0]; } /* black */
h2 { color: rgb[255, 255, 255]; } /* white */
ul { color: rgb[128, 80, 200]; } /* purple */
/* Percentages work too */
h2 { color: rgb[100%, 100%, 100%]; } /* white */
1 tương ứng với p {
color: red;
}
7 [độ mờ hoàn toàn].Ký hiệu chức năng: p { color: rgb[0, 0, 0]; } /* black */
h2 { color: rgb[255, 255, 255]; } /* white */
ul { color: rgb[128, 80, 200]; } /* purple */
/* Percentages work too */
h2 { color: rgb[100%, 100%, 100%]; } /* white */
5Màu CSS Cấp 4 bổ sung hỗ trợ cho các giá trị phân tách không gian trong ký hiệu chức năng.
Tính tương thích của trình duyệt web
Bảng BCD chỉ tải trong trình duyệt
Quay lại trang tuần 3 »
Chúng tôi đã thấy một số thuộc tính trong CSS lấy giá trị màu. Đây là một ví dụ:
p {
color: red;
}
Có một số cách khác nhau để chỉ định màu sắc trong CSS.
- Từ khóa màu
- RGB
- RGBA
- HSL
- HSLA
- HSLA chỉ đơn giản là mô hình màu HSL với việc bổ sung kênh alpha. Điều này hoạt động chính xác giống như Kênh Alpha trong RGBA.
Từ khóa màu
Cách đầu tiên và dễ nhất để chỉ định màu là sử dụng một trong 140 từ khóa màu được xác định trước được chỉ định trong CSS.
17 ban đầu được liệt kê dưới đây. Một nhóm khó coi ...
& nbsp; | màu đen | #000000 |
& nbsp; | màu đen | #000000 |
& nbsp; | màu đen | #000000 |
& nbsp; | màu đen | #000000 |
& nbsp; | màu đen | #000000 |
& nbsp; | màu đen | #000000 |
& nbsp; | màu đen | #000000 |
& nbsp; | màu đen | #000000 |
& nbsp; | màu đen | #000000 |
& nbsp; | Vôi | #00FF00 |
& nbsp; | Vôi | #00FF00 |
& nbsp; | Vôi | #00FF00 |
& nbsp; | Vôi | #00FF00 |
& nbsp; | Vôi | #00FF00 |
& nbsp; | Vôi | #00FF00 |
& nbsp; | Vôi | #00FF00 |
& nbsp; | Vôi | #00FF00 |
Rõ ràng hầu hết các màu này là không phù hợp cho thiết kế web thông thường. Từ khóa màu hữu ích nhất cho mục đích thử nghiệm và trình diễn [như trong các trang này].
Tất cả 140 từ khóa màu được liệt kê ở đây theo thứ tự bảng chữ cái. Bạn cũng có thể tìm thấy nhiều danh sách hữu ích hơn tại các trang web này:
- 147 màu sắc
- Mã màu HTML: Tên màu
Bạn cũng có thể xem một bản in của tất cả các swatch trên các trang 304-305 trong thiết kế web học tập.
Giá trị màu RGB
Hầu hết các bạn có thể đã nghe về các giá trị CMYK cho thiết kế in. RGB, là viết tắt của màu đỏ, xanh lá cây và xanh dương là mô hình màu mà theo dõi sử dụng. Vì trong thiết kế web, chúng tôi chủ yếu quan tâm đến các trang web trông như thế nào trên màn hình, RGB là mô hình màu mà chúng tôi sử dụng.
- Màu RGB có ba giá trị đại diện cho: đỏ, xanh lá cây và xanh lamred, green, and blue
- Mỗi giá trị có thể là một số từ
0 đếnp { color: rgb[0, 0, 0]; } /* black */ h2 { color: rgb[255, 255, 255]; } /* white */ ul { color: rgb[128, 80, 200]; } /* purple */ /* Percentages work too */ h2 { color: rgb[100%, 100%, 100%]; } /* white */
6 hoặc tỷ lệ phần trăm từp { color: red; }
0 đếnp { color: rgb[0, 0, 0]; } /* black */ h2 { color: rgb[255, 255, 255]; } /* white */ ul { color: rgb[128, 80, 200]; } /* purple */ /* Percentages work too */ h2 { color: rgb[100%, 100%, 100%]; } /* white */
7p { color: red; }
- Giá trị của
0 có nghĩa là không có màu nào được sử dụngp { color: rgb[0, 0, 0]; } /* black */ h2 { color: rgb[255, 255, 255]; } /* white */ ul { color: rgb[128, 80, 200]; } /* purple */ /* Percentages work too */ h2 { color: rgb[100%, 100%, 100%]; } /* white */
- Giá trị
6 hoặcp { color: red; }
7 có nghĩa là tất cả các màu đó đang được sử dụngp { color: red; }
- A
0 cho cả ba giá trị màu sẽ có màu đenp { color: rgb[0, 0, 0]; } /* black */ h2 { color: rgb[255, 255, 255]; } /* white */ ul { color: rgb[128, 80, 200]; } /* purple */ /* Percentages work too */ h2 { color: rgb[100%, 100%, 100%]; } /* white */
- A
6 hoặcp { color: red; }
7 cho cả ba giá trị màu sẽ là màu trắngp { color: red; }
Cú pháp CSS để sử dụng màu RGB khác một chút so với chúng ta đã thấy trước đây. Trong ví dụ dưới đây, chúng tôi đang tạo kiểu:
- Một đoạn văn đen
- Một H2 trắng
- Một danh sách không có thứ tự màu tím
p { color: rgb[0, 0, 0]; } /* black */
h2 { color: rgb[255, 255, 255]; } /* white */
ul { color: rgb[128, 80, 200]; } /* purple */
/* Percentages work too */
h2 { color: rgb[100%, 100%, 100%]; } /* white */
Giá trị màu RGBA
RGBA là tất cả các cơn thịnh nộ.
Nghiêm túc mà nói, nó giống như RGB, ngoại trừ việc bổ sung giá trị thứ tư: kênh alpha.
Giá trị alpha đại diện cho mức độ trong suốt mà màu RGB nên có. Nó có thể là một giá trị từ
p { color: rgb[0, 0, 0]; } /* black */
h2 { color: rgb[255, 255, 255]; } /* white */
ul { color: rgb[128, 80, 200]; } /* purple */
/* Percentages work too */
h2 { color: rgb[100%, 100%, 100%]; } /* white */
0 đến p { color: rgb[0, 0, 0]; } /* black */
h2 { color: rgb[255, 255, 255]; } /* white */
ul { color: rgb[128, 80, 200]; } /* purple */
/* Percentages work too */
h2 { color: rgb[100%, 100%, 100%]; } /* white */
1 hoặc tỷ lệ phần trăm từ p { color: rgb[0, 0, 0]; } /* black */
h2 { color: rgb[255, 255, 255]; } /* white */
ul { color: rgb[128, 80, 200]; } /* purple */
/* Percentages work too */
h2 { color: rgb[100%, 100%, 100%]; } /* white */
0 đến p {
color: red;
}
7. Lưu ý rằng bạn phải chỉ định p { color: #000000; } /* black */
h2 { color: #ffffff; } /* white */
h2 { color: #aaaaaa; } /* medium gray */
ul { color: #8050c8; } /* purple */
0 thay vì p { color: #000000; } /* black */
h2 { color: #ffffff; } /* white */
h2 { color: #aaaaaa; } /* medium gray */
ul { color: #8050c8; } /* purple */
1.- Xem ví dụ RGBA
HSL
Mô hình màu HSL là một trong những mô hình ít được sử dụng nhất, nhưng đạt được lực kéo vì có thể trực quan hơn để sử dụng khi làm việc với các sắc thái và điều chỉnh màu.
HSL là viết tắt của: Hue, Saturation và Lightness
Màu sắc
Huế được xác định bởi một bánh xe màu. Mỗi màu đại diện cho một mức độ trên bánh xe. Trang này cho thấy một hình ảnh hình ảnh đẹp của bánh xe màu:
- Demo bánh xe màu HSL
Bão hòa
Các hộp dưới đây cho thấy các mức độ bão hòa [cường độ màu] khác nhau cho màu sắc ở 240 °. Giá trị độ sáng được đặt ở mức 50% cho mỗi hộp.
Sự nhẹ nhàng
Đây là cùng một màu sắc [240 °] được hiển thị ở các mức độ nhẹ khác nhau với độ bão hòa 100%.
Ví dụ về lưới màu HSL
Lưới này cho thấy sự bão hòa và nhẹ khác nhau với nhau.
HSL [240, 100%, 90%]
HSL [240, 100%, 75%]
HSL [240, 100%, 50%]
HSL [240, 100%, 25%]
HSL [240, 100%, 10%]
HSL [240, 75%, 90%]
HSL [240, 75%, 75%]
HSL [240, 75%, 50%]
HSL [240, 75%, 25%]
HSL [240, 75%, 10%]
HSL [240, 50%, 90%]
HSL [240, 50%, 75%]
HSL [240, 50%, 50%]
HSL [240, 50%, 25%]
HSL [240, 50%, 10%]
HSL [240, 25%, 90%]
HSL [240, 25%, 75%]
HSL [240, 25%, 50%]
HSL [240, 25%, 25%]
HSL [240, 25%, 10%]
HSL [240, 0%, 90%]
HSL [240, 0%, 75%]
HSL [240, 0%, 50%]
HSL [240, 0%, 25%]
HSL [240, 0%, 10%]
HSLA
HSLA chỉ đơn giản là mô hình màu HSL với việc bổ sung kênh alpha. Điều này hoạt động chính xác giống như Kênh Alpha trong RGBA.
h2 {
background-color: hsla[240, 25%, 50%, .5];
}
Ví dụ về HSLA
Ví dụ về HSLA [trên các màu nền khác nhau]
Giá trị màu thập lục phân
Có lẽ cách phổ biến nhất [nhưng ít trực quan nhất] để chỉ định màu sắc trong CSS là sử dụng các giá trị thập lục phân [hoặc hex] của chúng. Các giá trị HEX thực sự chỉ là một cách khác nhau để thể hiện các giá trị RGB. Thay vì sử dụng ba số từ
p { color: rgb[0, 0, 0]; } /* black */
h2 { color: rgb[255, 255, 255]; } /* white */
ul { color: rgb[128, 80, 200]; } /* purple */
/* Percentages work too */
h2 { color: rgb[100%, 100%, 100%]; } /* white */
0 và p {
color: red;
}
6, bạn sử dụng sáu số thập lục phân. Số Hex có thể là p { color: #000000; } /* black */
h2 { color: #ffffff; } /* white */
h2 { color: #aaaaaa; } /* medium gray */
ul { color: #8050c8; } /* purple */
4 và p { color: #000000; } /* black */
h2 { color: #ffffff; } /* white */
h2 { color: #aaaaaa; } /* medium gray */
ul { color: #8050c8; } /* purple */
5. Các giá trị Hex luôn được đặt trước với ký hiệu #.Được chứng minh ở đây là một số quy tắc quy tắc CSS cơ bản bằng cách sử dụng các giá trị HEX.
p { color: #000000; } /* black */
h2 { color: #ffffff; } /* white */
h2 { color: #aaaaaa; } /* medium gray */
ul { color: #8050c8; } /* purple */
Ký hiệu tốc ký cho các giá trị hex
Nếu cả hai chữ số của các giá trị màu đỏ, xanh lá cây và xanh dương là như nhau, bạn có thể sử dụng ký hiệu ba chữ số ngắn. Điều này được hiển thị tốt nhất bằng một ví dụ:
p { color: #000; } /* black same as #000000 */
p { color: #fff; } /* white same as #ffffff */
p { color: #f00; } /* red: same as #ff0000 */
h2 { color: #0f0; } /* lime: same as #00ff00 */
ul { color: #ff0; } /* yellow: same as #ffff00 */
Quay lại trang tuần 3 »