WEB DESIGN - CSS PART 04

 CSS Display

display:inline;

একাধিক html element কে একটা single লাইনে প্রদর্শনের display:inline ব্যবহৃত হয়। Inline Element গুলোতে আপনি left এবং right সাইড এ mergin এবং padding ব্যবহার করতে পারেন, কিন্তু top এবং bottom এ padding এবং mergin ব্যবহার করতে পারবেন না।

display:block

html element গুলোকে block আকারে প্রদর্শনের জন্য css এর display:block ব্যবহৃত হয়। আর html element গুলোর মধ্যে block element গুলো যেমন <p> এবং <div> tag গুলো বাই ডিফল্ট নিউ লাইনে বসে। আবার যেগুলো block element নয় সেগুলো যেমন <span> এবং <strong> ট্যাগ গুলো পাশাপাশি বসে।

display:inline-block

display:Inline-block অনেকটা inline এর মতোই , পার্থক্য হচ্ছে display:Inline-block এ width এবং height কাজ করে , কিন্তু display:inline এ width এবং height কাজ করেনা।

display:contents

সরাসরি কোনো html Element, Class অথবা Id এর উপর ব্যবহৃত style কে Omit অর্থাৎ নিষ্ক্রিয় করার জন্য CSS display:contents ব্যবহৃত হয়।

CSS Floating

HTML Element গুলিকে পাশাপাশি আনতে CSS Property float ব্যবহৃত হয়। float দিয়ে এলিমেন্ট গুলিকে পাশাপাশি (আড়াআড়িভাবে) বা side-by-side বসানো যায়। float সবসময় আড়াআড়িভাবে কাজ করে। HTML Layout তৈরীর সময় কোন div এর পাশে কোন div হবে তা ঠিক করার জন্য CSS Float ব্যবহৃত হয়।

চলুন CSS float property এর value গুলো সম্পর্কে সংক্ষেপে জানাযাক:

•       float:left – এর মাধ্যমে element টি তার কন্টেইনার এর left এ থাকে।

•       float:right– এর মাধ্যমে element টি তার কন্টেইনার এর right এ থাকে।

•       float:none – অর্থাৎ float হবেনা। এটি হচ্ছে float এর ডিফল্ট অবস্থা।

•       float:inherit – এর মাধ্যমে parent এর float এর অবস্থা ইনহেরিট করবে।

CSS Opacity

opacity: number|initial|inherit;