সিএসএস লিংক
লিংক স্টাইল
যেকোনো সিএসএস প্রোপার্টি যেমন- color, background-color,
margin ইত্যাদি প্রোপার্টির মাধ্যমে লিংকের স্টাইল করা যায়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
a {
color: white;
background-color: green;
}
</style>
</head>
<body>
<h2>সিএসএস এর মাধ্যমে লিংক স্টাইল</h2>
<a href="https://www.sattacademy.com" target="_blank">স্যাট একাডেমি</a>
</body>
</html>
ফলাফল
এছাড়াও লিংকটি কি অবস্থায়(state) আছে তার উপর ভিত্তি করেও পৃথকভাবে লিংকের স্টাইল করা যেতে পারে।
একটি লিংক সচরাচর চারটি অবস্থায় থাকে।
লিংকের অবস্থাসমূহ নিম্নে তুলে ধরা হলোঃ
a:link- এটি একটি স্বাভাবিক লিংক যা ইউজার কর্তৃক এখনো প্রদর্শিতি(visited) হয় নি।a:visited- ইউজার কর্তৃক পরিদর্শিত(visited) একটি লিংক।a:hover- ইউজার কর্তৃক মাউজ কার্সর লিংকের উপর রাখা অবস্থাকে নির্দেশ করে।a:active- ইউজার কর্তৃক ক্লিক করা হয়েছে এমন একটি লিংক।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: hotpink;
}
a:active {
color: blue;
}
</style>
</head>
<body>
<p><a href="https://www.sattacademy.com/js" target="_blank">স্যাট একাডেমি জাভাস্ক্রিপ্ট</a></p>
</body>
</html>
বিঃদ্রঃ ভালো ফলাফলের জন্য লিংক স্টাইলের এই ক্রম অবশ্যই অনুসরণ করতে হবে।
ফলাফল
লিংকের বিভিন্ন অবস্থার জন্য পৃথকভাবে স্টাইল সেট করতে হলে নিচের নিয়ম দুটি মেনে চলতে হবে।
a:linkএবংa:visitedএর পরেa:hoverব্যবহার করতে হবে।a:hoverএর পরেa:activeব্যবহার করতে হবে।
background-color প্রোপার্টি
লিংকের ব্যাকগ্রাউন্ড-কালার সেট করার জন্য background-color প্রোপার্টি ব্যবহার করা হয়।
a:link {
background-color: lawngreen;
}
a:visited {
background-color: green;
}
a:hover {
background-color: lightsalmon;
}
a:active {
background-color: hotpink;
}
text-decoration প্রোপার্টি
লিংক থেকে আন্ডারলাইন মুছে ফেলার জন্য text-decoration প্রোপার্টির ভ্যালু none ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
a:link {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<p><a href="https://www.sattacademy.com" target="_blank">স্যাট একাডেমি</a></p>
</body>
</html>
ফলাফল
লিংক বাটন
লিংককে বক্স বা বাটনের মত তৈরি করার জন্য অতিরিক্ত যে সিএসএস প্রোপার্টি ব্যবহার করা হয় তা নিম্নের উদাহরণে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
a {
background-color: #f010f0;
color: black;
padding: 20px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bolder;
}
</style>
</head>
<body>
<a href="../index.php" target="_blank">স্যাট একাডেমি</a>
</body>
</html>
বিঃদ্রঃ আমরা চাইলে এই বাটনটির মধ্যে লিংকের বিভিন্ন অবস্থা(state) প্রয়োগ করতে পারবো।
ফলাফল