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
Paragraf 1Paragraf 3
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
DISPLAY BLOCK İLE SATIR İÇİ ELEMANLAR BLOK ELEMANA DÖNÜŞÜR
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..