প্রদর্শন পদ্ধতি | সি এস এস বাংলা টিউটোরিয়াল

প্রদর্শন পদ্ধতি (display)

সি এস এস এ ডিসপ্লে প্রোপার্টি প্রকাশ করে কোন একটা উপাদান কিভাবে প্রদর্শিত হবে।ডিসপ্লে প্রোপার্টির বেশ কিছু value হতে পারে, এদের মধ্যে সবচেয়ে বেশি ব্যাবহৃত হয়,

  • ডিসপ্লে নান -(display:none)
  • ডিসপ্লে ইন লাইন -(display:inline)
  • ডিসপ্লে ব্লক – (display:block)







ডিসপ্লে নান -(display:none)

কোন বিশেষ উপদানকে প্রদর্শন না করার জন্য ডিসপ্লে নান ব্যবহার করা হয়, এজন্য Declaration করতে হয় display:none;।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC}
#none{width:265px;
background:#F30;
padding:10px;}
#none:hover{display:none;}
</style>

</head>
<body >
<h2>www.tutohost.com</h2>
<div id="none">
<h1>Please Touch Me.</h1></div>
<h2>We are bangladeshi Hostgator hosting provider.</h2>
</body>
</html>

একটা  নোটপ্যাড  open  করে  উপরের code  টুকু  লিখে  file  মেনু  থেকে  Save as এ ক্লিক করে File name:  index.html  ,   Save as type : All files,  দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।



কোডিং বিশ্লেষণ:

উপরের উদাহরণটিতে Please Touch Me. লেখাটির উপরে মাউস পয়েন্টার নিয়ে গেলে এটি অদৃশ্য হয়ে যায় এজন্য কোডিং এ লেখা হয়েছে #none:hover{display:none;} । অর্থাৎ none নামের div টির মাউস হোবার display:none ।  

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

কপি রাইট টিউটোহোস্ট ২০১০-২০১২