تغییر رنگ لینک های HTML
یک پیوند HTML بسته به اینکه آیا از آن بازدید شده است ، بازدید نشده است یا فعال است ، در رنگ های متفاوت نمایش داده می شود.
طراحان سایت برای تغییر رنگ و مشخصه های لینکهای یک وب سایت در بیشتر مواقع از CSS استفاده می کنند بدلیل اینکه راحت تر بوده و دارای انعطاف پذیری بیشتری نسبت به کدهای HTML می باشد .
رنگ لینک ها در HTML
به طور پیش فرض لینک ها با رنگبندی در حالت های زیر ظاهر میشوند:
- a یا
a:link
پیوندی که بازدید نشده است زیر خط دار و آبی است - a:visited پیوندی که بازدید شده است زیر خط دار و بنفش است
- a:active
پیوندی که فعال است زیر خط دار و قرمز است.( برای لحظه ای که روی لینک کلیک می کنیم.) - a:hover برای حالتی که ماوس را روی لینک می بریم.
با استفاده از CSS می توانید رنگ وضعیت پیوند را تغییر دهید:
<style>
/* حالت عادی لینک */
a:link {
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
color: #06C;
text-decoration: none;
}
/* حالت لینک دیده شده */
a:visited {
color: #C30;
}
/* حالت لینک فعال */
a:hover {
color: #008CC7;
}
/* حالت لینک در لحظه ای که روی آن کلیک می کنیم */
a:active {
background-color: #999;
}
</style>
<a href="https://upweb.ir" title="آپ وب" target="_self">ارائه دهنده هاست پرسرعت وقدرتمند</a>
قبل از کلیک کردن لینک به رنگ قرمز میباشد:
بعد از کلیک کردن لینک به رنگ آبی میباشد:
دکمه های پیوند
پیوند را می توان با استفاده از CSS به عنوان یک دکمه تنظیم کرد:
مثال
<!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>دکمه های پیوند</h2>
<p>:پیوندی که به عنوان یک دکمه طراحی شده است</p>
<a href="https://upweb.ir" target="_blank">این یک پیوند است</a>
</body>
</html>
