CSS DISPLAY ÖZELLİKLERİ

Merhaba...

CSS ile elemanların görünüm özelliklerini DISPLAY özelliği ile değiştirebilir , birbirine dönüştürebiliriz...

DISPLAY

Display özelliği ile elemanları gizleyebilir , satır içi yada blok yapabilir , yada flex veya grid gibi farklı yapılara sahip olmasını sağlayabiliyoruz.  Display özelliği sıklıkla aşağıdaki değerleri alır.

• none
• block
• inline
• inline-block
• flex
• grid

NONE

Bir elemanın gizli olması , tasarımda görünmemesi isteniyorsa display:none özlelliği kullanılır. Gizlenen eleman , sayfa kaynağı kodlarında görünür iken , sayfa tasarımında görünmeyecektir.. CSS ile yapılan açılır menülerde oldukça kullanılır.

CSS

p.gizli { display:none; background-color:skyblue }

HMTL

<p>  Paragraf 1 </p>
<p class="gizli">  Paragraf 2 </p>
<p>  Paragraf 3 </p>

EKRAN

Yukarıda 1. ve 3. paragraf tasarımda görünürken,  display:none özelliği uygulanmış olan .gizli class'lı Paragraf 2 ekranda görünmeyecektir..

BLOCK

Elemanların blok eleman olmasını sağlar.  Yani satır içi bir elemana display:block özelliği verildiğinde artık BLOK eleman gibi davranacaktır. Blok elemanlar bulundukları satırı kaplarlar ve yanlarına başka elemanların gelmesine izin vermezler..

CSS

span { display:block; background-color:skyblue }
strong { display:block; background-color:orange }

HMTL

<strong> DISPLAY BLOCK İLE</strong>
<span> SATIR İÇİ ELEMANLAR BLOK ELEMANA DÖNÜŞÜR </span>

EKRAN

Yukarıda normalde satır içi elemanlar olan SPAN ve STRONG etiketleri display:block özelliği ile BLOK elemana dönüşmüş olurlar..

INLINE

Elemanların satır içi eleman olmasını sağlar.  Yani blok  bir elemana display:inline özelliği verildiğinde artık SATIR İÇİ eleman gibi davranacaktır. SATIR İÇİ elemanlar bulundukları satırı kaplamazlar ve yanlarına başka elemanların gelmesine izin verirler..

Satır içi elemanlar Genişlik, Yükseklik , Margin-Top ve Margin-Bottom değerlerini alamazlar.

CSS

div{ display:inline; background-color:skyblue width:100px:}

HMTL

<div> DIV 1 </div>
<div> DIV 2 </div>
<div> DIV 3 </div>

EKRAN

DIV'ler normalde blok elemanlardır. Ancak yukarıda display:inline ile satır içi elemanlara dönüşürler ve aynı satırda yanyana  sıralanırlar. CSS ile verilen genişlik değeride  (100px) geçerli olmayacaktır.

INLINE-BLOCK

Inline-block ile elemanlar inline değerinde olduğu gibi satır içi elemanlara dönüşüp yanyana sıralanabilirler.. Ancak  INLINE'dan farklı olarak aynı zamanda genişlik yükseklik margin-top ve margin-bottom değerleride alabilirler.. Yani satır içinde blok eleman gibi davranırlar..

INLINE-BLOCK  elemanlar Genişlik, Yükseklik , Margin-Top ve Margin-Bottom değerlerini alabilirler...

CSS

div{ display:inline; background-color:skyblue; width:100px:}

HMTL

<div> DIV 1 </div>
<div> DIV 2 </div>
<div> DIV 3 </div>

EKRAN

DIV'ler normalde blok elemanlardır. Ancak yukarıda display:inline-block  ile satır içi elemanlara dönüşürler ve aynı satırda yanyana  sıralanırlar. Inline görünümden farklı olarak ise divlere genişlik değeride uygulanacaktır.

FLEX ve GRID 

Flex ve Grid yukarıdaki görünüm türlerinden farklı olarak elemanın bir yapıya bürünmesini sağlar. Her iki yapınında kendine özgü başka özellikleri vardır. İlerleyen konularda her iki yapı ayrıntılı olarak ele alınacaktır...

Görüşmek Üzere..