Hướng dẫn which of these is not the black color in css - cái nào trong số này không phải là màu đen trong css

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
• Thập lục phân

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 ...

Ôliu

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 đến 255 hoặc tỷ lệ phần trăm từ 0 đến 100%
• Giá trị của 0 có nghĩa là không có màu nào được sử dụng
• Giá trị của 255 hoặc 100% có nghĩa là tất cả các màu đó đang được sử dụng
• A 0 cho cả ba giá trị màu sẽ có màu đen
• A 255 hoặc 100% cho cả ba giá trị màu sẽ là màu trắng

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ừ 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 */

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 */

h2 {
   background-color: hsla(240, 25%, 50%, .5);
}

• 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ố giữa 0 và 255, bạn sử dụng sáu số thập lục phân. Số Hex có thể là

h2 {
   background-color: hsla(240, 25%, 50%, .5);
}

h2 {
   background-color: hsla(240, 25%, 50%, .5);
}

Đượ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 »

Màu đen trong CSS là gì?

Các mã màu trong CSS là gì?

3 cách được chỉ định màu CSS là gì?

Có bao nhiêu màu được sử dụng trong CSS?