Post No:21
আসসালামুয়ালাইকুম আশা করি সবাই অনেক ভালো আছেন আজকে আমরা CSS Display Property সম্পর্কে জানবো।
আগের ব্লগ গুলা পড়ার জন্যে লিংকে ক্লিক করুন:
hashnode.com/@Labib
CSS Display Property
display প্রোপার্টিজ দিয়ে ব্লক লেভেল এলিমেন্টকে ইনলাইন আবার ইনলাইন এলিমেন্ট কে ব্লক লেভেল বানানো যায়। এছাড়া এই প্রোপার্টিজ দিয়ে এলিমেন্ট অদৃশ্য করে রাখা যায়। মুলত এর ৩/৪ টি মান খুব ব্যবহার হয় বাকি মানগুলি দিয়েও অনেক কাজ হয় তবে কম ব্যবহৃত হয়ে থাকে।
সিএসএস এর display প্রোপার্টি, নির্ধারণ করে কোন এইচটিএমএল এলিমেন্ট কিভাবে প্রদর্শিত হবে। সকল এইচটিএমএল এলিমেন্ট এর ই, তাদের প্রকারভেদ এর ওপর নির্ভর করে, একটি default মান বা value আছে। একটি এইচটিএমএল এলিমেন্ট হয় block নয়তো inline.
Display Inline Tag:
ইনলাইন এলিমেন্ট গুলো কেবল মাত্র প্রয়োজন অনুযায়ী প্রস্থ বা width সংরক্ষন বা দখল করে। এই এলিমেন্ট গুলো কোন নতুন লাইন তৈরি করে না।
নিচে কয়েকটি ইনলাইন এলিমেন্ট এর উদাহরন দেওয়া হল ঃ
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn>
<em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp>
<script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time>
Input:
<IDOCTYPE html>
<html>
<body>
<a href="#">This is an inline span element inside a paragraph.</a>
<span style="border: 1px solid black; background-color:red; color:white">Hello
<small>This is small tag</small>
<p>The SPAN element is an inline element, and will not start on a new line and
only takes up as much width as necessary.</p>
</body>
</html>
Output:
Display block Tag:
ব্লক-লেভেল এলিমেন্ট গুলো সাধারণ ভাবে বাম থেকে ডান দিকের সমস্ত স্থান টুকু সংরক্ষণ করে রাখে অর্থাৎ লাইনের সম্পূর্ন প্রস্থ বা width দখল করে নেয়, এই এলিমেন্টকে আপনি লাইনের বা দিকে বা ডান দিকে, যেদিকেই স্থাপন করেন না কেন, সকল ক্ষেত্রেই লাইনের সম্পূর্ন প্রস্থ সংরক্ষন করে। ব্লক-লেভেল এলিমেন্ট গুলো সব সময় একটি নতুন লাইন তৈরি করে।
Display block tag গুলো নিচে দেয়া হলঃ
<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul>
Input:
<IDOCTYPE html>
<html>
<body>
<p style="border: 1px solid black”>Hello World</p>
<div style="border: lpx solid black">Hello World</div>
<p>The P and the DIV elements are both block elements, and they will always start
on a new line and take up the full width available (stretches out to the left and
right as far as it can).</p>
</body>
</html>
Output:
Display None:
display প্রপার্টি ব্যবহার করে তার মান বা value যদি none নির্ধারণ করা হয় তাহলে তা কোন এলিমেনটকে hide করবে এবং পূর্বের স্থান বা space দখল বা reserve করে রাখবে না অর্থাৎ মনে হবে যেন সেখানে কোন এলিমেন্ট বা কন্টেন্ট নেই। display প্রপার্টি ব্যবহারের ফলে এলিমেনটটি hide হবে এবং তা leyout এর ওপর কোন প্রভাব রাখে না।
Input:
<IDOCTYPE html>
<html>
<head>
<style>
hl.hidden {
display: none;
¥
</style>
</head>
<body>
<h1>This heading is visible.</h1>
<p>You can see that the hidden heading does not contain any space.</p>
</body>
</html>
Output:
