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

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

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; }

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; }

Display – Block ve Inline Elemanları

Bir block elemanı, kullanılabilecek tüm yatay genişliği kullanan ve kendisinden önce ve sonra bir satır sonu bulunan elemandır.

Block elemanları aşağıdaki gibidir:

• <h1>
• <p>
• <li>
• <div>

Bir inline elemanı ise gerekli olduğu kadar genişleyen bir elemandır. Satır sonu zorunluluğu da yoktur.

Inline elemanlarına örnekler ise şu şekildedir:

• <span>
• <a>

Bir Elemanın Görüntülenme Biçimini Değiştirme

Bir inline elemanını bir block elemanına değiştirmek ya da tersini yapmak, sayfanın web standartlarını koruyarak belirli bir biçimde görünmesini sağlayabilir.

Aşağıdaki örnek <li> elemanlarını bir inline eleman olarak göstermektedir:

li { display: inline; }

Aşağıdaki örnek ise, <span> elemanlarını block elemanı olarak gösteriyor:

span { display: block; }