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

Link (لینک یا پیوند) با تگ <a> در HTML ساخته می‌شود و به‌طور پیش‌فرض دارای ظاهری خاص، مانند رنگ آبی و خط زیرین، است. با CSS می‌توان این ظاهر پیش‌فرض را تغییر داد و رفتار لینک را در حالت‌های مختلف کنترل کرد.

حالت‌های مختلف لینک

لینک‌ها در CSS چهار حالت اصلی دارند که هرکدام با یک Pseudo-class (شبه‌کلاس) مشخص می‌شوند:

1. a:link : حالت عادی و بازدید‌نشده‌ی لینک
2. a:visited : حالتی که کاربر قبلاً روی آن لینک کلیک کرده است
3. a:hover : حالتی که ماوس روی لینک قرار می‌گیرد
4. a:active : حالتی که لینک در حال کلیک شدن است

a:link {
    color: steelblue; 


a:visited {
    color: purple; 


a:hover {
    color: darkorange; 


a:active {
    color: red; 
}

در این مثال، رنگ لینک در هر یک از چهار حالت مختلف تعیین شده است. وقتی کاربر ماوس را روی لینک ببرد، رنگ آن به darkorange تغییر می‌کند و در لحظه‌ی کلیک، رنگ red نمایش داده می‌شود.

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

ه‌طور پیش‌فرض، لینک‌ها دارای خط زیرین هستند. با ویژگی text-decoration می‌توان این خط را حذف کرد.

a {
    text-decoration: none; 
}

در این مثال، خط زیرین تمام لینک‌های صفحه با مقدار none حذف شده است.

تبدیل لینک به دکمه

با ترکیب چند ویژگی CSS مانند رنگ پس‌زمینه، حاشیه‌ی داخلی و گردی گوشه‌ها، می‌توان ظاهر یک لینک ساده را به شکل یک دکمه تغییر داد.

a {
    background-color: seagreen;
    color: white;
    padding: 5px 10px;
    text-decoration: none;
    border-radius: 6px;
}

در این مثال، لینک با رنگ پس‌زمینه‌ی seagreen، متن سفید، حاشیه‌ی داخلی و گوشه‌های گرد، به شکل یک دکمه‌ی کلیک‌پذیر نمایش داده می‌شود.