NỘI DUNG BÀI VIẾT
Giới thiệu
Màu sắc trong HTML được xác định bằng cách xác định trước tên màu hoặc các giá trị RGB, HEX, HSL, RGBA, HSLA.
Tên màu
Trong HTML, một màu có thể được xác định bằng cách dùng tên màu.
Ví dụ
HTML hỗ trợ 140 tên màu tiêu chuẩn.
Màu nền
Bạn có thể đặt màu nền cho các phần tử HTML với background-color
.
Ví dụ
<h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;">Lorem ipsum...</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Màu chữ trong văn bản
Bạn có thể đặt màu chữ trong văn bản với color
.
Ví dụ
<h1 style="color:Tomato;">Hello World</h1> <p style="color:DodgerBlue;">Lorem ipsum...</p> <p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Màu viền
Bạn có thể đặt màu viền cho phần tử với border
.
Ví dụ
<h1 style="border:2px solid Tomato;">Hello World</h1> <h1 style="border:2px solid DodgerBlue;">Hello World</h1> <h1 style="border:2px solid Violet;">Hello World</h1>
Hello World
Hello World
Hello World
Giá trị màu
Trong HTML, các màu có thể được chỉ ra bằng các giá trị RGB, HEX, HSL, RGBA và HSLA.
Ví dụ
<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>
Ba phần tử <div>
sau có màu nền tương ứng với các giá trị RGB, HEX và HSL:
Hai phần tử <div>
sau có màu nền tương ứng với các giá trị RGBA và HSLA, bổ sung thêm giá trị Alpha vào màu (độ trong suốt bằng 50%):
Kết luận
Qua đây là một số chia sẻ về màu sắc trong HTML, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.
Các bạn có thể tham khảo các bài viết hay về HTML tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.