X

X

X

CSS Property Layout - ইলামেন্টকে বিভিন্নভাবে উপস্থাপণ


ওয়েব পেজের লেআউট সঠিকভাবে উপস্থাপণ করার জন্যdisplay property ব্যবহার করা হয়। এটি একটি খুব গুরুত্বপূর্ণ সিএসএস প্রপার্টি।


display Property এর ব্যবহার

display property মাধ্যমে বর্ণনা করা হয়, একটি ওয়েবপেজ ব্রাউজারে কিভাবে উপস্থাপিত হবে।

প্রতিটি HTML ইলামেন্টের দুই ধরণের উপস্থাপণ মান (Display Value) মান রয়েছে। এগুলো হচ্ছে, block অথবা inline

প্যানেলটি দেখার জন্য ক্লিক করুন


ব্লক লেভেল ইলামেন্ট (Block-level Elements)

ব্লক লেভেল ইলামেন্ট সবসময় নতুন লাইন থেকে উপস্থাপিত হয় এবং এর ডান ও বামে আর কোনো ইলামেন্ট থাকে না। এর উপরে বা নিচে অন্য ইলামেন্ট থাকতে পারে। কিন্তু ডান ও বামে কোনো ইলামন্টে থাকে না।

The <div> element is a block-level element.

নিচে ব্লক লেভেল ইলামেন্টের উদাহরণ দেওয়া হলো:

  • <div>
  • <h1> – <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

ইনলাইন ইলামেন্ট (Inline Elements)

এই ইলামেন্টগুলোর ডান বাম ও উপর নিচে এক বা একাধিক ইলামেন্ট থাকতে পারে।
This is an inline <span> element inside a paragraph.

ইনলাইন ইলামেন্টের উদাহরণ:

  • <span>
  • <a>
  • <img>

display: none; প্রপার্টি

display: none; প্রপার্টি ব্যবহার করে কোনো ইলামেন্টকে পেজে অদৃশ্যমান করা হয়। অর্থাৎ, যদিও এটি ওয়েব পেজে বিদ্যমান থাকে, যখন এর মান none করা হয় এটি দৃশ্যমান হয় না। এই কাজটি ডায়নামিক্যালি করার জন্য সাধারণত জাভাস্ক্রিপ্ট ব্যবহার করা হয়।

যেমন, <script> ইলামেন্টের ডিফল্ট ডিসপ্লে মান হচ্ছে display: none; । কাজেই এটি ওয়েবপেজ বিদ্যমান থাকলেও দৃশ্যমান হয় না।


ডিফল্ট display মানের পরিবর্তন

আগেই বলা হয়েছে যে, প্রতিটি ইলামেন্টের ডিফল্ট ডিসপ্লে মান রয়েছে। কিন্তু আপনি চাইলে এটির পরিবর্তন করতে পারবেন। এজন্য আপনাকে জাভাসিক্রপ্ট বা সিএসএস ব্যবহার করতে হবে।

নিচে একটি আনুভূমিক মেনু তৈরি করার জন্য উদাহরণ দেওয়া হলো । এটিতে <li> ব্যবহার করা হয়েছে।:

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

লক্ষণীয়: কোনো ইলামেন্টের display প্রপার্টির মান নির্ধারণ করার ফলে ডিফাইন করা হয় এটি কিভাবে উপস্থাপিত হবে।

নিচের উদাহরণে <span> ইলামেন্টকে ব্লক ইলামেন্ট হিসেবে উপস্থাপণ করা হলো। এটি মূলত একটি ইনলাইন ইলামেন্ট:

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


নিচের উদাহরণে <a> ব্লক ইলামেন্ট হিসেবে উপস্থাপণ করা হলো:

Code Example

<style>
a {
    display: block;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


কোনো ইলামেন্টকে অদৃশ্যান করার সঠিক পদ্ধতি – display:none বা visibility:hidden?

display:none

Klematis

visibility:hidden

Klematis

রিসেট করুন
Klematis

যখন display property এর মান none নির্ধারণ করা হয়, তখন এটি পেজে অদৃশ্যমান হয়ে যায় এবং পেজটি এটিকে এমনভাবে বিবেচনা করে যাতে মনে হয়, এখানে উক্ত ইলামেন্টের কোনো উপস্থিতি নাই। কাজেই উক্ত ইলামেন্টের স্থানে অন্য ইলামেন্ট উপস্থাপিত হবে।

Code Example

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

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


visibility:hidden; ব্যবহার করার ফলেও একটি ইলামেন্ট অদৃশ্যমান হয়। এক্ষেত্রে যদিও ইলামেন্টটি অদৃশ্যমান হয়, কিন্তু এটি তার আকারের সমপরিমান জায়গা ধারণ করে রাখে।

Code Example

<style>
h1.hidden {
    visibility: hidden;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


আরও কিছু উদাহরণ

display: none; ও visibility: hidden; এর মধ্যে পার্থক্য

CSS ও Javascript একসাথে ব্যবহার করে কোনো ইলামেন্টকে দৃশ্যমান ও অদৃশ্যমান করার পদ্ধতি


নিজে নিজে চেষ্টা করুন!

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »


CSS Display/Visibility Property সমূহ

প্রপার্টি বর্ণনা
display এটি দিয়ে নির্ধারণ করা হয়, কোনো ইলামেন্ট কিভাবে উপস্থাপিত হবে।
visibility এটি দিয়ে নির্ধারণ করা হয়, কোনো ইলামেন্ট দৃশ্যমান হবে নাকি হবে না।