CSS Display Nedir, CSS’de belkide en çok kullanılan özelliklerden biride display özelliğidir genellikçe web tasarımcılar tarafından gizle-göster olarak kullanılan bu özellik farklı amaçlar içinde kullanılmaktadır. makalenin devamında örnekler ile bu özelliği anlatmaya çalıştım.
CSS Display Nedir? Kullanım Örnekleriyle
Bu makalede display özelliği ve sırasıyla en sık kullanılan none, block, inline, inline-block değerlerinin ne işe yaradıklarını örnekler üzerinden açıklamaya çalışacağım. Tüm örneklerimizde kullanacağımız html kodu şu şekilde olacak.
1 2 3 | <div class="bir">Doctrina philosophari.</div> <div class="iki">Fugiat proident cupidatat, expetendis quem de.</div> <div class="uc">A ita transferrem ab officia quorum ullamco, aut eram noster est officia.</div> |
None
Öncelikle none değerinden bahsedelim eğer display özelliğine none değeri atarsanız bu özelliğin etkilendiği nesneler görünmez olacaktır aslında arkaplanda kod halen mevcuttur fakat görünmez olacaktır şimdi bununla ilgili bir örnek yapalım.
CSS
1 2 3 | .bir, .iki, .uc{ display: none; } |
Üstteki kodda display:none ile bir, iki ve uc class’larına ait div etiketleri görünmeyecektir sayfada.
Block
Block değeri ile’de nesnenin bir block şeklinde davranmasını sağlayabiliriz bunu en iyi şekilde şöyle anlarız span etiketinin varsayılan display değeri inline’dır ve span etiketleri ile oluşturduğumuzda tarayıcı tarafından yanyana basılacaktır. Eğer span etiketininin display değeri block olarak değiştirilirse span etiketleri sonrasında boşluk bırakıp alt satıra geçecektir. p, div, h1, h2, h3 v.b html elementlerinin default display değerleri block’tur. Bu durumu daha iyi anlayabilmeniz için altta bir görsel paylaştım header(h1,h2 v.b), div, p etiketlerini karışık olarak yazdım fakat hepsinin varsayılan display değerleri block olduğundan bir sonraki elementi alta atmaktadır.
HTML
1 2 3 4 5 6 | <h1>Başlık 1</h1> <p>Paragraf</p> <h2>Başlık 2</h2> <h3>Başlık 3</h3> <div>Div elementi</div> <h4>Başlık 4</h4> |
Şimdi Google Chrome tarayıcısının herhangi bir stil tanımlaması yapmadan üstteki elementlerin display değerlerine varsayılan olarak ne verdiğine gözatalım.
Inline
Şimdide inline değerinin sayfa üzerinde ne gibi etki oluşturduğunu görelim.
Display inline ile nesnelerin span etiketinde olduğu gibi yanyana tekrar etmesini sağlayabilirsiniz fakat dikkat edilmesi gereken bir durum var inline özelliği verilmiş bir nesnede width, text-align gibi özelliklerin değerleri işlemeyecektir. şimdi inline değeri ile ilgili bir örnek yapalım.
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .bir, .iki, .uc{ display: inline; width: 400px; height: 400px; color:#fff; } div.bir{ background-color: gray; } div.iki{ background-color: red; } div.uc{ background-color: green; } |
Sonuç
Üstteki sonuç kısmındada gördüğünüz üzere display özelliğinde inline değeri kullanıldığından bir, iki, uc class’ına sahip div elementleri yanyana basılacak ve width, height özellikleri inline değerinden dolayıda işlemeleyecektir.
Inline-Block
Inline-Block değeride adı üstünde inline ve block karışımıdır etiketler hem yanyana basılmaktadır hemde block olarak width, height değerlerini korumaktadır fakat tek farkı vardır block gibi sonrasında boşluk bırakıp alt satıra geçmemektedir. şimdi bununla ilgili bir örnek yapalım.
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .bir, .iki, .uc{ color:#fff; display: inline-block } .bir{ background-color: gray; } .iki{ height: 50px; background-color: red; } .uc{ background-color: green; } |
Sonuç
📚 Kaynaklar
📚 Diğer CSS Kaynakları
- Doğal CSS değişkenlerini kullanalım!
- CSS3 Selection Selector
- CSS3 Reflect İle Yansıma Oluşturma
- CSS Margin Ve Padding Box Model Nedir Ve Kullanımı
- CSS Display Kullanımı ve Örnekleri
✏️ CSS Display konulu makalemiz için lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 CSS Display konulu bu makalemizi sosyal medya kanallarından paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.
display: block; komutu sadece bende mi bozuk?
hocam merhaba, style.css de h1 etiketini h1#gizle{display:none;} şeklinde değer veriyorum.
bunu
Haber
şeklinde kullanıyorum ama çalışmıyor. Gözükmesini istemiyorum. Nerede hata yapıyorum ?
Merhaba,
Nasıl kullandığınızı tam olarak bilemiyorum ama alttaki gibi kullanıyorsanız çalışması gerekiyor.
Not: Eğer h1 display farklı bir değer ile sizin yaptığınız style’ tanımını eziyorsa o zaman
h1#gizle{display:none !important;}şeklinde css tanımı yapmanız gerekebilir.Çok teşekkür ederim. Gayet başarılı bir çalışma olmuş.
Teşekkür ederim.
Güzel anlatım teşekkürler.
Teşekkür ederim.
Block tam olarak ne ise yarar soyleyebilir misiniz ?
Merhaba osman bey makale içerisindede belirttiğim gibi bir elementin sağ ve solu dolduracak şekilde yatay uzaması ve kendinden sonra ve önceki elementleri yok sayarak yeni bir satırdan kendine özel bir alan kazanmasına yarar örnek olarak bir html dosyası oluşturup div, p, span etitekleri oluşturun span etiketi ve diğer etiketlerden 3-5 tane oluşturun div ve p etiketlerinin default display değerleri block’tur ayrıca span etiketlerinin default değeride inline-block’tur block değerinin ne işe yaradığını oluşturacağınız örnek ile çok daha iyi anlayacaksınız.
iyi çalışmalar, paylaşımlarınız çok kaliteli ve işe yarar bilgiler sunuyorsunuz musadeniz olursa bu sayfadan alıntı yapabilirmiyim k.gelsn.
Güzel yorumunuz için teşekkür ederim alıntı adresi belirtildiği sürece kullanmanızda bir sakınca yok.