Css Görüntü

Css görüntüleme şekilleri ve gizleme işlemlerinin nasıl yapıldığı hakkında bilgi sahibi olacaksınız. Css görüntüleme şekilleri display özelliği kullanılarak yapılmaktadır.

Css Display Özelliği

Css display özelliği nesnelerin akışını kontrol etmek için kullanılmaktadır. Css display özelliği ile html ögelerinin yan yana, alt alta listelenmesi için veya ögeyi gizlemek için kullanılır.  Css display özelliğine ait 3 değer bulunmaktadır. Bunlar:

• none : Html ögelerini gizlemek için kullanılır.
• block : Html ögelerini blok şeklinde işlemek için kullanılır. Yani nesneleri alt alta sıralamak için kullanılmaktadır.
• inline : Html ögelerini ismindende anlaşıldığı üzere satır içi yani aynı satırda göstermek için kullanılır.

Css Display None Değeri Kullanımı

<style type="text/css">

.ornek{

display:none

}

</style>                  

Kodu Çalıştır

Css Display Block Değeri Kullanımı

<style type="text/css">

p{
border-style:dotted;
display:block;

}

</style>             

Kodu Çalıştır

Css Display İnline Değeri Kullanımı

<style type="text/css">

p{

display:inline;

}

</style>                

Kodu Çalıştır

Css ile Html Ögesi Nasıl Gizlenir?

Css ile html ögesini listelemek için iki yöntem vardır. Biri yukarıdaki örnekte display:none özelliği ile html ögesi gizlenebildiği gibi visibility:hidden özelliği ile de html ögesi gizlenebilmektedir. İki yöntem ile de html ögesi gizlenebilmektedir. Aradaki fark ise display:none özelliğinde sayfada hiç boşluk kalmaz, visibility hidden özelliğinde ise html ögesi gizlenir fakat aynı alan boş bırakılır.

Css Visibility:hidden Değeri Kullanımı

<style type="text/css">

.gizle{
visibility:hidden;

}

</style>              

Kodu Çalıştır