لینک ها می توانند توسط هر کدام از ویژگیهای سی اس اس مثل color,font-family,background و غیره قالب بندی شوند

ما می توانیم پیوندها را در هر کدام از شرایط زیر قالب بندی کنیم :

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

 

مثال :

a:link {color:#FF0000;}      /* پیوند کلیک نشده */
a:visited {color:#00FF00;}  /* پیوند بعد از کلیک شدن */
a:hover {color:#FF00FF;}  /* پیوند زمانیکه ماوس روی آن است */
a:active {color:#0000FF;}  /*پیوند وقتی اشاره گر روی ان است و دکمه ماوس فشرده است */

خط اول :

رنگ متن پیوند را تا زمانیکه هنوز روی پیوند کلیک نشده مشخص می کند

خط دوم :

رنگ متن پیوند را بعد از اینکه روی پیوند کلیک شد مشخص می کند

خط سوم :

رنگ متن پیوند را زمانیکه اشاره گر ماوس بدون فشردن هیچ دکمه ای اط ماوس روی پیوند قرار دارد مشخص می کند

خط چهارم :

رنگ متن پیوند را زمانیکه اشاره گر روی متن پیوند قرار دارد و دکمه ماوس بصورت فشرده است مشخص می کند




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

 

 





زمان نوشتن دستورات قالب بندی  پیوند باید ترتیب زیر را رعایت کنید

ابتدا قالب بندی a:link

سپس قالب بندی a:visited

سپس قالب بندی a:hover

و در نهایت قالب بندیa:active

را مشخص نمائید


مثال 2:

اگر می خواهید هیچ گاه پیوند شما حالت زیر خط نداشته باشد از ویژگی text-decoration استفاده نمائید

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

 

در مثال بالا مشخص شده است متن پیوند در شرایطی که هنوز روی آن کلیک نشده یا بعد از اینکه روی ان کلیک شد خط زیر نداشته باشد

 

و در خط سوم و چهارم مشخص شده زمانیکه ماوس بدون فشردن دکمه روی پیوند قرار گرفته و یا در زمانیکه ماوس روی پیوند قرار گرفته و دکمه ماوس فشرده است متن پیوند زیر خط دار شود .

 





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






مثال 3:

شما می توانید رنگ زمینه پیوند را در شرایط مختلف آن مشخص نمائید

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}





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






و شما می توانید هر نوع ویژگی د یگری که می خواهید در قالب بندی پیوندها  استفاده نمائید