Display Özelliği - Asp.NET Dersleri

BtDersleri.com Dersler

• Dersler
• Üye Girişi Yapmalısınız!Favorilerim Üye Girişi Yapmalısınız!Favorilerim
• İletişim

• EN
• Giriş Giriş

Display Özelliği

CSS Dersine Ait Diğer Konular:

• CSS (Stil Şablonları) Nedir?
• Yerel Stil Şablonları
• Genel Stil Şablonları
• Stil Şablonları-Seçiciler
• Harici CSS Dosyası Kullanma
• CSS Özellikleri
• Css uzunluk birimleri
• Css ile Linkleri Biçimlendirme
• Css Width ve Height Özellikleri
• Css Box Model (Kutu Modeli) Özellikleri
• Div Elemanı - Kutuları Ortalama
• Display Özelliği
• Tablosuz Tasarım ve Div Elemanı
• Float Özelliği Kullanımı
• İnline-Block Özelliği
• CSS Konumlandırma (Position Özelliği)
• Kutu-Nesneleri Üst Üste Yerleştirme
• CSS'de Liste Özellikleri
• Css ile Buton Görünümlü Linkler Hazırlama
• CSS Dikey Menü Oluşturma
• CSS Yatay Menü Oluşturma
• CSS Dikey Açılır Menü Yapma
• CSS Yatay Açılır Menü
• CSS ile Alternate Row Oluşturma
• CSS - first-child ve last-child Kullanımı
• Html Elemanlarına Parametre Değerlerine Göre Farklı Stil Uygulama
• CSS - ::after ve ::before Kullanımı
• Yuvarlak köşeli tablo veya kutu oluşturma
• Css ile İpucu Baloncuğu Yapımı (Tooltip)
• CSS3 Metin Kaydırma
• CSS3 ile Metni Sütunlara Bölme
• CSS3 Metinlere Gölge Efekti Uygulama
• CSS3 Box-Shadow Özelliği ile Kutulara Gölge Verme
• CSS3 Outline Özelliği - Nesnelere İkinci Bir Kenarlık Uygulama
• CSS3 Box-Sizing Özelliği ile Genişlik ve Yüksekliklerin Belirlenmesi
• CSS3 Arkaplan Resmini Uzatma
• CSS3 Çoklu Arkaplan Resmi Kullanma
• CSS3 ile Arkaplan İçin Gradyan (Gradient) Oluşturma
• CSS3 Transparent - Saydam Arkaplan Rengi Uygulama
• Css ile Nesnelere Saydamlık Verme
• CSS3 Resmi Kenarlık Olarak Kullanma - Border Image
• CSS3 İki Boyutlu Dönüşümler - 2D Transform
• CSS3 Geçiş Efekti Uygulama - Transition
• CSS3 Animasyon Oluşturma
• CSS ile Esnek (Responsive) Sayfa Tasarımı
• Responsive Images - Ekrana Göre Genişleyen veya Daralan Resimler
• Menü İkonu Yapımı
• Responsive Menu - Esnek Üst Menü Yapımı

CSS Dersine Ait Diğer Konular Favorilere Eklemek İçin Üye Girişi Yapmalısınız!

Display Özelliği

Html etiketleri inline ve blok elemanlar olmak üzere ikiye ayrılırlar.

Blok elemanlar sayfa içerisinde alt alta yerleşirler. Yani o elemandan sonraki etiketler alt satırdan devam ederler. Örneğin h1-h6, p, div gibi etiketler block türündedir ve bu etiketlerden sonra gelen içerik alttan devam eder.

İnline elemanlar ise satır içinde yerleştirilirler. Örneğin b, i, u, a, font, img gibi etiketler, aynı satırdan yerleşime devam ederler.

İstenilen etiketlerin bu özellikleri display özelliği kullanılarak değiştirilebilir:

display:block;

display:inline;

display:inline-block;

Önemli Bilgi: Inline türdeki etiketler için width ve height özellikleri kullanılamaz. Inline türündeki bir etikete css ile genişlik veya yükseklik vermek istiyorsak o etiketi block türüne çevirmeliyiz.

Inline-Block özelliği ise bir etiketin hem satır içinde yerleşmesine hem de width ve height özelliği verilebilmesine olanak sağlar.

Block türündeki elemanları yan yana yerleştirmek için float özelliği, sonrasında yerleşimin normale dönmesi içinse clear özelliği kullanılmaktadır. Yan yana yerleşmesini istediğimiz etiketleri inline-block şekline dönüştürürsek float ve clear özelliklerini kullanmamıza da gerek kalmayacaktır.

Float ve clear özelliklerini sonraki konumuzda bulabilirsiniz.

Display:none; şeklinde kullandığımızda ise html elemanlarının sayfada gizlenmesini sağlayabiliriz. Bu özelliğin uygulandığı eleman silinmiş olmaz, sayfada gizlenir ve hiç yer kaplamaz.

Visibility: hidden; şeklinde de istenen elemanların görünmemesini sağlayabiliriz. Ancak bu yöntemde html elemanı sayfada görünmese de yer kaplamaya devam edecektir.

css display özelliği ne işe yarar, display özelliği kullanımı ve örnekleri, html block elemanları inline yapma, inline-block nedir, display none ile visibility hidden farkı

KONU İLE İLGİLİ ÖRNEKLER

Display:none ve visibility:hidden arasındaki fark

Kendin Dene

Display inline ve block arasındaki fark

Kendin Dene

YORUMLAR

10685 kez okundu.

Online Kullanıcı Sayısı 436

Web Programcılığı

×

CSS Dersine Ait Diğer Konular

• CSS (Stil Şablonları) Nedir?
• Yerel Stil Şablonları
• Genel Stil Şablonları
• Stil Şablonları-Seçiciler
• Harici CSS Dosyası Kullanma
• CSS Özellikleri
• Css uzunluk birimleri
• Css ile Linkleri Biçimlendirme
• Css Width ve Height Özellikleri
• Css Box Model (Kutu Modeli) Özellikleri
• Div Elemanı - Kutuları Ortalama
• Display Özelliği
• Tablosuz Tasarım ve Div Elemanı
• Float Özelliği Kullanımı
• İnline-Block Özelliği
• CSS Konumlandırma (Position Özelliği)
• Kutu-Nesneleri Üst Üste Yerleştirme
• CSS'de Liste Özellikleri
• Css ile Buton Görünümlü Linkler Hazırlama
• CSS Dikey Menü Oluşturma
• CSS Yatay Menü Oluşturma
• CSS Dikey Açılır Menü Yapma
• CSS Yatay Açılır Menü
• CSS ile Alternate Row Oluşturma
• CSS - first-child ve last-child Kullanımı
• Html Elemanlarına Parametre Değerlerine Göre Farklı Stil Uygulama
• CSS - ::after ve ::before Kullanımı
• Yuvarlak köşeli tablo veya kutu oluşturma
• Css ile İpucu Baloncuğu Yapımı (Tooltip)
• CSS3 Metin Kaydırma
• CSS3 ile Metni Sütunlara Bölme
• CSS3 Metinlere Gölge Efekti Uygulama
• CSS3 Box-Shadow Özelliği ile Kutulara Gölge Verme
• CSS3 Outline Özelliği - Nesnelere İkinci Bir Kenarlık Uygulama
• CSS3 Box-Sizing Özelliği ile Genişlik ve Yüksekliklerin Belirlenmesi
• CSS3 Arkaplan Resmini Uzatma
• CSS3 Çoklu Arkaplan Resmi Kullanma
• CSS3 ile Arkaplan İçin Gradyan (Gradient) Oluşturma
• CSS3 Transparent - Saydam Arkaplan Rengi Uygulama
• Css ile Nesnelere Saydamlık Verme
• CSS3 Resmi Kenarlık Olarak Kullanma - Border Image
• CSS3 İki Boyutlu Dönüşümler - 2D Transform
• CSS3 Geçiş Efekti Uygulama - Transition
• CSS3 Animasyon Oluşturma
• CSS ile Esnek (Responsive) Sayfa Tasarımı
• Responsive Images - Ekrana Göre Genişleyen veya Daralan Resimler
• Menü İkonu Yapımı
• Responsive Menu - Esnek Üst Menü Yapımı

Kapat Display-Özelliği ×

Ders Seçiniz:

• Robotik ve Kodlama
• Python
• Programlama Temelleri
• C# Console
• Nesne Tabanlı Programlama
• Asp.NET
• HTML
• CSS
• BootStrap
• SEO
• JavaScript
• JQuery
• SQL
• Grafik ve Animasyon
• İç Donanım Birimleri
• Dış Donanım Birimleri

Kapat ×

Üye Girişi

Kullanıcı Adı Kullanıcı adınızı giriniz. Parola Parolanızı giriniz. Beni Hatırla Üye olmak istiyorum. Kapat ×

Favori Konularınız:

Kapat