CSS Display Özelliği

CSS Sayfa Düzeni - display Özelliği

CSS display özelliği, CSS'in sayfa düzeni ve yerleşimi sağlamadaki en önemli özelliğidir.

CSS display Özelliği

CSS display özelliği elementlerin nasıl görüntüleneceğini belirler.

Her HTML elementi varsayılan olarak bir görüntü değerine sahiptir.

Pek çok HTML elementi için görüntülenme değeri block veya inline değerine sahiptir.

Blok Seviyesi Elementler (Block-level)

Bir blok seviyesi element her zaman yeni bir satırda başlar ve bulunduğu satırın tamamını kaplar.

Aşağıdaki HTML elementleri blok seviyesidir:

• <div>
• <h1>-<h6>
• <p>
• <form>
• <header>
• <footer>
• <section>
• <ul>
• <li>

Satır İçi Elementler (inline)

Bir satır içi element yeni bir satır üzerinde başlamaz ve sadece içeriği kadar yer kaplar.

Satır içi elementlere örnek:

• <span>
• <a>
• <img>

CSS Display:none Özelliği

CSS display:none özellik ve değeri bir HTML elementini gizlemek için kullanılır. 

Bir HTML sayfasında çoğu zaman bazı elementleri gizlemek ve daha sonra tekrar göstermek isteriz. Bu durumda display:none oldukça işimize yarar.

Örneğin bir butona tıklandığında sayfadan bir elementin kaybolmasını istiyorsak display:none  kullanırız.

Varsayılan display Değerini Değiştirmek

Blok bir elementi satır içine satır içi bir elementi blok seviyeye çevirmek mümkündür.

Örneğin <li> elementi blok seviyedir. Ama çoğu zaman bu elementi satır içi olarak kullanmak isteriz.

Özellikle web sitelerinde menü yaratırken bu işlemi yaparız.

li {
    display: inline;
}

Aşağıdaki örnek satır içi olan <span> elementini bloğa çevirir:

span {
    display: block;
}

Sayfadaki Bir Elementi Gizlemek

HTML sayfada bir elementi gizlemek istersek iki yol kullanırız:

• display:none
• visibility:hidden

Bu iki CSS özelliği de sayfadaki bir elementi gizlemeye veya göstermeye yarar.

display:none ve visibility:hidden arasındaki fark şudur:

display:none bir elementi tamamen sayfadan kaldırır. Element sayfadan kaldırılır ve tarayıcı orda hiç bir element yokmuş gibi davranır.

visibility:hidden de elementi gizler. Fakat gizlenen elementin boyutu kadar sayfada boşluk kalır.

display:none

Kaldır

visibility:hidden

Gizle

Sıfırla

Sifirla