CSS (Cascading Style Sheets) là một phần không thể thiếu trong việc xây dựng và thiết kế giao diện web. CSS cho phép bạn điều chỉnh các yếu tố hiển thị trên trang web, bao gồm màu sắc, kích thước, kiểu chữ và cách thức sắp xếp các phần tử trên trang. Một trong những yếu tố cơ bản và quan trọng trong thiết kế giao diện là việc thay đổi màu sắc của phông chữ (text color). Màu sắc của chữ không chỉ giúp làm đẹp cho trang web mà còn tạo điểm nhấn, cải thiện tính khả dụng và dễ đọc.
Trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng CSS để thay đổi màu phông chữ trên trang web, từ những cách đơn giản đến những kỹ thuật nâng cao hơn. Bài viết cũng sẽ cung cấp các ví dụ cụ thể để giúp bạn nắm rõ cách thức sử dụng CSS hiệu quả.
1. 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.
2. 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>3. 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>4. 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.
5. 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.
6. Sử Dụng CSS Để Thay Đổi Màu Phông Chữ Trong Tình Huống Nâng Cao
6.1. Thay Đổi Màu Phông Chữ Khi Di Chuyển Chuột (Hover Effect)
Bạn có thể sử dụng hiệu ứng hover để thay đổi màu phông chữ khi người dùng di chuột vào một phần tử.
Trong ví dụ này, khi người dùng di chuột qua nút, màu văn bản sẽ chuyển thành màu trắng và nền sẽ đổi thành màu xanh lá.
6.2. Thay Đổi Màu Phông Chữ Dựa Trên Điều Kiện (CSS Variables)
CSS Variables giúp bạn quản lý màu sắc linh hoạt hơn, đặc biệt khi bạn muốn thay đổi màu sắc ở nhiều vị trí trong cùng một trang. Bạn có thể sử dụng CSS Variables để thay đổi màu phông chữ theo các điều kiện khác nhau.
Ở ví dụ trên, màu phông chữ của tất cả các đoạn văn bản sẽ được áp dụng theo biến --primary-color. Khi bạn thay đổi giá trị của biến này, tất cả các phần tử liên quan cũng sẽ thay đổi màu sắc.
7. Kết Luận
Việc thay đổi màu phông chữ trong CSS là một kỹ thuật quan trọng trong thiết kế giao diện web, giúp làm nổi bật nội dung, cải thiện khả năng đọc và tạo sự thu hút cho người sử dụng. CSS cung cấp nhiều phương pháp khác nhau để thay đổi màu phông chữ, bao gồm việc sử dụng tên màu, mã hex, RGB, HSL, và nhiều hơn nữa. Hãy tận dụng những công cụ này để tạo ra giao diện web đẹp mắt và dễ sử dụng.
Vân Nguyễn
Dịch từ: https://www.makeuseof.com/css-font-color/
Bình luận (