آموزش استفاده از لینک ها در CSS
آموزش استفاده از لینک ها در CSS
در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش استفاده از لینک ها در CSS خواهیم پرداخت.
می توانید ویژگی های زیر را از هایپر لینک انتظار داشته باشید.
- link: به معنی هایپر لینک های بازدید نشده است.
- visited: نشان دهنده هایپر لینک های بازدید شده است.
- hover: نشان دهنده عنصری است که در حال حاضر نشانگر ماوس کاربر روی آن معلق است.
- active: نشان دهنده عنصری است که کاربر در حال حاضر بر روی آن کلیک می کند.
معمولاً همه این ویژگی ها در قسمت هدر سند HTML نگهداری می شوند.
به یاد داشته باشید a: hover برای تأثیرگذاری باید بعد از a: link and a: بازدید شده در تعریف CSS بیاید. همچنین، a: active باید بعد از a: شناور hover در تعریف CSS به شرح زیر بیاید –
|
1 2 3 4 5 6 |
<style type = "text/css"> a:link {color: #000000} a:visited {color: #006600} a:hover {color: #FFCC00} a:active {color: #FF00CC} </style> |
اکنون، ما خواهیم دید که چگونه از این ویژگی ها برای ایجاد جلوه های مختلف به پیوندها استفاده کنیم.
تنظیم رنگ لینک
مثال زیر نحوه تنظیم رنگ لینک را نشان می دهد. مقادیر ممکن است هر نام رنگی در هر قالب معتبری باشد.
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <head> <style type = "text/css"> a:link {color:#000000} </style> </head> <body> <a href = "">Link</a> </body> </html> |
خروجی به شکل زیر می باشد:
|
1 |
Link |
تنظیم رنگ لینک های بازدید شده
مثال زیر نحوه تنظیم رنگ لینکهای بازدید شده را نشان می دهد. مقادیر ممکن است هر نام رنگی در هر قالب معتبری باشد.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
Live Demo <html> <head> <style type = "text/css"> a:visited {color: #006600} </style> </head> <body> <a href = ""> link</a> </body> </html> |
خروجی به شکل زیر می باشد:
تغییر رنگ لینک ها با قرار دادن نشانگر ماوس بر روی آن
مثال زیر نحوه تغییر رنگ پیوندها را نشان می دهد وقتی که ماوس نشانگر را روی آن پیوند می آوریم. مقادیر ممکن است هر نام رنگی در هر قالب معتبری باشد
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <head> <style type = "text/css"> a:hover {color: #FFCC00} </style> </head> <body> <a href = "">Link</a> </body> </html> |
خروجی به شکل زیر می باشد:
تغییر رنگ لینکهای فعال
مثال زیر نحوه تغییر رنگ لینک های فعال را نشان می دهد. مقادیر ممکن است هر نام رنگی در هر قالب معتبری باشد.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
Live Demo <html> <head> <style type = "text/css"> a:active {color: #FF00CC} </style> </head> <body> <a href = "">Link</a> </body> </html> |
خروجی به شکل زیر می باشد:
لیست جلسات قبل آموزش CSS
.svg)
دیدگاه شما