X
Bài viết này có đồng tác giả là đội ngũ biên tập viên và các nhà nghiên cứu đã qua đào tạo, những người xác nhận tính chính xác và toàn diện của bài viết.
Nhóm Quản lý Nội dung của wikiHow luôn cẩn trọng giám sát công việc của các biên tập viên để đảm bảo rằng mọi bài viết đều đạt tiêu chuẩn chất lượng cao.
Bài viết này đã được xem 46.541 lần.
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.
Các bước
Phương pháp 1
Phương pháp 1 của 2:
Sử dụng CSS
-
1Mở 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.
-
3Gõ <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]
<!DOCTYPE html> <html> <head> <style> </style> </head>
-
4Nhậ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>
-
5Nhậ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>
-
6Nhậ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>
-
7Thê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
-
1Mở 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]
-
2Tì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>
-
3Thê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>
-
4Nhậ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>
-
5Gõ 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
Lời khuyên
- Bạn có thể xem danh sách tên màu được hỗ trợ và giá trị hex tại http://www.w3schools.com/colors/colors_names.asp
Tham khảo
Về bài wikiHow này
Ngôn ngữ khác
English:Change Text Color in HTML
Français:changer la couleur du texte en HTML
Italiano:Cambiare Colore del Testo in HTML
Português:Mudar a Cor do Texto em HTML
Русский:изменить цвет текста в HTML
Bahasa Indonesia:Mengganti Warna Teks di HTML
Nederlands:De kleur van tekst in HTML veranderen
한국어:HTML에서 배경색깔 바꾸기
中文:更改HTML中的文本颜色
Trang này đã được đọc 46.541 lần.
Bài viết này đã giúp ích cho bạn?
Quảng cáo