Jassif Team Institution

HTML இணைப்பு நிறங்கள்

ஒரு HTML இணைப்பு அது பார்வையிடப்பட்டதா, பார்வையிடப்படாததா அல்லது செயலில் உள்ளதா என்பதைப் பொறுத்து வெவ்வேறு நிறத்தில் காட்டப்படும்.

இயல்பாக, ஒரு இணைப்பு பின்வருமாறு தோன்றும் (அனைத்து உலாவிகளிலும்):

இணைப்பு நிறங்களை மாற்றுதல்

CSS pseudo-classes ஐப் பயன்படுத்தி இணைப்பு நிறங்களைத் தனிப்பயனாக்கலாம்:

• a:link - பார்வையிடப்படாத இணைப்புகளுக்கு
• a:visited - பார்வையிட்ட இணைப்புகளுக்கு
• a:hover - சுட்டி மேல் நகரும் போது
• a:active - கிளிக் செய்யும் போது

எடுத்துக்காட்டு

இங்கே, ஒரு பார்வையிடாத இணைப்பு அடிக்கோடு இல்லாமல் பச்சையாக இருக்கும். ஒரு பார்வையிட்ட இணைப்பு அடிக்கோடு இல்லாமல் இளஞ்சிவப்பாக இருக்கும். ஒரு செயலில் உள்ள இணைப்பு மஞ்சளாகவும் அடிக்கோடிடப்பட்டதாகவும் இருக்கும். கூடுதலாக, சுட்டியை ஒரு இணைப்பின் மேல் நகர்த்தும் போது (a:hover) அது சிவப்பாகவும் அடிக்கோடிடப்பட்டதாகவும் மாறும்:

<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>

இணைப்பு பட்டன்கள்

ஒரு இணைப்பை CSS ஐப் பயன்படுத்தி ஒரு பட்டனாக வடிவமைக்கலாம்:

எடுத்துக்காட்டு

<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>

<a href="#">This is a link</a>

மேம்பட்ட எடுத்துக்காட்டுகள்

a.button {
  border-radius: 25px;
  padding: 12px 30px;
}

a.button {
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

a.button {
  transition: all 0.3s ease;
}

a.button:hover {
  transform: translateY(-2px);
}

HTML Link குறிச்சொற்கள்

பயிற்சி

இயல்பாக அனைத்து ஹைப்பர்லிங்குகளும் அடிக்கோடிடப்பட்டவை என்பது உண்மையா அல்லது பொய்யா?

சிறந்த நடைமுறைகள்