HTML Màu Sắc

Màu sắc trong HTML được biểu diễn theo hai cách khác nhau:

  • Sử dụng màu theo tên: red, black, blue, orange...
  • Sử dụng màu theo giá trị kiểu RGB (red-green-blue), HEX hoặc HSL

Màu Theo Tên

Với cách này chúng ta sẽ sử dụng tên tiếng anh của màu muốn sử dụng:

Yellow
Orange
Blue
Green
Gray
Brown
Red
LightGray
Violet
Purple
Pink
Tomato

Màu Nền

Sử dụng thuộc tính style với đặc tính background-color để thiết lập màu nều cho phần tử:

Xin Chào HTML
HTML là viết tắt của cụm từ Hyper Text Markup Language, dịch sang tiếng Việt là ngôn ngữ đánh dấu siêu văn bản.
<h1 style="background-color:lightgray;">Xin Chào HTML</h1>
<p style="background-color: tomato; color:white;">HTML là viết tắt của cụm từ Hyper Text Markup Language.</p>

Màu Chữ

Sử dụng thuộc tính style với đặc tính color để thiết lập màu chữ:

Xin Chào HTML
HTML là viết tắt của cụm từ Hyper Text Markup Language.
Dịch sang tiếng Việt là ngôn ngữ đánh dấu siêu văn bản.
<h1 style="color: red;">Xin Chào HTML</h1>
<p style="color: blue;">HTML là viết tắt của cụm từ Hyper Text Markup Language.</p>
<p style="color: green;">Dịch sang tiếng Việt là ngôn ngữ đánh dấu siêu văn bản.</p>

Màu Nền

Sử dụng thuộc tính style với đặc tính border để thiết lập màu chữ:

Xin Chào HTML
Xin Chào HTML
Xin Chào HTML
<h1 style="color: red;">Xin Chào HTML</h1>
<p style="color: blue;">HTML là viết tắt của cụm từ Hyper Text Markup Language.</p>
<p style="color: green;">Dịch sang tiếng Việt là ngôn ngữ đánh dấu siêu văn bản.</p>

Màu Theo Giá Trị

Trong HTML, chúng ta có thể sử dụng giá trị màu theo kiểu RGB, HEX hặc HSLA:

Với cùng tên màu red (màu đỏ) sẽ tương đương với các màu sau:

  • Theo kiểu RGB: rgb(255, 0, 0)
  • Theo kiểu HEX: #ff0000
  • Theo kiểu HSL: hsl(100%, 0, 0)
rgb(255, 0, 0)
#ff0000
hsl(0, 100%, 50%)
<h1 style="background-color: rgb(255, 0, 0); color: white;">rgb(255, 0, 0)</h1>
<h1 style="background-color: #ff0000; color: white;">#ff0000</h1>
<h1 style="background-color: hsl(0, 100%, 50%); color: white;">hsl(100%, 0, 0)</h1>

1 Bình Luận

Viết Nguyễn Viết Nguyễn

<b><color=#FF3>⋆ᴘᴏsᴇɪᴅᴏɴ⋆</a></b>

Content must not be empty

Related Tutorial