CSS Display Kullanımı

Display özelliği CSS’de en sık kullanılan özelliklerden biridir. Web tasarımcıların gizle-göster olarak isimlendirdiği bu özellik oldukça farklı amaçlar için kullanılabilir.

 

CSS Display Özellikleri

CSS Display; none, block, inline, inline-block değerleri ile sıkça kullanılır. Bu değerlerin ne işe yaradıklarına birlikte bakalım:

Öncelikle bir CSS Display örneği tanımlayalım ve bu örnek üzerinden Display değerlerinin kullanımlarına bakalım:

Örnek:

<div class="sehir1">Ankara Türkiye'nin başkentidir.</div>
<div class="sehir2">İstanbul Türkiye'nin en kalabalık şehridir.</div>
<div class="sehir3">Konya Türkiye'nin en büyük şehridir. </div>

 

CSS Display None

CSS display kullanımında, display özelliğine none değeri atandığı zaman bu özelliğin etkilendiği nesneler görünmez olur. Arkaplanda kod mevcuttur ancak görünmez.

Örnek:

.sehir1, .sehir2, .sehir3{
    display: none;
}

Üstteki kodda display:none ile sehir1, sehir2 ve sehir3 class’larına ait div etiketleri sayfada görünmez.

 

CSS Display Block

CSS Block değeri kullanımında nesnenin bir blok şekilnde davranmasını sağlayabiliriz. Span etiketinin varsayılan display değeri inline’dir. Span etiketleri ile oluşturulduğunda tarayıcı tarafından yan yana basılır. Ancak span etiketinin değeri block yapılırsa span etiketleri sonrasında boşluk bırakıp alt satıra geçer. p, div, h1, h2, h3 vb. html elementlerinin varsayılan display değeri de block’tur.

Örnek:

<h1>Başlık 1</h1>
<p>Paragraf</p>
<h2>Başlık 2</h2>
<h3>Başlık 3</h3>
<div>Div elementi</div>
<h4>Başlık 4</h4>

Üsteki elementlerin varsayılan display değerlerine birlikte bakalım:

css-display

Yukarıdaki resimde header(h1,h2 vb.), div, p etiketleri karışık olarak yazılmıştır. Ancak hepsinin display değerleri block olduğundan dolayı bir sonraki elementi alta atar.

 

CSS Display Inline 

CSS Display inline  nesnelerin span etiketinde olduğu gibi yanyana tekrar etmesini sağlar. Ancak dikkat edilmesi gereken durum inline özelliği verilmiş bir nesnede width, text-align gibi özelliklerin değerleri işlemez.

.sehir1, .sehir2, .sehir3{
    display: inline;
    width: 200px;
    height: 200px;
    color:#FFC0CB;
}
div.sehir1{
    background-color: green;
 
}
div.sehir2{
    background-color: blue;
}
div.sehir3{
    background-color: yellow;
}

Yukarıda sonuç kısmında gördüğünüz üzere display özelliğinde inline değeri kullanılmıştır. sehir1, sehir2, sehir3 class’ına sahip div elementleri yanyana yazılır ve width, height özellikleri inline değerinden dolayı işlemez.

 

CSS Inline-Block

CSS Inline-Block değeri  inline ve block değerlerinden oluşur. Etiketler yanyana basılır. block değeri width, height değerlerini korur.Ancak block gibi ardında boşluk bırakıp alt satıra geçmez. 

Örnek:

.sehir1, .sehir2, .sehir3{
    color:#FFC0CB;
    display: inline-block
}
.bir{
    background-color: green;
 
}
.iki{
    height: 30px;
    background-color: blue;
}
.uc{
    background-color: yellow;
}


Kimler Neler Demiş?

avatar
  Subscribe  
Bildir