প্রদর্শন পদ্ধতি


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

i) ডিসপ্লে নান
ii) ডিসপ্লে ইন লাইন
iii) ডিসপ্লে ব্লক


ডিসপ্লে নান


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


<head>
<style>
h1.hidden {
    display: none;
}
</style>
</head>

উদাহরণ :-

<!DOCTYPE html>
<html>
<head>

<style>
h1.hidden {
    display: none;
}
</style>
</head>
<body>

<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the h1 element with display: none; does not take up any space.</p>

</body>
</html>



ডিসপ্লে ইন লাইন





CSS এর মাধ্যমে HTML উপাদান সমূহকে একই লাইনে প্রদর্শনের জন্য ডিসপ্লে ইন লাইন ব্যবহার করা হয়। এটা মূলত সবচেয়ে বেশি ব্যাবহৃত হয় নেভিগেশন বারে। HTML উপাদান সমূহকে একই লাইনে প্রদর্শনের জন্য Declaration করতে হয় display:inline; এর অনুরূপ।


<head>
<style>
li {
    display: inline;
}
</style>
</head>

উদাহরণ :-

<!DOCTYPE html>
<html>
<head>

<style>
li {
    display: inline;
}
</style>
</head>
<body>

<p>Display a list of links as a horizontal menu:</p>

<ul>
  <li><a href="#" target="_blank">HTML</a></li>
  <li><a href="#" target="_blank">CSS</a></li>
  <li><a href="#" target="_blank">JavaScript</a></li>
</ul>

</body>
</html>



ডিসপ্লে ব্লক


CSS মাধ্যমে HTML উপাদান সমূহকে একই কলামে প্রদর্শনের জন্য ডিসপ্লে ব্লক ব্যবহার করা হয়। এটা মূলত সবচেয়ে বেশি ব্যাবহৃত হয় ভার্টিক্যাল নেভিগেশন বারে, তথা সাইডবার নেভিগেশন বারে। HTML উপাদান সমূহকে একই কলামে প্রদর্শনের জন্য Declaration করতে হয় display:block; এর অনুরূপ।


<head>
<style>
span {
    display: block;
}
</style>
</head>

উদাহরণ :--

<!DOCTYPE html>
<html>
<head>
<style>
span {
    display: block;
}
</style>
</head>
<body>

<span>A display property with a value of "block" results in</span>
<span>a line break between the two elements.</span>

</body>
</html>




আপনি এই কোড আমাদের সাইটে বসানো এইচটিএমএল এডিটর দিয়ে রান করাতে পারেন।
এইচটিএমএল এডিটরে যেতে এখানে ক্লিক করুন