HTML Link গুলো ভিজিট করা হয়েছে কিনা তার উপর ভিন্য রং দেখাতে পারে । আবার লিংক এর উপর মাউচ নিয়ে গেলেও ভিন্য রং দেখানো যায় ।
ডিফল্ট লিংক কালার বৈশিষ্ট্য গুলো
ডিফল্ট ভাবে একটি লিংক সব ওয়েব ব্রাউজার এ নিচের বৈশিষ্ট গুলো নিয়ে প্রদর্শিত হবে
- যে লিংক টি ভিজিট করা হয়নি সেটার নিচে আন্ডার লাইন থাকবে এবং রং হবে নীল
- যে লিংক টি ভিজিট করা হয়েছে সেটার নিচে আন্ডার লাইন থাকবে এবং রং হবে পারপাল
- যে লিংক টি একটিভ, অর্থাৎ আপনি ক্লিক করেছেন কিংবা ধরে আছেন, সেটার নিচে আন্ডার লাইন থাকবে এবং রং হবে লাল
আমরা এই বৈশিষ্ট গুলো করে নিতে পারি CSS ব্যবহার করে ।
নিচের উদাহরণ এ যে লিংক ভিডিট করা হয়নি সেটি কোনও আন্ডারলাইন ছাড়াই সবুজ হবে। সিলেক্টর হয় a:link
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
</style>নিচের উদাহরণ এ যে লিংক ভিডিট করা হয়েছে সেটি কোনও আন্ডারলাইন ছাড়াই সবুজ হবে। সিলেক্টর হয় a:visited
<style>
a:visited{
color: pink;
background-color: transparent;
text-decoration: none;
}
</style>নিচের উদাহরণ এ যে লিংকটির উপর মাউচ নিয়েছেন সেটির নিচে আন্ডারলাইন সহ লাল হবে। সিলেক্টর হয় a:hover
<style>
a:hover{
color: red;
background-color: transparent;
text-decoration: underline;
}
</style>নিচের উদাহরণ এ যে লিংক ক্লিক করা হয়েছে করা হয়েছে কিংবা ক্লিক করে ধরে আছেন সেটির নিচে আন্ডারলাইন সহ হলুদ হবে। সিলেক্টর হয় a:active
<style>
a:active{
color: yellow;
background-color: transparent;
text-decoration: none;
}
</style>সবগুলো একসাথে করলে দাড়ায়
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>লিংক এর বাটন
HTML লিংক গুলোকে বাটন ও করা যায় CSS ব্যবহার করে । নিচের বাটন টি দেখুন
a {
background-color: blueviolet;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover {
background-color: DeepPink;
}
CSS tutorial এ আমরা আরো বিস্তারিত শিখবো