Css Dersleri Bölüm 16 Gösterim ve Görünürlük
Display özelliği, bir elementin nasıl gözükeceğini ve Visibility özelliği de bir elementin görünür ya da gizli olmasını sağlar.
Bir elementi gizlemek – display:none veya visibility:hidden
Bir elementi gizlemek display’e none veya visibility’ye hidden değeri vermekle gerçekleşir. Yalnız bunlar farklı sonuçlarla karşılaşmamıza neden olur:
visibility:hidden elementi gizler,fakat hala önceden belirlenmiş olan alanı kaplamaya devam eder. Element yok olur ama hacim kaplar hala yani şablonda yeri hazırdır.
display:none elementi gizler, işgal ettiği yer de gizlenir. Element yok olur ve element hiç var olmamış gibi yer almaz şablonda:
CSS Display Elementinin – Block ve Inline Değerleri
Block elementlerinin tam genişlik ve yüksekliği kaplaması sağlar ve önce ve sonrasına satır atar.
Block element örnekleri:
- <h1>
- <p>
- <div>
Inline yani satır içi elementler de sadece genişliği kaplar ve satır atmaya zorlamaz.
Inline element örnekleri:
- <span>
- <a>
Elementin nasıl görüneceğini değiştirmek
Satır içi ya da blok elementlerin nasıl görüneceğini belirlemek ya da diğerlerini, sayfanın belirli yönden güzel ve düzenli gözükmesini sağlayacaktır ve hala web standartlarını takip edecektir.
Örnek, liste elementlerinin gösterimlerini satır içi olarak ayarlayacaktır:
Örnek, span elementinin blok görünümüne kavuşmasını sağlayacaktır:
Not: Bir elementin görünüm türünü değiştirmek sadece nasıl görüneceğini değiştirecektir, yalnız nasıl bir element olduğunu değiştirmez. For example: An inline element set to display:block is not allowed to have a block element nested inside of it.
Diğer uygulamalar
Bir elementi saır içi olarak nasıl gösteririz.
Bir elementi blok olarak nasıl gösteririz
Tablo elementinde yığılmayı nasıl sağlarız
Bu özellik bize, eğer dökümanın tipi belirlendiyse ve ie8+ ise, table elementinde yığılma biraraya gelmeyi göstermektedir.
Bu içerik tamamen w3schools’tan alıntıdır.