নথিতে উপাদানটি দৃশ্যমান হবে কি না তার সাথে সম্পর্কিত একটি মান নির্দিষ্ট করতে CSS দৃশ্যমানতা বৈশিষ্ট্য ব্যবহার করা হয়। যদিও উপাদানটি রেন্ডার করা হয় তবে যদি CSS দৃশ্যমানতা লুকানো অবস্থায় সেট করা থাকে তবে এটি দৃশ্যমান করা হয় না।
উপাদানটির দৃশ্যমানতা নিয়ন্ত্রণ করতে ব্যবহৃত CSS দৃশ্যমানতার মানগুলি হল −
| Sr. No | মান ও বর্ণনা |
|---|---|
| 1 | দৃশ্যমান এটি ডিফল্ট, উপাদান এবং এর বাচ্চারা দৃশ্যমান |
| 2 | লুকানো এটি উপাদানটি লুকিয়ে রাখে এবং এর বাচ্চারা অদৃশ্য, তবে উপাদানটি এখনও রেন্ডার করা হয় এবং পৃষ্ঠায় উপযুক্ত স্থান দেওয়া হয় |
| 3 | পতন এটি শুধুমাত্র টেবিল সারি ( |
| 4 | প্রাথমিক এটি উপাদানটির দৃশ্যমানতা তার ডিফল্ট মান সেট করে |
| 5 | উত্তরাধিকার এটি সুনির্দিষ্ট করে যে দৃশ্যমানতার সম্পত্তির মান মূল উপাদান থেকে উত্তরাধিকারসূত্রে পাওয়া উচিত |
উদাহরণ
চলুন 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 দৃশ্যমানতা পতন প্রয়োগ করা হয়েছে −
উদাহরণ
আসুন সিএসএস দৃশ্যমানতা লুকানো −
এর একটি উদাহরণ দেখি<!DOCTYPE html>
<html>
<head>
<title>CSS Visibility hidden</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-Visibility-hidden</legend>
<div id="container">
<div class="child"></div><div class="child primary"></div><div class="child"></div><div class="child"></div><div class="child primary"></div><div class="child primary"></div>
</div><br>
<input type="button" value="Hide Primary Colors" onclick="visibilityHidden()">
</fieldset>
</form>
<script>
var primaryColor = document.getElementsByClassName('primary');
function visibilityHidden(){
for(var i=0; i<3; i++)
primaryColor[i].style.visibility = 'hidden';
}
</script>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে'প্রাথমিক রং লুকান' ক্লিক করার আগে৷ বোতাম -
'প্রাথমিক রং লুকান' ক্লিক করার পর বোতাম -
