آموزش استایل دهی به لینک ها با css

در این پست قصد داریم که به شما آموزش استایل دهی به لینک ها را با استفاده از  css آموزش بدهیم.همانطور که می دانید وقتی که شما لینکی را با استفاده از html ایجاد می کنید معمولا یک خط زیر آن ظاهر می شود و به رنگ آبی در می آید.برای تغییر این وضعیت می توانید ادامه ی مطلب را بخوانید.

شما برای استایل دهی به لینک های می توانید از تمام خاصیت های css از جمله رنگ متن، رنگ پس زمینه و ... استفاده کنید.پس ما هیچ محدودیتی در استایل دهی یه لینک ها نداریم.

اگر شما بخواهید که به تمام لینک های موجود در صفحه یک استایل مشخص بدهید باید از کد زیر استفاده کنید.

a

{

   خاصیت های مورد نظر

}

اما ما میخواهیم که کنترل بیشتری برروی لینک های خود داشته باشیم و مثلا تعیین کنیم که هنگام عبور ماوس از روی لینک ها رنگ آن تغییر کند و یا لینکی که قبلا آن را باز کرده ایم با یک رنگ متمایز نشان دهیم برای اینکار از کد های زیر استفاده می کنیم:

1. a:link
2. a:visited
3. a:hover
4. a:active

شما برای هر کدام از گزینه های بالا می توانید از تمام خواص css استفاده کنید.

اما هر کدام از انتخابگر های ما چه کاری انجام می دهند؟

a:link : استایل های لینک را در حالت عادی نشان می دهد.

a:visited : استایل های لینک را در حالتی که از آن بازدید شده نشان می دهد.

a:hover : استایل های لینک را در حالتی که ماوس بر روی آن است نشان می دهد.

a:active : استایل های لینک را در حالتی که کاربر در حا کلیک کردن است را نشان می دهد.

برای درک بهتر شما از نحوه ی استفاده ار کد های بالا به این مثال دقت کنید:

a:link

{

   color:black;

}

a:visited

{

   color:black;

}

a:hover

{

   color:red;

}

a:active

{

   color:drakred;

}

با قرار دادن کد های بالا در صفحه ی وب لینک ها در حالت عادی و بازدید شده در رنگ سیاه دیده می شوند و هنگامی که ماوس بر روی آن ها می رود به رنگ قرمز در می آیند و در هنگام کلیک کردن هم به رنگ قرمز تیره تبدیل می شوند.

اما مشکل بعدی ما آن است که وقتی لینکی را تعریف می کنیم یک زیرخط به آن اضافه می شود که معمولا مزاحم است و باید از شر آن خلاص شد!

آموزش از بین بردن خط زیر لینک ها

برای اینکار کافی است که از خاصیت text-decoration استفاده کنیم و مقدار آن را برابر none قرار دهیم.

پس ما کد های بالا را اینگونه تصحیح می کنیم:

a:link

{

   color:black;

   text-decoration:none;

}

a:visited

{

   color:black;

   text-decoration:none;

}

a:hover

{

   color:red;

   text-decoration:none;

}

a:active

{

   color:drakred;

   text-decoration:none;

}

هم چنین برای خلاصه و بهنیه کردن کد ما می توانیم برای چند انتخابگر خودمان تنها یک بار کد بنویسیم:

a:link , a:visited

{

   color:black;

   text-decoration:none;

}

a:hover

{

   color:red;

   text-decoration:none;

}

a:active

{

   color:drakred;

   text-decoration:none;

}

نکته ی خیلی خیلی مهم: دقت کنید شما حتما و حتما باید به ترتیب بالا انتخابگر ها را قرار دهید. یعنی ابتدا a:link سپس a:visited و بعد از آن a:hover و در پایان نیز a:active را بنویسید.