لینک در css
09 Jan

لینک در css

می توان به لینک در css استایل های متفاوتی داد ، با  color, font-family, background و … ظاهر لینک از متن عادی متمایز می شود. در مثال زیر با دستور color  رنگ لینک را تغییر دادیم.

<!DOCTYPE html>
<html>
<head>
<style>
a {
color: hotpink;
}
</style>
</head>
<body>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

</body>
</html>

 

علاوه بر این می توان استایل لینک را در وضعیت های مختلف تغییر داد .
a:link  استایل لینک در وضعیت عادی
a:visited  استایل لینک وقتی که توسط کاربر مشاهده شده است
a:hover  استایل لینک زمانی که موس روی لینک قرار می گیرد.
a:active  استایل لینک در لحظه ای که روی آن کلیک  و انتخاب می شود.

دستور  Text Decoration برای لینک :

از خصوصیت Text Decoration معمولا زمانی استفاده می شود که می خواهیم خط زیر لینک در css حذف شود .به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<a href="default.asp" target="_blank">لینک </a>
</body>
</html>

 

لینک در حالت عادی و زمانی که مشاهده شده خط ندارد ، زمانی که موس روی آن هاور می شود و زمان کلیک و انتخاب زیر لینک یک خط ایجاد می شود.

دستور Background Color برای لینک :

می توان برای وضعیت های مختلف لینک در css استایل های متفاوتی تعیین کرد.

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
background-color: yellow;
}

a:visited {
background-color: cyan;
}

a:hover {
background-color: lightgreen;
}

a:active {
background-color: hotpink;
}
</style>
</head>
<body>

a href="default.asp" target="_blank">This is a link</a>

</body>
</html>

 

با توجه نیاز قالب می توان استایل لینک را را تغییر دهیم مثلا لینک را به صورت باکس یا دکمه درست کنیم.

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<a href="default.asp" target="_blank">لینک به صورت دکمه</a>

</body>
</html>

 

درباره نویسنده

پاسخ