Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Display Özelliği konusunu öğreneceğiz.
CSS'de "display" özelliği, düzeni kontrol etmek için en önemli CSS özelliğidir.Display özelliği, bir elemanın görüntülenip görüntülenmeyeceğini veya nasıl görüntüleneceğini belirtir.Her HTML etiketinin, ne tür etiket olduğuna bağlı olarak varsayılan bir görüntüleme değeri vardır. Çoğu etiket için varsayılan görüntüleme değeri blok veya satır içi değeridir.
Eğer bu konuları hatırlamıyorsanız, HTML Dersleri 10 – Bloklar ve Div Kullanımı dersine göz atabilirsiniz.
CSS'de "display:none" özelliği ; genellikle JavaScript ile öğeleri silmeden ve yeniden oluşturmadan gizlemek ve göstermek için kullanılır.
Önceden dediğimiz gibi, her etiketin varsayılan bir görüntüleme değeri vardır. Ancak bunu geçersiz kılabilirsiniz.Satır içi bir öğeyi bir blok öğeye değiştirmek veya bunun tersi, sayfanın belirli bir şekilde görünmesini ve yine de web standartlarını takip etmesini sağlamak için yararlı olabilir.
Buna en güzel örnek : yatay menüler için li etiketini satır içi öğeye çevirmektir :
li {
display: inline;
}
Aşağıdaki örnek, span etiketlerinin blok öğeleri olarak görüntülenmesini sağlar :
span {
display: block;
}
Aşağıdaki örnek, a etiketlerinin blok öğeleri olarak görüntülenmesini sağlar :
a {
display: block;
}
CSS'de bir etiketi gizlemek için display:none veya visibility:hidden özellikleri kullanılabilir ama verdikleri etki farklı olacaktır.
Bir etiketi gizlemek için, display:none olarak ayarlanarak yapılabilir. Etiket gizlenecek ve sayfa, etiket orada yokmuş gibi görüntülenecektir:
h1.hidden {
display: none;
}
Visibility:hidden ile de etiket gizlenebilir.Ancak, etiket yine de önceki haliyle aynı alanı kaplayacaktır. Etiket gizlenecek, ancak düzeni yine de etkileyecek: