CSS Dersleri 19 - Display Kullanımı


Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Display Özelliği konusunu öğreneceğiz.

CSS'de "display" özelliği, düzeni kontrol etmek için en önemli CSS özelliğidir.Display özelliği, bir elemanın görüntülenip görüntülenmeyeceğini veya nasıl görüntüleneceğini belirtir.Her HTML etiketinin, ne tür etiket olduğuna bağlı olarak varsayılan bir görüntüleme değeri vardır. Çoğu etiket için varsayılan görüntüleme değeri blok veya satır içi değeridir.

Eğer bu konuları hatırlamıyorsanız, HTML Dersleri 10 – Bloklar ve Div Kullanımı dersine göz atabilirsiniz.

display : none 

CSS'de "display:none" özelliği ; genellikle JavaScript ile öğeleri silmeden ve yeniden oluşturmadan gizlemek ve göstermek için kullanılır.

Varsayılan Display Değerini Geçersiz Kılmak

Önceden dediğimiz gibi, her etiketin varsayılan bir görüntüleme değeri vardır. Ancak bunu geçersiz kılabilirsiniz.Satır içi bir öğeyi bir blok öğeye değiştirmek veya bunun tersi, sayfanın belirli bir şekilde görünmesini ve yine de web standartlarını takip etmesini sağlamak için yararlı olabilir.

Buna en güzel örnek : yatay menüler için li etiketini satır içi öğeye çevirmektir :

li {
  display: inline;
}

Aşağıdaki örnek, span etiketlerinin blok öğeleri olarak görüntülenmesini sağlar :

span {
  display: block;
}

Aşağıdaki örnek, a etiketlerinin blok öğeleri olarak görüntülenmesini sağlar :

a {
  display: block;
}

Bir Etiketi Gizlemek 

CSS'de bir etiketi gizlemek için display:none veya visibility:hidden özellikleri kullanılabilir ama verdikleri etki farklı olacaktır.

Bir etiketi gizlemek için, display:none olarak ayarlanarak yapılabilir. Etiket gizlenecek ve sayfa, etiket orada yokmuş gibi görüntülenecektir:

h1.hidden {
  display: none;
}

Visibility:hidden ile de etiket gizlenebilir.Ancak, etiket yine de önceki haliyle aynı alanı kaplayacaktır. Etiket gizlenecek, ancak düzeni yine de etkileyecek:

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim CSS Dersleri
Kategori Web Programlama
Ders Adeti 52 Ders
Dil Türkçe
Güncelleme 10/2021
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 49 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla
  • Java Örnek Projeler

    Java Örnek Projeler

    Kategori Programlama Dili
    Ders Süresi 20 Ders
    Dil Türkçe
    Güncelleme 10/2022
    Derse Başla
  • C# Dersleri

    C# Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 100 Ders
    Dil Türkçe
    Güncelleme 04/2024
    Derse Başla