Cách để Đổi màu văn bản trong HTML

Cùng viết bởi Nhân viên của wikiHow

Mặc dù bạn có thể thay đổi màu sắc văn bản bằng cách sử dụng thẻ <font> trong HTML, nhưng cách này không còn được hỗ trợ trên HTML5. Thay vào đó, bạn nên sử dụng CSS cơ bản để xác định màu sắc mà văn bản sẽ hiển thị trong các thành tố khác nhau trên trang web. CSS cũng sẽ đảm bảo cho trang web của bạn tương thích được với mọi trình duyệt.

Phương pháp 1

Phương pháp 1 của 2:

Sử dụng CSS

Tải về bản PDF

1
Mở tập tin HTML lên. Cách tốt nhất để thay đổi màu sắc cho văn bản là sử dụng CSS. Thuộc tính HTML <font> lỗi thời không còn được hỗ trợ trên chuẩn HTML5. Phương pháp khả dụng hơn là dùng CSS để định kiểu của các thành tố.
- Cách này cũng khá hiệu quả với những stylesheet rời (tệp CSS được nhúng vào HTML). Các ví dụ bên dưới là dành cho tập tin HTML chèn thêm stylesheet.
2
Đặt con trỏ chuột bên trong thẻ <head>. Nếu đang dùng stylesheet rời, sẽ phải định nghĩa kiểu mẫu bên trong thẻ này.
3
Gõ <style> để tạo một stylesheet rời. Khi thẻ <style> nằm bên trong thẻ <head>, CSS bên trong thẻ <style> sẽ được áp dụng cho bất kỳ thành tố thích hợp trên trang. Sau khi hoàn tất, phần mở đầu tập tin HTML của bạn sẽ gần giống với ví dụ này:^{[1]
X
Nguồn nghiên cứu}
```
<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
```
4
Nhập thành tố văn bản mà bạn muốn thay đổi màu sắc. Phần <style> sẽ được sử dụng để định nghĩa cách diện mạo của thành tố khác biệt trên trang. Ví dụ, nếu muốn đổi kiểu của toàn bộ phần nội dung trên trang, bạn gõ như sau:
```
<!DOCTYPE html>
<html>
<head>
<style>
body {

}
</style>
</head>
```
5
Nhập thuộc tính color: vào phần chọn thành tố. Thuộc tính color: sẽ cho trang web biết màu sắc văn bản cần áp dụng cho thành tố đó. Trong ví dụ này, chúng ta sẽ thay đổi thành tố mặc định đối với tất cả văn bản trên trang, cũng chính là toàn bộ nội dung chính của trang:
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
	color:
}
</style>
</head>
```
6
Nhập vào một màu sắc cho văn bản. Có ba cách để nhập màu sắc: theo tên, theo giá trị hex và theo giá trị RGB. Ví dụ, để nhập màu xanh dương, bạn có thể gõ blue, rgb(0, 0, 255) hoặc #0000FF.
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
	color: red;
}
</style>
</head>
```
7
Thêm nhiều phần chọn khác để thay đổi màu sắc của nhiều thành tố. Bạn có thể sử dụng những phần chọn khác nhau để thay đổi màu sắc văn bản đối với các phần khác trong trang:
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
	color: red;
}
h1 {
	color: #00FF00;
}
p {
	color: rgb(0,0,255)
}
</style>
</head>
<body>

<h1>Đề mục này sẽ có màu xanh lá.</h1>

<p>Đoạn văn này sẽ có màu xanh dương.</p>

Phần nội dung này sẽ có màu đỏ.
</body>
</html>
```
8
Định nghĩa một lớp CSS thay vì thay đổi một thành tố. Bạn có thể định nghĩa một lớp, sau đó áp dụng định nghĩa đó cho bất kỳ thành tố nào, nằm ở bất cứ đâu trong trang để thêm lớp phong cách hiển thị. Ví dụ, trong tệp sau, lớp ".redtext" sẽ làm cho mỗi thành tố mà nó áp dụng hiển thị dưới mẫu văn bản màu đỏ:
```
<!DOCTYPE html>
<html>
<head>
<style>
.redtext {
	color: red;
}
</style>
</head>
<body>

<h1 class="redtext">Đề mục này sẽ có màu đỏ</h1>
<p>Đoạn văn này sẽ hiển thị bình thường.</p>
<p class="redtext">Đoạn văn này sẽ có màu đỏ</p>

</body>
</html>
```
Quảng cáo

Phương pháp 2

Phương pháp 2 của 2:

Sử dụng thuộc tính kiểu nội tuyến

Tải về bản PDF

1
Mở tập tin HTML lên. Bạn có thể sử dụng thuộc tính kiểu nội tuyến để thay đổi một thành tố duy nhất trong trang. Cách này có thể hữu dụng nếu bạn muốn nhanh chóng đổi kiểu một hoặc hai thành tố, nhưng nó không được khuyến khích để áp dụng trên diện rộng. Đối với những thay đổi một cách toàn diện về kiểu, bạn nên sử dụng phương pháp trước.^{[2]
X
Nguồn nghiên cứu}
2
Tìm thành tố mà bạn muốn thay đổi trong tệp. Bạn có thể sử dụng thuộc tính kiểu nội tuyến để đổi màu chữ với bất kỳ thành tố nào. Chẳng hạn, nếu bạn muốn đổi màu một đề mục cụ thể, xác định vị trí đề mục đó:
```
<!DOCTYPE html>
<html>
<body>

<h1>Đây là đề mục mà bạn muốn đổi màu</h1>

</body>
</html>
```
3
Thêm thuộc tính kiểu cho thành tố. Gõ style="" bên trong thẻ mở cho thành tố mà bạn muốn thay đổi:
```
<!DOCTYPE html>
<html>
<body>

<h1 style="">Đây là đề mục mà bạn muốn đổi màu</h1>

</body>
</html>
```
4
Nhập thuộc tính color: vào trong dấu"". Ví dụ:
```
<!DOCTYPE html>
<html>
<body>

<h1 style="color:">Đây là đề mục mà bạn muốn đổi màu</h1>

</body>
</html>
```
5
Gõ màu sắc mà bạn muốn gán cho văn bản. Có ba cách biểu đạt màu sắc. Bạn có thể gõ tên màu sắc bằng tiếng Anh, nhập giá trị RGB hoặc là giá trị hex. Chẳng hạn, để đổi văn bản thành màu vàng, bạn có thể gõ yellow;, rgb(255,255,0); hoặc #FFFF00;:
```
<!DOCTYPE html>
<html>
<body>

<h1 style="color:#FFFF00;">Đề mục này bây giờ sẽ là màu vàng</h1>

</body>
</html>
```
Quảng cáo