جلسه ۳۰.۵ – استایل Link در CSS

با سلام به شما همراهان عزیز میزفا، در ادامه آموزش CSS به استایل دهی لینک ها در CSS میرسیم . برای یادگیری آنچه از  لینک ها در سی اس اس نمیدانید ، تا انتهای مقاله با ما همراه باشید .

استایل عناصر در 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 میپردازیم . پس با ما همراه باشید .