سی ای ایس لنک
- صفحه قبلی سی ای ایس آئیکون
- صفحه بعدی سی ای ایس فہرست
با استفاده از 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 نوع کورسور مورد انتظار را مشخص می‌کند. این مثال نوع‌های مختلف کورسورها را نشان می‌دهد (برای لینک‌ها مفید است).
- صفحه قبلی سی ای ایس آئیکون
- صفحه بعدی سی ای ایس فہرست
