সকল HTML এলিমেন্টের একটি ডিফল্ট display মান থাকে যা CSS Display প্রপার্টি দিয়ে ওভাররাইড করা যায়, একইভাবে সব এলিমেন্টের visibility ডিফল্টরূপে visible থাকে যা CSS Visibility প্রপার্টি দিয়ে ওভাররাইড করা যায়।
CSS Display প্রপার্টির মানগুলো নিম্নরূপ:
| ক্রমিক নং | মান ও বর্ণনা |
|---|---|
| 1 | inline এলিমেন্টকে ইনলাইন এলিমেন্ট হিসেবে প্রদর্শন করে (যেমন <span>), height এবং width প্রপার্টি কাজ করে না |
| 2 | block এলিমেন্টকে ব্লক এলিমেন্ট হিসেবে প্রদর্শন করে (যেমন <div>) এবং লাইন ব্রেক ফোর্স করে |
| 3 | contents কন্টেইনার অদৃশ্য করে, চাইল্ড এলিমেন্টগুলকে DOM-এ পরবর্তী লেভেলের চাইল্ড বানায় |
| 4 | flex এলিমেন্টকে ব্লক-লেভেল ফ্লেক্স কন্টেইনার হিসেবে প্রদর্শন করে |
| 5 | grid এলিমেন্টকে ব্লক-লেভেল গ্রিড কন্টেইনার হিসেবে প্রদর্শন করে |
| 6 | inline-block এলিমেন্টকে ইনলাইন-লেভেল ব্লক কন্টেইনার হিসেবে প্রদর্শন করে। এলিমেন্টটি ইনলাইন হিসেবে ফরম্যাট হয়, কিন্তু height এবং width মান প্রয়োগ করা যায় |
| 7 | inline-flex এলিমেন্টকে ইনলাইন-লেভেল ফ্লেক্স কন্টেইনার হিসেবে প্রদর্শন করে |
| 8 | inline-grid এলিমেন্টকে ইনলাইন-লেভেল গ্রিড কন্টেইনার হিসেবে প্রদর্শন করে |
| 9 | inline-table এলিমেন্ট ইনলাইন-লেভেল টেবিল হিসেবে প্রদর্শিত হয় |
| 10 | list-item এলিমেন্টকে <li> এলিমেন্টের মতো আচরণ করতে দেয় |
| 11 | run-in কন্টেক্সট অনুযায়ী এলিমেন্টকে ব্লক বা ইনলাইন হিসেবে প্রদর্শন করে |
| 12 | table এলিমেন্টকে <table> এলিমেন্টের মতো আচরণ করতে দেয় |
| 13 | table-caption এলিমেন্টকে <caption> এলিমেন্টের মতো আচরণ করতে দেয় |
| 14 | table-column-group এলিমেন্টকে <colgroup> এলিমেন্টের মতো আচরণ করতে দেয় |
| 15 | table-header-group এলিমেন্টকে <thead> এলিমেন্টের মতো আচরণ করতে দেয় |
| 16 | table-footer-group এলিমেন্টকে <tfoot> এলিমেন্টের মতো আচরণ করতে দেয় |
| 17 | table-row-group এলিমেন্টকে <tbody> এলিমেন্টের মতো আচরণ করতে দেয় |
| 18 | table-cell এলিমেন্টকে <td> এলিমেন্টের মতো আচরণ করতে দেয় |
| 19 | table-column এলিমেন্টকে <col> এলিমেন্টের মতো আচরণ করতে দেয় |
| 20 | table-row এলিমেন্টকে >tr< এলিমেন্টের মতো আচরণ করতে দেয় |
| 21 | none এলিমেন্ট পেজে রেন্ডার হয় না |
| 22 | initial এই প্রপার্টিকে এর ডিফল্ট মান সেট করে। |
| 23 | inherit এলিমেন্টের display প্রপার্টি তার প্যারেন্ট এলিমেন্ট থেকে নেওয়া হয়। |
CSS display inline-block এর একটি উদাহরণ দেখি:
উদাহরণ
<!DOCTYPE html> <html> <head> <title>CSS Display Inline-Block</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; box-sizing: border-box; } input[type="button"] { border-radius: 10px; } .child{ display: inline-block; height: 40px; width: 40px; color: white; border: 4px solid black; } .child:nth-of-type(1){ background-color: #FF8A00; } .child:nth-of-type(2){ background-color: #F44336; } .child:nth-of-type(3){ background-color: #C303C3; } .child:nth-of-type(4){ background-color: #4CAF50; } .child:nth-of-type(5){ background-color: #03A9F4; } .child:nth-of-type(6){ background-color: #FEDC11; } </style> </head> <body> <form> <fieldset> <legend>CSS-Display-Inline-Block</legend> <div id="container"> <div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div><div class="child"></div> </div><br> </body> </html>
আউটপুট
CSS Visibility প্রপার্টির মানগুলো নিম্নরূপ:
| ক্রমিক নং | মান ও বর্ণনা |
|---|---|
| 1 | visible ডিফল্ট, এলিমেন্ট এবং এর চাইল্ডগুলো দৃশ্যমান |
| 2 | hidden এলিমেন্ট এবং এর চাইল্ডগুলো অদৃশ্য, কিন্তু এলিমেন্ট রেন্ডার হয় এবং পেজে উপযুক্ত স্পেস নেয় |
| 3 | collapse শুধু টেবিল রো (<tr>), রো গ্রুপ (<tbody>), কলাম (<col>), কলাম গ্রুপ (<colgroup>) জন্য ব্যবহৃত হয়। এই মান একটি রো বা কলাম সরিয়ে দেয়, এবং রো বা কলাম যে স্পেস নেয় তা অন্যান্য কন্টেন্টের জন্য উপলব্ধ হয়। অন্যান্য এলিমেন্টে ব্যবহার করলে 'hidden' হিসেবে রেন্ডার হয় |
| 4 | initial এলিমেন্টের visibility-কে এর ডিফল্ট মান সেট করে |
| 5 | inherit visibility প্রপার্টির মান প্যারেন্ট এলিমেন্ট থেকে ইনহেরিট করা হবে তা নির্দেশ করে |
CSS Visibility প্রপার্টির একটি উদাহরণ দেখি:
উদাহরণ
<!DOCTYPE html> <html> <head> <title>CSS Visibility collapse</title> <style> form ,table{ width:70%; margin: 0 auto; text-align: center; } table, th, td { border-collapse: collapse; border: 1px solid black; } thead { background-color: goldenrod; } tbody{ background-color: khaki; } tr:nth-of-type(3){ visibility: collapse; } </style> </head> <body> <form> <fieldset> <legend>CSS-Visibility-collapse</legend> <table> <thead> <tr><th>Name</th><th>Course</th></tr> </thead> <tbody> <tr><td>Joana</td><td>MBA</td></tr> <tr><td>Smith</td><td>B.Arc</td></tr> <tr><td>Xersus</td><td>M.Sc</td></tr> </tbody> </table> </fieldset> </form> </body> </html>
আউটপুট
CSS Visibility collapse প্রয়োগ না করা অবস্থায়:
CSS Visibility collapse প্রয়োগ করা অবস্থায়:
