آشنایی با طراحی سایت - استایل دهی به لینک ها در CSS

**8908190** · 13 تیر، ۱۳۹۷

ضمن عرض سلام و احترام خدمت تمامی کاربران فروم ایران سی اف سی

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

در این آموزش به نحوه استایل لینک ها در CSS می پردازیم.

چطور با استفاده از ویژگی :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>

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

منبع:

مقاله آموزش CSS و CSS3 جهت ورود به بازار کار

ورود

آشنایی با طراحی سایت - استایل دهی به لینک ها در CSS

ارسال‌های توصیه شده

8908190

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

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

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

مقاله آموزش CSS و CSS3 جهت ورود به بازار کار

لینک به دیدگاه

به اشتراک گذاری در سایت های دیگر

بیشترین ارسال‌ها در این موضوع

روزهای محبوب

بیشترین ارسال‌ها در این موضوع

روزهای محبوب

ارسال‌های محبوب

8908190

به گفتگو بپیوندید

کاربران آنلاین در این صفحه 0 کاربر

مطالب مشابه

افزونه بهینه سازی و افزایش سرعت سایت WP Rocket

افزونه طراحی مستندات BetterDocs Pro

افزونه طراحی مستندات BetterDocs Pro

افزونه بهینه سازی و افزایش سرعت سایت WP Rocket

دعوت به همکاری و کسب درآمد با سایت

فهرست بخش ها

فعالیت ها

فروشگاه

پشتیبانی

اطلاعات مهم