استایل دهی به لینک در CSS ساده است، در این مقاله نحوه اعمال استایل در وضعیت های مختلف به Link در سی اس اس را به طور کامل به شما عزیزان آموزش می دهیم، همراه داتیس نتورک باشید.
آموزش استایل دهی به لینک در CSS
با استفاده از CSS میتوان Link ها را به روش های مختلفی استایل دهی کرد.
در آموزش های قبل دیدیم برای اعمال خاصیت و استایل های CSS بر روی تگ های HTML از سلکتور ها استفاده می کردیم.
به علاوه، لینک ها بسته به وضیعت های مختلفی که در آن قرار می گیرد می تواند فرمت دهی شود.
چهار وضیعتی که لینک ها در آن قرار می گیرند عبارت است از:
- a:link – یک لینک عادی که وی آن کلیک نشده است.
- a:visited – این وضعیت از اسمش مشخص است، یک لینکی که کاربر و یا خواننده وب روی آن کلیک کرده و آن را بازدید کرده است.
- a:hover – یک لینکی که کاربر بر روی آن ماوس را نگه می دارد.
- a:active – یک لینکی که کاربر در لحظه بر روی آن کلیک می کند.
مثال هر چهار وضعیت لینک در CSS:
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
<h4>CSS Links</h4>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
</body>
</html>
در زمان تنظیم استایل برای وضعیت های مختلف یک لینک در CSS ، رعایت ترتیب اهمیت دارد :
- a:hover باید بعد از a:link و a:visited قرار بگیرد.
- a:active باید بعد از a:hover قرار بگیرد.
استفاده از CSS برای ساخت یک دکمه ی Link
با ترکیب چندین صفت از زبان CSS میتوان یک لینک را همچون یک دکمه طراحی کرد. نمونه مثال زیر نحوه ی ایجاد یک دکمه ی لینک را نشان میدهد :
مثال:
<!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="https://www.datisnetwork.com/network/css" target="_blank">This is a link</a>
</body>
</html>
امیدوارم این مقاله مفید بوده باشد.
داتیس نتورک را در شبکه های اجتماعی دنبال کنید.
