Màu Liên Kết HTML

Hướng Dẫn HTML

Màu liên kết html

Tô màu cho các liên kết HTML là một cách tuyệt vời để phân biệt chúng với văn bản thông thường và thêm phần hấp dẫn cho trang web của bạn. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách định dạng các liên kết HTML của bạn bằng mã màu Hex, giá trị RGB và HSL, và tên màu HTML.

Màu liên kết sử dụng mã màu hex

Chúng ta sẽ bắt đầu với mã màu Hex, phương pháp phổ biến nhất để thêm màu sắc cho các liên kết. Trong thẻ anchor HTML (<a>), sau thuộc tính href, hãy chèn thuộc tính style với thuộc tính color được thiết lập thành mã màu Hex của bạn (ví dụ: #FF0000).

html

<body>
  <a href="http://example.com/" style="color:#FF0000;">Liên Kết Đỏ</a>
</body>

Khá đơn giản đúng không? Nếu bạn cần một mã màu Hex hoặc muốn khám phá một số sự kết hợp màu sắc, hãy kiểm tra bảng chọn màu và bảng màu của chúng tôi.

Màu liên kết sử dụng tên màu html

Tên màu HTML thường dễ đọc hơn so với mã Hex và có thể được sử dụng theo cách tương tự. Chỉ cần thay thế mã màu Hex từ ví dụ trước bằng tên màu HTML tương ứng (như đỏ), và voilà—mã của bạn trở nên rõ ràng hơn.

html

<body>
  <a href="http://example.com/" style="color:red;">Liên Kết Đỏ</a>
</body>

Có 140 tên màu HTML có sẵn, điều này đủ để bạn bắt đầu. Bạn có thể tìm thấy danh sách đầy đủ các màu <cp>tại đây</cp>.

Màu liên kết sử dụng giá trị màu rgb

Một cách khác để định dạng các liên kết của bạn là sử dụng giá trị RGB. Bọc các giá trị trong rgb() cho phép bạn sử dụng chúng trên trang web của mình giống như mã Hex hoặc tên màu.

html

<body>
  <a href="http://example.com/" style="color:rgb(255,0,0);">Liên Kết Đỏ</a>
</body>

Sử dụng giá trị RGB cũng cho phép bạn kiểm soát độ mờ của màu sắc. Thay thế rgb() bằng rgba() và chỉ định một giá trị thứ tư từ 0 đến 1 (0 cho hoàn toàn trong suốt, 1 cho hoàn toàn không trong suốt).

html

<body>
  <a href="http://example.com/" style="color:rgba(255,0,0,0.5);">Liên Kết Đỏ</a>
</body>

Màu liên kết sử dụng giá trị màu hsl

HSL, viết tắt của hue (sắc thái), saturation (bão hòa) và lightness (độ sáng), là một tập hợp các giá trị màu khác được hỗ trợ bởi hầu hết các trình duyệt hiện đại (IE9+). Tương tự như RGB, bạn có thể bọc các giá trị HSL bên trong hsl() và sử dụng chúng trên trang web của mình.

html

<body>
  <a href="http://example.com/" style="color:hsl(0,100%,50%);">Liên Kết Đỏ</a>
</body>

HSL cũng hỗ trợ một kênh alpha, cho phép điều chỉnh độ mờ. Sử dụng hsla() thay vì hsl() và thêm một giá trị thứ tư cho độ mờ giữa 0 và 1.

html

<body>
  <a href="http://example.com/" style="color:hsla(0,100%,50%,0.5);">Liên Kết Đỏ</a>
</body>

Chia sẻ với bạn bè của bạn!

Tweet
Post
LinkedIn
Reddit

Tweet Post LinkedIn Reddit

Khám phá cách thay đổi màu của các liên kết HTML bằng mã màu Hex, tên màu HTML, giá trị RGB và giá trị HSL.