HTML5 ve CSS3 Dersleri,
Web Tasarım ve Programlama,Javascript Oyun Geliştirme,Web Site Yapımı Dersleri
CSS display Özelliği
Bağlantıyı al
Facebook
Twitter
Pinterest
E-posta
Diğer Uygulamalar
CSS display
Css display özelliği bir html elemanının kullanılan kutu modeli veya satır düzeyi element olma durumlarını düzenleyen bir özelliktir.
Örnek:
Div html elemanı varsayılan olarak blok düzeyinde elementtir, fakat biz display özelliği ile tüm div elemanlarına "inline" değeri vereceğiz ve sonuç örnekteki gibi olacaktır.
div {
display: inline;
}
CSS display nedir nasıl kullanılır
Bir html elemanının davranışlarını ,ekrandaki görünüm ayarlarını değiştirmek istediğimizde o elementin görünüm davranışını display özelliğiyle kontrol edebiliriz.
CSS display
CSS display özellikleri
Varsayılan Değer:
inline
Kalıtsallık:
yok
Animasyon Özelliği:
yok
Versiyon:
CSS1
JavaScript display:
object.style.display="none"
CSS display Tarayıcı Desteği
Tablodaki sayılar bu özelliği ilk destekleyen tarayıcı sürümlerini gösterir.
CSS Kodu:
display
display
4.0
8.0
3.0
3.1
7.0
CSS display Değerleri
display:değerler
CSS display özelliği değerleri
CSS display değerleri
CSS display değerleri tanımları
CSS örnek uygulamalar
inline
Satır düzeyinde eleman olarak görünümünü ayarlar
block
Blok düzeyinde eleman özellikleri kazandırır.
flex
Esnek kutu modeli gibi davranış gösterir.
inline-block
Satır düzeyi ve blok düzeyi elemanı özelliklerini taşır.
inline-flex
Satır düzeyinde esnek kutu özelliği taşır.
inline-table
Satır düzeyinde tablo özelliği gösterir.
list-item
Liste elemanı görünümü kazanır.
run-in
İçeriğe bağlı olarak satır içi veya blok düzeyinde eleman tanımlar.
table
Tablo davranışını gösteren elemana dönüşür.
table-caption
Tablo başlığı şeklinde davranış kazanır.
table-column-group
Tablo sütun grubu özelliği kazanır.
table-header-group
Tablo başlığı grubu görünüm özelliği kazanır.
table-footer-group
Tablo alt bölümü özelliği gösterir.
table-row-group
Tablo satırları özelliklerini taşır.
table-cell
Tablo hücrelerinin özelliklerini taşır.
table-column
Tablonun kolonları gibi davranış özelliği kazanır.
<main> Etiketi Örnek main etiketi örnek kullanım: < main > < h1 > İnternet Tarayıcıları < /h1 > < p > Google Chrome, Firefox, ve Internet Explorer günümüzün en çok kullanılan tarayıcılarıdır. < /p > < article > < h1 > Google Chrome < /h1 > < p > Google Chrome, 2008 yılında Google tarafından geliştirilen açık kaynaklı, ücretsiz bir internet tarayıcısıdır. < /p > < /article > < article > < h1 > Internet Explorer < /h1 > < p > Internet Explorer, 1995 yılında Microsoft tarafından kullanıma sunulan ücretsiz bir internet tarayıcısıdır. < /p > < /article > < article > < h1 > Mozilla Firefox < /h1 > < p > Firefox, 2004 yılında Mozilla tarafından kullanıma sunulan açık kaynaklı, ücretsiz bir internet tarayıcısıdır. < /p > < /article > < /main > Kendiniz deneyin »
<details> Etiketi Örnek <details> elementinin kullanımı: < details > < summary > Copyright 2015 < /summary > < p > Tüm hakları saklıdır. < /p > < p > İçeriğin izinsiz olarak veya kaynak gösterilmeden alıntılanması yasaktır. < /p > < /details > Kendiniz deneyin » htmlvecssegitimi.blogspot.com Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz. KODU ÇALIŞTIR SAYFAYI TEMİZLE SAYFAYI YENİLE KAYNAK KODLARI SONUÇ EKRANI <!DOCTYPE html> <html> <body> <details> <summary>Copyright 2015</summary> <p>Tüm hakları saklıdır.</p> <p>Sitedeki içeriklerin ve görsellerin izinsiz olarak veya kaynak gösterilmeden alıntılanması yasaktır.</p> </details> <p><b>Not:</b>
HTML Etiketleri Alfabetik Sıralı HTML belgelerinde kullanabileceğiniz HTML etiketleri nin tamamını alfabetik sıralı şekilde aşağıdaki tablodan inceleyebilirsiniz. HTML5 ile birlikte gelen yeni etiketler ve HTML5'te desteklenmeyen etiketler de tabloya dahildir. = HTML5'te yeni. Etiket Tanım <!--...--> Kaynak kodundaki bir yorumu ifade eder <!DOCTYPE> Belge türü bildirimini ifade eder <a> Bir bağlantıyı linki ifade eder <abbr> Kısaltmayı ya da kısa adı ifade eder <acronym> HTML 5'te desteklenmiyor. Yerine <abbr> kullanın. Kısa adı ifade eder <address> Belge sahibi ya da yazarı ile ilgili iletişim bilgisini ifade eder <applet> HTML 5'te desteklenmiyor. Yerine <embed> ya da <object> kullanın. Sayfaya gömülü uygulamayı ifade eder <area> Bir görsel haritası içinde
CSS content Css content özelliğini sayfaya seçilen elemandan önce veya sonrasında içerik eklemek için kullanılabilir. Örnek: Bu örnekte bir linkin title değerini linkten önce yazmak için content özelliği uygulanmıştır. a:before { content: " (" attr(title) ")"; color: red; font-size: 1.1em; } Kendiniz deneyin » CSS content nedir nasıl kullanılır Css content ile seçilen html elemanından önce veya sonrasında bir url ,resim, içerik, tırnak işareti gibi elemanlar eklenebilir. CSS content CSS content özellikleri Varsayılan Değer: normal Kalıtsallık: yok Animasyon Özelliği: yok Versiyon: CSS2 JavaScript content: Açıklama Oynat CSS content Tarayıcı Desteği Tablodaki sayılar özelliği tam destekleyen ilk tarayıcı sü
Yorumlar
Yorum Gönder