فرمت دهی لینک ها در CSS

چاپ

لینک ها در CSS

Wiki

با توجه به اینکه لینک ها در چه حالتی هستند، می توانید هر Styleی را که مورد نظرتان است به آنها اختصاص دهید.

لینکها چهار وضعیت دارند:

  1. a:link - لینک در حالت معمولی است یعنی مشاهده نشده است.
  2. a:visited - لینک توسط کاربر مشاهده شده است.
  3. a:hover - زمانی که موس کاربر روی لینک قرار دارد.
  4. a:active - لحظه ای که کاربر روی لینک مورد نظر کلیک می کند.

مثال (فرمت دهی لینک ها در CSS)

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */
خودتان امتحان کنید »

توجه: برای تنظیم Styleهای یک لینک به موارد زیر توجه فرمایید:

  1. a:hover باید بعد از a:link و a:visited آورده شود.
  2. a:active باید بعد از a:hover آورده شود.

Styleهای متداول لینک

Wiki

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

اجازه بدهید Styleهای متداول دیگر برای لینک را ذکر کنیم:

Styleهای متداول لینک - آذین بندی متن (Decoration)

خصوصیت text-decoration اکثراً جهت حذف کردن underline از لینک ها استفاده می شود:

مثال (فرمت دهی لینک ها در CSS)

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
خودتان امتحان کنید »

Styleهای متداول لینک - رنگ پس زمینه (Background)

Wiki

خصوصیت background-color برای مشخص کردن رنگ پس زمینه لینک ها استفاده می شود:

مثال (فرمت دهی لینک ها در CSS)

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
خودتان امتحان کنید »

مثال

مثال - خودتان امتحان کنید

Wiki

اضافه کردن Styleهای مختلف به لینک ها
این مثال نشان می دهد که چگونه Styleهای مختلف را به لینک ها اضافه کنیم.

پیشرفته - عمل کردن لینک مانند یک دکمه
این مثال نشان می دهد که چگونه با ترکیب چندین ویژگی در CSS لینک ها را داخل یک جعبه نشان دهیم.