01232017Pzt
Last updateÇrş, 09 Kas 2016 12pm


CSS DERSLERİ

CSS Font

Font özellikleri sayfalarımızdaki metinlerin font ailesini, kalınlık ayarlarını,boyutunu, büyük-küçük harf olmasını ve stilini değiştirmemizi sağlar. CSS fontlar üzerinde tam hakimolmamızı sağlar.


 

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

color

Yapısı : color: <deger>
Aldığı Değerler :<renk> | inherit
Başlangıç değeri: web tarayıcısı belirler
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Var

color metinlerimizin rengini tanımlamamız için kullanılır.

1 p{
2 color:#f00; /* kırmızı renk kodu */
3 }

Renk kullanımına daha önce değinmiştik. Detay için tıklayınız.

Browser Uyumu:
Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C?s CSS Level 1+
CSS Profile 1.0

font-family

Yapısı : font-family : [[<font aile ismi > | <soysal aile ismi >],]* [<font aile ismi > | <soysal aile ismi >] | inherit
Aldığı Değerler :

<font aile ismi >- herhangi bir font ailesi ismi kullanılabilir.

<soysal aile ismi >

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

Başlangıç değeri: web tarayıcısı belirler
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Var

Metinlerin kullanılacağı font ailesini belirlemek için kullanılır. Birden fazla fontailesi kullanılacaksa aralarına virgül (,) konur. Genelde son font ailesiolarak soysal font ailesi yazılır. Örnek:

1 p {
2 font-family: Verdana, Arial, Helvetica, sans-serif;
3 }

Eğer font ismi bir den fazla kelimeden olşuyorsa çift tırnak içine alınır.Örn:

1 h1 {
2 font-family: Georgia, "Times New Roman", serif;
3 }
Browser Uyumu:
Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C?s CSS Level 1+
CSS Profile 1.0

font-size

Yapısı :font-size: <kesin değerler > | <göreceli değerler > | <uzunluk> | <yüzde>
Aldığı Değerler :
  • <kesin değerler >
    • xx-small | x-small | small | medium | large | x-large | xx-large
  • <göreceli değerler >
    • larger | smaller
  • <uzunluk>
  • <yüzde> (üst elementlere(ebveyn) bağlı olarak)

Başlangıç değeri: medium
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Var

CSS, Font boyutlandırmaya daha esnek tanımlama yapmamızı olanak sağladı. Mesela 11px değeri HTML?de2 ve 3 değeri arasında bir değer denk geliyor ve HTML font elementi ile birlikte kullanılamıyordu.CSS?de font boyutunu belirlemek için bir çok birim kullanılır. Örn: px, em,pt, in, cm vd.

01 td {
02 font-size :12px;
03 }
04 td {
05 font-size : 150%;
06 }
07 td {
08 font-size : xx-small;
09 }
10 td {
11 font-size : x-large;
12 }
Browser Uyumu:
Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C?s CSS Level 1+
CSS Profile 1.0

font-weight

Yapısı : font-weight: <değer>
Aldığı Değerler : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Başlangıç değeri: normal
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

Fontun kalınlık incelik durumunu belirler. 100(ince)-900(kalın) arasında bir değer alabildiği gibi bold, bolder ve normal değerlerini de alır.

1 p{
2 font-weight: bolder;
3 }
Browser Uyumu:
Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C?s CSS Level 1+
CSS Profile 1.0

font-style

Yapısı : font-style: <değer>
Aldığı Değerler : normal | italic | oblique | inherit
Başlangıç değeri: normal
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Var

Fontun eğik(italiktik) olup olamamasını belirler.

1 p {
2 font-style: italic;
3 }
4 h4{
5 font-style: oblique;
6 }
Browser Uyumu:
Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C?s CSS Level 1+
CSS Profile 1.0

font-variant

Yapısı : font-variant: <değer>
Aldığı Değerler :normal | small-caps | inherit
Başlangıç değeri: normal
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Var

Metnin küçü-büyük harf ile gösterilmesini belirler. İki değer alır. normal | small-caps.

1 span {
2 font-variant: small-caps;
3 }
Browser Uyumu:
Internet Explorer 4+
Netscape 6+
Opera 3.6+
W3C?s CSS Level 1+
CSS Profile 1.0

Türkçe karakterlerde sorun çıkardığı unutulmamalı

font

Yukardı anlatılan font özelliklerinin hatta ek olrak line-height değerinide tek sefer de tanımlamak için kullanılır. Bir kısaltmadır.

Yapısı : font: <değer>
Aldığı Değerler :[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
Başlangıç değeri: tanımsız
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Var
1 h2 {
2 font: bold italic 200%/1.2 Verdana, Helvetica, Arial, sans-serif;
3 }
Browser Uyumu:
Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C?s CSS Level 1+
CSS Profile 1.0

Kaynak : Fatih HAYRİOĞLU, CSS dersleri

Yorum ekle


Güvenlik kodu
Yenile

FACEBOOK'TA TAKİP EDİN