css visibility özelliği, Html elementinin görüntülenmesi veya gizlenmesi için kullanırız.
Aldığı değerler:
visible : Element gösteririz.
hidden : Element gizleriz ama kapladığı alan koruruz.
collepse : Element gizlenir ama kapladığı alan tablo ise korunmaz, tablo dışında bir eleman ise korunur.
inherit : Bir üstteki elementten miras alır.
initial : Varsayılan değere çevirir.
Örnek:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.first, .second, .third {
margin-bottom: 10px;
border: 1px solid #dedede;
width: 200px;
}
.first .two{ visibility: visible;}
.second .two{ visibility: hidden;}
.third { visibility: collapse;}
table.fourth { visibility: collapse;}
</style>
</head>
<body>
<div class="first">
<div class="one"> HTML </div>
<div class="two"> CSS </div>
<div class="three"> JS </div>
</div>
<div class="second">
<div class="one"> HTML </div>
<div class="two"> CSS </div>
<div class="three"> JS </div>
</div>
<div class="third">
<div class="one"> HTML </div>
<div class="two"> CSS </div>
<div class="three"> JS </div>
</div>
<hr>
<table class="fourth">
<tr>
<th>adı</th>
<th>soyadı</th>
</tr>
<tr>
<td>tasarım</td>
<td>yazılım</td>
</tr>
</table>
<hr>
</body>
</html>
Başka bir yazımızda görüşmek üzere…
