Bài 15. Tạo màu cho chữ và nền – Tóm tắt Tin học 12

1. HTML và CSS trong trình bày màu sắc

Trang web được xây dựng từ hai thành phần chính: HTML quy định cấu trúc và nội dung, còn CSS (Cascading Style Sheets) đảm nhận phần trình bày, trong đó có màu sắc. Nhờ CSS, người thiết kế có thể đổi màu chữ, màu nền mà không cần sửa đổi nội dung HTML. Cú pháp cơ bản của CSS gồm ba phần.

Định nghĩa

Bộ chọn: xác định phần tử HTML cần định dạng.
Khối khai báo: nằm trong cặp dấu ngoặc nhọn.
Thuộc tính và giá trị: tên đặc điểm cần thay đổi và giá trị tương ứng, phân tách bằng dấu hai chấm; mỗi cặp kết thúc bằng dấu chấm phẩy.

Trong bài này, hai thuộc tính quan trọng nhất là color và background-color.

2. Thuộc tính color và background-color

Thuộc tính tạo màu

color: đặt màu cho chữ.
background-color: đặt màu cho nền của phần tử hoặc toàn trang.

Có hai cách phổ biến để đặt hai thuộc tính này:

1.
Viết trực tiếp trong thuộc tính style của thẻ HTML.
2.
Viết trong thẻ <style> đặt trong phần <head> của tệp HTML.

Cú pháp viết trực tiếp trong thẻ HTML:

<thẻ style="color: giá_trị; background-color: giá_trị;">
  Nội dung
</thẻ>

Cú pháp viết trong thẻ <style>:

<style>
  bộ_chọn {
    color: giá_trị;
    background-color: giá_trị;
  }
</style>

3. Các cách biểu diễn giá trị màu

3.1 Theo tên màu

CSS cung cấp sẵn một số tên màu cơ bản: red, green, blue, black, white, yellow, cyan, magenta, gray... Tên màu viết liền không dấu, dễ nhớ nhưng số lượng hạn chế.

3.2 Theo mã HEX

Mã HEX bắt đầu bằng dấu thăng #, theo sau là ba cặp kí tự thập lục phân tương ứng ba màu cơ bản: đỏ (RR), xanh lá (GG), xanh dương (BB).

Đọc mã HEX

Mỗi cặp gồm hai kí tự, giá trị từ 00 đến FF.
FF biểu thị cường độ tối đa; 00 biểu thị không có màu đó.

Ví dụ: #ff0000 là đỏ tươi; #00ff00 là xanh lá tươi; #0000ff là xanh dương; #000000 là đen; #ffffff là trắng.

3.3 Theo mã RGB

Mã RGB dùng hàm rgb(R, G, B), trong đó R, G, B là ba số nguyên từ 0 đến 255 biểu thị cường độ lần lượt của màu đỏ, xanh lá, xanh dương.

Lưu ý

Mã HEX và mã RGB biểu diễn cùng một màu. Chẳng hạn #ff0000 tương đương rgb(255,0,0); #000000 tương đương rgb(0,0,0).

4. Ví dụ minh hoạ

Ví dụ 1

Tạo đoạn văn bản có nền xanh nhạt, chữ xanh đậm bằng cả hai cách nhúng CSS.

Lời giải · 2 bước

Cách 1: đặt thuộc tính style ngay trong thẻ mở.

<p style="background-color: #ccffff; color: #000066;">
  Chào mừng đến với trang web của tôi.
</p>

Bước 2

Cách 2: dùng thẻ <style> trong <head>.

<head>
<style>
  p {
    background-color: #ccffff;
    color: #000066;
  }
</style>
</head>
<body>
  <p>Chào mừng đến với trang web của tôi.</p>
</body>

Ví dụ 2

Đặt màu chữ là đỏ, nền là vàng cho toàn bộ trang bằng tên màu.

Lời giải

<body style="color: red; background-color: yellow;">
  ...
</body>

5. Thao tác kiểm tra trong trình duyệt

1.
Lưu tệp HTML, mở bằng trình duyệt.
2.
Quan sát màu chữ và màu nền hiển thị.
3.
Thử đổi giá trị màu (từ tên màu sang HEX, hoặc RGB) rồi tải lại trang để so sánh kết quả.

Lỗi hay gặp

Quên dấu chấm phẩy sau mỗi cặp thuộc tính:giá_trị khi viết nhiều thuộc tính trong cùng một style.
Nhầm lẫn thuộc tính: dùng color để tô nền (color chỉ đổi màu chữ), hoặc viết sai tên như backgroundcolor, background-colour.
Mã HEX viết sai định dạng: thiếu dấu #, hoặc cặp kí tự không đúng hai kí tự thập lục phân.
Giá trị RGB vượt quá 255 hoặc nhỏ hơn 0.

7. Câu hỏi ôn tập

Câu hỏi 1

Hãy phân biệt thuộc tính color và background-color. Nêu một ví dụ minh hoạ cho mỗi thuộc tính.

Gợi ý trả lời

Thuộc tính color chỉ định màu sắc của chữ; background-color chỉ định màu nền phía sau nội dung. Ví dụ: color: red; làm chữ hiển thị màu đỏ; background-color: yellow; làm nền hiển thị màu vàng.

Câu hỏi 2

Mã màu HEX #00ff00 tương đương mã RGB nào? Đó là màu gì?