Bu yazımızda Css’te display özelliğini ve nasıl kullanabileceğimizi öğreneceğiz. Display özelliği, Html etiketlerinin sayfa üzerinde yerleştirilmesini ve düzenlenmesini sağlar.
Display özelliğine verebileceğimiz şu 4 değeri inceleyelim (diğer değerleri ilerleyen makalelerde öğreneceğiz)
► block
► inline
► inline-block
► none
Her Html etiketi varsayılan olarak bir display değerine sahiptir. Bu değerler block ve inline’dır.
Biraz daha detaylandıracak olursak block özelliğe sahip etiketler bulundukları satırı tamamen kaplarlar.
Örneğin bir p etiketinin içeriği birkaç kelimeden bile oluşsa bulunduğu satırı tamamen kaplar.
Html’de block değerine sahip etiketlerden bazıları şunlardır;
► <div>
► <h1>-<h6>
► <p>
► <form>
► <header>
► <footer>
► <section>
► <ul>
► <li>
İnline değerine sahip etiketler ise sadece içerikleri kadar yer kaplarlar. Yani tüm satırı kaplamazlar.
Html’de inline değerine sahip etiketlerden bazıları şunlardır;
► <span>
► <a>
► <img>
Gördüğünüz gibi block etiketler tüm satırı kaplarken, inline etiketler içerikleri kadar yer kaplıyor.
Html sayfalarımızı oluştururken bazen block etiketlerini inline etikete çevirmek, inline etiketlerini ise block etikete çevirmek isteyebiliriz. İşte bu durumda display özelliğini kullanırız.
Şöyle bir örnek yapalım. div etiketlerini inline, span etiketlerini block etiket yapalım ve tarayıcıdaki durumlarını inceleyelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style> div,span{ border:1px solid; } div{ display:inline; } span{ display:block; } </style> <div>div etiketi (block)</div> <div>div etiketi (block)</div> <span>span etiketi (inline)</span> <span>span etiketi (inline)</span> |
Önemli Inline etiketlere width ve height değerleri veremeyiz. Bu yüzden bu etiketlere background-color değeri verdiğimizde sadece yazının arkasına etki ettiğini görüyoruz.
Yine margin ve padding değerleri vermek istediğimizde sadece margin-right, margin-left, padding-right, padding-leftdeğerleri verebiliriz.
Inline etiketler için verdiğimiz margin-top, margin-bottom, padding-top, padding-bottom değerleri etki etmeyecektir.
Bu değerlerin de etki etmesini istiyorsak, display özelliğine inline-block veya block değeri vermemiz gerekiyor. Block değeri ile etiket tüm satırı kaplarken, inline-block değeri ile etiketler yan yana yerleştirilebilirler.
Html sayfalarında bir etiketi gizlemek istersek bunu iki yol ile yapabiliriz. Bunlar;
► display : none
► visibility : hidden
Bu iki Css özelliğide, sayfada uygulandığı etiketi gizler. Fakat aralarında şöyle bir fark var.
display : none bir etiketi tamamen sayfadan kaldırır. Etiket sayfadan kaldırılır ve tarayıcı orda hiç bir etiket yokmuş gibi davranır.
visibility : hidden ise bir etiketi gizler ama gizlenen etiketin boyutu kadar sayfada boşluk kalır.
Örneğin 4 adet div etiketi tanımlayalım ve ikinci div etiketini önce display:none; ile daha sonra visibility:hidden; ile gizleyelim ve aradaki farkı görelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style> div{ border:1px solid; padding:10px; margin:5px; } #div-2{ display:none; } </style> <div>div etiketi - 1</div> <div id="div-2">div etiketi - 2</div> <div>div etiketi - 3</div> <div>div etiketi - 4</div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style> div{ border:1px solid; padding:10px; margin:5px; } #div-2{ visibility:hidden; } </style> <div>div etiketi - 1</div> <div id="div-2">div etiketi - 2</div> <div>div etiketi - 3</div> <div>div etiketi - 4</div> |
Gördüğünüz gibi visibility özelliğinde etiket gizlendi ama bulunduğu yeri hala kaplıyor.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
