CSS WEB

CSS Display Kullanımı

Web sitelerini oluşturmaya başlamak için, belge içinde yer alan farklı içerik öğelerini, sayfa akışını oluşturabilmek içinse hangi HTML öğelerinin ne şekilde görüntülendiği hakkında biraz bilgi sahibi olmamız gerekir.

Web tarayıcıları her HTML öğesini bir kutu gibi ele almaktadır. Ancak bu tarayıcılar öğelerin anlam doğası gereği, tüm kutuları aynı şekilde sayfanıza yerleştirmezler. Her HTML öğesinin, kendi türüne bağlı olarak varsayılan bir görüntüleme değeri vardır.

Çoğu öğenin varsayılan görüntü değeri block veya inline şeklindedir:

  • Block Level : Blok Seviyesi Etiketler
  • Inline Level : Satır İçi Etiketler

Blok Seviyesi Etiketler

Bir blok düzeyi eleman her zaman yeni bir satıra başlar ve mevcut olan tüm satır genişliği alır. (mümkün olduğunca sola ve sağa doğru uzanır) Bir blok, diğerinin üstünde istiflenir ve mevcut genişliği tamamen işgal eder. Blok düzeyindeki öğeler birbirinin içine yerleştirilebilir ve satır içi düzeydeki öğeleri sarabilir. Çoğu zaman, paragraflar gibi daha büyük içerik parçaları için kullanılan blok düzeyinde öğeler görürüz.

Blok Seviyeli öğelerden bazıları aşağıda listelenmiştir.

  • <div>
  • <hx>
  • <p>
  • <table>
  • <ul>,<ol>,<dl>,<li>
  • <form>
  • <header>
  • <footer>
  • <section>

Satır İçi Etiketler

Satıriçi bir öğe yeni bir satıra başlamaz. Bir belgenin normal akışına girer, birbiri ardına sıralanırlar ve yalnızca kendi içeriğinin genişliğini korurlar. Satıriçi düzeydeki öğeler birbirinin içine yerleştirilebilir; Ancak, blok düzeyindeki öğeleri kaydıramazlar.

Satır içi öğelerden bazıları aşağıda listelenmiştir.

  • <a>
  • <img>
  • <span>
  • <strong>
  • <em>

display Özelliği

CSS display özelliği bir öğenin nasıl görüntüleneceğini belirtir. Sayfanın akışı HTML öğelerinin yerleşimi ile olur. Belirtildiği gibi, her öğenin varsayılan görüntü değeri vardır. Ancak özgün tasarımlarımızı yapabilmek için öğelerin bu varsayılan görüntü değerlerini değiştirmemiz gerektiği durumlar olabilir. Böyle durumlarda display özelliği kullanılarak örneğin satır içi bir öğeyi bir blok öğesine veya tersine değiştirme, sayfayı belirli bir şekilde görünmesi için yararlı olabilir. display özelliğinin alabileceği değerler aşağıda verilmiştir.

  • none
  • inline
  • block
  • inline-block

display : inline;

Blok seviyeli öğelere uyguladığınızda satır içi davranışı gösterirler.

Örnek;

En yaygın örnek, <li>ile yatay menüler için satır içi öğeler hazırlamaktır; Aşağıdaki gibi bir CSS ile <li> öğeleri kullanarak basit bir menü yapabilirsiniz.

<li> öğeleri normal görüntüleme değeri blok yapıdadır. Bu yüzden standart olarak <li> alt alta sıralanırlar. Blok oldukları için her bir <li>öğesi yeni satırda başlar. Ancak display özelliğine inline değeri vererek <li> etiketini satır içi duruma getirebilirsiniz. Aşağıdaki ekran çıktısında görüldüğü üzere öğeler satır içi davranış gösterecek ve yan yana sıralanacaklardır.

display : block;

Satır içi HTML öğelere uyguladığınızda sayfa akışı içinde blok seviyeli öğeler gibi davranış gösterirler.

Örnek;

Aşağıdaki örnek, <a> öğelerini blok öğeleri olarak görüntüler:

display : none;

HTML öğelerini, silinmeden veya yeniden oluşturmadan, gizlemek veya göstermek için genellikle JavaScript ile sıklıkla kullanılır. Bir öğeyi gizlemek için “display:none” CSS bildirimini kullanmanız yeterlidir. Öğe gizlenecek ve sayfanız, öğe yokmuş gibi görüntülenecektir.

Örnek;

Buna benzer olarak CSS’te kullanılan visibility özelliği vardır. visibility özelliğine atanacak olan hidden değeri uygulanan HTML öğesini görünmez yapar. Ancak “display:none” kullanımından farkı öğe gösterilmiyor olsa da sayfa akışı içinde yerini muhafaza eder.

Örnek;

Örnek;

Aşağıdaki örneğimizde display özelliğini Javascript ile kontrol ederek, tıklamayla bir öğeyi göstermek için CSS ve JavaScript’in nasıl kullanılacağını göstermektedir.

display : inline-block;

Bir öğeyi hem blok hem de satır içi eleman gibi hareket ettirebilirsiniz. Satır içi blok ayarı, bir öğenin her iki şekildeki görüntülenme etkilerine sahip olduğunu ifade eder. Bu özellik aslen satır içi gibi davranması istenen bir elemanın sahip olamayacağı margin, padding, width, height gibi özelliklerin işlevsel hale gelebilmesini sağlamaktadır. Bir örnekle inceleyelim;

Örnek;

Yukarıdaki örnek incelendiğinde, bir paragrafın içinde satır içi olarak bilinen <span> öğesine margin, padding, width, height  özelliklerini CSS ile değiştirmeye çalıştığımızda uygun davranışlarda bulunmadığı, ancak bu durumun son paragrafta display özelliğine inline-block değeri verilerek, hem satır içi kalması hem de bir blok öğesi gibi stilden etkilenmesi sağlanmıştır.

Örnek;

display Özelliği kullanarak sayfa düzeni yapmak mümkündür.

Yorum Yap