همه چیز درباره لینک‌ها در CSS

مقدمه‌ای بر لینک‌ها در CSS

سلام به همهٔ دوستان عزیز! امروز می‌خواهیم دربارهٔ لینک‌ها در CSS و ویژگی‌های مختلفی که می‌توان روی آن‌ها اعمال کرد صحبت کنیم. لینک‌ها به عنوان یکی از اجزای کلیدی صفحات وب عمل می‌کنند و جذابیت آن‌ها می‌تواند به تجربه کاربری بهتری منجر شود. با استفاده از CSS، شما می‌توانید استایل و رفتار لینک‌ها را در حالت‌های مختلف تغییر دهید.

ما معمولا با حالت‌های مختلفی از لینک‌ها سر و کار داریم، مثل: لینک‌های بازدید نشده، لینک‌های بازدید شده، لینک‌های در حال هاور و لینک‌های فعال. این حالت‌ها با استفاده از شبه‌کلاس‌های CSS قابل تعیین هستند. درست کردن استایلی که لینک‌های شما را منحصر به فرد کند واقعا می‌تواند کاربرانتان را شگفت‌زده کند!

استایل دادن به لینک‌ها با CSS

با CSS شما می‌توانید رنگ، اندازه، نوع قلم، و خصوصیات دیگری از لینک‌ها را مشخص کنید. علاوه بر این، می‌توانید به لینک‌ها انیمیشن‌های جذاب و تغییرات خاصی را اضافه کنید تا زمانی که کاربر روی لینک‌ها حرکت می‌کند، این تغییرات اعمال شوند. این کار می‌تواند ظاهر سایت شما را حرفه‌ای تر جلوه دهد.

نمونه کد

  <style>
    a {
      color: blue; /* رنگ لینک بازدید نشده */
      text-decoration: none; /* حذف خط زیر لینک */
    }
    a:visited {
      color: purple; /* رنگ لینک بازدید شده */
    }
    a:hover {
      color: red; /* رنگ لینک در حالت هاور */
      text-decoration: underline; /* اضافه کردن خط زیر لینک در هاور */
    }
    a:active {
      color: green; /* رنگ لینک در حالت فعال */
    }
  </style>

  <a href="#">این یک لینک نمونه است</a>
  

توضیحات خط به خط کد