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

می توان برای هرشکل از لینک ها رنگ یا تنظیمات خاصی را تعیین کرد. در ادامه به توضیح حالات زیر می پردازیم:

  • a:link
  • a:visited
  • a:hover
  • a:focus
  • a:active

a:link

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

 

مثالی از استفاده ویژگی link در css برا لینک ها

خروجی

a:visited

این انتخاب کننده لینک هایی را انتخاب می کند که کاربر پیش از این، آن آدرس هایی را که لینک موردنظر در صفت href دارد را دیده باشد (منظور url موردنظر است). این گزینه را با a:active اشتباه نگیرید.مثال:

 

مثالی از استفاده ویژگی visited در لینک ها

خروجی

a:hover

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

 

مثالی از استقاده ویژگی focus در css برای لینک ها

خروجی

a:focus

این انتخاب کننده نیز مانند a:hover می باشد با این تفاوت که انتخاب کننده ی پیشین تنها مخصوص نشانگر موس بود اما ویژگی های تنظیم شده توسط این انتخاب کننده زمانی اعمال می شوند که کاربر با چیزی غیر از نشانگر موس مثل کلید های کیبورد (با استفاده از کلید تب tab) بر روی لینک مورد نظر برود. مثال:

 

مثالی از استقاده ویژگی focus در css برای لینک ها

خروجی

a:active

این انتخاب کننده نیز لینک هایی را انتخاب می کند که کاربر قبلا آن ها را کلیک کرده باشد. لینک های انتخاب شده. مثال:

 

مثالی از استفاده ویژگی active در css برای لینک ها