সমস্ত HTML উপাদানগুলির একটি ডিফল্ট ডিসপ্লে মান সেট থাকে এবং CSS ডিসপ্লে সম্পত্তির সাথে ওভাররাইড করা যায়, একইভাবে সমস্ত উপাদানের দৃশ্যমানতা ডিফল্ট হিসাবে দৃশ্যমান হিসাবে সেট করা হয় তবে এটি CSS দৃশ্যমান বৈশিষ্ট্যের সাথে ওভাররাইড করা যেতে পারে৷
নিচে CSS ডিসপ্লে প্রপার্টি -
-এর মান দেওয়া হল| Sr.No | মান ও বর্ণনা | |||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | ইনলাইন এটি একটি উপাদানকে একটি ইনলাইন উপাদান হিসাবে প্রদর্শন করে (যেমন ), উচ্চতা এবং প্রস্থ বৈশিষ্ট্যগুলি সংজ্ঞায়িত করা হলে কোন প্রভাব থাকবে না | |||||||||||||||||||||||||||||||||||
| 2 | ব্লক করুন এটি একটি উপাদানকে ব্লক উপাদান হিসেবে প্রদর্শন করে (যেমন ) এবং একটি লাইন বিরতি জোর করে | |||||||||||||||||||||||||||||||||||
| 3 | সামগ্রী এটি ধারকটিকে অদৃশ্য করে দেয়, এলিমেন্টের শিশু উপাদানগুলিকে DOM-এর পরবর্তী স্তরে পরিণত করে৷ | |||||||||||||||||||||||||||||||||||
| 4 | ফ্লেক্স এটি ব্লক-লেভেল ফ্লেক্স ধারক হিসাবে একটি উপাদান প্রদর্শন করে | |||||||||||||||||||||||||||||||||||
| 5 | গ্রিড এটি ব্লক-লেভেল গ্রিড ধারক হিসাবে একটি উপাদান প্রদর্শন করে | |||||||||||||||||||||||||||||||||||
| 6 | ইনলাইন-ব্লক এটি একটি ইনলাইন-স্তরের ব্লক কন্টেইনার হিসাবে একটি উপাদান প্রদর্শন করে। উপাদান নিজেই একটি ইনলাইন উপাদান হিসাবে ফর্ম্যাট করা হয়, কিন্তু উচ্চতা এবং প্রস্থ মান প্রয়োগ করা যেতে পারে | |||||||||||||||||||||||||||||||||||
| 7 | ইনলাইন-ফ্লেক্স এটি ইনলাইন-লেভেল ফ্লেক্স কন্টেইনার হিসাবে একটি উপাদান প্রদর্শন করে | |||||||||||||||||||||||||||||||||||
| 8 | ইনলাইন-গ্রিড এটি একটি ইনলাইন-স্তরের গ্রিড ধারক হিসাবে একটি উপাদান প্রদর্শন করে | |||||||||||||||||||||||||||||||||||
| 9 | ইনলাইন-টেবিল উপাদানটি একটি ইনলাইন-স্তরের টেবিল হিসাবে প্রদর্শিত হয় | |||||||||||||||||||||||||||||||||||
| 10 | তালিকা-আইটেম এটি উপাদানটিকে একটি | |||||||||||||||||||||||||||||||||||
| 11 | রান-ইন এটি প্রেক্ষাপটের উপর নির্ভর করে ব্লক বা ইনলাইন হিসাবে একটি উপাদান প্রদর্শন করে | |||||||||||||||||||||||||||||||||||
| 12 | টেবিল এটি উপাদানটিকে একটি
আসুন CSS ডিসপ্লে ইনলাইন-ব্লক - এর একটি উদাহরণ দেখিউদাহরণ<!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 ভিজিবিলিটি প্রপার্টি - এর মানগুলো নিচে দেওয়া হল
চলুন CSS ভিজিবিলিটি প্রপার্টি - এর একটি উদাহরণ দেখিউদাহরণ<!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 দৃশ্যমানতা পতন প্রয়োগ করা হয় না −
CSS দৃশ্যমানতা পতন প্রয়োগ করা হয়েছে −
|
