CSS Düzeni - Görüntü Özelliği
Özellik display, düzeni kontrol etmek için en önemli CSS özelliğidir.
Ekran Özelliği
Özellik display, bir öğenin görüntülenip görüntülenmeyeceğini/nasıl görüntüleneceğini belirtir.
Her HTML öğesinin, ne tür bir öğe olduğuna bağlı olarak varsayılan bir görüntüleme değeri vardır. Çoğu öğe için varsayılan görüntüleme değeri blockveya
inline.
Paneli göstermek için tıklayın
This panel contains a <div> element, which is hidden by default (display: none).
It is styled with CSS, and we use JavaScript to show it (change it to (display: block).
Blok Seviyesi Öğeler
Blok düzeyinde bir öğe her zaman yeni bir satırda başlar ve mevcut tüm genişliği kaplar (mümkün olduğunca sola ve sağa doğru uzanır).
Blok düzeyinde öğelere örnekler:
- <div>
- <h1> - <h6>
- <p>
- <form>
- <başlık>
- <altbilgi>
- <bölüm>
Satır İçi Öğeler
Satır içi öğe yeni bir satırda başlamaz ve yalnızca gerektiği kadar genişlikte yer kaplar.
Bu, bir paragraf içindeki satır içi <span> öğesidir .
Satır içi öğelere örnekler:
- <span>
- <a>
- <img>
Görüntü yok;
display: none;JavaScript ile, öğeleri silmeden ve yeniden oluşturmadan gizlemek ve göstermek için yaygın olarak kullanılır. Bunun nasıl başarılabileceğini bilmek istiyorsanız, bu sayfadaki son örneğimize bir göz atın.
<script>Öğe display: none;
varsayılan olarak kullanır .
Varsayılan Görüntü Değerini Geçersiz Kıl
Belirtildiği gibi, her öğenin 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 öğesiyle değiştirmek veya tam tersi, sayfanın belirli bir şekilde görünmesi ve yine de web standartlarını takip etmesi için yararlı olabilir.
Yaygın bir örnek, <li>yatay menüler için satır içi öğeler yapmaktır:
Örnek
li {
display: inline;
}
Not: Bir öğenin görüntüleme özelliğinin ayarlanması, ne tür bir öğe olduğunu DEĞİL, yalnızca öğenin nasıl görüntüleneceğini değiştirir. Bu nedenle, bir satır içi elemanın display: block;içinde başka blok elemanlara sahip olmasına izin verilmez.
Aşağıdaki örnek, <span> öğelerini blok öğeleri olarak görüntüler:
Örnek
span {
display: block;
}
Aşağıdaki örnek, <a> öğelerini blok öğeleri olarak görüntüler:
Örnek
a {
display: block;
}
Bir Öğeyi Gizle - göster:yok veya görünürlük:gizli?
display:none
visibility:hidden
Sıfırla
displayBir öğeyi gizleme özelliği
, olarak ayarlanarak yapılabilir none. Öğe gizlenecek ve sayfa, öğe orada değilmiş gibi görüntülenecektir:
Örnek
h1.hidden {
display: none;
}
visibility:hidden;ayrıca bir öğeyi gizler.
Ancak, öğe yine de eskisi gibi aynı alanı kaplayacaktır. Öğe gizlenecek, ancak yine de düzeni etkileyecek:
Örnek
h1.hidden {
visibility: hidden;
}
Daha fazla örnek
This example demonstrates display: none; versus visibility: hidden;
This example demonstrates how to use CSS and JavaScript to show an element on
click.
CSS Display/Visibility Properties
| Property | Description |
|---|---|
| display | Specifies how an element should be displayed |
| visibility | Specifies whether or not an element should be visible |