Có ba phương pháp áp dụng CSS vào tài liệu HTML: CSS nội tuyến (inline), CSS nội bộ/nhúng và CSS ngoại tuyến.
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ử (element). Dưới đây là một ví dụ đặt màu phông chữ của đoạn HTML thành màu đỏ (red):
<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 ngoại tuyến.
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 (instance) 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ử style:
<head>
<style>
p { color: blue }
</style>
</head>Phương pháp ba: CSS ngoại tuyến
Cách thứ ba để đạt được hiệu quả tương tự là sử dụng một CSS style sheet ngoại tuyến. Sử dụng trình soạn thảo văn bản, bạn cần tạo một tệp có phần mở rộng là “.css”. Thông thường người ta đặt tên tệp này là stylesheet.css nhưng bạn có thể đặt bất cứ tên nào 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 (blue), bằng cách sử dụng style sheet ngoại tuyến, 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 style sheet của mình trong phần tử head HTML:
<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 để thay đổi màu phông chữ trong HTML 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ữ (font), 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à phần tử trình bày chứ không phải là phần 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
Trong bài viết này, FUNiX đã giới thiệu 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.
Vân Nguyễn
Dịch từ: https://www.makeuseof.com/css-font-color/
Bình luận (0
)