Css

CSS İleri Düzey – CSS Görünürlük (Visibility)

CSS İleri Düzey – CSS Görünürlük (Visibility)

Görünürlük özelliği, bir öğenin görünür mü yoksa gizli mi olduğunu belirler.

Elementlerin Görünürlüğünü Kontrol Etme

visibility Bir öğenin görünür olup olmadığını kontrol etmek için özelliği kullanabilirsiniz . Bu özellik aşağıdaki tabloda listelenen değerlerden birini alabilir:

Değer Açıklama
visible Varsayılan değer. Kutu ve içeriği görünür.
hidden Kutu ve içeriği görünmez, ancak yine de sayfanın düzenini etkiler.
collapse Bu değer tüm satırın veya sütunun ekrandan kaldırılmasına neden olur. Bu değer satır, satır grubu, sütun ve sütun grubu öğeleri için kullanılır.
inherit Görünürlük özelliğinin değerinin ana öğeden miras alınması gerektiğini belirtir, yani ana öğesi için belirtilenle aynı görünürlük değerini alır.

Stil kuralı visibility: collapse;ancak iç tablo öğelerini kaldırır, ancak tablonun düzenini başka hiçbir şekilde etkilemez. Normalde masa elemanları tarafından kaplanan alan müteakip kardeşler tarafından doldurulacaktır.

Not: Stil kuralı visibility: collapse;, tablo öğeleri yerine diğer öğeler için belirtilirse, aynı davranışa neden olur hidden.

Bir Elementi Gizlemek/Göstermemek

Ekran ve görünürlük CSS özellikleri aynı görünüyor, ancak bunlar aslında oldukça farklı ve çoğu zaman web geliştirmeye yeni olanları karıştırıyor.

visibility: hidden; – Öğeyi gizler, ancak düzende hala yer kaplar. Görünürlüğü görünür olarak ayarlanmışsa, gizli bir kutunun alt öğesi görünür olacaktır.

display: none; – İse elemanı gizler ve elemanı yoksaydığımız için sayfada herhangi bir yer kaplamaz.

Block (Kutu) ve Inline (Satıriçi) İfadeler

Block/Blok elemanlar alabildiğine genişler ve yeni bir satırdan başlar.

Blok elemanları görelim:

  • address
  • blockquote
  • dd
  • div
  • dl
  • fieldset
  • form
  • h1, h2, h3, h4, h5, h6
  • hr
  • li
  • noscript
  • ol
  • p
  • pre
  • table
  • tfoot
  • ul

Inline/Satıriçi elemanlar, gerektiği kadar genişlik alır ve yeni bir satırdan başlamaz.

Satıriçi elemanları görelim:

  • b
  • big
  • i
  • small
  • tt
  • abbr
  • acronym
  • cite
  • code
  • dfn
  • em
  • kbd
  • strong
  • samp
  • var
  • a
  • bdo
  • br
  • img
  • map
  • object
  • q
  • script
  • span
  • sub
  • sup
  • button
  • input
  • label
  • select
  • textarea

Blok ve Satıriçi elemanları daha iyi anlamak için aşağıdaki örneği inceleyiniz.

Bir Elementin Kutu Ya Da Satır İçi Olmasını Sağlamak

Bir öğenin “display” özelliğini “inline” veya “block” olarak degiştirerek, Web standartlarının dışına çıkmadan tasarımda güzel çözümler bulabilirsiniz.

  • display: block; – Element kutu şeklinde alan kaplayacaktır. Kullanıldığı anda yeni bir satırdan başlar.

Aşağıdaki örnek, liste elemanlarını “inline” olarak göstermektedir:

  • display: inline; – Element satır içinde yer alacaktır. Kullanıldığı satırda devam edecektir.

Aşağıdaki örnek, span elemanlarını “block” olarak göstermektedir:

 

Yazar Hakkında

Beytullah Toprak

Genç girişimci olarak web sitemde siz değerli okuyucularımıza elimden geldiğince bilgi aktarmak hem öğrenmek , hem sizlere öğretmek amaçlamaktayız.

Yorum Yap