100% کامل شده تا

رنگ‌های مختلف - لینک‌های اچ‌تی‌ام‌ال (HTML Links - Different Colors)

از موتو کد، دانشنامهٔ برنامه‌نویسی


یک پیوند HTML بسته به اینکه آیا از آن بازدید شده‌است، بازدید نشده‌است یا فعال است، در رنگی متفاوت نمایش داده می‌شود.[۱]


رنگ های لینک در HTML

به‌طور پیش‌فرض، لینک (در همه مرورگرها) به شکل زیر ظاهر می‌شود:

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

می‌توانید رنگ‌های پیش‌فرض را با استفاده از CSS تغییر داد:

مثال

در اینجا، پیوندی که بازدید نشده‌است سبز خواهد بود بدون خط‌کشی. پیوندی که بازدید شده‌است صورتی خواهد بود بدون خط‌کشی. پیوند فعال زرد و زیر خط خواهد داشت. علاوه بر این، هنگام رفتن روی یک پیوند (a:hover) قرمز و زیر خط‌دار می‌شود:

a:lnk {
  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;
}

مثال

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

Responsive demo.svg



دکمه‌های لینک (Link Buttons)

همچنین می‌توان لینک را با استفاده از CSS بصورت یک کلید طراحی کرد:

This is a link

مثال

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

مثال

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

Responsive demo.svg


برای کسب اطلاعات بیشتر در مورد CSS، به آموزش CSS ما بروید.

تگ‌های لینک اچ‌تی‌ام‌ال (HTML Link Tags)


منابع آموزشی




به‌روزرسانی شده: ۳۸ روز پیش