Màu trong HTML

Màu tạo cảm giác về một vẻ bề ngoài đẹp cho trang web của bạn. Bạn xác định màu bằng cách sử dụng thẻ <body> hoặc bạn có thể thiết lập màu cho từng thẻ đơn khác nhau bằng cách sử dụng thuộc tính bgcolor.

Thẻ <body> có các thuộc tính sau mà có thể được sử dụng để thiết lập các màu khác nhau:

bgcolor - Thiết lập một màu cho nền của trang.
text - Thiết lập một màu cho văn bản.
alink - Thiết lập một màu cho các active link.
link - Thiết lập một màu cho link văn bản.
vlink - Thiết lập một màu cho visited link (các kết nối mà bạn đã nhấn chuột vào).

Các phương thức mã hóa màu trong HTML

Ba phương thức khác nhau để thiết lập màu trong trang web của bạn:

Sử dụng tên màu - Bạn có thể xác định trực tiếp tên màu như xanh da trời (blue), xanh lá cây (green), hoặc đỏ (red)….
Sử dụng mã thập lục phân (Hex code) - Một mã 6 chữ số đại diện cho màu.
Giá trị thập phân và phần trăm - Giá trị này được xác định bằng cách sử dụng thuộc tính rbg().

Bây giờ chúng ta xem xét từng phương thức một.

Sử dụng tên màu trong HTML

Bạn có thể xác định trực tiếp tên màu để thiết lập màu cho nền hay cho văn bản. W3C liệt kê tên 16 màu cơ bản mà có hiệu lực trong một bộ kiểm tra dữ liệu HTML nhưng mà có tới hơn 200 tên màu khác nhau được các trình duyệt lớn hỗ trợ.

W3C - 16 màu tiêu chuẩn

Dưới đây là danh sách 16 tên màu tiêu chuẩn W3C.

Black	Gray	Silver	White
Yellow	Lime	Aqua	Fuchsia
Red	Green	Blue	Purple
Maroon	Olive	Navy	Teal

Quảng cáo

Ví dụ

Sau đây là ví dụ về thiết lập màu bằng cách sử dụng tên màu:

<!DOCTYPE html>
<html>
<head>
<title>Thiet lap mau boi su dung ten mau</title>
</head>
<body text="blue" bgcolor="green">
<p>Su dung cac ten mau khác nhau cho body va table.</p>
<table bgcolor="black">
<tr>
<td>
<font color="white">Hien thi mau trang tren nen den.</font>
</td>
</tr>
</table>
</body>
</html>

Sử dụng mã thập lục phân trong HTML

Một mã thập lục phân gồm 6 chữ số đại diện cho một màu. Hai chữ số đầu tiên (RR) biểu diễn màu đỏ, hai chữ số tiếp theo (GG) biểu diễn màu xanh lá cây, và hai chữ số cuối cùng (BB) biểu diễn màu xanh da trời.

Một giá trị thập lục phân có thể được nhận bởi bởi bất kỳ phần mềm đồ họa nào: Adobe Photoshop, Paintshop Pro hoặc MS Paint.

Mỗi mã thập lục phân sẽ được bắt đầu bằng một dấu thăng (#). Dưới đây là danh sách của một số màu.

Màu	Mã thập lục phân
	#000000
	#FF0000
	#00FF00
	#0000FF
	#FFFF00
	#00FFFF
	#FF00FF
	#C0C0C0
	#FFFFFF

Quảng cáo

Ví dụ

Dưới đây là ví dụ thiết lập màu nền bởi sử dụng mã thập lục phân:

<!DOCTYPE html>
<html>
<head>
<title>Thiet lap mau boi su dung Hex code</title>
</head>
<body text="#0000FF" bgcolor="#00FF00">
<p>Su dung cac gia tri Hex code khac nhau cho body va table.</p>
<table bgcolor="#000000">
<tr>
<td>
<font color="#FFFFFF">Hien thi mau trang tren nen den.</font>
</td>
</tr>
</table>
</body>
</html>

Sử dụng thuộc tính RGB trong HTML

Giá trị màu được xác định bằng cách sử dụng giá trị thuộc tính rgb(). Thuộc tính nhận một trong 3 giá trị là đỏ (red), xanh lá cây (green) và xanh da trời (blue). Giá trị này có thể là một số nguyên từ 0 – 255 hoặc một số phần trăm.

Ghi chú: Tất cả các trình duyệt không hỗ trợ giá trị rbg() của màu, vì thế chúng tôi đề nghị bạn không nên dùng nó.

Dưới đây là danh sách để chỉ một số màu sử dụng giá trị RGB.

Màu	Giá trị RGB
	rgb(0,0,0)
	rgb(255,0,0)
	rgb(0,255,0)
	rgb(0,0,255)
	rgb(255,255,0)
	rgb(0,255,255)
	rgb(255,0,255)
	rgb(192,192,192)
	rgb(255,255,255)

Ví dụ

Ví dụ sau thiết lập màu bởi sử dụng giá trị rgb():

<!DOCTYPE html>
<html>
<head>
<title>Thiet lap mau boi su dung thuoc tinh RGB</title>
</head>
<body text="rgb(0,0,255)" bgcolor="rgb(0,255,0)">
<p>Su dung cac gia tri rgb khac nhau co body va table.</p>
<table bgcolor="rgb(0,0,0)">
<tr>
<td>
<font color="rgb(255,255,255)">Hien thi mau trang tren nen den.</font>
</td>
</tr>
</table>
</body>
</html>

Quảng cáo

Danh sách màu an toàn cho trình duyệt trong HTML

Dưới đây là danh sách mã của 216 màu mà được tất cả các trình duyệt hỗ trợ. Các màu này có mã từ 000000 tới FFFFFF và được hỗ trợ bởi các máy tính có bảng màu gồm 256 màu.

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học HTML phổ biến khác tại vietjack.com: