لینک CSS
با استفاده از CSS، می‌توان استایل‌های مختلف لینک را به روش‌های مختلف تنظیم کرد.
لینک متنی لینک متنی دکمه لینک دکمه لینکتنظیم استایل لینک
لینک می‌تواند از هر ویژگی CSS (مثلاً colorوfont-familyوbackground و غیره) برای تنظیم استایل استفاده کنید.
مثال
a {
color: hotpink;
}
علاوه بر این، می‌توانید استایل‌های مختلف لینک را بر اساس حالت آن تنظیم کنید.
چهار حالت لینک عبارتند از:
a:link- لینک معمولی، که بازدید نشده استa:visited- لینک که بازدید شده استa:hover- هنگامی که کاربر ماوس را بر روی لینک قرار می‌دهدa:active- هنگامی که لینک کلیک می‌شود
مثال
/* لینک که بازدید نشده است */
a:link {
color: red;
}
/* لینک که بازدید شده است */
a:visited {
color: green;
}
/* هنگامی که ماوس بر روی لینک قرار دارد */
a:hover {
color: hotpink;
}
/* لینک انتخاب شده */
a:active {
color: blue;
}
اگر برای چندین حالت لینک، استایل‌های مختلف تنظیم کنید، باید از قوانین مرتبه‌بندی زیر پیروی کنید:
- a:hover باید پس از a:link و a:visited باشد
- a:active باید پس از a:hover باشد
زینت متن
text-decoration این ویژگی عمدتاً برای حذف خط زیر لینک‌ها استفاده می‌شود:
مثال
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
رنگ پس‌زمینه
background-color ویژگی‌ها می‌توانند برای مشخص کردن رنگ پس‌زمینه لینک استفاده شوند:
مثال
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
دکمه لینک
این مثال یک مثال پیشرفته‌تر را نشان می‌دهد که در آن ما چندین ویژگی CSS را ترکیب کرده‌ایم تا لینک‌ها را به عنوان قاب/دکمه نمایش دهیم:
مثال
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;
}
مثال‌های بیشتر
- استایل‌های مختلف برای لینک‌های فراتر
- این مثال نشان می‌دهد که چگونه می‌توان به لینک‌های فراتر از استایل‌های پیش‌فرض اضافه کرد.
- پیشرفته - ایجاد دکمه‌های لینک با حاشیه
- این یک مثال دیگر از ایجاد قاب‌های لینک/دکمه است.
- تغییر ماوس‌پیکر
- ویژگی cursor مشخص می‌کند که چه نوع ماوس‌پیکری باید نمایش داده شود. این مثال انواع مختلف ماوس‌پیکرها را نشان می‌دهد (برای لینک‌ها مفید است).
