display özelliği düzenini kontrol etmek için en önemli CSS özelliktir.
ekran Mülkiyet
display özelliği bir unsur görüntülenirse / nasıl belirtir.
Her HTML öğesi olduğunu elemanın türüne bağlı olarak varsayılan bir ekran değeri vardır. En elemanları için varsayılan ekran değerdir block veya inline .
panelini görmek için tıklayın
Bu panel bir içeriyor <div> varsayılan olarak gizlidir elemanı, ( display: none ) .
Bu CSS ile tarz olduğunu ve bunu göstermek için JavaScript kullanan (change it to ( display: block ) .
Blok seviyesinden Elemanları
Bir blok düzeyinde öğe her zaman yeni bir satıra başlar ve mevcut tam genişliği kadar sürer (stretches out to the left and right as far as it can) .
blok düzeyi elemanlarının örnekleri:
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
Inline elementler
Bir satır içi eleman yeni bir satıra başlamak ve sadece gerekli olduğu kadar genişliğe kadar sürer etmez.
Bu bir satır içi olan <span> bir paragraf içindeki öğesi.
içi elemanlarının örnekleri:
- <span>
- <a>
- <img>
Display: none;
display: none; Yaygın gizlemek ve silme ve yeniden oluşturmayı olmadan elemanları göstermek için JavaScript kullanılır. Eğer bu sağlanabilir nasıl bilmek istiyorsanız bu sayfadaki son örneğe göz atın.
<script> eleman kullanımı display: none; onun varsayılan olarak.
Standart Ekran Geçersiz kılma değeri
Belirtildiği gibi, her eleman bir varsayılan görüntü değeri vardır. Ancak, bu geçersiz kılabilirsiniz.
bir blok elemanı, veya tam tersi bir satır içi eleman değiştirme, sayfa belirli şekilde bakmak ve hala web standartlarını takip yapmak için yararlı olabilir.
Genel bir örnek inline yapıyor <li> yatay menüler için elemanlar:
Note: Bir elemanın ekran özelliğinin ayarlanması yalnızca eleman görüntülenme şeklini değiştirir DEĞİL, elemanın ne tür öyle. Yani, bir satır içi eleman display: block; İçindeki diğer blok elemanlarını olmasına izin verilmez.
Aşağıdaki örnek, görüntüler <span> blok elemanlarının gibi öğeleri:
Bir Eleman gizleme - display:none veya visibility:hidden ?
Unsurunu gizlenmesi ayarlayarak yapılabilir display özelliğine none . eleman gizlenecek, ve sayfa öğesi yoksa gibi görüntülenir:
visibility:hidden; Ayrıca bir element gizler.
Ancak, eleman yine eskisi gibi yer kaplayacaktır. eleman gizli, ama yine düzenini etkilemez edilecektir:
Diğer Örnekler
display: none; karşı visibility: hidden;
Bu örnek display: none; karşı visibility: hidden;
Içeriğini göstermek için JavaScript birlikte CSS kullanarak
Bu örnek tıklamada bir öğeyi görüntüleme CSS ve JavaScript nasıl kullanılacağını göstermektedir.
Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Alıştırma 4»
CSS Görüntü / Görüş Özellikleri
| özellik | Açıklama |
|---|---|
| display | Bir öğe görüntülenmesi gerektiğini nasıl belirler |
| visibility | Bir öğe görünür olmalıdır olup olmadığını belirtir |