کار با لینک ها در css

هدایت عباسی آموزش CSS

آموزش ویدئویی لینک ها در css

دانلود رایگان فیلم و آموزش ویدئویی کار با لینک ها در css همراه با چندین مثال.

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

در این بخش از آموزش css از تاپ سایت 98 به سراغ کار با لینک ها در css می رویم. در مورد تگ a و تمامی موارد مهم در مورد استایل های آن صحبت خواهیم کرد.

تگ a در css

تگ a برای دادن لینک استفاده می شود. با css می توانیم لینک ها را زیبا کرده و به هر شکل که بخواهیم درآوریم.

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

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

در مثال زیر دو تگ a را مشاهده می کنید که یکی بدون استایل می باشد و دیگری با کلاس top می باشد.

کد را در یک فایل html ذخیره و اجرا نمایید و تفاوت این دو رو ببینید.

<!DOCTYPE html>
<html>
<head>
<style>
.top{
color: red;
background-color: darkseagreen;
padding: 20px 10px;
font-size: 50px;
}
</style>
</head>
<body>
<h1>topsite98.com</h1>
<a href="https://topsite98.com/">topsite98.com</a>
<hr>
<a href="https://topsite98.com/" class="top">topsite98.com</a>

</body>
</html>

استایل لینک

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

ما از استایل داخلی استفاده می کنیم که برای اجرا راحت تر باشد.

برای استایل لینک در قسمت style کد css خود را می نویسیم.

در بخش پایین چندین مینی پروژه را خواهید دید.

هاور کردن لینک با css

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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
.top{
color: red;
font-size: 30px;
}
.top:hover{
color: #0E2231;
}
</style>
</head>
<body>
<h1>topsite98.com</h1>
<a href="https://topsite98.com/" class="top">topsite98.com</a>

</body>
</html>

ویژگی visited در لینک ها

اگر در گوگل چیزی را جستجو کنید و سپس روی ان کلیک کنید می بینید که رنگ آن تغییر می کند یعنی شکا قبلا روی آن کلیک کرده اید. این ویژگی visited میباشد.

ما می توانیم با استفاده از css ویژگی visited لینک را تغییر دهیم.

<!DOCTYPE html>
<html>
<head>
<style>
.top{
color: red;
font-size: 30px;
}
.top:visited{
color: blue;
}
</style>
</head>
<body>
<h1>topsite98.com</h1>
<a href="https://topsite98.com/" class="top">topsite98.com</a>
</body>
</html>

ویژگی active در لینک ها

ویژگی active در لینک ها زمانی کاربرد دارد که شما بر روی لینک کلیک کرده اید ولی هنوز آن را رها نکرده اید.

برای امتحان کردن بر روی لینک کلیک کنید ولی چند لحظه آن را رها نکنید.

در مثال پایین کاربرد ویژگی active در لینک ها را می بینید.

ساخت دکمه با css

در این بخش می خواهیم ساخت دکمه با css را بیاموزیم. برای ساخت دکمه از یک تگ a یا لینک استفاده می کنیم.

برای ساخت دکمه ابتدا یک لینک قرار می دهیم.

سپس با a:link , a:visited مشخص می کنیم که تگ a در حالت اولیه و در حالتی که بازدید شده باشد چه حالتی باشد.

سپس با a:hover, a:active مشخص می کنیم که وقتی روی آن هاور شد چه اتفاقی بیفتد.

با استفاده از background-color رنگ پس زیمنه تغییر می کند.

با استفاده از color رنگ متن تغییر می کند.

با padding فاصله داخلی آن را مشخص می کنیم.

با text-align محل قرارگیری متن را مشخص می کنیم.

با text-decoration مشخص می کنیم که خط زیر لینک باشد یا نباشد.

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #ff7700;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: #ff9900;
}
</style>
</head>
<body>
<a href="https://topsite98.com/" >TopSite98.com</a>

</body>
</html>

برای اجرای کدها می توانید آنها را در یک فایل html قرار دهید و سپس اجرا کنید تا نتیجه را ببینید.

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

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