Cách thay đổi màu chữ trong HTML chi tiết nhất 2023

Đây là bài viết hướng dẫn cách thay đổi màu chữ trong văn bản HTML. Mặc dù thẻ kiểu chữ HTML đã lỗi thời trong HTML5, nhưng bạn có thể dùng CSS để tạo màu cho nội dung trên trang HTML. Nếu sử dụng phiên bản HTML cũ hơn, bạn có thể dùng thẻ màu chữ HTML khi cần.

Đổi màu chữ HTML bằng cách Sử dụng CSS

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.
Tiêu đề ảnh 157292 2
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.
Tiêu đề ảnh 157292 3
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: 

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
Tiêu đề ảnh 157292 4
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>
Tiêu đề ảnh 157292 5
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>
Tiêu đề ảnh 157292 6
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õ bluergb(0, 0, 255) hoặc #0000FF.

<!DOCTYPE html>
<html>
<head>
<style>
body {
	color: red;
}
</style>
</head>
Tiêu đề ảnh 157292 7
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>
Tiêu đề ảnh 157292 8
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>

Cách đổi màu chữ trong html bằng cách sử dụng thuộc tính kiểu nội tuyến

 

Tiêu đề ảnh 157292 9
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]
Tiêu đề ảnh 157292 10

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>
Tiêu đề ảnh 157292 11

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>
Tiêu đề ảnh 157292 12

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>
Tiêu đề ảnh 157292 13
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>

Lời khuyên

  • Cố gắng thiết kế sao cho trang dễ đọc. Các màu sáng thường khó đọc trên nền trắng, và màu tối sẽ khó đọc trên nền màu đen.
  • Mã màu HTML có ý nghĩa như sau: hai ký tự đầu tiên được dùng để chỉ sắc độ đỏ, hai ký tự tiếp theo chỉ sắc độ xanh lá, và hai ký tự cuối cùng chỉ sắc độ xanh dương. Bạn có thể sử dụng số bất kỳ từ “00” đến “99” để chỉ định lượng màu của từng sắc độ; sử dụng “FF” thay vì số là cách chỉ định lượng màu tối đa (ví dụ, “0000FF” sẽ cho màu có sắc độ xanh dương cao nhất).
  • Màn hình máy tính cũ chỉ hiển thị tối đa 65.000 màu, và các màn hình cũ hơn chỉ có 256 màu. Tuy nhiên, hơn 99% người dùng internet có thể thấy các màu mà bạn chọn.[2]

Cảnh báo

  • Yếu tố kiểu chữ không được hỗ trợ trong XHTML 1.0 Strict DTD.

Từ khóa tìm kiếm: đổi màu chữ trong html

đổi màu chữ html
đổi màu chữ trong html
chỉnh màu chữ trong html
code đổi màu chữ
cách đổi màu chữ trong html
màu chữ html
màu chữ trong html
web đổi màu chữ
code màu chữ html
thẻ đổi màu chữ trong html
chỉnh màu chữ html
cách chỉnh màu chữ trong html
thẻ màu chữ trong html
html màu chữ
màu nền chữ trong html
code html màu chữ
thẻ color trong html
thẻ màu trong html
site:ciscolinksys.com.vn
đổi màu chữ css
css màu chữ
đổi font chữ html
font chữ trong html
màu html
chỉnh màu chữ trong css
chữ có màu
thẻ màu html
css đổi màu chữ
chỉnh màu chữ css
cách viết chữ màu trong mini world
màu chữ trong css
cách ghi chữ màu trong mini world
màu chữ css
màu nền trong html
code font chữ html
code màu chữ
màu trong html
chỉnh màu chữ
thay đổi màu chữ
thẻ link trong html
mau trong css
màu css
cách đổi màu chữ html
dđổi phông chữ
thay đổi màu chữ trong html
dđổi jpg sang pdf
cách đổi màu nền trang web html
chỉnh font chữ trong html
ghi chu trong html
style trong html

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Mã giảm giá
SHOPEE 100K