Bạn sẽ tạo vùng giới thiệu và card rõ ràng bằng màu nền, đường viền và khoảng cách. Màu sắc hỗ trợ phân cấp nội dung, đồng thời phải giữ chữ đọc được trong những trạng thái thực tế.

Dùng tiếp website Góc học web từ môn HTML. Mỗi thư mục ví dụ là một phiên bản độc lập: before.html và before.css để so sánh, index.html và styles.css là kết quả sau bài học. Hãy sửa một quy tắc, tải lại và giải thích điều thay đổi.

Màu chữ và màu nền đi cùng nhau

color tác động màu chữ và những phần dùng currentColor; background-color tô nền. Khi đổi một trong hai, hãy kiểm tra cặp màu với nhau. Chữ nhạt trên nền nhạt có thể trông thanh nhưng khó đọc.

Không truyền đạt trạng thái chỉ bằng màu: form lỗi cần có văn bản hoặc dấu hiệu có nghĩa ngoài đường viền đỏ. Với nội dung thường, WCAG thường yêu cầu tỷ lệ tương phản ít nhất 4.5:1; chữ lớn đủ điều kiện có mức 3:1. Dùng công cụ kiểm tra thay vì đoán bằng mắt.

Chọn cú pháp màu dễ làm việc

Hex, rgb và hsl đều mô tả màu theo cách khác nhau. Hsl có thể thuận tiện khi điều chỉnh độ sáng và sắc độ, nhưng không bảo đảm các màu tạo ra có cùng tương phản. Alpha làm màu hòa với lớp bên dưới, vì vậy kết quả phụ thuộc nền thật.

Đặt một số màu nhất quán cho chữ, nền và điểm nhấn tốt hơn việc mỗi thành phần chọn một mã ngẫu nhiên. Bài biến CSS sẽ giúp tập trung các giá trị này ở một chỗ.

Ảnh nền và ảnh nội dung khác vai trò

Ảnh mang thông tin cần được đánh dấu bằng HTML phù hợp và alt; background-image thường phục vụ trang trí. Nếu dùng nền ảnh phía sau chữ, phải kiểm tra cả những vùng ảnh sáng hoặc tối khác nhau, không chỉ một vị trí đẹp trên màn hình lớn.

background-size:cover có thể cắt ảnh để phủ vùng; contain giữ toàn ảnh nhưng có thể để khoảng trống. Vị trí cắt còn phụ thuộc background-position. Không dùng cover rồi hứa mọi chữ trong một ảnh quảng cáo sẽ luôn hiện đủ.

Border, bo góc và bóng nhẹ

Border giúp nhận diện giới hạn hộp. Border-radius bo góc, không tự cắt mọi nội dung con nếu chưa có cơ chế clipping phù hợp. Box-shadow tạo chiều sâu nhưng không nên là tín hiệu duy nhất phân biệt vùng nhập hoặc nút.

Trong ví dụ, hero dùng nền sáng và border, card có khung nhẹ. Chưa cần thêm nhiều hiệu ứng; khoảng cách và typography thường giúp phân cấp nội dung rõ hơn một bóng đổ rất đậm.

Mã của phần đang học

Giữ lại cấu trúc HTML có ý nghĩa. Đoạn dưới là phần HTML liên quan đến tình huống; bộ tải về có cả tài liệu hoàn chỉnh và stylesheet tích lũy từ các bài trước.

<p class="color-sample"><strong>Gợi ý:</strong> Chọn màu cùng với nền và nội dung thật, không chọn từng mã riêng lẻ.</p>

Thêm hoặc sửa trong styles.css

.hero { background: #e9f4ff; border: 1px solid #b8d6ee; border-radius: 1rem; padding: 1.5rem; }
.eyebrow { color: #145b7c; font-size: .85rem; font-weight: 700; letter-spacing: .08em; }
.card { border: 1px solid #cbd8e5; border-radius: .75rem; padding: 1rem; background: #fff; }
.color-sample { padding: 1rem; color: #123c54; background: #dff2f1; border-left: .35rem solid #19746e; }

So sánh trước và sau

Vùng giới thiệu, card và ghi chú có nền hoặc viền để phân biệt vai trò. Độ tương phản của cặp màu cần được kiểm tra khi bạn thay màu hoặc dùng ảnh nền.

Xem trước khi sửa · Xem sau khi sửa · Tải 20 phiên bản và website hoàn chỉnh

Lỗi thường gặp và cách sửa

• Dùng màu đỏ làm dấu lỗi duy nhất: thêm thông báo bằng chữ.
• Dùng ảnh nền chứa thông tin thiết yếu: đưa thông tin vào HTML.
• Thêm bóng đổ để chữa mọi vấn đề phân cấp: sửa spacing và typography trước.

Tự kiểm tra

• Đổi màu nền nhưng giữ màu chữ và kiểm tra lại tương phản.
• Giải thích khác nhau giữa cover và contain.

Những điều cần nhớ

Đối chiếu kết quả với mục tiêu của bài, không chỉ nhìn xem giao diện có giống ảnh mẫu. Dùng DevTools kiểm tra quy tắc thực sự được áp dụng và thử một nội dung dài hơn hoặc khung nhìn hẹp hơn trước khi kết luận đã xong.

Đọc thêm khi cần

Tài liệu gốc về chủ đề này trên MDN

Mục lục CSS 20 bài · Ôn lại HTML