CSS লেআউট - display বৈশিষ্ট্য

display প্রতিভা হল সবচেয়ে মূল্যবান CSS প্রতিভা, যা লেআউট নিয়ন্ত্রণ করে。

display প্রতিভা

display প্রতিভার মান নির্ধারণ করে কিংবা কিভাবে ইলেকট্রনটি দেখানো হবে。

প্রত্যেক HTML ইলেকট্রনকে একটি ডিফল্ট display মান আছে, যা তার ইলেকট্রনের ধরন অনুযায়ী নির্ধারিত হয়। অধিকাংশ ইলেকট্রনের ডিফল্ট display মান block বা inline.

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

এই প্যানেলটি একটি <div> ইলেকট্রন ধারণ করে, যা ডিফল্টভাবে লুকিয়ে আছে।（display: none)

এটি CSS-এর দ্বারা স্টাইল করা হয়, এবং আমরা JavaScript-এর দ্বারা তা দেখাতে ব্যবহার করি (পরিবর্তন করা হয়): display: block)

ব্লক ইলেকট্রন (block element)

ব্লক ইলেকট্রনটি সর্বদা একটি নতুন লাইনে শুরু করে, এবং সম্ভবতমানের পূর্ণ প্রস্থানটি অধিকার করে (সম্ভবতমানের মধ্যে সর্বশেষে বাম এবং ডানে সম্প্রসারিত হয়)。

এই <div> ইলেকট্রনটি ব্লক ইলেকট্রনের অন্তর্ভুক্ত হয়。

ব্লক ইলেকট্রনগুলির কিছু উদাহরণ:

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

ইনলাইন ইলেকট্রন (inline element)

ইনলাইন ইলেকট্রনটি একটি নতুন লাইনে শুরু করবে না, এবং প্রয়োজনীয় প্রস্থানটি অধিকার করবে:

এটি একটি প্যারাগ্রাফের মধ্যে রয়েছেইনলাইন <span> ইলেকট্রন.

ইনলাইন ইলেকট্রনগুলির কিছু উদাহরণ:

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

Display: none;

display: none; সাধারণত JavaScript-এর সাথে ব্যবহৃত হয়, ইলেকট্রনকে লুকিয়ে রাখা এবং দেখানো করা হয়, বিনা তাদের মুছে ফেলা এবং পুনর্গঠন করার প্রয়োজনীয়তা। এই লক্ষ্যটি কিভাবে বাস্তবায়িত করা যায়, তা জানতে এই পৃষ্ঠায় সর্বশেষ উদাহরণটি দেখুন。

প্রথমে,<script> ইলেকট্রনটি ব্যবহার করে display: none;.

পূর্বনির্ধারিত Display মান অতিক্রম করা

এভাবেই, প্রত্যেক ইলেকট্রনকে একটি পূর্বনির্ধারিত display মান থাকে। কিন্তু, আপনি তা অতিক্রম করতে পারেন।

ইনলাইন ইলেকট্রনকে ব্লক ইলেকট্রনে পরিবর্তন করা এবং একে অপরের বিপরীতে, পৃষ্ঠা নির্দিষ্টভাবে দেখাতে এবং Web প্রমাণপত্রকে মেনে চলার জন্য অত্যন্ত উপযোগী。

একটি সাধারণ উদাহরণ হল, হলেন্টারন্ট মেনু গঠনের জন্য ইনলাইন ইলেকট্রন তৈরি করা হয়: <li> ইলেকট্রন:

প্রকল্প

li {
  display: inline;
}

আপনার হাতে পরীক্ষা করুন

নোট:ইলেকট্রনের display বৈশিষ্ট্যকে সম্পূর্ণভাবে পরিবর্তন করবেইলেকট্রনের প্রদর্শন ধরনএবং ইলেকট্রনের ধরনটিকে পরিবর্তন করবে না। তাই, যেসব ইলেকট্রনটির প্রদর্শন ধরন নির্ধারণ করা হয়: display: block; আউটার ইনলাইন ইলেকট্রনটির মধ্যে অন্য ব্লক ইলেকট্রন অন্তর্ভুক্ত করা যায় না।

উদাহরণটি <span> ইলেকট্রনটিকে ব্লক ইলেকট্রন হিসাবে দেখাবে:

প্রকল্প

span {
  display: block;
}

আপনার হাতে পরীক্ষা করুন

উদাহরণটি <a> ইলেকট্রনটিকে ব্লক ইলেকট্রন হিসাবে দেখাবে:

প্রকল্প

a {
  display: block;
}

আপনার হাতে পরীক্ষা করুন

লুকিয়ে রাখা ইলেকট্রন - display: none কিংবা visibility: hidden?

display: none

visibility: hidden

রিসেট

পুনরায় সম্পূর্ণ display প্রতিশ্রুতি সম্পূর্ণ নষ্ট ইলেকট্রনটিকে লুকিয়ে রাখা যায়। ইলেকট্রনটি লুকিয়ে থাকবে এবং পৃষ্ঠা এমন দেখাবে যে, ইলেকট্রনটি তার মধ্যে নেই:

প্রকল্প

h1.hidden {
  display: none;
}

আপনার হাতে পরীক্ষা করুন

visibility: hidden; ইলেকট্রনটিকে লুকিয়ে রাখা যায়。

কিন্তু, এই ইলেকট্রনটি পূর্ববর্তী সময়ের মতোই সমসময় অধিকার করবে। ইলেকট্রনটি লুকিয়ে থাকবে, কিন্তু এটি বিন্যাসকে প্রভাবিত করবে:

প্রকল্প

h1.hidden {
  visibility: hidden;
}

আপনার হাতে পরীক্ষা করুন

আরও উদাহরণ

display: none; এবং visibility: hidden; এর মধ্যে পার্থক্য
এই উদাহরণ দেখিয়েছে display: none; VS visibility: hidden;
CSS এবং JavaScript এর সংযুক্ত ব্যবহারের মাধ্যমে কনটেন্ট প্রদর্শন
এই উদাহরণ দেখিয়েছে কিভাবে CSS এবং JavaScript ব্যবহার করে ক্লিক করার সময় ইলেকট্রনকে প্রদর্শিত করা হয়

CSS Display/Visibility এট্রিবিউট

এট্রিবিউট বর্ণনা
display ইলেকট্রনকে কিভাবে প্রদর্শিত করা হবে
visibility সুনির্দিষ্ট ইলেকট্রন কোনও দৃশ্যমান হবে কিনা না