CSS font Özelliği

CSS font

Css font Metinsel yazıların tüm özelliklerinin düzenlenmesini sağlayan özelliktir.

Örnek:

Bu örnekte iki farklı p elemanına farklı değerlerde font özelliği kullanılmıştır.

p.font1 { font: 15px arial, sans-serif; } p.font2 { font: italic bold 12px/30px Georgia, serif; }

CSS font nedir nasıl kullanılır

Yazıların bir çok sitil ayarlarının yapılmasını sağlayan css özelliğidir.

Tek kısa bildiriminde bütün yazı özelliklerini ayarlar .

CSS font CSS font özellikleri  
Varsayılan Değer: varsayılan değerdir  
Kalıtsallık: var  
Animasyon Özelliği: var
Versiyon: CSS1  
JavaScript font: object.style.font="italic small-caps bold 16px arial, sans-serif";

CSS font Tarayıcı Desteği

Tablodaki sayılar özelliği ilk destekleyen tarayıcı sürümlerini göstermektedir.

CSS Kodu:
font 1.0 4.0 1.0 1.0 3.5

CSS font Değerleri

font:font-style|font-variant|font-weight|font-size|line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;

CSS font özelliği değerleri

CSS font değerleri CSS font değerleri tanımları
font-style Yazı stilini belirtir. Varsayılan değer "normal " dir.
font-variant Yazı tipi varyantı belirtir. Varsayılan değer "normal " dir.
font-weight Font ağırlığını belirtir . Varsayılan değer "normal " dir.Yazının kalınlığını değiştirir.
font-size Yazı tipi boyutu ve satır yüksekliğini belirler. Varsayılan değer "normal " dir.
font-family Font ailesini belirtir. Varsayılan değer tarayıcıya bağlıdır.
caption Başlığıyla kontroller tarafından kullanılan yazı tipini kullanır
icon Simge etiketleri tarafından kullanılan yazı tipini kullanır
menu Açılan menüleri tarafından kullanılan yazı tiplerini kullanır
message-box Iletişim kutuları tarafından kullanılan yazı tiplerini kullanır
small-caption Başlık yazı tipinin daha küçük bir versiyonu
status-bar Durum çubuğunda kullanılan yazı tiplerini kullanır
initial Özelliğin varsayılan değeridir.
inherit Soybağından gelen değeri kullanır.

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

HTML details Etiketi

<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>
Devamı Oku »

HTML em Etiketi

<em> Etiketi Örnek <em> etiketi ile metni vurgulama: < em > Vurgulanmış yazı < /em > 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> <em>Vurgulanmış metin</em> <br /> <strong>Önemli metin</strong> <br /> <code>Bilgisayar kodları</code> <br /> <samp>Bir bilgisayar programının örnek çıktısı</samp> <br /> <kbd>Klavye girişi</kbd> <br /> <var>Değişkenler (Variables)</var> </body> </html> HTML ve CSS Dersleri © 2015 HTMLveCSSegi
Devamı Oku »

Linklerin Renklerini Değiştirme Örnek

<!DOCTYPE html> <html> <head> <style> a:link { color: green; background-color: transparent; text-decoration: none } a:visited { color: brown; background-color: transparent; text-decoration: none } a:hover { color: red; background-color: transparent; text-decoration: underline } a:active { color: orange; background-color: transparent; text-decoration: underline } </style> </head> <body> <p>Linklerin varsayılan renklerini değiştirebilirsiniz.</p> <a href="http://htmlvecssegitimi.blogspot.com/2016/01/html-link-rengi-degistirme-ornek.html" target="_blank">HTML Link Rengi Değiştirme Örneği</a> </body> </html>
Devamı Oku »

HTML dir Etiketi

<dir> Etiketi Örnek Bir dizin listesi: < dir >    < li > HTML < /li >    < li > XHTML < /li >    < li > CSS < /li > < /dir > 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> <dir> <li>HTML</li> <li>XHTML</li> <li>CSS</li> </dir> <p><b>Not:</b> dir elementi HTML5'te desteklenmiyor. Yerine CSS kullanın.</p> </body> </html> HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com <dir> Tanımı ve Kul
Devamı Oku »

HTML center Etiketi

<center> Etiketi Örnek Bir HTML sayfasında ortaya hizalanmış metin: < center > Bu yazı ortaya hizalanacaktır. < /center > 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> <p>Bu bir yazıdır.</p> <center>Bu yazı ortaya hizalanacaktır.</center> <p>Bu bir yazıdır.</p> <p>Center elementi HTML5'te desteklenmiyor. Yerine CSS kullanabilirsiniz.</p> </body> </html> HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com <center> Tanımı ve Kullanımı HTML 5'te desteklenmiyor.Ye
Devamı Oku »

HTML canvas Etiketi

<canvas> Etiketi Örnek canvas etiketleri arasına mavi bir kare çizimi: < canvas id= "myCanvas">< /canvas > < script > var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#3059D6"; ctx.fillRect(0, 0, 80, 100); < /script > 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> <canvas id="myCanvas">Tarayıcınız HTML5 canvas elementini desteklemiyor.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#3059D6";
Devamı Oku »

CSS content Özelliği

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ü
Devamı Oku »

HTML Element Referansları

HTML Etiketleri Kategorilere Göre Aşağıdaki tablolarda HTML etiketleri nin tamamını kullanım alanı kategorilerine göre düzenlenmiş şekilde inceleyebilirsiniz. HTML 5 ile birlikte yeni gelen etiketler ve HTML 5'te desteklenmeyen etiketler de tablolara dahildir. = HTML5'te yeni. HTML Temel Etiketleri Etiket Tanım <!DOCTYPE> Belge türü bildirimini ifade eder <html> HTML belgesi olduğunu ifade eder <title> Belge için başlığı ifade eder <body> Belgenin gövdesini ifade eder <h1> - <h6> HTML başlıklarnı ifade eder <p> Paragrafı ifade eder <br> Satır sonunu ifade eder <hr> Konu sonu anlamına gelen yatay çizgiyi ifade eder <!--...--> Kaynak kodundaki bir yorumu ifade eder Biçimlendirme Etiketleri Etiket Tanım <acronym> HTML 5&#
Devamı Oku »