Tìm hiểu cách thay đổi màu của văn bản HTML bằng mã màu Hex, tên màu HTML, giá trị RGB và HSL.
Màu nền HTML
Các trang web ngày nay táo bạo và sáng hơn bao giờ hết, và với hướng dẫn nhanh này, bạn cũng có thể học cách làm sáng trang web của mình với một chút phép màu màu nền HTML, sử dụng mã màu Hex, tên màu HTML, giá trị RGB và HSL.
Màu nền sử dụng mã màu Hex
Tô màu nền cho một trang web thực sự khá đơn giản. Cách đầu tiên và phổ biến nhất là sử dụng mã màu Hex với thuộc tính background-color. Ở đây, chúng tôi áp dụng một màu Hex trực tiếp trên phần tử <body> của HTML bằng cách sử dụng thuộc tính style.
html
<body style="background-color:#FF0000;">
</body>Phương pháp này cũng có thể được sử dụng để định dạng hầu hết mọi phần tử HTML, nhưng hãy nhớ rằng hành vi của chúng có thể khác nhau tùy thuộc vào việc chúng là phần tử inline hay block level.
Màu nền sử dụng tên màu HTML
Mã màu HEX có thể là phổ biến nhất, nhưng chúng chỉ là một trong nhiều phương pháp có sẵn để tô màu cho một phần tử HTML. Một cách thứ hai là sử dụng tên màu HTML; chỉ cần thay thế mã HEX bằng một trong 140 tên màu được hỗ trợ và bạn đã sẵn sàng.
html
<body style="background-color:red;">
</body>Màu nền sử dụng giá trị RGB
Các giá trị RGB cũng có thể được sử dụng để thêm màu nền cho các phần tử HTML. Sử dụng thuộc tính style giống như trước, thay thế mã HEX hoặc tên màu bằng một giá trị RGB được định dạng đúng (hãy chắc chắn rằng nó được bọc trong dấu ngoặc đơn và bắt đầu bằng chữ thường 'rgb').
html
<body style="background-color:rgb(255,0,0);">
</body>Khi sử dụng các giá trị RGB trong HTML, bạn có thêm tùy chọn xác định mức độ trong suốt. Với tiền tố rgba() - 'a' đại diện cho alpha, kênh điều khiển độ trong suốt - bạn có thể chèn một giá trị thứ tư giữa 0 và 1, 0 cho hoàn toàn trong suốt và 1 cho hoàn toàn không trong suốt (sử dụng các giá trị thập phân cho các mức ở giữa).
html
<body style="background-color:rgba(255,0,0,0.5);">
</body>Màu nền sử dụng giá trị HSL
Ít phổ biến hơn nhưng cũng mạnh mẽ không kém, các giá trị HSL hiện nay được hỗ trợ bởi nhiều trình duyệt hiện đại. Nếu bạn chưa quen với HSL (viết tắt của Hue, Saturation và Lightness), hãy truy cập Wikipedia để tìm hiểu lý do tại sao chúng lại tuyệt vời như vậy. Nếu bạn chỉ muốn sử dụng chúng cho màu nền HTML, hãy làm theo cùng cú pháp như các giá trị RGB ở trên, nhưng thay vào đó sử dụng tiền tố hsl().
html
<body style="background-color:hsl(0,100%,50%);">
</body>Giống như các đồng minh RGB của chúng, HSL cũng có thể được truyền vào một kênh alpha để kiểm soát độ trong suốt. Sử dụng tiền tố hsla() và chèn một giá trị thứ tư giữa 0 và 1.
html
<body style="background-color:hsla(0,100%,50%,0.5);">
</body>Chia sẻ với bạn bè của bạn!
- Tweet
- Post
- LinkedIn
- Reddit