استایل Link در CSS

سبک دهی به لینک ها

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

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

a {
color: #FF0000;
}

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

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

• link: لینکی معمولی که هنوز مورد بازدید قرار نگرفته است.
• 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) از لینک ها مورد استفاده قرارمی گیرد.

a:link {
text-decoration:none;
}

a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}

رنگ پس زمینه (background color)

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

a:link {
background-color: #B2FF99;
}

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

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

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

در بخش بعدی از سری آموزش استایل css ، طبق طبقه بندی ارایه شده برای آموزش به استایل دهی لیست ها  در css میپردازیم . پس با ما همراه باشید .