Màu CSS

Chỉ định màu thông qua việc sử dụng tên màu được định nghĩa sẵn, hoặc các giá trị RGB, HEX, HSL, RGBA, HSLA.

Tên màu CSS

Trong CSS, bạn có thể sử dụng tên màu để chỉ định màu:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
Xám nhạt

Thử ngay

CSS/HTML hỗ trợ 140 màu tiêu chuẩn。

Màu nền CSS

Bạn có thể thiết lập màu nền cho phần tử HTML:

Chào mừng bạn đến Trung Quốc
Trung Quốc là một đất nước vĩ đại!

Giả định

<h1 style="background-color:Đen;">Trung Quốc</h1>
<p style="background-color:Đen;">Trung Quốc là một đất nước vĩ đại!</p>

Thử ngay

Màu văn bản CSS

Bạn có thể thiết lập màu của văn bản:

Trung Quốc

Trung Quốc là một đất nước vĩ đại!

Trung Quốc, chính thức là Cộng hòa Nhân dân Trung Quốc, là một đất nước ở Đông Á.

Giả định

<h1 style="color:Đen;">Trung Quốc</h1>
<p style="color:Đen;">Trung Quốc là một đất nước vĩ đại!</p>
<p style="color:Đen;">Trung Quốc, chính thức là Cộng hòa Nhân dân Trung Quốc...</p>

Thử ngay

Màu biên CSS

Bạn có thể thiết lập màu của viền:

Hello World
Hello World
Hello World

Giả định

<h1 style="border:2px solid Đen;">Hello World</h1>
<h1 style="border:2px solid Đen;">Hello World</h1>
<h1 style="border:2px solid Đen;">Hello World</h1>

Thử ngay

Giá trị màu CSS

Trong CSS, bạn cũng có thể sử dụng giá trị RGB, giá trị HEX, giá trị HSL, giá trị RGBA hoặc giá trị HSLA để chỉ định màu:

Tương đương với tên màu "Tomato":

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

Tương đương với tên màu "Tomato" nhưng độ trong suốt là 50%:

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
<h3>Giả định</h3> 
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Thử ngay

Tìm hiểu thêm về giá trị màu

Trong chương tiếp theo, bạn sẽ học về RGB、HEX Và HSL Của bạn thêm kiến thức.