فرمت دهی لینک ها در CSS

فرمت دهی به لینک ها

لینک ها با هر صفتی از زبان CSS میتوانند فرمت دهی شوند (مانند color،font-family،background و ...)

a {
    color: hotpink;
}

به علاوه ، لینک ها بسته به وضعیت های مختلفی که در آن قرار میگیرند  میتوانند فرمت دهی شوند.

چهار وضعیتی که لینک ها در آن قرار میگیرند عبارت است از :

• a:link - یک لینک در وضعیت عادی و ملاقات نشده
• a:visited - لینکی که کاربر آن را ملاقات کرده است
• a:hover - یک لینک در موقعی که نشانگر موس روی آن قرار میگیرد
• a:active - لحظه ای که لینک کلیک میشود

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

 در زمان تنظیم استایل برای وضعیت های مختلف یک لینک ، رعایت ترتیب اهمیت دارد :

• a:hover باید بعد از a:link و a:visited قرار بگیرد
• a:active باید بعد از a:hover قرار بگیرد

صفت text-decoration

از صفت text-decoration اغلب برای حذف زیر خط از لینک ها استفاده میشود :

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

صفت background-color

از صفت background-color برای مشخص کردن رنگ پس زمینه ی یک لینک استفاده میشود :

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
} 

استفاده از CSS برای ساخت یک دکمه ی لینک

با ترکیب چندین صفت از زبان CSS میتوان یک لینک را همچون یک دکمه طراحی کرد. نمونه مثال زیر نحوه ی ایجاد یک دکمه ی لینک را نشان میدهد :

a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center; 
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}