CSS Display Özellikleri nelerdir?

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.

Yazımızın devamında örneklerle açıklayarak daha iyi anlamanızı sağlayacağım :)
İlk olarak “inline” değerini açıklayalım. Inline değeri 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. Örnek;

DÜZ YAZI

CSS:

  1. a {display: inline;}
DÜZ YAZI

HTML:

  1. <a href=”#”>CssimBenim.com – Inline 1</a>
  2. <a href=”#”>CssimBenim.com – Inline 2</a>
  3. <a href=”#”>CssimBenim.com – Inline 3</a>
  4. <ahref=”#”>CssimBenim.com – Inline 4</a>

Önizleme;
Display: Inline Görünüşü

Close

Display: Inline

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. Örnek;

DÜZ YAZI

CSS:

  1. a {display: block;}
DÜZ YAZI

HTML:

  1. <a href=”#”>CssimBenim.com – Block 1</a>
  2. <a href=”#”>CssimBenim.com – Block 2</a>
  3. <a href=”#”>CssimBenim.com – Block 3</a>
  4. <a href=”#”>CssimBenim.com – Block 4</a>

Önizleme;
Display Block

Son olarak “none” değerimiz kaldı. 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. Örnek;

DÜZ YAZI

CSS:

  1. a {display: none;}
DÜZ YAZI

HTML:

  1. <a href=”#”>CssimBenim.com – Block 1</a>
  2. <a href=”#”>CssimBenim.com – Block 2</a>
  3. <a href=”#”>CssimBenim.com – Block 3</a>
  4. <a href=”#”>CssimBenim.com – Block 4</a>

Önizleme;
Display None

Bu gizleme olayı daha çok JavaScript kodlarında kullanılıyor.

Diğer Konular

Bir Cevap Yazın

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