ভিজিবিলিটি (visibility)
কোন উপাদানকে প্রদর্শন করা হবে কি না তা নির্দেশ করার জন্য সি এস এস এ ভিজিবিলিটি প্রোপার্টি ব্যবহার করা হয়।যেমন কোন উপাদানকে প্রদর্শন করার জন্য Declaration করতে হয় visibility:visible; । কোন উপাদানকে প্রদর্শন না করার জন্য Declaration করতে হয়, visibility:hidden; । ভিজিবিলিটি প্রোপার্টির বেশ কিছু value হতে পারে, এদের মধ্যে উল্লেখযোগ্য হচ্ছে,
- ভিজিবিলিটি হিডেন – (visibility:hidden)
- ভিজিবিলিটি ভিজিবল – (visibility:visible)
- ভিজিবিলিটি কলাপস্ –(visibility:collapse)
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFC}
#hide{width:245px;
background:#F30;
visibility:hidden;
}
#show{width:245px;
background:#F30;
visibility:visible;}
</style>
</head>
<body >
<h2>Hidden Text & Visible Text.</h2>
<div id="hide">
<h1>Hidden Text.</h1></div>
<div id="show">
<h1>Visible Text.</h1></div>
</body>
</html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
কোডিং বিশ্লেষণ:
Hidden Text & Visible Text. টির নিচে বেশ কিছুটা ফাঁকা অংশ প্রদর্শিত হচ্ছে।
কোডিং এর HTML অংশে <div id="hide"><h1>Hidden Text.</h1></div> ছিলো এবং CSS অংশে #hide{width:245px;
background:#F30;}
visibility:hidden; থাকার জন্য Hidden Text. লেখাটি প্রদর্শিত হচ্ছে না।
Visible Text. লেখাটি প্রদর্শিত হচ্ছে কারণ CSS অংশে #show{width:245px;
background:#F30;
visibility:visible;} আছে।
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।
কপি রাইট © ২০১১থেকে যতদিন চলবে সর্বস্বত্ত্ব সংরক্ষিত