MÀU TRONG HTML
Màu HTML được chỉ định bằng tên màu xác định trước hoặc với các giá trị RGB, HEX, HSL, RGBA hoặc HSLA.
❶ Màu trong HTML hiển thị theo tên
Trong HTML, một màu có thể được chỉ định bằng cách sử dụng tên màu:
👀 Đoạn code HTML thể hiện màu
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
👀 Kết quả code HTML thể hiện màu
❷ Màu nền trong HTML
Bạn có thể đặt màu nền cho các phần tử HTML theo cú pháp sau:
<h1 style="background-color:DodgerBlue;">Xin chào</h1>
<p style="background-color:Tomato;">CHÀO BẠN</p>
👀 Đoạn code thể hiện màu nền trong HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">XIN CHÀO</h1>
<p style="background-color:Tomato;">
Rất vui khi bạn ghé thăm website của chúng tôi!<br>
Workonline với mong muốn chia sẻ kinh nghiệm và hướng dẫn các bài luyện tập và thủ thuật về CNTT, với mong muốn góp phần giúp công việc của bạn hiệu quả hơn
</p>
</body>
</html>
👀 Kết quả code thể hiện màu nền trong HTML
XIN CHÀO
Rất vui khi bạn ghé thăm website của chúng tôi!
Workonline với mong muốn chia sẻ kinh nghiệm và hướng dẫn các bài luyện tập và thủ thuật về CNTT, với mong muốn góp phần giúp công việc của bạn hiệu quả hơn
❸ Màu viền trong HTML
Bạn có thể đặt màu của đường viền cho khối văn bản
👀 Đoạn code HTML thể màu viền
<!DOCTYPE html>
<html>
<body>
<h1 style="border: 2px solid Tomato;">Workonlinevn</h1>
<h1 style="border: 2px solid DodgerBlue;">Workonlinevn</h1>
<h1 style="border: 2px solid Violet;">Workonlinevn</h1>
</body>
</html>
👀 Kết quả code HTML thể hiện màu viền
Workonlinevn
Workonlinevn
Workonlinevn
➍ Các giá trị màu trong HTML
Trong HTML, màu sắc cũng có thể được chỉ định bằng giá trị RGB, giá trị HEX, giá trị HSL, giá trị RGBA và giá trị HSLA.
Ba phần tử <div> sau có màu nền được đặt với các giá trị RGB, HEX và HSL được thể hiện theo cú pháp như sau
rgb (255, 99, 71)
# ff6347
hsl (9, 100%, 64%)
Hai phần tử <div> sau có bộ màu nền của chúng bằng các giá trị RGBA và HSLA, các giá trị này thêm kênh Alpha vào màu
👀 Đoạn code HTML thể hiện giá trị màu
<!DOCTYPE html>
<html>
<body>
<p>Same as color name "Tomato":</p>
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>
<p>Giống với tên màu "Tomato", nhưng có độ trong suốt 50%:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>
<p>Ngoài các tên màu được xác định trước, các màu có thể được chỉ định bằng cách sử dụng RGB, HEX, HSL hoặc thậm chí là các màu trong suốt bằng cách sử dụng các giá trị màu RGBA hoặc HSLA.</p>
</body>
</html>
👀 Kết quả HTML thể hiện giá trị màu
rgb (255, 99, 71)
# ff6347
hsl (9, 100%, 64%)
rgba (255, 99, 71, 0,5)
hsla (9, 100%, 64%, 0,5)
Một số giá trị màu căn bản
Màu đen: rgb(0,0,0)
Màu đỏ: rgb(255,0,0)
Màu xanh lá cây: rgb(0,255,0)
Màu xanh dương: rgb(0,0,255)
Màu vàng: rgb(255,255,0)
Màu Trắng: rgb(255,255,255)
Cảm ơn các bạn đã xem bài viết.
~Viết bởi: Work Online~
