CSS ile Font Özellikleri

13.04.2017

Font özellikleri sayfalarimizdaki metinlerin font ailesini, kalinlik ayarlarini,boyutunu, büyük-küçük harf olmasini ve stilini degistirmemizi saglar. CSS fontlar üzerinde tam hakimolmamizi saglar.

  • color
  • font-family
  • font-size
  • font-weight
  • font-style
  • font-variant
  • font

color

Yapisi : color: (deger) Aldigi Degerler :<renk> | inherit
Baslangiç degeri:web tarayicisi belirler
Uygulanabilen elementler: tüm elementler
Kalitsallik: Var

(color) metinlerimizin rengini tanimlamamiz için kullanilir.

:::css
 p{
	color:#f00; /* kirmizi renk kodu */
}

Renk kullanimina daha önce deginmistik. Detay için tiklayiniz.

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

font-family

Yapisi : font-family : [[<font aile ismi > | <soysal aile ismi >],]* [<font aile ismi > | <soysal aile ismi >] | inherit
Aldigi Degerler : <font aile ismi > | <soysal aile ismi >
Baslangiç degeri:web tarayicisi belirler
Uygulanabilen elementler: tüm elementler
Kalitsallik: Var

soysal yazitipi aile isimleri

  • serif (örn: Times)
  • sans-serif (örn: Arial or Helvetica)
  • cursive (örn: Zapf-Chancery)
  • fantasy (örn: Western)
  • monospace (örn: Courier)

Metinlerin kullanilacagi font ailesini belirlemek için kullanilir. Birden fazla fontailesi kullanilacaksa aralarina virgül (,) konur. Genelde son font ailesiolarak soysal font ailesi yazilir. Örnek:

:::css
p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

Eger font ismi bir den fazla kelimeden olsuyorsa çift tirnak içine alinir.Örn:

:::css
h1 {
	font-family: Georgia, "Times New Roman", serif;
}

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

font-size

Yapisi :font-size: <kesin degerler > | <göreceli degerler > | <uzunluk> | <yüzde>
Aldigi Degerler : - <kesin degerler > | <göreceli degerler >
Baslangiç degeri:medium
Uygulanabilen elementler: tüm elementler
Kalitsallik: Var

kesirli degerler

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

CSS, Font boyutlandirmaya daha esnek tanimlama yapmamizi olanak sagladi. Mesela 11px degeri HTML’de2 ve 3 degeri arasinda bir deger denk geliyor ve HTML font elementi ile birlikte kullanilamiyordu.CSS’de font boyutunu belirlemek için bir çok birim kullanilir. Örn: px, em,pt, in, cm vd.

:::css
td {
	font-size :12px;
}

td {
	font-size : 150%;
}

td {
	font-size : xx-small;
}

td {
	font-size : x-large;
}

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

font-weight

Yapisi :font-weight: <deger>
Aldigi Degerler :normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Baslangiç degeri:normal
Uygulanabilen elementler: tüm elementler
Kalitsallik: Var

Fontun kalinlik incelik durumunu belirler. 100(ince)-900(kalin)arasinda bir deger alabildigi gibi bold, bolder ve normal degerlerini de alir.

:::css
p{
	font-weight: bolder;
}

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

font-style

Yapisi :font-style: <deger>
Aldigi Degerler : normal | italic | oblique | inherit
Baslangiç degeri:normal
Uygulanabilen elementler: tüm elementler
Kalitsallik: Var

Fontun egik(italiktik) olup olamamasini belirler.

:::css
p {
	font-style: italic;
}

h4{
	font-style: oblique;
}

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

font-variant

Yapisi :font-variant: <deger>
Aldigi Degerler :normal | small-caps | inherit
Baslangiç degeri:normal
Uygulanabilen elementler: tüm elementler
Kalitsallik: Var

Metnin küçü-büyük harf ile gösterilmesini belirler. Iki deger alir. normal | small-caps.

:::css
span {
	font-variant: small-caps;
}

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

Türkçe karakterlerde sorun çikardigi unutulmamali

font

Yukardi anlatilan font özelliklerinin hatta ek olrak line-height degerinide tek sefer de tanimlamak için kullanilir. Bir kisaltmadir.

Yapisi :font: <deger>
Aldigi Degerler :[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
Baslangiç degeri:tanimsiz
Uygulanabilen elementler: tüm elementler
Kalitsallik: Var

:::css
h2 {
	font: bold italic 200%/1.2 Verdana, Helvetica, Arial, sans-serif;
}

kaynak:http://fatihhayrioglu.com



Adınız Soyadınız
İçerik
Son Eklenenler Konular
  • E-Ticaret çalismasi Satis sitesi
  • 2017-2018 Normal Ögretim Konu Anlatim Listesi
  • Asp Net- Veritabani Olusturma ve GridView Ekleme Kayit
  • Asp Net-Master page ile admin paneli
  • Vize 2 Mesleki Yabanci Dil 1
  • Vize 2 için Ag temelleri
  • Vize2 Internet Programciligi I
  • Vize 2 için ödev listesi- Programlamanin Temelleri
  • Programlamanin Temelleri Akis Diyagramlari Örnekleri
  • Bilgisayar Aglari-Ag Temelleri
  • Bilgisayar Mesleki Yabanci Dil Dersi Için Kelimeler 1
  • 2015-2016 Staj Kabul Listesi
  • 2016-2017 Yaz Staji Yapacaklarin Listesi
  • ASP NET ile veritabanindaki alani gösterirken kisaltarak görüntüleme
  • ASP NET - Plesk ile veritabani olusturma ve MS SQL veritabani olusturma islemleri
  • Dreamveaver
  • ASP Net
  • CSS
  • Html
  • Visual Studio C# ve C Console
  • Programlamanin Temelleri-Algoritma
  • Mesleki Yabancı Dil
  • Windows Server 2012
  • Ag Temelleri-Bilgisayar Aglari
  • Staj
  • Copyright (c) Ferdi DOĞAN