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 ...
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ợ.
Ghi chú: Bạn có thể tham khảo tên các màu này trong chương .
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ụ
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 |
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>
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 |
Loạt bài hướng dẫn học lập trình HTML cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: Tutorialspoint.com
Follow fanpage của team hoặc facebook cá nhân Nguyễn Thanh Tuyền để 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:
