تغییر رنگ لینک ها در HTML
تغییر رنگ لینک های HTML
یک پیوند HTML بسته به اینکه آیا از آن بازدید شده است ، بازدید نشده است یا فعال است ، در رنگ های متفاوت نمایش داده می شود.
طراحان سایت برای تغییر رنگ و مشخصه های لینکهای یک وب سایت در بیشتر مواقع از CSS استفاده می کنند بدلیل اینکه راحت تر بوده و دارای انعطاف پذیری بیشتری نسبت به کدهای HTML می باشد .
رنگ لینک ها در HTML
به طور پیش فرض لینک ها با رنگبندی در حالت های زیر ظاهر میشوند:
- a یا a:link پیوندی که بازدید نشده است زیر خط دار و آبی است
- a:visited پیوندی که بازدید شده است زیر خط دار و بنفش است
- a:active پیوندی که فعال است زیر خط دار و قرمز است.( برای لحظه ای که روی لینک کلیک می کنیم.)
- a:hover برای حالتی که ماوس را روی لینک می بریم.
با استفاده از CSS می توانید رنگ وضعیت پیوند را تغییر دهید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<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 به عنوان یک دکمه تنظیم کرد:
مثال:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!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> |
