💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!
Cập nhật: 2025年3月1日
Màu nền (Background Color)
📌
Kết luận
Dùng background-color để thay đổi màu nền của trang web
📝 Mã thực tế tại đây
body { background-color: #f5f5f5; }Cách sử dụng background-color
background-color là thuộc tính dùng để chỉ định màu nền cho một phần tử. Nếu bạn thay đổi đối tượng chọn (selector), bạn có thể tô màu cho bất kỳ khu vực cụ thể nào.
📝 Mã thực tế tại đây
<div style="background-color: #e3f2fd; padding: 16px;">
Một chiếc hộp có nền màu xanh
</div>Các thuộc tính liên quan đến nền
| Thuộc tính | Công dụng |
|---|---|
background-color | Màu nền đơn sắc |
background-image | Hình ảnh làm nền |
background: linear-gradient(...) | Màu nền dạng dải màu (gradient) |
Lưu ý về khả năng truy cập
Hãy luôn kiểm tra độ tương phản giữa màu nền và màu chữ (theo tiêu chuẩn WCAG là ít nhất 4.5:1). Nếu nền quá nhạt và chữ cũng quá nhạt, người dùng sẽ không thể đọc được nội dung.Tổng kết
- Chỉ định màu nền bằng thuộc tínhbackground-color
- Màu xám nhạt như #f5f5f5 là lựa chọn phổ biến cho nền trang web
- Luôn chú ý đến độ tương phản với màu chữ
Hãy thử trong phần bài tập
Hãy thử đổi màu nền của body thành #f5f5f5 nhé.🧪 Thử nghiệm tại đây
Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.
■ Bài tập thực hành
Hãy đổi màu nền của body thành màu xám nhạt (#f5f5f5).
Gợi ý khi gặp khó khăn
Sử dụng thuộc tính background-color.