4. Xử lý màu sắc trong CSS

Trong CSS, bạn có thể xử lý màu sắc của các phần tử bằng cách sử dụng các giá trị màu khác nhau. Dưới đây là một số cách bạn có thể xử lý màu sắc trong CSS:

1. Mã Màu Hex (#RRGGBB): Sử dụng mã hex để chỉ định màu bằng cách sắp xếp mã hex của màu đỏ (RR), xanh lá cây (GG), và xanh lam (BB). Ví dụ:

css

/* Đặt màu nền là màu đỏ */
background-color: #FF0000;

/* Đặt màu chữ là màu xanh dương */
color: #0000FF;

2. Mã Màu RGB (rgb(R, G, B)): Sử dụng mã màu RGB để chỉ định màu bằng cách xác định giá trị đỏ (R), xanh lá cây (G), và xanh lam (B) trong khoảng từ 0 đến 255. Ví dụ:

css

/* Đặt màu nền là màu cam đậm */
background-color: rgb(255, 128, 0);

/* Đặt màu chữ là màu xanh lá cây */
color: rgb(0, 128, 0);

3. Mã Màu RGBA (rgba(R, G, B, A)): Giống như mã màu RGB, nhưng với thêm thành phần alpha (A) để điều chỉnh độ trong suốt. Giá trị A nằm trong khoảng từ 0 (hoàn toàn trong suốt) đến 1 (hoàn toàn không trong suốt). Ví dụ:

css

/* Đặt màu nền là màu đỏ trong suốt */
background-color: rgba(255, 0, 0, 0.5);

/* Đặt màu chữ là màu xanh dương trong suốt */
color: rgba(0, 0, 255, 0.7);

4. Tên Màu (Named Colors): Sử dụng tên màu tiêu chuẩn để đặt màu. Ví dụ:

css

/* Đặt màu nền là màu vàng */
background-color: yellow;

/* Đặt màu chữ là màu tím */
color: purple;

5. Mã Màu HSL (hsl(H, S%, L%)): Sử dụng mã màu HSL để chỉ định màu dựa trên độ màu (H), độ bão hòa (S%), và độ sáng (L%). Ví dụ:

css

/* Đặt màu nền là màu hồng nhạt */
background-color: hsl(330, 50%, 80%);

/* Đặt màu chữ là màu xanh lá cây đậm */
color: hsl(120, 100%, 50%);

Nhớ rằng, bạn cũng có thể sử dụng các thuộc tính như border-color, outline-color, và nhiều thuộc tính khác để xử lý màu sắc của các phần tử trong CSS.