By GokiSoft.Com| 11:08 22/05/2020|
Tài Liệu HTML

HTML Links - Different Colors | Các liên kết trong HTML - Màu sắc khác nhau

Các liên kết HTML sẽ được hiển thị với các màu khác nhau phụ thuộc vào việc liệu chúng đã được ghé thăm, chưa được ghé thăm, hoặc hoạt động.


Các màu của liên kết trong HTML


Mặc định, một liên kết sẽ hiển thị như thế này (trong tất cả các trình duyệt):

  • Một liên kết chưa được ghé thăm được gạch chân và màu xanh lam
  • Một liên kết đã được ghé thăm dược gạch chân và màu tím
  • Một liên kết hoạt động được gạch chân và màu đỏ

Bạn có thể thay thế các màu mặc định, bằng việc sử dụng CSS:

ví dụ

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>
</head>
<body>

<h2>Link Colors</h2>

<p>You can change the default colors of links</p>

<a href="html_images.asp" target="_blank">HTML Images</a> 

</body>
</html>



Các nút là liên kết


Một liên kết cũng có thể được tạo kiểu thành một nút, bằng cách sử dụng CSS:

ví dụ

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>
</head>
<body>

<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="default.asp" target="_blank">This is a link</a>

</body>
</html>


Để học thêm về CSS, hãy đọc hướng dẫn về CSS.



Tags: