সিএসএসের মাধ্যমে একটি ওয়েবপেজকে সুন্দরভাবে উপস্থাপনের জন্য সবচেয়ে বেশি ব্যবহৃত এবং গুরুত্বপূর্ন প্রোপার্টি হলো display প্রোপার্টি।
এইচটিএমএল এলিমেন্ট কিভাবে প্রদর্শিত হবে তা উল্লেখ করে।
এইচটিএমএল এলিমেন্টটি দৃশ্যমান হবে কিনা তা উল্লেখ করে।
একটি এলিমেন্টকে কিভাবে প্রদর্শন করানো হবে তা display প্রোপার্টির মাধ্যমে নির্ধারণ করা হয়।
এলিমেন্টের ধরনের উপর ভিত্তি করে অধিকাংশ এইচটিএমএল এলিমেন্টেরই একটি ডিফল্ট display ভ্যালু রয়েছে। অধিকাংশ এলিমেন্টের ডিফল্ট ভ্যালু হলো inline অথবা block।
একটি ইনলাইন এলিমেন্ট নতুন লাইনে শুরু হয় না এবং যতটুকু দৈর্ঘ্য প্রয়োজন ততটুকুই নেয়।
এটি একটি প্যারাগ্রাফ এলিমেন্ট। এই প্যারাগ্রাফের মধ্যে ইনলাইন <span> এলিমেন্ট রয়েছে।
কয়েকটি ইনলাইন এলিমেন্ট নিম্নে দেখানো হলোঃ
<a><span><img><input>
<!DOCTYPE html>
<html>
<body>
<h2>ইনলাইন এলিমেন্টের ব্যবহার</h2>
<a href="index.php" target="_blank">সিএসএস হোম</a>
<span>span</span>
<input placeholder="input">
</body>
</html>এইচটিএমএল ব্লক-লেভেল(block-level) এলিমেন্ট সবসময়ই একটি নতুন লাইন দিয়ে শুরু হয় এবং এর কন্টেইনারের বাম পাশ থেকে ডান পাশ পর্যন্ত সম্পূর্ণ অংশ দখল করে।
এটি একটি <div> এলিমেন্ট, যা একটি ব্লক লেভেল এলিমেন্ট।
কয়েকটি ব্লক-লেভেল এলিমেন্ট নিম্নে দেখানো হলঃ
<div><h1> - <h6><p><ul><form><li><header><footer><article><section>
<!DOCTYPE html>
<html>
<body>
<h2>ব্লক-লেভেল এলিমেন্টের ব্যবহার</h2>
<h3>শিরোনাম</h3><p>প্যারাগ্রাফ</p><article>আর্টিকেল</article>
</body>
</html>display ভ্যালু পরিবর্তনআমরা ইতিমধ্যেই দেখেছি যে, প্রত্যেকটি এইচটিএমএল এলিমেন্টের জন্য একটি ডিফল্ট display ভ্যালু ব্যবহৃত হয়। যেমন- inline অথবা block। আপনি সিএসএস display প্রোপার্টি ব্যবহার করে এই ভ্যালু পরিবর্তন করতে পারেন।
এইচটিএমএল এলিমেন্ট সমূহকে আপনি আপনার মত করে উপস্থাপন করার জন্য একটি ইনলাইন এলিমেন্টকে একটি ব্লক লেভেল এলিমেন্ট অথবা একটি ব্লক লেভেল এলিমেন্টকে ইনলাইন এলিমেন্টে রূপান্তরিত করতে পারেন। এতে ওয়েবে স্ট্যান্ডার্ড ভঙ্গ হয় না।
হরিজন্টাল মেনুবার তৈরি করার জন্য < li> এলিমেন্টকে আমরা প্রায়ই ইনলাইন এলিমেন্টে রূপান্তরিত করি।
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
li {
display: inline;
}
</style>
</head>
<body>
<p>লিস্টের লিংক গুলো হরিজন্টাল ভাবে প্রদর্শিত হবে।</p>
<ul>
<li><a href="../html/index.php" target="_blank">এইচটিএমএল</a></li>
<li><a href="../css/index.php" target="_blank">সিএসএস</a></li>
<li><a href="../js/index.php" target="_blank">জাভাস্ক্রিপ্ট</a></li>
</ul>
</body>
</html>বিঃদ্রঃ একটি এইচটিএমএল এলিমেন্ট কিভাবে প্রদর্শিত হবে তা ঠিক করে দেওয়ার জন্য সিএসএস display প্রোপার্টি ব্যবহার করা হয়। এলিমেন্টের ধরণ পরিবর্তন করার জন্য display প্রোপার্টি ব্যবহার করা হয় না। সুতরাং প্রোপার্টি-ভ্যালু display: block; সম্বলিত কোনো এইচটিএমএল এলিমেন্টের মধ্যে একই লাইনে অন্য কোনো এলিমেন্ট অবস্থান নিতে পারে না।
নিচের উদাহরণে < span> এলিমেন্টকে ব্লক এলিমেন্ট হিসাবে প্রদর্শন করানো হলোঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
span {
display: block;
}
</style>
</head>
<body>
<p>নিচের span এলিমেন্টগুলো দুটি ভিন্ন লাইনে প্রদর্শিত হবে।</p>
<span>এটি একটি span এলিমেন্ট</span><span>এটিও একটি span এলিমেন্ট</span>
</body>
</html>নিচের উদাহরণে < a> এলিমেন্টকে ব্লক এলিমেন্ট হিসাবে প্রদর্শন করানো হলোেঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
li {
display: block;
}
</style>
</head>
<body>
<p>লিস্টের লিংক গুলো ব্লক এলিমেন্টে প্রদর্শিত হবে।</p>
<ul>
<li><a href="../html/index.php" target="_blank">এইচটিএমএল</a></li>
<li><a href="../css/index.php" target="_blank">সিএসএস</a></li>
<li><a href="../js/index.php" target="_blank">জাভাস্ক্রিপ্ট</a></li>
</ul>
</body>
</html>display: none; এর ব্যবহারএকটি এলিমেন্টকে ডিলেট না করে বা পূনরায় সৃষ্টি না করে লুকানো অথবা দেখানোর জন্য জাভাস্ক্রিপ্টের সাথে display: none; প্রোপার্টি ব্যবহার করা হয়।
< script> এলিমেন্টে ডিফল্টভাবে display: none; ব্যবহৃত হয়।
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
li.display_none {
display: none;
}
</style>
</head>
<body>
<h2>"display:none;" এর ব্যবহার</h2>
<ul>
<li><a href="../html/index.php" target="_blank">এইচটিএমএল</a></li>
<li class="display_none"><a href="../css/index.php" target="_blank">সিএসএস</a></li>
<li><a href="../js/index.php" target="_blank">জাভাস্ক্রিপ্ট</a></li>
</ul>
</body>
</html>এইচটিএমএল এলিমেন্টকে সুপ্ত(hidden) অবস্থায় রাখতে হলে প্রোপার্টি-ভ্যালু display: none; অথবা visibility:hidden ব্যবহার করতে হয়।
display: none; ব্যবহার করলে এইচটিএমএল পেজ এমনভাবে প্রদর্শিত হবে মনে হবে সুপ্ত এলিমেন্টটি এই পেজে নেই।
kt_satt_skill_example_id=756
common.read_more
common.or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
