لینک ها در css

یکی از عناصر مهم در صفحات وب ، لینکها هستند.

در این بخش از آموزش CSS به بحث لینک ها در CSS می پردازیم.

در هر سایتی تعداد زیادی لینک وجود دارد. بهتر است که لینک ها یک نظم خاصی داشته باشد. با سی اس اس می توانیم لینک ها را زیباتر کنیم تا کاربر از آن لذت ببرد.

وقتی یک دکمه را طراحی می کنیم یکی از زیبایی های آن هاور کردن دکمه و تغییر ظاهر دکمه است.

یا وقتی روی یک عکس با موس قرار می گیرم یا هاور می کنیم معمولا تغییری را می بینیم مثلا عکس کم رنگ تر می شود . با استفاده از CSS براحتی می توانید لینک ها را زیباتر کرد.

در این قسمت چندین مثال خواهیم زد تا شما براحتی با ان آشنا شوید.

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

درطراحی قالب سایت نیز از لینک ها زیاد استفاده می کنیم.

لینک ها دارای چهار حالت می باشند:

ویژگی LINK در لینک :

رنگ متن لینک را مشخص می کند. رنگ اولیه متن همان LINK است.

در مثال زیر با تگ A و لینک ها آشنا می شویم.

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: #222222;
}
</style>
</head>
<body>
<a href="https://sh711.com" target="_blank">This is a link</a>
</body>
</html>

در مثال بالا رنگ پیش فرض لینک ، آبی است. ما با استفاده از کد CSS رنگ لینک را تغییر می دهیم و رنگ آن را تیره می کنیم.

ویژگی VISITED در لینک :

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

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: #222222;
}
a:visited{
color: green;
}
</style>
</head>
<body>
<a href="https://sh711.com">This is a link</a>
</body>
</html>

در مثال بالا مشخص کرده ایم که وقتی روی یک لینک کلیک شد و از آن صفحه بازدید شد رنگ لینک سبز شود.

لینک ها با css قابل تغییر هستند و این از زیبایی های css یا استایل ها است.

در مثال بالا هم کد css و هم کد html را می بینید و می توانید ازان استفاده نمایید.

ویژگی HOVER در لینک :

هنگامی که با موس روی لینک قرار می گیریم را هاور می گوییم.

هاور کردن یکی از جذابیت های لینک در css است.

هاور کردن برای دکمه ، عکس و غیره انجام میشود و دکمه یا عکس را زیبا می کند.

هاور کردن دکمه :

در این بخش هاور کردن دکمه با css را آموزش می دهیم.

یکی از جذابیت های دکمه هاورکردن میباشد. هاور کردن یعنی وقتی با موس روی دکمه می رویم دکمه تغییرکند.

بگذارید یک مثال بزنیم. این کد را می توانید در یک فایل html قرار دهید . ذخیره کنید و سپس اجرا کنید.

<!DOCTYPE html>
<html>
<head>
<style>
div{
margin: 30px;
}
.btn19{
padding: 10px 20px;
border: 1px solid black;
background-color: lightgray;
color: black;
text-decoration: none;
}
.btn19:hover{
color: white;
background-color: #000d33;
}
</style>
</head>
<body>
<div>
<a class="btn19" href="https://sh711.com">button</a>
</div>
</body>
</html>

در مثال بالا ابتدا یک دکمه ایجاد کردیم رنگ پس زمینه lightgray و رنگ متن مشکی میباشد .

وقتی روی دکمه هاور می کنیم رنگ متن و رنگ پس زمینه تغییر می کند.

این یک دکمه ساده است در بخش های بعد ساخت دکمه های زیبا با css را به شما آموزش خواهیم داد.

ویژگی ACTIVE در لینک :

هنگامی که در حالت هاور روی لینک کلیک کرده و دکمه موس را بالا نیاورده ایم این حالت را ACTIVE می گویند.

مثال را با دقت ببینید.

نکته : در صورتی که خواستید رنگ VISITED را به حالت LINK برگردانید کافی است مسیر HREF را عوض کنید.

در فیلم های آموزشی ، معمولا مباحث راحت تر بیان می شود.

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: hotpink;
}
a:active {
color: blue;
}
</style>
</head>
<body>
<p><b><a href="https://sh711.com" target="_blank">This is a link</a></b></p>
</body>
</html>

نویسنده : هدایت عباسی

تگ ها : آموزش css
ثبت نظر