Web Programlama

Web Programlama

DERS PROGRAMI
Web Programlama 201 Ders Programı
Sınava Gir

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>

Sınava Gir