قبل تر در دوره آموزش HTML یاد گرفتیم که لینک ها چی هستن و چجوری میشه لینک نوشت ! حالا وقت اون رسیده یه قیافه خوشگلی به این لینک ها بدیم . میتوینم انواع قیافه رو پیاده سازی کنیم و محدودیتی توی قیافه وجود نداره . اینجا توی این جلسه از آموزش CSS با بی اس دیزاین میخوایم چند تا مثال بزنیم که لینک ها چه حالت هایی دارن و میشه چه نوع استفاده هایی از این حالت ها کرد.
میتوینم بیایم از جلسات قبل در دوره آموزش CSS استفاده کنیم و مثلا رنگ بدیم – فونت فامیلی و سایز بدیم و …
a {
color: hotpink;
}
خب حالا لینک ها چند حالت مختلف دارن که باید بدونین . link – visited – hover و active . هر کدوم از این حالت ها بیانگر وضعیت خاصی از اون لینک هستن.
حالت link که میشه همون حالت پیش فرض که لینک داره .
حالت visited هم میشه حالتی که کاربر لینک رو قبلا روش کلیک کرده و لینک مشاهده شده.
حالت hover میشه وقتی که موس روی لینک قرار می گیره و هنوز روش کلیک نشده .
حالت active هم میشه وقتی که در همون لحظه که موس روش رفت و کلیک انجام شد !
برای نوشتن کدهای CSS برای هر کدوم از این حالت ها یا وضعیت های لینک میتونیم کدهای خاصی بذاریم. از مثال های زیر الگو می گیریم :
/* 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 انجام میدین باید ترتیب اولویت رو رعایت کنین:
وضعیت hover باید بعد از وضعیت های link و visited بیاد .
وضعیت active هم باید بعد از وضعیت hover درج بشه .
نوشتن خصوصیت text-decoration
خب این هم برای این استفاده میشه که اون خط زیر لینک ها رو که بصورت پیش فرض تعبیه شده برداره ! اینجوری میگن که قشنگ تره و خوشگل تر میشه لینک ها وقتی داریم حرفه ای کدنویسی میکنیم:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
نوشتن خصوصیت background-color
این مورد هم قبل تر در دوره آموزش CSS یاد گرفتیم که چجوری به یه المان بیایم رنگ پیش زمینه بدیم . حالا از همین خصوصیت استفاده میکنیم تا لینک های وب سایتمون قشنگ تر بشه .
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
همیشه یادتون باشه محدودیتی در خلاقیت ندارین ! میتونین از تمامی مباحثی که تا الان یاد گرفتین استفاده کنین و خوشگل ترین و قشنگ ترین ها رو برای وب سایت خلق کنین ! دستتون باز هستش راحت از تمامی موارد در لینک ها میتونین استفاده کنین .
