وقتی در 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

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