اولین کاری که می‌توانیم انجام دهیم این است که خطی که به صورت پیش فرض زیر لینک‌هاایجاد می‌شود را حذف کنیم. برای این کار از دستور زیر استفاده می‌کنیم:
text-decoration: none;
حال اگر به جای مقدار none از مقدار underline استفاده کنیم به حالت قبلی برمی‌گردد.
کار دیگری که ما می‌توانیم برای زیباتر کردن لینک‌ها انجام دهیم این است که با استفاده از دستور color رنگ متن لینک را تغییر دهیم. به شکل زیر:
a{
Color: red;
}
یا اینکه می‌توانیم یک رنگ پس زمینه ی زیبا برای لینک خود ایجاد کنیم:
a{
color: red;
background-color: purple;
}
رنگ دهی با توجه به وضعیت مختلف لینک ها در سایت با کمک CSS
نکته مهمی که وجود دارد این است که ما می‌توانیم برای وضعیت‌های مختلف لینک‌ها، خصوصیت‌های متفاوت تعریف کنیم. اما منظور از وضعیت‌های مختلف لینک‌ها چیست؟
لینک‌هامعمولا 4 وضعیت دارند:
- a : link
- a : visited
- a : hover
- a : active
که به ترتیب به این معنا هستند:
- لینکی که هنوز وارد آن نشده‌ایم
- لینکی که حداقل یکبار وارد آن شده‌ایم
- زمانی که ماوس خود را روی لینک می‌بریم اما کلیک نمی‌کنیم
- لحظه‌ای که در حال کلیک کردن روی لینک هستیم
اکنون فرض کنید می‌خواهیم رنگ پس زمینه یک لینک را در حالتی که حداقل یکبار روی آن کلیک شده است را به رنگ آبی کم رنگ در آوریم. پس به صورت زیر می‌نویسیم:
a:visited{
background-color: lightblue;
}
یا به عنوان مثال اگر بخواهیم لحظه ای که ماوس خود را روی لینک می‌بریم، رنگ متن صورتی شود، این گونه عمل می‌کنیم:
a:hover{
color: pink;
}
به این ترتیب می‌توانیم به حالت های مختلف، خصوصیت های متفاوت بدهیم. همچنین می‌توانیم به لینک های مان حاشیه های مختلف بدهیم و آن‌هارا به شکل دکمه دربیاوریم.
