সিএসএস প্রদর্শন টিউটোরিয়াল (CSS Display Tutorial in Bangla)

সিএসএস প্রদর্শন টিউটোরিয়াল (CSS Display Tutorial in Bangla)

display প্রোপার্টিজ দিয়ে ব্লক লেভেল এলিমেন্টকে ইনলাইন আবার ইনলাইন এলিমেন্ট কে ব্লক লেভেল বানানো যায়। এছাড়া এই প্রোপার্টিজ দিয়ে এলিমেন্ট অদৃশ্য করে রাখা যায়। মুলত এর ৩/৪ টি মান খুব ব্যবহার হয় বাকি মানগুলি দিয়েও অনেক কাজ হয় তবে কম ব্যবহৃত হয়ে থাকে।

1..navigation a {

2.display: block;

3.margin-left: 0.5em;

4.padding: 5px;

5.border: 1px solid #000;

6.color: #000;

7.text-decoration: none;

8.}

প্রদর্শন
display:inline; দিয়ে দেখুন (এটাই বা্ ডিফল্ট থাকে) সব a বা এনকর ট্যাগ একলাইনে দেখাবে। এনকর হচ্ছে (<a></a> ) ইনলাইন এলিমেন্ট। display:block; দেয়াতে ব্লক লেভেল এলিমেন্টের মত কাজ করেছে। এরুপ <span>, <em> ইত্যাদি ইনলাইন এলিমেন্ট বা যেকোন ইনলাইন এলিমেন্টে কে প্রয়োজনে ব্লক লেভেল করা যায় এই প্রোপার্টিজ দিয়ে।

আবার <p>, <li> ইত্যাদি ব্লক লেভেল এলিমেন্ট যেগুলি ব্রাউজারের সম্পূর্ন width নিয়ে থাকে এবং আগে পিছে লাইন ব্রেক দেয়া থাকে এসবকে ইনলাইন এর মত কাজ করাতে display:inline; করে দিতে হয়। যেমন

1.p{

2.display:inline;

3.}

প্রদর্শন

দেখুন p কিভাবে ইনলাইন এলিমেন্টের মত কাজ করছে। display এর আরেকটা মান আছে যথা "none", এটা দিলে ঐ এলিমেন্টকে লুকিয়ে ফেলবে এবং কোন স্পেসও ধরে রাখবেনা। জেকোয়েরি দিয়ে কাজ ফর্ম ভেলিডেশন ইত্যাদি কাজে এভাবে এলিমেন্ট অদৃশ্য করে রাখার প্রয়োজন হয়।
উপরের উদাহরনে display:inline; এর জায়গায় display:none; দিয়ে দেখুন অার কিছু দেখাবেনা।

inline-block (display:inline-block) একটা মান আছে এটা দিলে ইনলাইনের মতই কাজ করবে শুধু পার্থক্য হচ্ছে height এবং width এখন এলিমেন্ট টির জন্য কাজ করবে। সাধারনভাবে ইনলাইন এলিমেন্টের height, width কাজ করেনা।

display:table; দিলে এলিমেন্টটি টেবিলের (<table></table>) মত আচরন করবে।
display:table-cell; দিলে এলিমেন্ট টি <td></td> এর মত কাজ করবে।
table-row দিলে <tr></tr> মত কাজ হবে।
এরুপ আরো আছে, প্রয়োগ করে দেখতে পারেন।

01.display:inline-table;

02.display:list-item;

03.display:table-caption;

04.display:table-column-group;

05.display:table-header-group;

06.display:table-footer-group;

07.display:table-row-group;

08.display:table-column;

09.display:run-in;

10.display:flex;