Web tasarım kursumuzun, CSS derslerinin, 11.bölümünü işlemekteyiz. Herkese başarılar dilerim
CSS Düzenli Görüntü Özelliği
CSS’in sağladığı en büyük özellikler arasında display özelliği vardır.
Görüntü Özelliği
Display özelliğini tasarımlarımıza eklediğimiz içeriklerin görüntülenme olasılığını belirlemek için kullanırız.
Yani kısaca display uygulayacağımız içeriğin görünüp görünmeyeceğini bu eleman sayesinde belirleriz.
Block Seviyesi Elemanları
Bir block elemanı kendisini her zaman yeni bir satır olarak ekle ve o satırdaki tüm genişliği kendisi alır(mümkün olduğunca sağa ve sola doğru yayılır.)
Şimdi block seviyesi elemanları görelim:
- <div>
- <h1> – <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
İnline elemanlar
Bu elemanlar yeni bir satıra başlamazlar ve sadece içeriği kadar yer kaplarlar.
CSS yardımı ile yinede istediğimiz genişlik,uzunluk,border gibi özellikleri verebiliriz.
Bu bir paragraftaki <span> etiketidir.
Gördüğünüz gibi sadece içeriğindeki kadar yer kapladı ve satırdaki tüm genişliğüi kendisi almadı yanına yazı da yazabildik
Satıriçi öğelerine örnekler:
- <span>
- <a>
- <img>
Display: none;
Bu özellik sayesinde bir süre görünmesini istemediğiniz bazı içerikleri silmeye gerek kalmadan saklayabiliriz.
Pek kullanışlı bir yöntem olmasa da yorum satırı amacı ile de kullanılabilir. Yani silmek istemediğiniz kodları yazdıktan sonra stil olarak display:none;özelliği verilerek kullanıcıya gösterilmeden bekletilebilir.
Varsayılan Görüntülenme Değerini Geçersiz Kılma
Daha öncede bahsettiğimiz gibi her HTML öğesi varsayılan bir değer ile beraber gelmektedir.Ancak hepsinin ortak bir değeri vardır o da görünürlük özelliğidir.
Bu özelliği bazı CSS stili kodları kullanarak çok basit bir şekilde geçersizkılabiliriz.
Buna en iyi örnek olarak yatay menüleri verebiliriz. Hatırladığınız üzere daha önce sizler ile <li> elemanını öğrenmiştik bu elemanlar menü yapımlarında kullanıldıkları için display: none; özelliğini en çok alan elemanlardan birisidir.
Çünkü yatay açılır meülerin yapımında öncelikle <li> elemanını gizlememiz gerekir. Ne demek istediğimi ileride çok daha rahatanlayabileceksiniz.
Şimdi bu özellik nasıl kullanılıyor onu bir örnek ile görelim:

web tasarım style css display tag
Aşağıdaki örnek <span> elemanını block olarak göstermektedir.

web tasarım style css display tag
Aşapıdaki örnek <a> elemanlarını engelleme öğeleri olarak görüntüler

web tasarım style css display tag
Web tasarım kursumuzun, CSS derslerinin, 11.bölümünü işlemiş bulunmaktayız. Herkese başarılar dilerim.