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>
Heyyy chào mọi người!!! Mình Thế Anh đây – Website này là mình muốn chia sẻ một chút kiến thức, kinh nghiệm về lập trình mà mình có. Mong rằng nó sẽ có có ích cho bạn
