لینک‌ها برای ارتباط و جهت‌دهی بین یک صفحه وب و صفحه وب دیگر استفاده می‌شوند. این ارتباطات به کاربران امکان می‌دهند تا به راحتی بین صفحات جابجا شوند و اطلاعات مورد نیاز خود را پیدا کنند. به عنوان مثال، با کلیک کردن بر روی یک لینک، کاربر می‌تواند به یک صفحه جدید هدایت شود یا به مکان مشخصی در صفحه فعلی بروید.
وضعیت‌های لینک (Link States)
وضعیت‌های لینک به معنای درک وضعیت‌های مختلفی است که لینک‌ها ممکن است در آنها وجود داشته باشند. از روش‌های مختلفی برای استایل دادن به این وضعیت‌ها استفاده می‌شود که شامل شبیه‌سازی وضعیت‌های مختلف لینک با استفاده از پیش‌پردازنده‌ها (pseudo-classes) می‌شود.
-
Link (پیوند) – یک لینک استایل شده با پیش‌پردازنده‌ی
:linkکه مقصدی دارد (به جای اینکه فقط یک لینک نام‌گذاری شده باشد). -
Visited (بازدید شده) – یک لینک با پیش‌پردازنده
:visitedکه نشان دهنده این است که قبلاً بازدید شده است (در تاریخچه مرورگر وجود دارد). -
Hover (هاور) – یک لینک استایل شده با پیش‌پردازنده
:hoverکه توسط نشانگر ماوس کاربر بر روی آن حرکت می‌کند. -
Focus (تمرکز) – یک لینک تمرکز شده که با پیش‌پردازنده
:focusاستایل شده است. این می‌تواند به طور پویا با استفاده ازHTMLElement.focus()تمرکز شود، یا می‌تواند توسط کاربر با استفاده از کلید Tab یا هر میانبر صفحه کلید مشابه به آن منتقل شود. -
Active (فعال) – یک لینک با پیش‌پردازنده
:activeکه زمانی که فعال می‌شود، مانند زمانی که کلیک می‌شود، استایل شده است.
استفاده از این وضعیت‌های مختلف لینک‌ها به شما امکان می‌دهد تا تجربه کاربری بهتری را فراهم کنید و بازدیدکنندگان را درک و جذب کنید. به عنوان مثال، با تغییر رنگ یک لینک هنگامی که ماوس روی آن حرکت می‌کند، کاربران می‌توانند به راحتی لینک‌های قابل کلیک را تشخیص دهند و به آنها کلیک کنند.
استایل‌های پیش‌فرض لینک‌ها (Default Styles of Links)
استایل پیش‌فرض لینک‌ها:
-
لینک‌ها زیرخط دار هستند: به طور پیش‌فرض، لینک‌ها زیرخط دار هستند تا به کاربران این اطمینان داده شود که آنها را می‌توانند کلیک کنند.
-
لینک‌های بازدید نشده رنگ آبی هستند: وقتی کاربر یک لینک را نخستین بار مشاهده می‌کند و به آن کلیک نمی‌کند، رنگ لینک آبی است.
-
لینک‌های بازدید شده رنگ بنفش هستند: بعد از اینکه کاربر یک لینک را مشاهده و به آن کلیک می‌کند، لینک در زمان‌های بعدی با رنگ بنفش نمایش داده می‌شود.
-
نشانگر ماوس به آیکون دست کوچک تغییر می‌کند: وقتی که کاربر ماوس را بر روی یک لینک حرکت می‌دهد، نشانگر ماوس به آیکون دست کوچک تغییر می‌کند، که نشان از این دارد که لینک قابل کلیک است.
-
لینک‌های تمرکز شده با یک خط مشخص معرفی می‌شوند: وقتی که کاربر به یک لینک تمرکز می‌کند (به آن فوکوس می‌شود)، به صورت پیش‌فرض یک خط مشخص معرفی می‌شود که لینک را برجسته می‌کند.
-
لینک‌های فعال با رنگ قرمز استایل شده‌اند: زمانی که کاربر روی یک لینک کلیک می‌کند، لینک با رنگ قرمز استایل می‌شود. می‌توانید این رفتار را با نگه داشتن دکمه ماوس هنگام کلیک بر روی لینک تست کنید.
مثال ساده (Basic Example)
این نمونه CSS نشان می‌دهد که چگونه لینک‌ها در یک صفحه وب ساده استایل می‌شوند:
<html>
<head>
<style>
/* این قسمت ایجاد استایل پیش‌فرض برای لینک‌ها است */
a {
color: blue; /* تنظیم رنگ متن لینک‌ها به آبی */
text-decoration: none; /* حذف زیرخط از لینک‌ها */
}
/* این قسمت استایل لینک‌ها را وقتی کاربر روی آنها حرکت می‌دهد، تغییر می‌دهد */
a:hover {
text-decoration: underline; /* زیرخط اضافه کردن به لینک‌ها هنگام روی آنها حرکت می‌دهیم */
}
</style>
</head>
<body>
<a href="https://www.underdevelops.com/index.htm">Simple Link</a>
</body>
</html>
این کد CSS و HTML یک لینک ساده به رنگ آبی نمایش می‌دهد. وقتی کاربر روی لینک حرکت می‌دهد (hover)، زیرخط به لینک اضافه می‌شود.
برای روشن‌تر شدن، اطمینان حاصل کنید که لینک‌ها زیرخط دار باشند و سایر موارد دیگر زیرخط دار نباشند.
اگر نمی‌خواهید لینک‌ها زیرخط داشته باشند، از تکنیک‌های دیگر برای برجسته کردن آنها استفاده کنید. همچنین می‌توانید افکت‌های hover و focus را به لینک‌ها اضافه کنید و استایل منحصر به فردی را زمانی که کاربران بر روی لینک‌ها کلیک می‌کنند، اعمال کنید.
ویژگی‌های CSS زیر می‌توانند برای اصلاح یا غیرفعال کردن استایل‌های پیش‌فرض استفاده شوند:
- Color: برای تنظیم رنگ متن.
- Cursor: برای تنظیم نوع نشانگر ماوس.
- Outline: برای تنظیم یک خط حاشیه دور متن.
طراحی‌دهی به برخی از لینک‌ها (Stlying Some Links)
این کد HTML و CSS مربوط به استایل دهی به لینک‌ها در وضعیت‌های مختلف است:
<html>
<head>
<style>
/* این قسمت استایل‌های عمومی برای صفحه است */
body {
width: 300px; /* عرض صفحه */
margin: 0 auto; /* قرار گرفتن در وسط صفحه */
font-size: 1.2rem; /* اندازه فونت */
font-family: sans-serif; /* نوع فونت */
}
/* استایل متن‌ها */
p {
line-height: 1.4; /* ارتفاع خط */
}
/* استایل پیش‌فرض برای لینک‌ها */
a {
outline-color: transparent; /* حذف حاشیه پیش‌فرض لینک‌ها */
}
/* استایل لینک‌های بدون بازدید */
a:link {
color: #007bff; /* رنگ لینک‌های بدون بازدید */
}
/* استایل لینک‌های بازدید شده */
a:visited {
color: #800080; /* رنگ لینک‌های بازدید شده */
}
/* استایل لینک‌های متمرکز شده */
a:focus {
text-decoration: none; /* حذف زیرخط از لینک */
background: #bae498; /* اضافه کردن پس‌زمینه به لینک */
}
/* استایل لینک‌های با حرکت موس روی آنها */
a:hover {
text-decoration: none; /* حذف زیرخط از لینک */
background: #cdfeaa; /* اضافه کردن پس‌زمینه به لینک */
}
/* استایل لینک‌هایی که فعال شده‌اند */
a:active {
background: #007bff; /* اضافه کردن پس‌زمینه به لینک */
color: #cdfeaa; /* تغییر رنگ متن لینک */
}
</style>
</head>
<body>
<p>
Follow us on social media:
<a href="https://www.youtube.com/" target="_blank">YouTube</a>,
<a href="https://www.facebook.com/" target="_blank">Facebook</a>,
<a href="https://www.instagram.com/" target="_blank">Instagram</a>, and
<a href="https://twitter.com/" target="_blank">Twitter</a>.
</p>
</body>
</html>
این کد به شما اجازه می‌دهد تا لینک‌های خود را با استفاده از CSS در وضعیت‌های مختلف استایل دهید، از جمله وضعیت‌های بدون بازدید، بازدید شده، متمرکز شده، حرکت موس روی آنها و فعال شده.
اضافه کردن آیکون به لینک‌ها (Including icons on links)
به دلیل افزایش تجربه کاربری، انتقال نمادها یا آیکون‌ها با لینک‌ها، به خصوص لینک‌های خارجی، می‌تواند مفید باشد.
لینک‌های خارجی معمولاً با یک پیکان کوچک که از جعبه خارج می‌شود نشان داده می‌شوند، که به کاربران کمک می‌کند تا به سرعت مقصد یک لینک را تشخیص دهند.
<html>
<head>
<style>
body {
width: 80%;
margin: 0 auto;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f9f9f9;
color: #333;
}
h1 {
text-align: center;
margin-top: 30px;
}
p {
line-height: 1.6;
}
a {
color: #007bff;
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: #0056b3;
}
.links-list {
margin-top: 20px;
list-style-type: none;
padding-left: 0;
}
.links-list li {
margin-bottom: 10px;
}
.external-link-icon {
display: inline-block;
width: 16px;
height: 16px;
background: url("images/external-link.png") no-repeat;
background-size: cover;
margin-right: 5px;
vertical-align: middle;
}
</style>
</head>
<body>
<h1>Explore New Tutorial</h1>
<p>Discover a world of learning, Tutorials Point, offering diverse courses from programming to personal development.</p>
<p>Expand your knowledge, sharpen your skills, and embark on your learning journey today!</p>
<ul class="links-list">
<li>
<span class="external-link-icon"></span>
<a href="https://www.tutorialspoint.com/css/index.htm">CSS Tutorial</a>
</li>
<li>
<span class="external-link-icon"></span>
<a href="https://www.tutorialspoint.com/python/index.htm">Python Tutorial</a>
</li>
<li>
<span class="external-link-icon"></span>
<a href="https://www.tutorialspoint.com/php/index.htm">PHP Tutorial</a>
</li>
</ul>
</body>
</html>این قطعه کد HTML و CSS نحوه استفاده از آیکون‌ها را در لینک‌ها نشان می‌دهد.
در این قطعه کد، ابتدا یک صفحه HTML ساده تعریف شده است که یک عنوان، توضیحات متنی و یک لیست لینک‌ها را شامل می‌شود. در CSS مشخصات ظاهری برای عناصر HTML تعریف شده‌اند.
مهمترین نکات این‌گونه است:
-
آیکون‌های لینک خارجی از یک تصویر با ابعاد کوچک به عنوان زمینه برای یک عنصر span استفاده می‌کنند.
-
استفاده از CSS برای استایل دهی به لینک‌ها، از جمله اعمال تغییرات رنگ و حالت hover برای ایجاد انیمیشن و تغییرات ظاهری.
-
اعمال ترانزیشن برای ایجاد انیمیشن رنگی در لحظه‌ای که کاربر موس را روی لینک قرار می‌دهد.
این قطعه کد نشان می‌دهد که چگونه می‌توانید آیکون‌ها را به لینک‌ها اضافه کنید و آنها را در زمان تغییر حالت لینک به صورت دینامیک استایل دهید.
استفاده از لینک‌ها به عنوان دکمه‌ها (Links as buttons)
وقتی که لینک‌ها به عنوان دکمه‌ها استفاده می‌شوند، طراحان می‌توانند با استفاده از CSS، آنها را به اشیاء شبیه به دکمه تبدیل کنند. این کار امکان ادغام لینک‌ها با عناصر دیگر وب‌سایت را فراهم می‌کند و تجربه کاربری را بهبود می‌بخشد.
برای تبدیل لینک‌ها به شئ‌های شبیه به دکمه، می‌توان از ویژگی‌هایی مانند رنگ پس‌زمینه، پدینگ و شعاع‌گردی گوشه‌ها استفاده کرد. این ویژگی‌ها باعث می‌شوند لینک‌ها ظاهری مشابه دکمه داشته باشند و کاربران بتوانند با آنها تعامل کنند.
استفاده از لینک‌ها به عنوان دکمه‌ها می‌تواند تجربه کاربری را جذاب‌تر و راحت‌تر کند و به آنها کمک کند تا به راحتی در وب‌سایت حرکت کنند.
<html>
<head>
<style>
body,
html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
gap: 10px;
justify-content: center;
margin-top: 20px;
}
.btn-link {
flex: 1;
text-decoration: none;
outline-color: transparent;
text-align: center;
line-height: 3;
color: white;
background-color: #007bff;
border: 1px solid #007bff;
border-radius: 5px;
transition: background-color 0.3s ease;
padding: 10px 20px;
margin: 0 5px;
}
.btn-link:hover {
background-color: #0056b3;
}
.btn-link:active {
background-color: #003366;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 20px 0;
}
h1 {
margin: 0;
}
p {
margin-top: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Welcome to Demo Website</h1>
</header>
<nav class="container">
<a href="#" class="btn-link">Home</a>
<a href="#" class="btn-link">Technologies</a>
<a href="#" class="btn-link">Services</a>
<a href="#" class="btn-link">Gallery</a>
<a href="#" class="btn-link">Contact Us</a>
</nav>
<p>This is a demonstration website showcasing various features.</p>
</body>
</html>این قطعه کد HTML و CSS نشان می‌دهد که چگونه لینک‌ها به شکل دکمه‌ها استایل شده‌اند.
- در بخش CSS، ابتدا فضای بدنه و HTML را مشخص می‌کنیم و از فونت Arial یا همان سانس‌سریف استفاده می‌کنیم.
- سپس یک کلاس به نام
.containerرا تعریف می‌کنیم که ازdisplay: flexبرای قرار دادن لینک‌ها در یک ردیف استفاده می‌کند و فاصله بین اجزای فلکس را باgap: 10pxمشخص می‌کند. - کلاس
.btn-linkبا ویژگی‌های مختلفی مانندtext-decoration: none(حذف خط زیر لینک)،color: white(رنگ متن سفید)،background-color: #007bff(رنگ پس‌زمینه آبی) وborder-radius: 5px(شعاع گردی گوشه‌ها)، لینک‌ها را به شکل دکمه استایل می‌کند. - با اضافه کردن ترانزیشن
transition: background-color 0.3s ease، رنگ پس‌زمینه دکمه‌ها هنگام هاور تغییر می‌کند. - کلاس
.btn-link:hoverتغییراتی را بر روی دکمه‌ها هنگام هاور موس اعمال می‌کند. - کلاس
.btn-link:activeتغییراتی را هنگامی که دکمه‌ها فشار داده شود اعمال می‌کند. - در بخش HTML، یک هدر با عنوان “Welcome to Demo Website” و یک نوار ناوبری با لینک‌هایی به شکل دکمه به کاربر نشان داده می‌شود.
- یک پاراگراف اطلاعاتی درباره وب‌سایت نمونه نیز قرار داده شده است.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام