CSS Görüntüleme ve Görünürlük
Lisans:
Creative Commons
11.12.2020
tarihinde güncellendi
Bakabileceğiniz Etiketler:
Eğitmen:
Geleceği Yazanlar Ekibi
Display özelliği elemanın nasıl görüntüleneceğini, visibility özelliği ise bir elemanın görünür mü yoksa gizli mi olacağını belirler.
Bir Elemanı Gizlemek
Bir elemanı gizlemek ya display özelliğini “none” yaparak ya da visibility özelliğini “hidden” yaparak gerçekleştirilir. Bununla birlikte bu iki metot farklı sonuçlar üretir:
visibility: hidden ataması elemanı gizler ancak eleman sayfada aynı yeri kaplar. Eleman gizlenecektir fakat hala genel çerçevede yer alacaktır.
h1.hidden {
visibility: hidden;
}
Şimdi bunun nasıl kullanılacağına bakalım.
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
visibility: hidden;
}
</style>
</head>
<body>
<h1>GORUNUR BASLIK</h1>
<h1 class="hidden">GORUNMEZ BASLIK</h1>
<p>GORUNMEZ BASLIK GENE DE YER KAPLIYOR</p>
</body>
</html>
display: none bir elemanı gizler; herhangi bir boşluk ayırmaz. Eleman gizlenecek ve sayfa o eleman yokmuş gibi görüntülenecektir.
h1.hidden {
display: none;
}
Örnek kullanımı ise,
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body>
<h1>BU GORUNUR BASLIKTIR</h1>
<h1 class="hidden">BU GIZLI BASLIKTIR</h1>
<p>GIZLI BASLIK SAYFADA YER KAPLAMIYOR</p>
</body>
</html>
