لینک ها links

وقتی در HTML یک لینک با تگ <a> می‌سازیم، می‌تونیم با کمک CSS استایل‌های مختلفی براش تعریف کنیم.
لینک‌ها چند حالت (state) مختلف دارن که هرکدوم استایل مخصوص خودش رو می‌تونن داشته باشن:

1️⃣ حالت‌های لینک در CSS

  1. a:link → لینک عادی (وقتی هنوز کلیک نشده)

  2. a:visited → لینک بازدیدشده (وقتی کاربر قبلاً روی اون کلیک کرده)

  3. a:hover → وقتی کاربر ماوس رو روی لینک می‌بره

  4. a:active → وقتی کاربر روی لینک کلیک می‌کنه (همون لحظه)

2️⃣ مثال ساده

a:link { color: blue; /* رنگ لینک عادی */ text-decoration: none; /* خط زیر لینک رو حذف میکنه */ } a:visited { color: purple; /* رنگ لینک‌های بازدیدشده */ } a:hover { color: red; /* تغییر رنگ وقتی ماوس روی لینک میره */ text-decoration: underline; } a:active { color: orange; /* رنگ وقتی کلیک میشه */ }

3️⃣ نکته مهم: ترتیب نوشتن حالت‌ها

باید همیشه به ترتیب زیر استایل‌ها رو تعریف کنی (تا درست کار کنه):

👉 LVHA

  1. L → link

  2. V → visited

  3. H → hover

  4. A → active

4️⃣ استایل‌های پرکاربرد لینک‌ها

  • حذف خط زیر لینک

a { text-decoration: none; }
  • تغییر رنگ در هاور

a:hover { color: green; }
  • تبدیل لینک به دکمه

a { display: inline-block; padding: 10px 20px; background-color: coral; color: white; border-radius: 8px; } a:hover { background-color: darkorange; }

5️⃣ خلاصه

  • لینک‌ها در CSS با pseudo-class‌ها استایل می‌گیرن.

  • حالت‌ها: :link, :visited, :hover, :active

  • می‌تونیم رنگ، فونت، بک‌گراند و حتی دکمه‌های زیبا با لینک بسازیم.