CSS Display Kullanımı – Web Tasarım & Programlama
CSS Web Tasarım

CSS Display Kullanımı

Webdeki her element birer dikdörtgen şekildir. CSS  display özelliği ise şeklin nasıl davranacağını belirler. CSS display özelliği içinde yaygın kullanılan bir kaç tane özellik vardır.

Tüm öğeler için varsayılan değer satır içidir. Çoğu tarayıcı bazı elementleri block olarak değiştirir (Örn:div etiketi).

inline

Öğeler için varsayılan değer. <Span>, <em> veya <b> gibi öğeleri düşünün ve bir metin dizesinde bu öğelerdeki metinlerin nasıl kaydırılacağı, metnin akışını bozmaz.

<span>,<em> ve <i> gibi etiketler için varsayılan değerdir. Bir metin içinde akışı bozmadan metin içinde nasıl kaydırılacağını ifade eder.

 

Satır içi olan etiketler margin ve padding gibi boşlukları kabul eder. Fakat satır içi özelliğine sahip oldukları için etiketlerin üst ve altına etkisi olmaz.

inline olan etiketler witdh ve height özellikleri bulunmaz.

inline-block

inline-block olaraksatı ayarlanan bir öğe, metnin doğal akışıyla (“taban çizgisi”) aynı hizada olacak şekilde inline ile çok benzer bir davranış gösterir. Fark, en belirgin olan durumu width ve height verebiliyor olmamızdır. inline-block olan etikete margin ve padding verildiğinde satırın yükseklik değerini değiştirdiğini de belirtmek isterim.

block

HTML’de bir kaç tane öğe tarayıcı varsayılan değeri ile display block olarak ayarlanmıştır. Bunlar <div>, <section>, <ul>, <li>, <p>, <h1> gibi etiketler varsayılan olarak bir satırın tamanın kaplarlar.  Özel bir genişlik değeri verilmediyse bu elementler satırın tamamını işgal eder.

Aşağıdaki örnekte <p> etiketi block elementtir ve <p> etiketini yeşil renkte çerçeve eklenmiştir.

 

flexbox

Yeni görüntülenme yöntemlerinden biridir. Akışkan tasarımlar için yeni yaklaşımlar sunar. flexbox konusu kapsamlı olduğu için ayrı bir makale başlığı olarak ele alınması daha uygun olur.

 

grid

flexbox özelliği gibi grid özelliği de sayfa yerleşimleri için büyük avantajlar getiri. Mobil tasarımlar ve veri yerleşimleri için güzel çözümler sunar.

 

none

Öğeyi sayfadan tamamen kaldırır. Öğe DOM içinde mevcut olmasına rağmen akış içinde olmadığı için görsel olarak okuma yapan tarayıcı ve cihazlarda görüntülenmeyecektir.

 

table

Tablo olmayan elementin tablo gibi davranmasını istiyorsanız kapsayıcı elementi tablo elementi olarak düzenleyebilirsiniz.  Aşağıdaki özelliklerle birlikte elementi tablo olarak yapıp içindeki öğeleri hücre gibi olmasını sağlayabilirsiniz.

 

 

 

 

Yorum yap