1. Kiến thức trọng tâm
Màu sắc tạo cảm xúc và giúp người đọc phân biệt các phần của trang web. Trong CSS, màu chữ đặt bằng thuộc tính color, màu nền đặt bằng background-color. Màu có thể viết bằng tên tiếng Anh (red, blue, white), mã thập lục phân (#FF0000 là đỏ, #FFFFFF là trắng) hoặc hàm rgb(255, 0, 0) với ba giá trị đỏ, xanh lá, xanh dương từ 0 đến 255. Mã thập lục phân được dùng phổ biến nhất vì ngắn gọn và chính xác. Khi chọn màu, cần đảm bảo độ tương phản giữa chữ và nền đủ cao để dễ đọc: chữ tối trên nền sáng hoặc chữ sáng trên nền tối. Tránh dùng quá nhiều màu rực rỡ trên một trang vì sẽ gây rối mắt. Một website nên có bảng màu thống nhất: một màu chủ đạo, một màu nhấn cho liên kết và nút bấm, nền sáng nhẹ cho nội dung chính.
2. Ví dụ minh họa
Yêu cầu: tạo tiêu đề cấp 1 có chữ trắng trên nền xanh dương đậm và đoạn văn có chữ đen trên nền vàng nhạt.
Lời giải:
h1 {
color: #FFFFFF;
background-color: #1A5DB0;
}
p {
color: #000000;
background-color: #FFF9C4;
}
Giải thích: tiêu đề dùng chữ trắng #FFFFFF trên nền xanh dương đậm #1A5DB0, tương phản cao nên rất dễ đọc; đoạn văn dùng chữ đen trên nền vàng nhạt #FFF9C4, nhẹ nhàng và không gây mỏi mắt. Cả hai cặp màu đều tuân thủ nguyên tắc chữ tối trên nền sáng hoặc chữ sáng trên nền tối.
3. Ghi nhớ
colorđặt màu chữ,background-colorđặt màu nền.- Màu viết bằng tên, mã thập lục phân (
#RRGGBB) hoặc hàmrgb(r, g, b). - Đảm bảo tương phản chữ – nền đủ cao để dễ đọc.
- Dùng bảng màu thống nhất, tránh quá nhiều màu rực rỡ trên một trang.