استایل دهی به لینک ها توسط CSS

اهمیت لینک ها در صفحات وب بر کسی پوشیده نیست از این رو استایل دهی به آنها نیز از اهمیت بسیار زیادی برخوردار است. در بخش آموزش HTML نحوه استفاده از لینک ها شرح داده شد و در این قسمت قصد داریم نحوه استایل دهی به لینک ها را آموزش دهیم.

نحوه استفاده

در اغلب موارد استایل دهی به لینک ها از طریق tag selector انجام می شود و خاصیت های قابل استایل دهی آن به شرح زیر می باشند:

  • text-decoration: نمایش یا عدم نمایش underline مربوط به لینک ها.
  • color: رنگ پیش فرض لینک.

در صورتیکه قصد داشته باشید underline مربوط به لینک ها از بین برود کافی است خاصیت text-decoration آن را برابر none قرار دهید.

<style>
  a{
    text-decoration: none;
    color: tomato;
  }
</style>

سایر تنظیمات لینک ها با استفاده علامت : و به شکل زیر قابل انجام می باشد:

  • link: لینک های مشاهده نشده.
  • visited: رنگ لینک های مشاهده شده.
  • hover: هنگامیکه ماوس بر روی لینک منتقل می شود.
  • active: هنگامی که روی لینک مورد نظر کلیک می شود.

مثال: سه لینک ایجاد کرده و برای هریک از حالت های زیر شده یک رنگ متفاوت تعیین نمایید.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      a{
        text-decoration: none;
        color: red;
      }
      a:visited{
        color: tomato;
      }
      a:hover{
        color: blueviolet;
      }
      a:active{
        color: palevioletred;
      }
    </style>
  </head>
  <body>
    <a href="https://benoacademy.com" target="_blank">آکادمی بنو</a>
    <br>
    <a href="http://beno.biz">سیستم مدیریت محتوای بنو</a>
    <br>
    <a href="http://yardim-et.com">ثبت رایگان آگهی</a>
  </body>
</html>

سایر تنظیماتی که در بخش های قبل توضیح داده شد مانند background-color, font و ... نیز همگی روی لینک ها قابل اعمال می باشند. در مقاله بعدی با ترکیب لینک ها و لیست ها اقدام به ساخت یک منو خواهیم نمود.