Cafedev chia sẻ về Màu trong HTML, được chỉ định bằng tên màu đã được định nghĩa trước hoặc với các giá trị RGB, HEX, HSL, RGBA hoặc HSLA.

Phần này chúng ta sẽ chỉ hiểu về color trong html mà thôi, sau đó cafedev sẽ giới thiệu cho ace chi tiết về các giá trị màu sau: RGB, HEX, HSL.

1. Tên Màu – Color Name

Trong HTML, một màu có thể được chỉ định bằng cách sử dụng tên màu:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

Lưu ý: trên đây chỉ là 1 trong nhiều tên màu có sẵn trong html mà thôi.

Bạn có thể tham khảo đầy đủ ở đây bao gồm 140 tên màu

2. Màu nền(Background Color)

Bạn có thể đặt màu nền cho các phần tử trong HTML:

Cafedev.vn

Cafedev là kênh thông tin, sự kiện, hướng dẫn và chia sẽ mọi thứ kiến thức về lập trình mới nhất được cập nhật liên tục, chính xác và đầy đủ, chuyên sâu.

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

 <h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">cafedev.vn...</p> 

Copy and chạy code

3. Màu chữ(Text Color)

Bạn có thể đặt màu của văn bản:

Cafedev.vn

Cafedev là kênh thông tin, sự kiện, hướng dẫn và chia sẽ mọi thứ kiến thức về lập trình mới nhất được cập nhật liên tục, chính xác và đầy đủ, chuyên sâu.

Ví dụ:

 <h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Cafedev.vn...</p>
<p style="color:MediumSeaGreen;">HCM...</p> 

Copy and chạy code

4. Mầu viền(Border Color)

Bạn có thể đặt màu của đường viền:

Cafedev

Cafedev

Hello Cafedev

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

<h1 style="border:2px    solid Tomato;">Cafedev</h1>
<h1 style="border:2px    solid DodgerBlue;">Cafedev</h1>
<h1 style="border:2px    solid Violet;">Hello Cafedev</h1> 

Copy and chạy code

5. Giá trị màu

Trong HTML, màu sắc cũng có thể được chỉ định bằng các giá trị RGB, giá trị HEX, giá trị HSL, giá trị RGBA và giá trị HSLA.

Ba phần tử sau đây có màu nền được đặt với các giá trị RGB, HEX và HSL:

Hai phần tử <div> sau đây có màu nền được đặt với các giá trị RGBA và HSLA, thêm kênh Alpha vào màu (ở đây chúng tôi có độ trong suốt 50%):

Ví dụ:

<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->

<p style="background-color:rgb(255, 99, 71);">...</p>
<p style="background-color:#ff6347;">...</h1>
<p style="background-color:hsl(9, 100%, 64%);">...</p>

<p style="background-color:rgba(255, 99, 71, 0.5);">...</p>
<p style="background-color:hsla(9, 100%, 64%, 0.5);">...</p> 

Bạn có thể tìm hiểu thêm về RGB, HEX and HSL

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

• Group Facebook
• Fanpage
• Youtube
• Instagram
• Twitter
• Linkedin
• Pinterest
• Trang chủ

Chào thân ái và quyết thắng!