সিএসএস এর display প্রপার্টি ব্যবহার করে কোন এইচটিএমএল এলিমেন্ট কিভাবে প্রদর্শিত
বা display হবে তা নির্ধারণ করা হয় এবং visibility প্রপার্টি নির্ধারণ করে এলিমেন্ট
প্রদর্শিত হবে না অদৃশ্য থাকবে।
কোন ওয়েব পেজের লেআউট ডিজাইন করতে এই দুটি প্রোপার্টি বেশ গুরুত্বপূর্ণ ভুমিকা পালন করে থাকে।
সিএসএস এর display প্রোপার্টি, নির্ধারণ করে কোন এইচটিএমএল এলিমেন্ট কিভাবে প্রদর্শিত হবে। সকল এইচটিএমএল এলিমেন্ট এর ই, তাদের প্রকারভেদ এর ওপর নির্ভর করে, একটি default মান বা value আছে। একটি এইচটিএমএল এলিমেন্ট হয় block নয়তো inline.
<span> একটি ইনলাইন এলিমেন্ট।<div> একটি ব্লক-লেভেল এলিমেন্ট
এইচটিএমএল ব্লক ও ইনলাইন এলিমেন্ট গুলো সম্পর্কে জানতে আমাদের এইচটিএমএল ব্লক ও ইনলাইন এলিমেন্ট টিউটোরিয়াল ওয়েব পেজটি ব্রাউজ করুন।
ব্লক-লেভেল এলিমেন্ট গুলো সাধারণ ভাবে বাম থেকে ডান দিকের সমস্ত স্থান টুকু সংরক্ষণ করে রাখে অর্থাৎ লাইনের সম্পূর্ন প্রস্থ বা width দখল করে নেয়, এই এলিমেন্টকে আপনি লাইনের বা দিকে বা ডান দিকে, যেদিকেই স্থাপন করেন না কেন, সকল ক্ষেত্রেই লাইনের সম্পূর্ন প্রস্থ সংরক্ষন করে। ব্লক-লেভেল এলিমেন্ট গুলো সব সময় একটি নতুন লাইন তৈরি করে।
নিচে কয়েকটি ব্লক লেভেল এলিমেন্ট এর উদাহরন দেখুন।
ইনলাইন এলিমেন্ট গুলো কেবল মাত্র প্রয়োজন অনুযায়ী প্রস্থ বা width সংরক্ষন বা দখল করে। এই এলিমেন্ট গুলো কোন নতুন লাইন তৈরি করে না।
নিচে কয়েকটি ইনলাইন এলিমেন্ট এর উদাহরন দেখুন।
কোন inline এলিমেন্টকে block এলিমেন্টে কিংবা block এলিমেন্টকে inline এলিমেন্টে রুপান্তর করে ওয়েব পেজকে একটি নির্দিষ্ট রূপে প্রদর্শন করা যায় এবং এই কাজটি করা যায় web standard অনুসরন করেই।
<li> এর মত inline এলিমেন্টকে block এলিমেন্ট রূপে ব্যবহার করার জন্য নীচে একটি উদাহরন দেখুন।
li {
display: inline;
}
<span> এর মত block এলিমেন্টকে inline এলিমেন্ট রূপে ব্যবহার করার জন্য নীচে একটি উদাহরন দেখুন।
span {
display: block;
}
নোট - display টাইপ পরিবর্তন করে এলিমেন্টটি কিভাবে প্রদর্শিত হবে তা নির্ধারণ করা হয়, এটি কোন প্রকারের এলিমেন্ট তা নির্ধারণ করা যায় না। এমন কোন inline এলিমেন্টে display প্রপার্টির মান block নির্ধারণ করা যাবে না, যার ভেতরে কোন block এলিমেন্ট নেষ্টেড অবস্থায় রয়েছে।
display প্রপার্টির মান বা value none নির্ধারণ করে অথবা visibility প্রপার্টির মান hidden নির্ধারণ করে কোন এলিমেন্ট লুকানো বা hide করা যায়। তবে এই দুই পদ্ধতি কিন্তু ভিন্ন ভিন্ন ফল প্রদান করে।
visibility প্রপার্টি ব্যবহার করে তার মান বা value যদি hidden নির্ধারণ করা হয় তাহলে তা কোন এলিমেন্টকে hide করবে ঠিকই কিন্তু পূর্বের স্থান বা space দখল বা reserve করে রাখবে। এতে এলিমেন্টটি hide হলেও তা কিন্তু leyout এর ওপর প্রভাব রাখে।
h1.hidden {
visibility: hidden;
}
display প্রপার্টি ব্যবহার করে তার মান বা value যদি none নির্ধারণ করা হয় তাহলে তা কোন এলিমেনটকে hide করবে এবং পূর্বের স্থান বা space দখল বা reserve করে রাখবে না অর্থাৎ মনে হবে যেন সেখানে কোন এলিমেন্ট বা কন্টেন্ট নেই। display প্রপার্টি ব্যবহারের ফলে এলিমেনটটি hide হবে এবং তা leyout এর ওপর কোন প্রভাব রাখে না।
শেয়ার করুন
