CSS Links

مقدمه لینک‌ها در HTML

html
<a href=“https://example.com”>بازدید از سایت مثال</a>

—

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

با CSS می‌توان حالت‌های مختلف لینک را با استفاده از پیش‌کلاس‌ها (pseudo-classes) استایل داد:

✅ حالت‌های لینک:

| حالت                     | توضیح |
| ———–               | ———————————- |
| `a:link`                 | لینک‌هایی که هنوز باز نشده‌اند |
| `a:visited`             | لینک‌هایی که قبلاً باز شده‌اند |
| `a:hover`              | وقتی موس روی لینک قرار دارد |
| `a:active`              | وقتی لینک در حال کلیک شدن است |
| `a:focus`               | وقتی لینک با کیبورد انتخاب شده است |

—

 🧪 نمونه CSS برای لینک‌ها

css
a:link {
color: blue;          /* رنگ آبی برای لینک‌های جدید */
text-decoration: none;             /* حذف خط زیر لینک */
}

a:visited {
color: purple;           /* رنگ بنفش برای لینک‌های باز شده */
}

a:hover {
color: red;              /* رنگ قرمز هنگام رفتن موس روی لینک */
text-decoration: underline;              /* زیرخط دار شدن لینک */
}

a:active {
color: green;                /* رنگ سبز هنگام کلیک روی لینک */
}

a:focus {
outline: 2px dashed orange;               /* خط نارنجی نقطه‌چین هنگام فوکوس */
}
—

💡 نکته‌ها:

*ترتیب نوشتن پیش‌کلاس‌ها مهم است:** ابتدا `link`، بعد `visited`، سپس `hover` و در آخر `active` (قاعده LoVe HAte).
* می‌توانید به عناصر دیگر مثل دکمه‌ها هم استایل لینک بدهید با استفاده از کلاس‌ها.
* `text-decoration: none;` برای حذف خط زیر لینک استفاده می‌شود.