Trang chủ » HTML và CSS » Cách bỏ gạch chân thẻ a trong HTML

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>

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *