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

سلام دوستان، در این آموزش قصد داریم استایل دهی به تگ <a> در حالت های مختلف را به شما آموزش دهیم. آموزش هایی که در این مقاله ارائه می شوند عبارتند از:

چطور با استفاده از ویژگی :link برای لینک هایی که هنوز باز نشده اند استایل تعریف کنید.
چطور با استفاده از ویژگی :visited برای لینک هایی که باز شده اند استایل تعریف کنید.
چطور با استفاده از ویژگی :hover برای هنگامی که موس روی لینک قرار می گیرد استایل تعریف کنید.
چطور با استفاده از ویژگی :active برای لینکی که در حال حاضر کاربر در حال کلیک کردن روی آن است، استایل تعریف کنید.

این ویژگی ها را معمولا درون تگ <style> که خود درون تگ <head> قرار دارد، استفاده می کنند. فقط نکته ای که در استفاده از این ویژگی ها باید مد نظر داشته باشید این است که a:hover برای اینکه موثر باشد باید بعد از a:link و a:visited بیاید. همچنین توجه داشته باشید که a:active حتما باید بعد از a:hover استفاده شود. ترتیب استفاده از این ویژگی ها را می توانید در مثال زیر مشاهده کنید:

<style type="text/css">
   a:link {color: #000000;}
   a:visited {color: #006600;}
   a:hover {color: #FFCC00;}
   a:active {color: #FF00CC;}
</style>

در ادامه با ما همراه باشید تا با مثال هایی کاربردی نحوه استایل دهی به لینک ها را در حالت های مختلف به شما یاد دهیم.

استایل دهی به لینک در حالت عادی

در مثال زیر شما می توانید نحوه استایل دهی به تگ <a> در حالت عادی یعنی زمانی که هنوز روی آن کلیک نشده است را بینید.

<html>
   <head>
      <style type="text/css">
         a:link {color:#4834d4;}
     </style>
   </head>
   <body>
      <a href="#">Link</a>
   </body>
</html>

حالا نتیجه کدهای بالا را ببینید:

2. استایل دهی به لینک های دیده شده

در مثال بعدی به شما یاد می دهیم که چطور با استفاده از ویژگی :visited لینک هایی که حداقل یک بار دیده شده اند را استایل دهی کرده تا بدین صورت آن ها را از سایر لینک ها متمایز کنید.

<html>
   <head>
      <style type="text/css">
         a:visited {color: #006600;}
      </style>
   </head>
   <body>
      <a href="#"> link</a> 
   </body>
</html>

نتیجه کد بالا به صورت زیر خواهد بود:

3. استایل دهی به لینک ها برای وقتی که موس روی آن ها قرار می گیرد

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

<html>
   <head>
      <style type="text/css">
         a:hover {color: #FFCC00;}
      </style>
   </head>
   <body>
      <a href="#">Link</a>
   </body>
</html>

خب حالا نتیجه را ببینید:

4. استایل دهی به لینک ها برای حالت فعال

لینک های فعال لینک هایی هستند که ما در حال حاضر داریم روی آن ها کلیک می کنیم و یا اینکه کلیک کرده و در حال مشاهده همان لینک هستیم. به مثال زیر توجه کنید:

<html>
   <head>
      <style type="text/css">
         a:active {color: #FF00CC;}
      </style>
   </head>
   <body>
      <a href="#">Link</a>
   </body>
</html>

نتیجه کد بالا را مشاهده کنید:

خب به پایان این آموزش رسیدیم. امیدوارم که این مقاله مفید واقع شده باشد.

پکیج های آموزشی جدید

ساخت فروشگاه دیجی‌کالا با ASP.Net Core

فصلِ: 8 , تعداد قسمت ها: 357 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش CSS آموزش JQUERY آموزش ASP.NET آموزش ASP.NET MVC آموزش ساخت فروشگاه اینترنتی

این فصل در یک نگاه:

…

توضیحات کلی مجموعه: در این مجموعه قصد داریم تا فروشگاه اینترنتی دیجی کالا رو با Asp.Net Core3 پیاده سازی کنیم. ابتدا طراحی قالب دیجی کالا رو به صورت کامل انجام خواهیم داد. در مرحله میریم …

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز

سایر

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

استایل دهی به لینک در حالت عادی

2. استایل دهی به لینک های دیده شده

3. استایل دهی به لینک ها برای وقتی که موس روی آن ها قرار می گیرد

4. استایل دهی به لینک ها برای حالت فعال

آیا نیاز به مدرک هم دارید؟