CSSسفارشی سازی لینک ها در
برای لینک های موجود در صفحه وبسایت می توان ظاهری جذاب طراحی کرد از جمله این طراحی ها می توان به فونت متن لینک، رنگ متن لینک، تصاویر لینک دار و… اشاره کرد.
تنظیمات مربوط به فونت لینک
برای سفارشی سازی فونت لینک مانند تنظیمات فونت معمولی عمل می کنیم. یعنی:
- برای تعیین رنگ متن لینک از دستور color برای تگ <a>
- برای تعیین فونت از دستور font-family برای تگ<a>
- برای ایتالیک یا نرمال بودن متن از دستور font-style برای تگ<a>
- برای بولد بودن قرار دادن تگ <a> داخل تگ <b> و یا استفاده از دستور font-weight برای تگ <a>
- برای تعیین اندازه فونت از font-size.
مثال:
<html> <head> <style> a { color: pink; font-family: Arial; background: blue; font-style: italic; font-size: 30px; } </style> </head> <body>
<p><b><a href=“https://meta-learning.ir/” target=“_blank”>This is a link</a></b></p>
</body> </html>
حالات مختلف لینک
چهار حالت برای لینک ها وجود دارد:
- a:link برای حالت معمولی یک لینک
- a:visited برای زمانی که کاربر قبلا روی لینک کلیک کرده است.
- a:hover برای زمانی که نشانگر موس روی لینک قرار می گیرد.
- a:active زمانی که کاربر روی لینک کلیک می کند.
برای تمام این حالت ها می توانیم تنظیمات مختلفی داشته باشیم. در مثال پیش رو نحوه اعمال تنظیمات بر روی حالت های مختلف لینک ها نمایش داده شده است.
<html> <head> <style> a:link { color: red; font-weight:bold; } a:visited { color: green; font-weight:bold; } a:hover { color: pink; font-style: italic; } a:active {color: blue;} </style> </head> <body> <a href=“https://meta-learning.ir/”>This is a link</a> </body> </html>
- برای نشانگر موس می توان حالت های مختلفی ایجاد کرد یعنی می توانیم مشخص کنیم در حالت های مختلف موس چه آیکونی را داشته باشد. با اجرای مثال زیر این نکته را بهتر درک خواهید کرد.
<html> <body>
<span style=“cursor:auto”>auto</span><br> <span style=“cursor:crosshair”>crosshair</span><br> <span style=“cursor:default”>default</span><br> <span style=“cursor:e-resize”>e-resize</span><br> <span style=“cursor:help”>help</span><br> <span style=“cursor:move”>move</span><br> <span style=“cursor:n-resize”>n-resize</span><br> <span style=“cursor:ne-resize”>ne-resize</span><br> <span style=“cursor:nw-resize”>nw-resize</span><br> <span style=“cursor:pointer”>pointer</span><br> <span style=“cursor:progress”>progress</span><br> <span style=“cursor:s-resize”>s-resize</span><br> <span style=“cursor:se-resize”>se-resize</span><br> <span style=“cursor:sw-resize”>sw-resize</span><br> <span style=“cursor:text”>text</span><br> <span style=“cursor:w-resize”>w-resize</span><br> <span style=“cursor:wait”>wait</span><br>
</body> </html>