Top

Css Dersleri Bölüm 16 Gösterim ve Görünürlük

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.

Örneğin

h1.hidden {visibility:hidden;}

Siz de deneyin »

display:none elementi gizler, işgal ettiği yer de gizlenir. Element yok olur ve element hiç var olmamış gibi yer almaz şablonda:

Örneğin

h1.hidden {display:none;}

Siz de deneyin »

 


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

li {display:inline;}

Siz de deneyin »

Örnek, span elementinin  blok görünümüne kavuşmasını sağlayacaktır:

Örnek

span {display:block;}

Siz de deneyin »

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.

Siz neler düşünüyorsunuz? Yazımızı beğendiyseniz aşağıdaki butonlardan tavsiye edebilirsiniz, paylaşabilirsiniz veya yorumlarınızı sunabilirsiniz. Teşekkürler okuduğunuz için!

Bir önceki yazımız olan Css Dersleri Bölüm 15 Boyutlandırma başlıklı makalemizde boyut, css ve dersleri hakkında bilgiler verilmektedir. Daha fazla yazımızı görmek için HYTürkyılmaz Dijital pazarlama ve growth hacking blogu anasayfası'yı ziyaret edebilirsiniz. Yazımızı aşağıdaki paylaşım butonlarıyla paylaşarak sevginizi yayınız! Teşekkürler!

Hasan Yasin Türkyılmaz

Sosyolog, dijital stratejist. Dijital medya, reklam ve growth hacking eğitimleri ve hizmetleri sunarım. PC, konsol fark etmez. Oyun oynamayı severim.

Tüm yazıları - Websitesi

Beni takip edin!:
TwitterFacebookLinkedInPinterestGoogle PlusDiggFlickrStumbleUponYouTubeYelpRedditDelicious