ভিজিবিলিটি | সি এস এস বাংলা টিউটোরিয়াল

ভিজিবিলিটি (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;} আছে।

লেখকঃ অসীম কুমার
তিনি ইলেকট্রিক্যাল ইঞ্জিনিয়ারিং এ লেখাপড়া করছেন। টিউটোরিয়ালবিডি ও বিজ্ঞানপ্রযুক্তি ব্লগে তিনি ইলেক্ট্রনিক্স সহ বিভিন্ন টেকনোলজি বিষয়ে লিখে থাকেন। বর্তমানে তিনি লেখাপড়ার পাশাপাশি টিউটোহোস্টে কর্মরত আছেন।

কপি রাইট © ২০১১-২০১২ সর্বস্বত্ত্ব সংরক্ষিত, টিউটরিয়ালবিডি, একটি টিউটো ওয়েবস প্রতিষ্ঠান.