Màu sắc trong CSS:
Trong CSS, màu sắc có thể được định dạng bằng các giá trị HEX, RGB, RGBA, HSL hoặc tên màu. Dưới đây là một số ví dụ về cách sử dụng các loại màu khác nhau trong CSS:
- Màu HEX: Mã HEX là một mã gồm 6 ký tự số và chữ cái A-F, thường bắt đầu bằng dấu #. Ví dụ: #FF0000 cho màu đỏ.css
.red-box {
background-color: #FF0000; /* Màu đỏ */
}
Màu RGB: Mã màu RGB gồm ba giá trị từ 0 đến 255 tượng trưng cho đỏ, xanh lá cây và xanh dương. Ví dụ: rgb(255, 0, 0) cho màu đỏ.
css
.green-box {
background-color: rgb(0, 255, 0); /* Màu xanh lá cây */
}
Màu RGBA: Mã màu RGBA giống như RGB nhưng có một giá trị thêm để đại diện cho độ trong suốt (alpha). Giá trị alpha từ 0 (hoàn toàn trong suốt) đến 1 (không trong suốt). Ví dụ: rgba(0, 0, 255, 0.5) cho màu xanh dương trong suốt.
css
.blue-transparent-box {
background-color: rgba(0, 0, 255, 0.5); /* Màu xanh dương trong suốt */
}
Màu HSL: HSL đại diện cho Màu, Độ Sáng và Độ Saturate. Giá trị màu từ 0 đến 360, độ sáng và độ saturate từ 0% đến 100%. Ví dụ: hsl(120, 100%, 50%) cho màu xanh lá cây.
css
.hsl-box {
background-color: hsl(120, 100%, 50%); /* Màu xanh lá cây */
}
Tên Màu: CSS cung cấp một số tên màu thông thường như “red”, “green”, “blue”, “yellow”, vv.
css
.named-color { background-color: red; /* Màu đỏ */ }
Lưu ý rằng các ví dụ trên chỉ minh họa cách sử dụng màu sắc trong CSS. Bạn có thể thay đổi các giá trị để tạo ra màu sắc khác nhau tùy theo thiết kế của bạn.