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

by Hasan Yasin Türkyılmaz Temmuz 02, 2012

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.

Bültenime kaydol!

İster soru sor, ister yazılarımdan ve etkinliklerimden haberdar ol...

Hasan Yasin Türkyılmaz

Dijital stratejist, growth hacker, pazarlama ve reklam danışmanı, eğitmen, konuşmacı, yazar @bilgeadam @g4asw @hyturkyilmaz

Related Articles

%d blogcu bunu beğendi: