স্টাইলিং লিঙ্ক
সিএসএস প্রোপার্টি দ্বারা লিঙ্ক স্টাইল করা যেতে পারে (যেমন: color, font-family, background, ইত্যাদি)
a {
color: #FF0000;
}
লিঙ্ক এর অবস্থা অনুসারে একে স্টাইল করা যেতে পারে।
লিঙ্ক এর চারটি অবস্থা রয়েছে:
a:link- সাধারণ, ভিজিট করা হয়নি এমন লিঙ্কa:visited- যে লিঙ্ক এ ভিজিটর ভিজিট করেছেনa:hover- যে লিঙ্ক এর উপর ব্যবহারকারী মাউস রেখেছেনa:active- ক্লিক করার মূহুর্তে লিঙ্ক এর অবস্থা
উদাহরণঃ
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
লিঙ্ক এর বিভিন্ন অবস্থা স্টাইল করার ক্ষেত্রে ক্রমের কিছু নিয়ম রয়েছে:
- a:hover অবশ্যই a:link এবং a:visited এর পরে আসতে হবে
- a:active অবশ্যিই a: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 প্রোপার্টি ব্যাকগ্রাউন্ড এর এর রঙ নির্ধারণ করতে ব্যবহৃত হয়:
a:link {
background-color: #B2FF99;
}
a:visited {
background-color: #FFFF85;
}
a:hover {
background-color: #FF704D;
}
a:active {
background-color: #FF704D;
}
নিজে নিজে চেষ্টা করুন
অনুশীলন ০১ঃ
লিঙ্ক এর রঙ সবুজ হিসেবে নির্ধারণ করুন
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p><a href="http://www.w3schools.com">W3Schools.com</a></p> </body> </html>
অনুশীলন ০২ঃ
ভিজিট করা হয়নি এমন অবস্থায় লিঙ্ক এর রঙ লাল এবং ভিজিট করার পর লিঙ্ক এর রঙ নীল হিসেবে নির্ধারণ করুন।
<!DOCTYPE html>
<html>
<head>
<style>
/* mouse over link */
a:hover {
color: black;
}
/* selected link */
a:active {
color: green;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p><a href="http://www.w3schools.com">W3Schools.com</a></p>
</body>
</html>
অনুলীলন ০৩ঃ
hover এবং active লিঙ্ক অবস্থার ক্ষেত্রে ভিজিটেড এবং আনভিজিটেড লিঙ্ক হতে আন্ডারলাইন মুছে দিন
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
}
/* visited link */
a:visited {
}
/* mouse over link */
a:hover {
}
/* selected link */
a:active {
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p><a href="http://www.w3schools.com">W3Schools.com</a></p>
</body>
</html>
অনুশীলন ০৪ঃ
ভিজিটেড এবং আনভিজিটেড লিঙ্ক এর জন্য ব্যাকগ্রাউন্ড রঙ "lightblue" নির্ধারণ করুন এবং hover এবং active লিঙ্ক অবস্থার ক্ষেত্রে ব্যাকগ্রাউন্ড রঙ হলুদ হিসেবে নির্ধারণ করুন
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
}
/* visited link */
a:visited {
}
/* mouse over link */
a:hover {
}
/* selected link */
a:active {
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p><a href="http://www.w3schools.com">W3Schools.com</a></p>
</body>
</html>
