সিএসএস ডিসপ্লে - Css Display



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


display এবং visibility

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 এর ওপর কোন প্রভাব রাখে না।

উদাহরণ

h1.hidden {display:none;}




block এবং inline এলিমেন্ট

একটি block এলিমেন্ট হল সেই এলিমেন্ট যেগুলো প্রয়োজনের থেকেও অতিরিক্ত স্থান নেয় অর্থাৎ ডানে এবং বামে পুরো লাইন দখল করে এবং ওপরে এবং নীচে লাইন ব্রেক বা line break নেয়।

কতগুলো block এলিমেন্টের নাম হল -

Div
Heading tag
Paragraph tag

একটি inline এলিমেন্ট ততটুকু স্থান বা space ই নেয় যতখানি তার প্রয়োজন। inline এলিমেন্ট কখনোই প্রয়োজনের বেশী স্থান দখল করে না এবং ওপরে এবং নীচে কোন লাইন ব্রেক বা line break নেয় না।

কতগুলো block এলিমেন্টের নাম হল -

ancor
span tag


এলিমেন্ট কিভাবে প্রদর্শিত হবে?

কোন inline এলিমেন্টকে block এলিমেন্টে কিংবা block এলিমেন্টকে inline এলিমেন্টে রুপান্তর করে ওয়েব পেজকে একটি নির্দিষ্ট রূপে প্রদর্শন করা যায় এবং এই কাজটি করা যায় web standard অনুসরন করেই।

লিস্ট আইটেম এর মত inline এলিমেন্টকে block এলিমেন্ট রূপে ব্যবহার করার জন্য নীচের কোডগুলো দেখুন -

উদাহরণ

li {display:inline;}


span এর মত block এলিমেন্টকে inline এলিমেন্ট রূপে ব্যবহার করার জন্য নীচের কোডগুলো দেখুন -

উদাহরণ

span {display:block;}


নোট - display টাইপ পরিবর্তন করে এলিমেন্টটি কিভাবে প্রদর্শিত হবে তা নির্ধারণ করা হয়, এটি কোন প্রকারের এলিমেন্ট তা নির্ধারণ করা যায় না।
এমন কোন inline এলিমেন্টে display প্রপার্টির মান block নির্ধারণ করা যাবে না, যার ভেতরে কোন block এলিমেন্ট নেষ্টেড অবস্থায় রয়েছে।







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.