استایل لینک – لینک در css
خوش اومدین به نهمین جلسه از دوره آموزش CSS. در سومین جلسه از دوره آموزش HTML، در مورد لینک ها در HTML با هم صحبت کردیم و یاد گرفتیم که چطوری با استفاده از تگ a یک لینک رو ایجاد کنیم. امروز قصد داریم در مورد استایل دهی به لینک ها صحبت کنیم. ما تو این جلسه با ویژگی جدیدی آشنا نمیشیم و برای استایل دهی به لینک از همون ویژگی هایی که تا اینجا باهاشون آشنا شدیم استفاده میکنیم. اما با موضوعی به status یا وضعیت آشنا میشیم که کاربرد زیادی در css داره. پس با این جلسه همراه باشید.
۴ وضعیت تگ a و امکان استایل دهی مستقل
تگ a که به ما این امکان رو میداد تا بتونیم یه لینک ایجاد کنیم، دارای ۴ تا وضعیت متفاوت هست. ما این امکان رو داریم که هر وضعیت رو بصورت مستقل مقدار دهی کنیم. ابتدا با این ۴ وضعیت آشنا بشیم:
- a:link – یک پیوند معمولی و بازدید نشده
- a:visited – پیوندی که کاربر قبلا از آن بازدید کرده است
- a:hover – یک پیوند زمانی که موس کاربر روی آن قرار می گیرد
- a:active – یک پیوند در لحظه ای که روی آن کلیک می شود
ما برای هر یک از این ۴ وضعیت میتونیم بصورت جداگانه استایل دهی انجام بدیم. قطعه کد پایین رو ببینید:
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}با در نظر گرفتن کدهای css بالا، اگر من از تگ a در پروژه خودم استفاده کنم، رنگ لینک در ابتدا قرمز است(a:link) اگر کاربر قبلا از این لینک دیدن کرده باشه، لینک به رنگ سبز نشون داده میشه (a:visited) ار کاربر موس خودش رو روی لینک ببره صورتی رن میشه (a:hover) و اگر روی اون کلیک کنه در لحظه کلیک کردن رنگ لینک من آبی میشه (a:active)
همونطور که میبینید ما در هر ۴ وضعیت بطور مستقل امکان استایل دهی داریم.
اگر خاطرتون باشه لینک های ما تویHTML بصورت پیشفرض زیرخط دار بودن. یعنی ویژگی text-decoration اونها underline بود. حالا ما میتونیم در صورت نیاز توی هر وضعیت این ویژگی رو تغییر بدیم. کد زیر رو ببینید:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
ایجاد دکمه برای تگ a با استفاده از css
اینجا یک مثال داریم که به ما نوع پیشرفته تری از استایل دهی به تگ a رو نمایش میده. ما با این شیوه میتونیم یه دکمه یا جعبه قابل کلیک ایجاد کنیم.
همچنین این امکان وجود داره که که برای یک کلاس یا آی دی خاص مقدار ۴ وضعیت تگ a رو تغییر بدیم. تصویر زیر رو ببینید:
همونطور که توی تصویر بالا میبینید من سه تا لینک دارم. لینک اولی بدون استایل هست ولی دو لینک بعدی رو به صورت پیشرفته استایل دهی کردم. تمامی ویژگی هایی که استفاده کردم رو توی جلسات قبلی باهاشون آشنا شدیم. لینک دوم که زمینه سفید رنگ و کادر دور سبز رنگ داره حالت معمولی لینک من هست و زمانی که موس رو روی لینک ببریم و یا روش کلیک کنیم به شکل سومین لینک که زمینه سبز رنگ و متن سفید رنگ داره نمایش داده میشه.
