پیوند در CSS
پیوند، کاربر را به صفحات مختلف انتقال می دهد. با CSS می توان پیوند را شبیه دکمه کرد.
<a href="/" class="btn-1">btn-1</a>
<a href="/" class="btn-2">btn-2</a>برای استایل دهی به لینک، می توان:
- ویژگی text-decoration: برداشتن خط زیر لینک
- ویژگی cursor: تغییر شکل ظاهری ماوس
- شبه کلاس a:link: زمانی که یک لینک مشاهده نشده است.
- شبه کلاس a:visited: زمانی که یک لینک مشاهده شده است.
- شبه کلاس a:hover: زمانی که نشانگر ماوس روی لینک قرار می گیرد.
- شبه کلاس a:active: زمانی که لینک در حال کلیک شدن است.
حذف خط زیر تگ a در CSS
برای برداشتن خط زیر تگ a، از ویژگی text-decoration با مقدار none استفاده می کنیم.
text-decoration: none;نکته: برای آشنایی با این ویژگی، به آموزش text-decoration مراجعه کنید.
ویژگی cursor در CSS
ویژگی cursor، می تواند شکل ظاهری ماوس را تغییر دهد. مقدارهای مهم آن:
- pointer: ماوس به شکل دست در حال کلیک تبدیل می شود.
- auto: حالت عادی ماوس. (پیش فرض)
cursor: alias;
cursor: all-scroll;
cursor: auto;
cursor: cell;
cursor: col-resize;
cursor: context-menu;
cursor: copy;
cursor: crosshair;
cursor: default;
cursor: e-resize;
cursor: ew-resize;
cursor: grab;
cursor: grabbing;
cursor: help;
cursor: move;
cursor: n-resize;
cursor: ne-resize;
cursor: nesw-resize;
cursor: ns-resize;
cursor: nw-resize;
cursor: nwse-resize;
cursor: no-drop;
cursor: none;
cursor: not-allowed;
cursor: pointer;
cursor: progress;
cursor: row-resize;
cursor: s-resize;
cursor: se-resize;
cursor: sw-resize;
cursor: text;
cursor: w-resize;
cursor: wait;
cursor: zoom-in;
cursor: zoom-out;a:link در CSS
شبه کلاس a:link، استایل پیوند در حالت مشاهده نشده، را نمایش می دهد. به صورت پیش فرض در این حالت لینک به رنگ آبی است.
a:link {
color: green;
}نکته: برای اطلاعات بیشتر، به آموزش شبه کلاس CSS مراجعه کنید.
a:visited در CSS
شبه کلاس a:visited، استایل پیوند در حالت مشاهده شده، را نمایش می دهد. به صورت پیش فرض در این حالت لینک به رنگ بنفش است.
a:visited {
color: red;
}a:hover در CSS
شبه کلاس a:hover، استایل پیوند در حالتی که نشاگر ماوس روی آن قرار بگیرد، است.
نکته: شبه کلاس hover، حتما باید بعد از شبه کلاس link و active نوشته شود. در غیر اینصورت hover اجرا نمی شود.
a:hover {
color: purple;
}a:active در CSS
شبه کلاس a:active، استایل پیوند در حالتی که ماوس در حال کلیک کردن روی آن باشد، است.
نکته: شبه کلاس active، حتما باید بعد از شبه کلاس hover نوشته شود. در غیر اینصورت active اجرا نمی شود.
a:active {
color: green;
}ایجاد دکمه لینک در CSS
برای زیباتر شدن لینک، می توان آن را به شکل دکمه نمایش داد. در کد زیر، با کمک ویژگی هایی که تا به حال یاد گرفته ایم، لینک را تبدیل به دکمه کرده ایم.
a {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}خلاصه درس
در این درس با لینک ها در CSS و شبه کلاس های:
- a:link
- a:visited
- a:hover
- a:active
آشنا شدیم.
و همچنین با
- ویژگی text-decoration
- ویژگی cursor
آشنا شدیم و توانستیم برای زیبا کردن یک لینک، آن را به صورت یک دکمه نمایش دهیم.
احسان اسلامی
