1. CSS cho phép bạn thay đổi màu sắc cho:
- Chữ:
color - Nền:
background-color - Đường viền:
border-color - Bóng, hiệu ứng, và nhiều thứ khác
2. Có 4 cách chính để viết màu trong CSS
a. Dùng tên màu tiếng Anh
Ví dụ:
h1 {
color: red;
}
Một số màu phổ biến:
red,green,blue,yellow,black,white,gray,orange,purple,brown,pink
Có khoảng 140 tên màu chuẩn W3C mà CSS hiểu được.
b. Dùng mã HEX
p {
color: #3498db;
}
- HEX viết tắt của hệ thập lục phân (cơ số 16)
- Một mã HEX có 6 ký tự:
#RRGGBB– viết tắt từ Red, Green, Blue - Ví dụ:
#ff0000→ đỏ#00ff00→ xanh lá#0000ff→ xanh dương#000000→ đen#ffffff→ trắng
Cách đọc HEX:
#3498dbnghĩa là đỏ = 34, xanh lá = 98, xanh dương = db (đổi từ hexa sang thập phân)
c. Dùng RGB
div {
background-color: rgb(255, 200, 100);
}
rgb()nhận 3 giá trị từ0đến255cho đỏ, xanh lá và xanh dương- Dễ dùng hơn HEX nếu bạn quen với phối màu
- Ví dụ:
rgb(255, 0, 0)→ đỏrgb(0, 255, 0)→ xanh lárgb(0, 0, 255)→ xanh dương
d. Dùng HSL
body {
background-color: hsl(210, 50%, 60%);
}
hsl()là viết tắt của Hue – Saturation – Lightness- Ví dụ:
hsl(0, 100%, 50%)→ đỏ tươihsl(120, 100%, 25%)→ xanh lá đậmhsl(240, 100%, 75%)→ xanh dương nhạt
HSL dễ điều chỉnh độ sáng và độ bão hòa hơn RGB.
3. Có thể thêm độ mờ bằng rgba() và hsla()
.box {
background-color: rgba(0, 0, 0, 0.5); /* Đen mờ 50% */
}
alà alpha – độ trong suốt (0 = trong suốt hoàn toàn, 1 = không trong suốt)
4. Thực hành
style.css
body {
background-color: #fefefe;
color: #333;
}
h1 {
color: red;
}
.box-hex {
background-color: #2ecc71;
color: white;
padding: 10px;
}
.box-rgb {
background-color: rgb(52, 152, 219);
color: white;
padding: 10px;
}
.box-hsl {
background-color: hsl(45, 100%, 50%);
color: black;
padding: 10px;
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bài 3 – Màu sắc CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Thử nghiệm màu sắc</h1>
<div class="box-hex">Màu nền bằng mã HEX</div>
<div class="box-rgb">Màu nền bằng RGB</div>
<div class="box-hsl">Màu nền bằng HSL</div>
</body>
</html>
5. Ghi nhớ
| Cách viết | Ưu điểm | Ví dụ |
|---|---|---|
| Tên màu | Đơn giản | red, blue |
| HEX | Phổ biến, chuyên nghiệp | #ff9900 |
| RGB | Chính xác, dễ điều chỉnh | rgb(200, 50, 100) |
| HSL | Dễ kiểm soát độ sáng/màu | hsl(120, 50%, 70%) |
Mẹo:
- Dùng công cụ chọn màu như colorhunt.co, coolors.co để lấy bảng màu đẹp.
- Luôn test màu trên nền trắng và nền tối để đảm bảo dễ đọc.
Thảo luận