Cách sử dụng CSS để thay đổi màu phông chữ
Bạn đang tìm cách làm nổi bật trang web của mình với một số màu phông chữ khác nhau? Bạn có thể làm điều này bằng cách sử dụng CSS. CSS là viết tắt của Cascading Style Sheets và là ngôn ngữ mặc định được sử dụng để tạo và quản lý kiểu của bất kỳ trang web nào.
Có ba phương pháp áp dụng CSS vào tài liệu HTML. Đây là CSS nội tuyến, CSS nội bộ / nhúng và CSS bên ngoài.
Mục Lục
Phương pháp một: CSS nội tuyến
Để thay đổi màu phông chữ trong CSS, bạn cần tạo quy tắc CSS để đặt giá trị của thuộc tính màu.
Phương thức nội tuyến sử dụng thuộc tính style mà bạn có thể áp dụng cho hầu hết mọi phần tử. Dưới đây là một ví dụ đặt màu phông chữ của đoạn HTML thành màu đỏ:
<p style="color: red;">Paragraph of text</p>Bạn có thể đạt được hiệu quả tương tự bằng cách sử dụng CSS nội bộ / nhúng hoặc CSS bên ngoài.
Phương pháp hai: CSS nội bộ / nhúng
Bạn có thể sử dụng phương pháp này khi muốn tạo các quy tắc CSS ảnh hưởng đến nhiều phiên bản của phần tử HTML nhưng chỉ trên một trang duy nhất. Sau đó, các quy tắc CSS được viết vào phần đầu của trang HTML, sử dụng phần tử kiểu:
<head>
<style>
p { color: blue }
</style>
</head>Phương pháp ba: CSS bên ngoài
Cách thứ ba để đạt được hiệu quả tương tự là sử dụng biểu định kiểu CSS bên ngoài. Sử dụng trình soạn thảo văn bản, tạo tệp có phần mở rộng là “.css”. Thực tiễn phổ biến là gọi tệp này giống như stylesheet.css nhưng bạn có thể đặt tên cho nó bất cứ thứ gì miễn là bạn giữ phần mở rộng “.css”.
Ví dụ: để tô màu văn bản nội dung của bạn là màu xanh lá cây, bằng cách sử dụng biểu định kiểu bên ngoài, chỉ cần dán vào quy tắc CSS như sau:
p { color: blue }Trong tài liệu HTML của mình, bạn nên bao gồm một liên kết đến biểu định kiểu của mình trong phần tử HTML head:
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<p>Paragraph of text</p>
</body>
</html>Thay đổi màu phông chữ trong HTML, không áp dụng CSS
Cách tốt nhất là sử dụng CSS, nhưng đây là cách thay đổi màu phông chữ chỉ bằng HTML:
<p><font color="red">Paragraph of text</font></p>Phần tử phông chữ, cùng với thuộc tính màu của nó, không được dùng nữa. Điều này là do chúng là yếu tố trình bày chứ không phải là yếu tố cấu trúc. HTML hiện đại chỉ nên bao gồm các phần tử cấu trúc.
Thay đổi màu phông chữ trong CSS tương đối đơn giản
Chúng tôi đã chỉ cho bạn ba phương pháp để thay đổi màu phông chữ trong CSS. Chúng tôi cũng đã chỉ cho bạn cách thực hiện việc này theo cách cũ bằng cách sử dụng thẻ phông chữ HTML. Hãy thử chúng và xem cái nào phù hợp nhất với bạn!
Khi bạn đã thành thạo việc thay đổi màu phông chữ bằng CSS và HTML, bạn có thể muốn thành thạo việc thay đổi kích thước phông chữ trong HTML.
Đọc tiếp
Giới thiệu về tác giả
