تغییر رنگ لینک ها (تگ a) در html

لینک ها در html با رنگ های مختلفی در سایت شما نمایش داده می شوند این رنگ بندی براساس حالتهای مختلفی مثل فعال، غیرفعال، بازدید شده و ... لینک تغییر می کند.

بهزاد میرزازاده بهزاد میرزازاده

زمان مطالعه

3 دقیقه

بازدید

606

پرسش و پاسخ

0
تغییر رنگ لینک ها (تگ a) در html

رنگ لینک در HTML

به طور پیش فرض ، لینک ها با رنگبندی در html در حالتهای زیر ظاهر می شوند:

  • یک لینک بازدید نشده ، زیرخط دار و آبی است
  • یک لینک بازدید شده زیرخط دار و بنفش است
  • یک لینک فعال زیرخط دار و قرمز است


با استفاده از CSS می توانید رنگ حالت لینک را تغییر دهید:

در مثال زیر ، یک لینک بازدید نشده به رنگ سبز و بدون هیچگونه زیرخط  خواهد بود. یک لینک بازدید شده صورتی خواهد بود و هیچ زیرخطی وجود ندارد. لینک فعال زرد و زیرخط دار خواهد بود. بعلاوه ، هنگام قرار دادن روی لینک (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>

حالتهای رنگ در لینک ها با ظاهر دکمه

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

حالت دکمه در حالت نرمال و لمس شده

حالتهای رنگ در لینک