می توان لینک ها را به شیوه های مختلف سبک دهی (بندی)کرد. لینک ها را می توان با هر خاصیت CSS ی سبک دهی کرد از جمله ی آن می توان رنگ، نوع فونت و پس زمینه را نام برد.

a {
color: #FF0000;
}

به علاوه این امکان وجود دارد که لینک ها را بسته به state (حالتی) که در آن قرار دارند، به گونه ای متفاوت سبک دهی کرد.

چهار حالت مختلف برای لینک ها

  • ink – لینکی معمولی که هنوز مورد بازدید قرار نگرفته
  • avisited – لینکی که کاربر از آن بازدید کرده
  • ahover – حالتی که در آن مکان نمای موس روی لینک قرار گرفته
  • aactive – در این حالت کاربر روی لینک مورد نظر کلیک کرده
    `
/* unvisited link */

a:link {
color: #FF0000;
}

/* visited link */

a:visited {
color: #00FF00;
}

/* mouse over link */

a:hover {
color: #FF00FF;
}

/* selected link */

a:active {
color: #0000FF;
}

سبک های معمول لینک

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

افزودن جلوه های بصری به لینک ها ( Text decoration )

خاصیت text-decoration غالبا به منظور حذف زیرخط ها ( underline ) از لینک ها مورد استفاده قرارمی گیرد.

خاصیت background-color رنگ پس زمینه ی لینک ها را تعیین می کند.

a:link {
text-decoration:none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}
 
a:link {
background-color: #B2FF99;
}

a:visited {
background-color: #FFFF85;
}

a:hover {
background-color: #FF704D;
}

a:active {
background-color: #FF704D;
}

منبع: w3school