CSS Display Özellikleri nelerdir?

22 Temmuz 2010 | Css | Etiket: , ,

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.


Sizin düşünceniz?