সিএসএস টিউটোরিয়াল পর্ব - ৯

Posted by: | Published: Monday, October 17, 2016 | Categories:
ওয়েব স্কুল বিডি : সুপ্রিয় শিক্ষার্থী বন্ধুরা, শুভেচ্ছা নিয়ো। আমরা গত পর্বে ফন্ট নিয়ে আলোচনা করেছিলাম। আজ তোমাদের লিংক (Link) নিয়ে আলোচনা করা হলো :

লিংক (Link):
HTML এ অন্যান্য পেজের সাথে সংযোগ স্থাপনের জন্য <a></a> বা এঙ্কর ট্যাগ ব্যবহার করে লিংক তৈরি করা হয়। আর লিংক সবচেয়ে বেশি ব্যবহার করা হয় নেভিগেশনবারে। সাধারণত কোন একটি লিংক এর চারটি অবস্থা থাকে। যথা
  • লিংকের সাধারণ অবস্থা (Normal Condition of link)
  • লিংকের ভিজিটেড অবস্থা (Visited Condition of link )
  • লিংকের হোবার অবস্থা (Hover Condition of link)
  • লিংকের সক্রিয় অবস্থা (Active Condition of link)
www.webschoolbd.com

লিংকের সাধারণ অবস্থা (Normal Condition of link) :
কোন একটি  লিংক প্রথমবার ব্যবহার  না করা পর্যন্ত যেভাবে প্রদর্শিত হয় তাকে ঐ লিংকের সাধারণ অবস্থা বলে। এ অবস্থায় লিংকটি কেমন দেখাবে তার স্টাইল তৈরি করার জন্য স্টাইল শীটে লেখতে হবে a:link {color: #090;} ।    

লিংকের ভিজিটেড অবস্থা (Visited Condition of link ) :
কোন একটি  লিংক এক বা একাধিক বার ব্যবহার করা হলে এবং লিংকের উপর মাউস না রাখলে লিংকটি যেভাবে প্রদর্শিত হয় তাকে ঐ লিংকের ভিজিটেড অবস্থা বলে।এ অবস্থায় লিংকটি কেমন দেখাবে তার স্টাইল তৈরি করার জন্য স্টাইল শীটে লেখতে হবে a:visited {color:#303} ।

লিংকের হোবার অবস্থা (Hover Condition of link) :
কোন একটি  লিংক ব্যবহার  করা হোক বা না হোক, লিংকের উপর মাউস রাখলে লিংকটি যেভাবে প্রদর্শিত হয় তাকে ঐ লিংকের হোবার অবস্থা বলে।এ অবস্থায় লিংকটি কেমন দেখাবে তার স্টাইল তৈরি করার জন্য স্টাইল শীটে লেখতে হবে a:hover { background: #639}  ।

লিংকের সক্রিয় অবস্থা (Active Condition of link) :
যখন লিংকটি সক্রিয় অবস্থায় থাকে, অর্থাৎ মাউস ক্লিক করার মূহর্তে লিংকটি যেভাবে প্রদর্শিত হয় তাকে ঐ লিংকের সক্রিয় অবস্থা বলে।এ অবস্থায় লিংকটি কেমন দেখাবে তার স্টাইল তৈরি করার জন্য স্টাইল শীটে লেখতে হবে a:active {color:#960;}
চারটি অবস্থাতেই লিংকের ব্যগ্রাউন্ড পরিবর্তন করা যায়। এবং নেভিগেশন বারে এই লজিকটিই বেশি ব্যবহৃত হয়। লিংকের ব্যগ্রাউন্ড পরিবর্তন করার জন্য স্টাইল সিটে লেখতে হবে
a:hover{background:#F60; এর অনুরূপ। 

অনুশীলন প্রজেক্ট :
<html>
<head>
<title> www.webschoolbd.com</title>
<style>
body{background:#090}
a:link {color:#F00;}
a:visited {color:#303}
a:hover {color: #fff;}
a:active {color:#960;}

#nav ul li {float:left; list-style:none;}
#nav ul li a {padding:10px; display:block; text-decoration:none;}

#nav ul li a:link{background:#FCC;}
#nav ul li a:hover{background:#F60;}
#nav ul li a:hover { background: #639}
#nav ul li a:active { background:#39F;}
</style>

</head>
<body >
<a href="https://www.webschoolbd.com"><h1>This is a Link.</h1></a><br>
<div id="nav">
<ul>
<li><a href="https://www.webschoolbd.com"><h2>HTML</h2></a></li>
<li><a href="https://www.webschoolbd.com"><h2>CSS </h2></a></li>
<li><a href="https://www.webschoolbd.com"><h2>PHP</h2></a></li>
<li><a href="https://www.webschoolbd.com"><h2>Wordpress</h2></a></li>
</ul>
</div>
</body>
</html>

Previous
Next Post »

আপনার কোন কিছু জানার থাকলে কমেন্টস বক্স এ লিখতে পারেন। আমরা যথাযত চেস্টা করব আপনার সঠিক উত্তর দিতে। ভালো লাগলে ধন্যবাদ দিতে ভুলবেন না।
- শুভকামনায় ওয়েব স্কুল বিডি
ConversionConversion EmoticonEmoticon