لینک در css

لینک در css می تواند به صورت های مختلفی استایل دهی شود.

استایل لینک در css

لینک ها را با استفاده از خصوصیت های مختلف css نظیر background ،font-family ،color و … می توان استایل دهی کرد:

a {
  color: hotpink;
}

همچنین می توانیم لینک را با توجه به حالت های مختلفی که دارد، استایل دهی کنیم که این حالت ها از این قرارند:
a:link– لینک معمولی که هنوز باز نشده است.
a:visited– لینکی که کاربر آن را دیده است.
a:hover– لینکی که کاربر در حال عبور ماوس از روی آن است.
a:active– لینک، دقیقا در لحظه ای که روی آن کلیک می شود.

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}

هنگامی که در حال استایل دهی به حالت های مختلف لینک هستید، لازم است نکات زیر را رعایت کنید:
a:hover می بایست بعد از a:link و a:visited بیاید.
a:active می بایست بعد از a:hover بیاید.

Text Decoration

خصوصیت text-decoration برای برداشتن خط زیر لینک استفاده می شود:

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}

Background Color

می توان از خصوصیت background-color برای تعیین رنگ پس زمینه لینک در css استفاده کرد:

a:link {
  background-color: yellow;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: lightgreen;
}
a:active {
  background-color: hotpink;
}

برگرفته از وب سایت w3schools