CSS Font Color: Hướng Dẫn Thay Đổi Màu Chữ

Thuộc tính CSS color áp dụng màu cho text element. Có thể chỉ định CSS built-in color keyword, giá trị hexadecimal, hoặc color value khác. Cú pháp: color: yourcolor;.

Cách Áp Dụng CSS Font Color

Set màu chữ và background color text trên website là phần thiết yếu của web design.

Đó là lúc color và background-color properties xuất hiện. color set màu text HTML. background-color định nghĩa background color cho text.

Tutorial thảo luận với ví dụ cách set text color trong CSS. Sau đó nói về set background color cho text element.

CSS Font Color (Màu Chữ)

CSS font color set bằng property color. Property này set màu text, KHÔNG phải background của element. Có thể dùng CSS color keyword hoặc color value như hex string.

Cú pháp color property:

p { color: red; }

Rule này set màu tất cả <p> tag trong HTML document thành đỏ.

Dùng CSS color keyword. Từ khóa tiện lợi cho màu chuẩn như "red", "paleblue". Nhưng không cover mọi màu trên spectrum. Muốn màu cụ thể → dùng color label khác.

color property chấp nhận các giá trị sau:

Mặc định, text color của web page = text color áp dụng cho tag <body>. Trừ khi chỉ định khác, sẽ là đen.

Có thể dùng color property định nghĩa link colors trong stylesheet.

Ví dụ minh họa color property:

Ví Dụ: Thay Đổi Font Color CSS

Giả sử design website cho grocery store local "Peterson and Sons". Chủ muốn block text nhất định hiển thị font xám.

Code:

<html> 
  <p>Peterson and Sons was founded by Louis Peterson in 1927. Louis was a Seattle resident with a dream of bringing fresh groceries to his local neighborhood. Peterson and Sons primarily sells fresh food and groceries, including delicious deli meat and artisan cheese. Today, Peterson and Sons operates five stores across the Seattle area.</p> 
  <style> 
    p { color: gray; } 
  </style>

Output:

Bấm Run để xem output.

Dùng <p> tag định nghĩa paragraph mô tả store. CSS: style set text color tất cả <p> = gray (color name value).

Có thể dùng "rgb(128, 128, 128)" thay "gray" cho RGB value. Hoặc hex/HSL value.

CSS styles nằm trong <style> tag trong HTML document (không dùng file CSS riêng).

CSS Text Background Color (Màu Nền Văn Bản)

background-color property set background color của element. Chấp nhận các color value đã nói (color name, HEX, RGB, HSL). Property này set background color cho text.

Cú pháp:

p { background-color: blue; }

Code set background xanh cho tất cả <p> tag.

Ví Dụ CSS Text Background Color

Muốn thêm background cam cho 1 câu trong paragraph ví dụ trên.

Câu cần highlight: "Today, Peterson and Sons operates five stores across the Seattle area." Vẫn muốn all text paragraph = gray. Code:

<html> 
  <p>Peterson and Sons was founded by Louis Peterson in 1927. Louis was a Seattle resident with a dream of bringing fresh groceries to his local neighborhood. Peterson and Sons primarily sells fresh food and groceries, including delicious deli meat and artisan cheese. <span>Today, Peterson and Sons operates five stores across the Seattle area.</span></p> 
  <style> 
    p { color: gray; } 
    span { background-color: orange; } 
  </style>

Output:

Bấm Run để xem output.

HTML: <p> bao paragraph. Câu cuối wrap trong <span> → apply style cụ thể cho câu đó.

CSS: 2 rule. Rule 1: text color trong <p> = gray. Rule 2: background color trong <span> = orange.

Kết quả: câu cuối (trong <span>) có background cam – do rule 2.

Kết Luận

color property set màu text trên web page. background-color set background color cho text.

Tutorial thảo luận với ví dụ cách thực hiện. Bạn đã equipped skills thay đổi font color và text background color như expert web designer!

Muốn học thêm HTML? Xem How to Learn HTML guide – expert learning tips và guidance top coding resources.