آموزش CSS - لینک ها

با استفاده از CSS میتوانیم ویژگی های مختلف یک لینک راتنظیم کنید. حالت هایی که یک لینک میتواند داشته باشد:

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

معمولا، تمامی این ویژگی ها در قسمت هدر سند HTML قرار می گیرند.

به یاد داشته باشید که a:hover باید بعد از a:link و a:visited در تعریف CSS قرار گیرد تا موثر باشد. همچنین a:active باید بعد از a:hover در تعریف CSS قرار گیرد، به شکل زیر:

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

تنظیم رنگ لینک ها (Links)

مثال زیر نحوه تنظیم رنگ لینک را نشان می‌دهد.

<html>
   <head>
      <style type = "text/css">
         a:link {color:#000000}
     </style>
   </head>

   <body>
      <a href = "">Link</a>
   </body>
</html>

مثال بالا(Link) رنگ لینک مربوطه را به سیاه تغییر می دهد.

تنظیم رنگ لینک های بازدید شده (Visited Links)

مثال زیر نحوه تنظیم رنگ لینک های بازدید شده را نشان می‌دهد.

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

   <body>
      <a href = ""> link</a> 
   </body>
</html>

در این مثال وقتی که یکبار که شما روی این لینک کلیک می‌کنید، رنگ آن به سبز تغییر می‌کند.

تغییر رنگ لینک ها وقتی ماوس بر روی آن قرار می‌گیرد (Mouse is Over)

مثال زیر نحوه تغییر رنگ لینک ها را نشان می‌دهد که زمانی که ماوس بر روی آن قرار می‌گیرد، رنگ آن تغییر کند.

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

   <body>
      <a href = "">Link</a>
   </body>
</html>

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

تغییر رنگ لینک های فعال (Active Links)

مثال زیر نحوه تغییر رنگ پیوندهای فعال را نشان می‌دهد.

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

   <body>
      <a href = "">Link</a>
   </body>
</html>

در مثال بالا زمانی که کاربر روی آن کلیک کند، رنگ آن به صورت صورتی (pink) تغییر می‌کند.

تصاویر - درس قبلی

درس بعدی - جداول