CSS Gösterme - Gizleme
Bazen HTML elementlerini kullanıcıdan gizlemek gerekebilir. Bir nesnenin görünme şekli ve gizlenmesini
display komutu kullanarak yaparız.
Bir Elementi Gizlemek/Göstermemek
Bunun için kullanabileceğimiz iki kalıp ifade var:
- visibility: hidden; - Element gizlenir ancak elementin sahip olduğu alan boşluk şeklinde sayfada görünecektir.
- display: none; - Element gizlenir ve sahip olduğu alan da sayfada gösterilmez ve yer kaplamaz.
Block (Kutu) ve Inline (Satıriçi) İfadeler
Bir HTML elementi kutu yapısında olabilir. Bu durumda sayfada bulabildiği tüm genişliği kullanan bir kare alan kaplayacaklardır. DIV, P, H1 elementleri bu tarz elementlerdir.
Bazı elementler ise satır içinde sadece başladığı ve bittiği yere kadar alan kaplar. Bunlarsa satıriçi (inline) elementlerdir.
Bir Elementin Kutu Ya Da Satır İçi Olmasını Sağlamak
Element stiline
display'ı kullanarak ekleyeceğimiz şu özellikler HTML elementinin kutu mu yoksa satır parçası mı olacağını belirtmemizi ve değiştirmemizi sağlar:
- display: block; - Element kutu şeklinde alan kaplayacaktır. Kullanıldığı anda yeni bir satırdan başlar.
- display: inline; - Element satır içinde yer alacaktır. Kullanıldığı satırda devam edecektir.
Element özelliklerini değiştirmekle ilgili iki örnek verelim. İlk örneğimizde aslında BLOCK (kutu) tarzı olan LI elementini satır içi ifadeye dönüştürüyoruz:
CSS Kodu
.kutu {
li { display: inline; }
span { display: block; }
}
Yukarıdaki ikinci örnekte ise aslında satır içi özelliğe sahip SPAN elementi BLOCK (kutu) yapısına dönüştürülmüştür.