Tin họcLớp 12Phần 4. Chủ đề 4 · Giải quyết vấn đề với sự trợ giúp của máy tính · Chung

Bài 15. Tạo màu cho chữ và nền

Mục tiêu bài học

Giải thích và vận dụng nội dung tạo màu cho chữ và nền qua dữ kiện cụ thể.
Tạo hoặc đánh giá sản phẩm, nêu điều kiện đúng và kiểm tra kết quả bằng bằng chứng.

Bài giảng

Hiểu cách hoạt động

CSS đặt màu chữ bằng color và màu nền bằng background-color. Màu có thể viết tên, mã hex #RRGGBB, rgb() hoặc rgba() có độ trong suốt alpha từ 0 đến 1 theo cú pháp nêu trong bài. Mỗi kênh RGB 8 bit nhận 0–255; #00FF00 có xanh lục tối đa và hai kênh còn lại bằng 0. Màu có alpha được trộn với nền phía sau nên cùng một khai báo có thể nhìn khác trên nền khác. Chọn tương phản rõ, không mã hóa thông tin chỉ bằng màu; người dùng có thể nhìn màu khác nhau. Không nhầm background-color làm đổi màu tệp ảnh nguồn.

Làm và tự kiểm tra

Mã mẫu tự biên soạn; lưu UTF-8 theo tên tệp trong nhiệm vụ.

<style>
body { color: #1e2a4f; background-color: #ffffff; }
.luu-y { color: rgb(0, 64, 96); background-color: rgba(255, 220, 100, 0.5); }
</style>
<h1>Theo dõi màu lá</h1><p class="luu-y">Kết hợp số đo với ghi chú, không chỉ dùng màu.</p>

Kết quả suy ra từ cấu trúc mã: chữ chính xanh đậm trên nền trắng; lời lưu ý có chữ rgb(0,64,96) và lớp nền vàng bán trong suốt, cần kiểm trên nền thật và không dựa màu làm dấu hiệu duy nhất. Không coi mô tả này là ảnh chụp hay kết quả đã thao tác trên máy người học.

Ghi nhớ

CSS đặt màu chữ bằng color và màu nền bằng background-color.

Bài tập

Đã đúng 0/6 câu

Câu 1Mức 2Trắc nghiệm 1 đáp án
Thuộc tính đặt màu chữ là gì?
Câu 2Mức 2Trắc nghiệm 1 đáp án
Mã #00FF00 biểu diễn RGB nào?
Câu 3Mức 2Đúng / Sai
Alpha 0 trong rgba theo cú pháp bài có nghĩa lớp màu hoàn toàn không trong suốt.
Câu 4Mức 2Trả lời ngắn
RGB mỗi kênh có 256 mức. Có bao nhiêu mức cho riêng kênh đỏ?
Câu 5Mức 2Ghép nối
Ghép màu hex với RGB.
Chạm một ý bên trái rồi chạm ý tương ứng bên phải để ghép cặp.
Câu 6Mức 2Trắc nghiệm 1 đáp án
Bảng báo đạt/chưa đạt nên trình bày thế nào?
Câu 7Mức 3Tự luận
Viết CSS và nội dung gốc cho trang: chữ #1e2a4f nền trắng, lời lưu ý màu rgb(0,64,96) trên nền rgba(255,220,100,0.5); giải thích alpha và cách tránh chỉ dùng màu.
0 từ
0/10 ảnh
Có thể chụp nhiều trang. Ảnh được lưu cùng bài làm và giáo viên sẽ chấm trên ảnh.
Vẽ bài làm
Ảnh bài làm
Cuộn chuột hoặc chụm hai ngón để phóng to · kéo để di chuyển · phím R để xoay
Câu 8Mức 3Tự luận
Một trạng thái chỉ hiện chấm đỏ hoặc chấm xanh, không có văn bản. Sửa HTML/CSS để người không nhận màu vẫn phân biệt.
0 từ
0/10 ảnh
Có thể chụp nhiều trang. Ảnh được lưu cùng bài làm và giáo viên sẽ chấm trên ảnh.
Vẽ bài làm
Ảnh bài làm
Cuộn chuột hoặc chụm hai ngón để phóng to · kéo để di chuyển · phím R để xoay