no-img
اِمیلاسلام کاربر مهمان. امروز یکشنبه ۲۸ مهر ۱۳۹۸


ادامه مطلب

انتشار؛ ۱۰ تیر ۱۳۹۸،
111 روز پیش
استایل Link در CSS
امتیاز 5.00 ( 1 رای )
حمایت از emila.ir

استایل Link در CSS

انتشار؛ ۱۰ تیر ۱۳۹۸ - 111 روز پیش
بازدید؛ 129
نویسنده؛ milipinkman

می توان لینک ها را به شیوه های مختلف سبک دهی (بندی)کرد. لینک ها را می توان با هر خاصیت 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


موضوع : وب/ برچسب : , , , / لینک کوتاه : https://emila.ir/?p=16749
designer