Trong HTML mặc định khi bạn tạo 1 link dạng:
Khi hiện thị sẽ có 1 đường gạch ngang dưới link để phân biệt với các phần chữ khác nếu có trong đoạn rằng đây là link để người dùng có thể dễ dàng phân biệt và click vào đó. Tuy nhiên trong thực tế việc để dấu gạch này ít được người sử dụng và trông kém thẩm mỹ mà các webmaster thường bỏ đường này đi và CSS màu của link khác so với các màu khác. Vậy làm sao để bỏ đường link này?
Khá đơn giản các bạn có thể làm như sau, thêm vào CSS đoạn sau:
Khi đó chúng ta sẽ có kết quả như sau
Hoặc bạn có thể thêm CSS trực tiếp vào code HTML để việc bỏ đường gạch chân này chỉ ảnh hưởng tới link bạn chỉnh
Trong trường hợp có nhiều link các bạn muốn chỉnh vậy thì có thể đặt class chung cho các thẻ a này và thêm vào trong CSS.
Trong trường hợp bạn muốn tô màu riêng cho link khác với màu mặc định của trình duyệt thì thêm CSS như sau:
Trong trường hợp bạn muốn những link bạn vào rồi màu khác so với màu mặc định của trình duyệt thì thêm CSS:
Trường hợp bạn muốn khi rê chuột vào link thì nó sẽ đổi màu thì thêm css sau:
Các kết quả
Code HTML ví dụ:
Mã:
<a href="https://vfo.vn" target="_blank" title="Diễn đàn tin học">Diễn đàn tin học công nghệ VFO.VN</a>Khi hiện thị sẽ có 1 đường gạch ngang dưới link để phân biệt với các phần chữ khác nếu có trong đoạn rằng đây là link để người dùng có thể dễ dàng phân biệt và click vào đó. Tuy nhiên trong thực tế việc để dấu gạch này ít được người sử dụng và trông kém thẩm mỹ mà các webmaster thường bỏ đường này đi và CSS màu của link khác so với các màu khác. Vậy làm sao để bỏ đường link này?
Khá đơn giản các bạn có thể làm như sau, thêm vào CSS đoạn sau:
Mã:
a{
text-decoration: none;
}Khi đó chúng ta sẽ có kết quả như sau
Hoặc bạn có thể thêm CSS trực tiếp vào code HTML để việc bỏ đường gạch chân này chỉ ảnh hưởng tới link bạn chỉnh
Mã:
<a href="https://vfo.vn" style="text-decoration: none;">Diễn đàn tin học công nghệ VFO.VN</a>Trong trường hợp có nhiều link các bạn muốn chỉnh vậy thì có thể đặt class chung cho các thẻ a này và thêm vào trong CSS.
Trong trường hợp bạn muốn tô màu riêng cho link khác với màu mặc định của trình duyệt thì thêm CSS như sau:
Mã:
a{
color: blue;
text-decoration: none;
}Trong trường hợp bạn muốn những link bạn vào rồi màu khác so với màu mặc định của trình duyệt thì thêm CSS:
Mã:
a:visited{
color: red;
}Trường hợp bạn muốn khi rê chuột vào link thì nó sẽ đổi màu thì thêm css sau:
Mã:
a:hover{
color: teal;
}Các kết quả
Code HTML ví dụ:
Mã:
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>VFO.VN - Bảng trong HTML</title>
<style>
.link{
color: blue;
text-decoration: none;
}
a:visited{
color: red;
}
a:hover{
color: teal;
}
</style>
</head>
<body>
<p><a href="https://vfo.vn">Diễn đàn tin học công nghệ VFO.VN</a></p>
<p><a href="https://vfo.vn" style="text-decoration: none;">Diễn đàn tin học công nghệ VFO.VN</a></p>
<p><a class="link" href="https://vfo.vn/index2.php">Diễn đàn tin học công nghệ VFO.VN</a></p>
</body>
</html>- Chủ đề
- gạch chân gach ngang link html
