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. <a href="#">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.

Bu Yazıyı Paylaşın

1 Yıldız2 Yıldız3 Yıldız4 Yıldız5 Yıldız (Daha önce hiç oy verilmemiş)
Loading ... Loading ...