CSS ডিসপ্লে
CSS ডিসপ্লে হল CSS-এর সবচেয়ে গুরুত্বপূর্ণ বৈশিষ্ট্য যা উপাদানটির বিন্যাস নিয়ন্ত্রণ করতে ব্যবহৃত হয়। এটি নির্দিষ্ট করে কিভাবে উপাদানটি প্রদর্শিত হয়।
প্রতিটি উপাদান তার প্রকৃতি অনুযায়ী একটি ডিফল্ট প্রদর্শন মান আছে. ওয়েবপৃষ্ঠার প্রতিটি উপাদান একটি আয়তক্ষেত্রাকার বাক্স এবং CSS বৈশিষ্ট্য সেই আয়তক্ষেত্রাকার বাক্সের আচরণকে সংজ্ঞায়িত করে।
CSS ডিফল্ট বৈশিষ্ট্য প্রদর্শন
| ডিফল্ট মান | inline |
| উত্তরাধিকারসূত্রে প্রাপ্ত | no |
| অ্যানিমেশন সমর্থন করে | no |
| সংস্করণ | css1 |
| জাভাস্ক্রিপ্ট সিনট্যাক্স | object.style.display=”none” |
বাক্য গঠন
প্রদর্শন: মান;
CSS প্রদর্শন মান
নিম্নলিখিত CSS ডিসপ্লে মান রয়েছে যা সাধারণত ব্যবহৃত হয়।
- প্রদর্শন: ইনলাইন;
- প্রদর্শন: ইনলাইন-ব্লক;
- প্রদর্শন ব্লক;
- প্রদর্শন: রান-ইন;
- প্রদর্শন: কোনোটিই নয়;
1) CSS ডিসপ্লে ইনলাইন
ইনলাইন উপাদান শুধুমাত্র প্রয়োজনীয় প্রস্থ লাগে। এটি লাইন বিরতি জোর করে না তাই পাঠ্যের প্রবাহ ইনলাইন উদাহরণে ভাঙে না।
ইনলাইন উপাদান হল:
<span>
<a>
<em>
<b> ইত্যাদি
চলুন CSS ডিসপ্লে ইনলাইনের একটি উদাহরণ দেখি।
আউটপুট:
হ্যালো Javatpoint.com জাভা টিউটোরিয়াল। এসকিউএল টিউটোরিয়াল। এইচটিএমএল টিউটোরিয়াল। CSS টিউটোরিয়াল।
2) CSS ডিসপ্লে ইনলাইন-ব্লক
CSS ডিসপ্লে ইনলাইন-ব্লক এলিমেন্ট ইনলাইন এলিমেন্টের অনুরূপ কিন্তু পার্থক্য হল আপনি প্রস্থ এবং উচ্চতা সেট করতে পারবেন।
আউটপুট:
হ্যালো Javatpoint.com জাভা টিউটোরিয়াল। এসকিউএল টিউটোরিয়াল। এইচটিএমএল টিউটোরিয়াল। CSS টিউটোরিয়াল।
3) CSS ডিসপ্লে ব্লক
CSS ডিসপ্লে ব্লক উপাদান যতটা সম্ভব অনুভূমিক স্থান নেয়। মানে ব্লক উপাদান সম্পূর্ণ উপলব্ধ প্রস্থ লাগে। তারা তাদের আগে এবং পরে একটি লাইন বিরতি করা.
আউটপুট:
হ্যালো Javatpoint.com
জাভা টিউটোরিয়াল।
এসকিউএল টিউটোরিয়াল।
এইচটিএমএল টিউটোরিয়াল।
CSS টিউটোরিয়াল।
4) CSS ডিসপ্লে রান-ইন
এই সম্পত্তি Mozilla Firefox-এ কাজ করে না। এই উপাদানগুলি নিজের দ্বারা একটি নির্দিষ্ট বাক্স তৈরি করে না।
যদি রান-ইন বক্সে একটি বক বক্স থাকে, তবে এটি ব্লকের মতোই হবে।
যদি ব্লক বক্স রান-ইন বক্সকে অনুসরণ করে, রান-ইন বক্সটি ব্লক বক্সের প্রথম ইনলাইন বক্সে পরিণত হয়।
যদি ইনলাইন বক্স রান-ইন বক্সকে অনুসরণ করে, রান-ইন বক্সটি একটি ব্লক বক্সে পরিণত হয়।
- <!DOCTYPE html>
- </html>
- </head>
- </style>
- p {
- display: run-in;
- }
- </style>
- </head>
- </body>
- <p>Hello Javatpoint.com</p>
- <p>Java Tutorial.</p>
- <p>SQL Tutorial.</p>
- <p>HTML Tutorial.</p>
- <p>CSS Tutorial.</p>
- </body>
- </html>
আউটপুট:
হ্যালো Javatpoint.com
জাভা টিউটোরিয়াল।
এসকিউএল টিউটোরিয়াল।
এইচটিএমএল টিউটোরিয়াল।
CSS টিউটোরিয়াল।
5) CSS ডিসপ্লে কোনোটিই নয়
“কিছুই নয়” মানটি সম্পূর্ণরূপে পৃষ্ঠা থেকে উপাদানটিকে সরিয়ে দেয়। এটা কোন জায়গা নেবে না।
আউটপুট:
এই শিরোনাম দৃশ্যমান.
আপনি দেখতে পাচ্ছেন যে লুকানো শিরোনামে কোনও স্থান নেই।
অন্যান্য CSS প্রদর্শন মান
| Property-value | Description |
|---|---|
| flex | এটি একটি ব্লক-স্তরের ফ্লেক্স ধারক হিসাবে একটি উপাদান প্রদর্শন করতে ব্যবহৃত হয়। এটি css3 এ নতুন। |
| inline-flex | এটি একটি ইনলাইন-স্তরের ফ্লেক্স ধারক হিসাবে একটি উপাদান প্রদর্শন করতে ব্যবহৃত হয়। এটি css3 এ নতুন। |
| inline-table | এটি একটি ইনলাইন-স্তরের টেবিল হিসাবে একটি উপাদান প্রদর্শন করে। |
| list-Item | এটি উপাদানটিকে একটি <li> উপাদানের মতো আচরণ করে। |
| table | এটি উপাদানটিকে একটি <টেবিল> উপাদানের মতো আচরণ করে। |
| table-caption | এটি উপাদানটিকে একটি <ক্যাপশন> উপাদানের মতো আচরণ করে। |
| table-column-group | এটি উপাদানটিকে একটি <colgroup> উপাদানের মতো আচরণ করে। |
| table-header-group | এটি উপাদানটিকে একটি <thead> উপাদানের মতো আচরণ করে। |
| table-footer-group | এটি উপাদানটিকে একটি <tfoot> উপাদানের মতো আচরণ করে। |
| table-row-group | এটি উপাদানটিকে একটি <tbody> উপাদানের মতো আচরণ করে। |
| table-cell | এটি উপাদানটিকে একটি <td> উপাদানের মতো আচরণ করে। |
| table-row | এটি উপাদানটিকে একটি <tr> উপাদানের মতো আচরণ করে। |
| table-column | এটি উপাদানটিকে একটি <col> উপাদানের মতো আচরণ করে। |
