CSS Display Özellikleri

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;

CSS:
  1. a {display: inline;}

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;

CSS:
  1. a {display: block;}

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;

CSS:
  1. a {display: none;}

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.

You can leave a response, or trackback from your own site. Yorum yapabilirsiniz, veya kendi sitenizden geri izleme yapabilirsiniz.

“CSS Display Özellikleri” için 4 Yorum

  1. Hüseyin diyor ki:

    Teşekkürler dostum :) )

  2. mucahid1986 diyor ki:

    teşekkürler hocam!

  3. kral oyun diyor ki:

    Açıklama için tşkler.
    Hocam katmanlarda yan tarfta scroll bar nasıl çıkıyor.?

  4. ali diyor ki:

    faydalı bir bilgi teşekkürler

Bir yorum yazın

Yorum yaparken sadece bu XHTML kodlarını kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>