Turkcell | Geleceği Yazanlar

201: HTML5 & CSS Başlangıç seviyesi derslerde Web Programlama uygulama geliştirme ortamını detaylı olarak inceliyoruz.

Tüm Eğitimleri Aldın mı? Kendini sınamanın tam zamanı

Haydi Sınava Gir

CSS Görüntüleme ve Görünürlük

Kategori : Mobil | Lisans : Creative Commons (by-nc-sa) | En son 12.09.2019 tarihinde güncellendi
Eğitmen : Geleceği Yazanlar Ekibi
Etiketler : css-display css-visibility css-gizlilik css-gizleme visibility-hidden display-none web-programlama

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>