آموزش رایگان CSS – جلسه 13

در جلسه ی دوازدهم از آموزش CSS با فونت ها آشنا شدیم. در این جلسه تصمیم داریم شما را با لینک ها در CSS آشنا کنیم. امیدواریم که تا پایان این جلسه ما را همراهی کنید.

لینک ها در CSS

از تگ a در CSS برای لینک دادن استفاده می شود. استفاده از CSS کمک می کند تا لینک ایجاد شده زیباتر و به شکل مورد نظر ما طراحی شود. اما سوال اینجاست که چه تغییراتی می توان برای یک لینک ایجاد کرد؟

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

برای لینک ها حالت های مختلفی وجود دارد که برای کار با CSS و استایل دهی آنها لازم است با این حالت ها آشنا شویم؛

برای اینکه بتوان هر یک از حالت های بالا را در CSS استایل دهی کرد, باید از دستورات معادل آنها که برای زبان CSS قابل درک است استفاده کنیم؛

a:link : حالت معمولی که هنوز روی لینک کلیک نشده
a:visited : حالتی که کلیک شده
a:hover : در حالت هاور موس(موس روی آن قرار دارد)
a:active : لحظه کلیک برروی لینک که لینک فعال می شود

به جای a:link از a نیز می توانید استفاده کنید.

مثال؛

<style>
a:link{
color: green;
}
a:visited{
color: white;
background: blue;
}
a:hover{
color: red;
}
a:active{
color: orange;
}
</style>

نکته؛ a:hover باید بعد از a:link و a:visited نوشته شود و a:active باید بعد از a:hover پس ترتیب قرارگیری این شبه کلاس ها باید به صورت زیر باشد:

1. a:link
2. a:visited
3. a:hover
4. a:active

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

Text-Decoration لینک ها در CSS

همان طور که اشاره کردیم لینک ها دارای یک خط مشکی هستند که به طور پیش فرض زیر آنها کشیده شده است. برای تغییر این خط یا اعمال یا حذف آن از ویژگی Text-Decoration استفاده می شود. مقادیری که ویژگی text-decoration-line می تواند اختیار کند در زیر آمده است؛

underline : به صورت پیش فرض این گزینه فعال می باشد
none : خط زیر لینک را حذف می کند
overline : کشیدن خط در بالای لینک
line-through : کشیدن خط روی لینک

همانطور که در جلسه ی متن ها گفته شد علاوه بر مقداری که برای text-decoration-line در ویژگی text-decoration قرار می دهیم میتوانیم نوع استایل این خط ها را با text-decoration-style تعیین کنیم.

مقادیری که text-decoration-style می پذیرد:

dashed : به صورت خط چین نمایش می دهد
dotted : به صورت نقطه چین می باشد
double : استایل text-decoration را به صورت دوخطه نشان می دهد
Wavy : خط را موج دار می کند
Solid : یک خط ممتد قرار می دهد

همچنین از text-decoration-color و text-decoration-thickness به ترتیب برای رنگ و میزان ضخامت خط استفاده می کنیم. تمامی این مقادیر را برای ویژگی text-decoration در یک خط مانند مثال زیر می نویسیم.

مثال؛

<style>
a:link{
color:green;
text-decoration: underline 2px double pink;
}
</style>

<style>
a:link{
color:green;
text-decoration:none;
}
a:visited{
color:blue;
text-decoration:none;
}
a:hover{
color:red;
text-decoration:underline;
}
a:active{
color:pink;
text-decoration:none;
}
</style>

background color

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

a:link {
color: #fff;
background-color: #ff009e;
}
a:visited {
background-color: #ff0000;
}
a:hover {
background-color: #6dcdf7;
}
a:active {
background-color: #8bc34a;
}

ساخت دکمه با CSS

برای ساخت دکمه از تگ a استفاده می شود و با استفاده از CSS استایل دهی آن انجام میی گیرد. در ابتدا باید یک لینک قرار دهیم. بعد با استفاده از a:link , a:visited مشخص می کنیم که تگ a در ابتدا و در حالت بازدید چه حالتی داشته باشد. سپس با ویژگی های a:hover, a:active حالت هاور آن و زمانی که فعال می شود را مشخص می کنیم.

مثال زیر نمونه ای از ساخت دکمه است؛

<a href=”http://google.com”>کلیک کنید</a>
<style>
a:link, a:visited{
color:green;
text-decoration:none;
background-color:#5db616;
color:#fff;
padding: 14px 25px;
text-align: center;
border-radius:10px;
}
a:hover{
text-decoration:underline;
background-color:#00b185;
color:#000;
}
</style>

چند مثال دیگر؛

<a href=”#”>کلیک کنید</a>
<style>
body {
margin: 23px;
}
a:link {
color: white;
background-color: #ffab00;
font-size: 23px;
padding: 6px;
text-decoration: none;
border-radius: 10px 0;
transition: 0.5s;
}
a:visited {
color: #324c58;
background-color: #04d1ff;
}
a:hover {
color: #fffefe;
background-color: #ea8a1b;
border-radius: 0px 10px;
border: 2px solid #ffab00;
}
a:active {
color:#000;
background-color: #fff;
}
</style>

مثال؛

<a href=”https://ofoghweb.com”>کلیک کنید</a>
<style>
body {
margin: 40px;
}
a {
color: #fff;
background-color: #19b2d0;
padding: 8px 39px;
font-size: larger;
border-radius: 40px;
transition: 0.5s;
}

a:hover {
background-color: #c8d019;
padding: 13px 45px;
}
</style>

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

😊✌از بقیه  جلسات آموزش CSS جا نمونید.✌😊