CSS DİSPLAY ÖZELLİKLERİ

CSS’deki Display özelliği site kodlamasında veya tasarımında diyeyim, çeşitli yazıları, başlıkları, menüleri, linkleri vs. alt alta, yan yana veya görünmez bir şekilde kullanmamızı sağlar.


Display özelliğinin aldığı değerler üç tanedir. Bunlar inline, block ve none dir.

display: inline
Tükçe’de aynı çizgide anlamına gelir. Örnekte link kullanarak göstereceğm. CSS’de bunu kullandığımız zaman linkler yan yana dizilirler.

display: block
Sonraki değerimiz, “block” değeri. Bu değeri yazdığımızda linklerimiz otomatik olarak alt alta dizilecektir. Yapmamız gereken sadece yukarıda yazdığımız display: inline; kısmını “block” yapmak.

display: none
Bu değer ise hiç anlamına geliyor. Display özelliğini none; yaptımızda linkler sayfamızda görünmeyecektir. Bu, link rengini arkaplan rengiyle aynı yapmak gibi değil. Sayfada hiç bir link olmaz.

Örnekle açıklamak gerekirse, HTML kodumuz aşağıdaki gibi olsun

<a href=”#”>Satır  – 1, </a>
<a href=”#”>Satır  – 2, </a>
<a href=”#”>Satır  – 3, </a>
<a href=”#”>Satır  – 4. </a>

Css kod :  a {display: inline;}
Çıktı  :  Satır – 1, Satır – 2,  Satır – 3, Satır – 4.

Cass kod : a {display: block;}
Çıktı :
Satır – 1,
Satır – 2,
Satır – 3,

Satır – 4.

Cass kod : a {display: none;}
Çıktı :  Yok

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir