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)


منابع آموزشی




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