CSS font-style Özelliği

CSS font-style

Css font-style özelliği metnin yazı tipi stilini belirtir.

Örnek:

Bu örnekte 3 tane paragrafa farklı font-style değerleri uygulanarak özelliğin etkisinin öğrenilmesi amaçlanmıştır.

p.normal { font-style: normal; } p.italic { font-style: italic; } p.oblique { font-style: oblique; }

CSS font-style nedir nasıl kullanılır

Bir metinsel ifadenin yazı sitili belirtmek için kullanılır.

CSS font-style CSS font-style özellikleri  
Varsayılan Değer: normal  
Kalıtsallık: var  
Animasyon Özelliği: yok  
Versiyon: CSS1  
JavaScript font-style: object.style.fontStyle="italic"

CSS font-style Tarayıcı Desteği

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

CSS Kodu:
font-style 1.0 4.0 1.0 1.0 7.0

CSS font-style Değerleri

font-style:normal|italic|oblique|initial|inherit;

CSS font-style özelliği değerleri

CSS font-style değerleri CSS font-style değerleri tanımları CSS örnek uygulamalar
normal Normal görünümlü yazı sitilidir.
italic Yazı hem eğik hemde hafiften bir renk tonunda fark vardır.
oblique italic özelliği bulunmayan fontlara uygulanır.
initial Özelliğin varsayılan değeridir.
inherit Kalıtsal olarak aldığı değerdir.  

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 »