Màu trong HTML có thể được thiết lập 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).
Nội dung chính
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().
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 |
Ví dụ sử dụng tên màu trong HTML
Sau đây là ví dụ về thiết lập màu HTML bằng cách sử dụng tên màu:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Thiết lập màu HTML - Sử dụng tên màu:</title> </head> <body text="blue" bgcolor="green"> <p>Thiết lập màu nền cho body và table.</p> <table bgcolor="black"> <tr> <td> <font color="white">Hiển thị màu trắng trên nền đen. </font> </td> </tr> </table> </body> </html>
Sử dụng mã thập lục phân (Hex) 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 |
Ví dụ sử dụng mã thập lục phân (Hex) trong HTML
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> <meta charset="UTF-8"> <title>Thiết lập màu HTML - Sử dụng mã Hex:</title> </head> <body text="#0000FF" bgcolor="#00FF00"> <p>Sử dụng Hex code thiết lập màu cho body và table.</p> <table bgcolor="#000000"> <tr> <td> <font color="#FFFFFF">Hiển thị màu trắng trên nền đen. </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ụ sử dụng RGB trong HTML
Ví dụ sau thiết lập màu bởi sử dụng giá trị rgb():
<!DOCTYPE html> <html> <head> <title>Thiết lập màu HTML - Sử dụng RGB:</title> </head> <body text="rgb(0,0,255)" bgcolor="rgb(0,255,0)"> <p>Sử dụng RGB thiết lập màu nền cho body và table.</p> <table bgcolor="rgb(0,0,0)"> <tr> <td> <font color="rgb(255,255,255)"> Hiển thị màu trắng trên nền đen. </font> </td> </tr> </table> </body> </html>
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 |
