Blok (Block) ve Satır İçi (inline) Seviye Elemanları

CSS dersimizin bu bölümünde Elementlerin hangi seviyede element olduklarından ve bunların görünürlük durumlarından bahsedeceğiz. Elementlerin seviye durumunu 2 kategoriye ayırabiliriz. Birincisi Blok (Block) seviye elementler, İkincisi Satır içi  (inline) elementler.

Blok (Block) Seviyesi Elementler/Etiketler

Başlıca blok seviyesi elementler;

<div>, <h1>…<h6>, <p>, <form>, <header>, <footer>, <section>

Blok seviyesi mantığını biraz daha anlaşılır açıklamak gerekirse; blok seviyesi elemanlar HTML satırlarında bulunduğu satırı komple kaplar, bir blok seviyesi elementten sonra gelecek başka bir element alt satırda görülecektir. <br> (break) etiketi kullanılmasına gerek yoktur. Tabiki bu durumu CSS ile değiştirmek mümkün eğer değiştirilmeyecek olsaydı bugünkü HTML sayfaları modern bir görünüme kavuşamazlardı. Örnek olarak başlık etiketleri (h1,h2…h6) blok seviyesi elementlerdir. HTML satırında başlık elementinden sonra kullanacağınız herhangi bir element alt satırda gözükecektir. En çok kullanılan blok seviyesi etiketi/elementi <div> etiketidir. Hattaki günümüzde birçok sitede diğer blok seviye elementleri dahi kendi içinde barındıran bir etikettir/elemandır.

Blok seviyesindeki elemanların aslında herbiri HTML sayflarında bir bölümü oluşturmaktadır. Düşününki her bir bölümde belli sınıflara (class) bölmüşsünüz, tasarım yapmak çok daha kolaylaşacaktır. PhotoShop bilen arkadaşlar layer (katman) mantığını bilirler. PhotoShoptaki her bir layer’ı aslında blok seviyesi eleman olarak düşünebilirsiniz.

Satır (Inline) Seviyesi  Elementler/Elemanlar

Satır seviyesi elemanlar HTML sayfasında sadece kendi alanları kadar yer kaplayan elemanlardır. Bir satır seviye elemandan sonra <br> etiketi kullanılmaz ise bir sonraki gelecek satır seviyesi element sağ tarafında yer alacaktır. Yani tüm satırın %100’ünü blok seviyesi elementler gibi kaplamayacaktır. Genel olaral satır seviyesi elementler bir blok seviyesi elementin içinde bulunurlar. Örnek vermek gerekirse bir kalın yazı etiketi (<b>), resim etiketi (<img>), hyperlink (<a>) ve span etiketi gibi elemanlar  satır seviyesi elemanlardır.

CSS ile her bir elemente görümün seviyesini tanımlamak mümkündür. Yani bir blok seviyesi elementi satır içi element yapabileceğimiz gibi satır seviyesine sahip bir elemanı da blok seviyesi bir eleman haline getirebiliriz.  Aşağıdaki örnekte hem blok seviyesi için hemde satır seviyesi için örnekler verilmiştir.

See the Pen Block Inside Elementler by Emre (@esencan) on CodePen.

Görünürlük (Visibility)

Günümüzdeki modern web sayfalarında görünürlük (visibility) önemli bir konudur. Örnek vermek gerekirse son günlerde sade ama çarpıcı web sayfaları tasarımları ön plandadır. Eski zamanları düşündüğümüzde bir navbar üzerinde birçok sayfa linki veya menüsü bulunuyordu. Günümüzde artık akıllı telefonlarında ihmal edilemeyeceği bir dönemde web sayfaları; tablet, telefon ve masaüstü ekranlarda görülebilecek şekilde responsive (çözünürlük uyumlu) tasarlanmaktadır. Telefonlar için konuşmak gerekirse minik ekranlarında o kadar fazla menüyü göstermek yerine menünün görünür olma veya gizlenmesi ziyaretçinin insiyatifine bırakılacak yapılar hazırlanmaktadır.

HTML satırlarındaki blok veya satır içi seviye elemanlarının görünmesini, görünmemesini veya gizlenmesini sağlayabiliriz. Görünmemek veya gizlenmek sanki aynı işi yapar, aynı mantığa gelir gibi bir düşünceniz olabilir ama ikisi farklı durumdur. CSS’de Display özelliğinin alacağı “none” değeri o elementi HTML satırlarında gözükmesini tamamen engeller, yokmuş, sanki o satır veya element hiç yazılmamış, hiç var olmamış gibi davranır. Visibility özelliği ise daha farklıdır, blok seviyesi veya satır içi seviye elementinin gözükmesini engeller fakat, kullanılan elementin HTML sayfasında kapladığı alan yok edilmez ve sonra gelen element onun yerine geçemez. Kısacası sadece görünmesini engeller ama yeri (kapladığı alan) boş bırakılır.

Display özelliğinin aldığı değerler | none, | block, | inline. Visibility özelliğinin aldığı değerler | hidden, | show’dur

Görünürlük konusu ile ilgili aşağıdaki örnekleri inceleyebilirsiniz.

See the Pen görünürlük (display, visibility) by Emre (@esencan) on CodePen.

Temel HTML Derslerimi takip etmek ve oynatma listesine ulaşmak için tıklayınız.

HTML Derslerine ulaşmak için tıklayınız.

Konu anlatım videosu