Cách bỏ gạch chân thẻ a trong HTML
Gạch chân dưới thẻ a đôi khi sẽ làm người đọc có cảm giác khó chịu, hoặc thẩm mỹ website của bạn kém đi. Hôm nay mình sẽ hướng dẫn bạn bỏ gạch chân thẻ a trong HTML
Cách bỏ gạch chân thẻ a trong HTML
Dưới đây là đoạn mã code HTML thẻ a, mình sẽ sử dụng làm ví dụ cho các bạn
Thêm vào file .css
<a href="https://theanh.tech/html-va-css/cach-bo-gach-chan-the-a-trong-html" target="_blank" title="Cách bỏ gạch chân thẻ a trong HTML">Cách bỏ gạch chân thẻ a trong HTML</a>
Gạch dưới của thẻ a giúp cho người đọc dễ dàng nhận biết được đó là đường dẫn link đễn bài viết hoặc website khác. Nhưng trên thực tế gạch dưới thẻ a nó thường mang mất thẩm mỹ cho bài viết của bạn. Vì vậy, mình sẽ hướng dẫn bạn cách xóa và tùy chỉnh gạch dưới của thẻ a.
a{ text-decoration: none; }
Bạn chỉ thay đổi thuộc tính text-decoration:none của thẻ a bằng css. Có thể thêm trực tiếp css vào thẻ a hoặc thêm vào file .css bạn đã tạo từ trước. Bạn thêm vào file .css thường sử dụng cho toàn trang, nếu bạn muốn sử dụng cho chỉ riêng thẻ a thì bạn thêm trực tiếp vào thẻ a, xem dưới đây:
Thêm trực tiếp vào thẻ a
<a href="https://theanh.tech/html-va-css/cach-bo-gach-chan-the-a-trong-html" style="text-decoration: none;" target="_blank" title="Cách bỏ gạch chân thẻ a trong HTML">Cách bỏ gạch chân thẻ a trong HTML</a>
Tùy chỉnh style của thẻ a trong HTML
khi bạn bỏ gạch chân thẻ a thì mặc định thẻ a sẽ có màu xanh blue mặc định. Đôi khi màu xanh của link thẻ a thì sẽ không hợp với website, bài viết của bạn mà bạn muốn tùy chỉnh nó. Xem tiếp bài viết dưới đây:
Đổi màu để nhận biết link
a{ color: green; text-decoration: none; }
Đổi màu thẻ lịnk a thành màu xanh lá cây là xóa gạch chân thẻ a
Nếu bạn muốn di chuột (hover) vào thẻ a mới đổi màu hoặc hiển thị gạch chân thẻ a thì sử dụng thuộc tính hover của thẻ a
Hover hiện gạch chân thẻ a
a:hover{ color: teal; text-decoration: underline; }
Tùy chỉnh vị trí gạch chân thẻ a
a{ /* Gạch ngang thẻ a */ text-decoration: line-through; } a{ /* Gạch trên thẻ a */ text-decoration: overline; } a{ /* Gạch dưới thẻ a */ text-decoration: underline; }
Toàn bộ ví dụ
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>THEANHTECH</title> <style> .link{ color: green; text-decoration: none; } a:visited{ color: red; } a:hover{ color: teal; } </style> </head> <body> <p><a href="https://theanh.tech/html-va-css/cach-bo-gach-chan-the-a-trong-html" target="_blank" title="Cách bỏ gạch chân thẻ a trong HTML">Cách bỏ gạch chân thẻ a trong HTML</a></p> <p><a href="https://theanh.tech/html-va-css/cach-bo-gach-chan-the-a-trong-html" style="text-decoration: none;" target="_blank" title="Cách bỏ gạch chân thẻ a trong HTML">Cách bỏ gạch chân thẻ a trong HTML</a></p> <p><a href="https://theanh.tech/html-va-css/cach-bo-gach-chan-the-a-trong-html" class="link" target="_blank" title="Cách bỏ gạch chân thẻ a trong HTML">Cách bỏ gạch chân thẻ a trong HTML</a></p> </body> </html>