پیوندها - رنگ های مختلف (Links - Different Colors)
پیوندها (Links) در HTML بسته به وضعیتشان رنگ های مختلفی دارند. یک پیوند می تواند بازدیدنشده، بازدیدشده یا فعال باشد و مرورگرها برای هر حالت رنگ پیش فرضی نمایش می دهند.
رنگ های پیش فرض پیوندها
در همه مرورگرها پیوندها به طور پیش فرض به این شکل دیده می شوند:
- پیوند بازدیدنشده آبی و زیرخط دار است.
- پیوند بازدیدشده بنفش و زیرخط دار است.
- پیوند فعال قرمز و زیرخط دار است.
با استفاده از CSS می توانید رنگ و استایل پیوندها را تغییر دهید.
<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 مهم است. ترتیب صحیح: a:link، a:visited، a:hover، a:active.
پیوند به صورت دکمه
می توانید با استفاده از 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="#">این یک دکمه است</a>نکته: این روش باعث می شود تجربه کاربری جذاب تر شود و پیوندها شبیه عناصر تعاملی باشند.
خلاصه فصل
- رنگ پیش فرض پیوندها شامل آبی، بنفش و قرمز است.
- با CSS می توانید رنگ و استایل هر وضعیت پیوند را تغییر دهید.
- می توانید پیوندها را به دکمه های زیبا تبدیل کنید.
برای یادگیری بیشتر به بخش پیوندها در HTML یا CSS در HTML مراجعه کنید.