Merhaba...
Css ile sayfadaki metin ve yazılara bir çok farklı özellik ekleyebiliyoruz.. HTML etiketleri ile yapılan tüm metin özelliklerin ( b, u, i vs) dışında , CSS ile yazılar için kullanılan bir çok farklı özellikle daha esnek ve çeşitli yazı görünümler elde edilebiliyor...
CSS FONT ÖZELLİKLERİ
CSS ile TEXT özelliklerinin dışında FONT özellikleri kullanılarak sayfadaki metinlerin boyutu, tipi gibi bir çok özelliği değiştirilebiliyor.
FONT-SIZE
Yazıların boyutunu ayarlar. Px, rem, em, yüzde gibi css birimleri kullanılır..
CSS
h3 { font-size:1.5rem;}
p {font-size:20px}
HTML
<h3> 1.5rem boyutunda başlık yazısı </h3>
<p> 20px boyutunda paragraf yazısı </p>
EKRAN
1.5rem boyutunda başlık yazısı
20px boyutunda paragraf yazısı
FONT-FAMILY
Yazı tipini belirler. Tek bir yazı tipi , yaılabileceği gibi birden fazla yazı tipide beliritlebilir. Bu durumda önce ilk yazılan yazı tipi etkin yazı tipi olacaktır. ANcak bu yazı tipi , sayfada tanımlı değilse yada işletim sistemlerinin varsayılan yazı tiplerinden (times new roman , arila vs) biri değilde, bu kez bir son yazılan yazı tipi etkin olacaktır. Yazı tipleri birden fazla kelimeden oluşuyorsa tırnak işaretleri arasında yazılır..
CSS
p.calibri{ font-family:calibri;}
p.verdana {font-family:verdana ,"Tİmes new roman";}
HTML
<p class="calibri">CALIBRI yazı tipinde yazı..</p>
<p class="verdana">VERDANA yazı tipinde yazı..</p>
EKRAN
CALIBRI yazı tipinde yazı..
VERDANA yazı tipinde yazı..
FONT-WEIGHT
Yazıların kalınlığını ayarlar. Aşağıdaki değerleri alabilir..
- normal : kalınlaştırılmamış yazı,
- bold : kalın yazı,
- bolder : daha kalın yazı,
- lighter : daha ince yazı..
- 100-900 arası sayısal kalınlık miktar değeri..
CSS
p.light { font-weight:lighter;}
p.bold400 { font-weight:400;}
p.bold { font-weight:bold;}
p.bolder { font-weight:bolder;}
HTML
<p class="light">LIGHTER (kalınlığı azaltılmış) yazı..</p>
<p class="bold400">400 BİRİM kalınlaştırılmış yazı..</p>
<p class="bold">BOLD (kalın) yazı..</p>
<p class="bolder">BOLDER (daha kalın) yazı..</p>
EKRAN
LIGHTER (kalınlığı azaltılmış) yazı..
400 BİRİM kalınlaştırılmış yazı..
BOLD (kalın) yazı..
BOLDER (daha kalın) yazı..
FONT-STYLE
Metnin eğikliğini belirler.
- normal : Normal (stil verilmemiş) yazı,
- italic: Eğik (italik) yazı,
- oblique : Az eğik yazı.
CSS
p { font-style:italic; }
HTML
<p> EĞİK (italik) yazı...</p>
EKRAN
FONT-VARIANT
Metinlerdeki küçük harflerin boyutları değişmeden büyük harfe dönüşmesini sağlar..
- normal : Normal (variant stil verilmemiş) yazı,
- small-caps: Büyük harfe dönüşmüş küçük boyutlu yazı
CSS
p { font-variant:italic; }
HTML
<p> Büyük harfe dönüşmüş küçük yazı.. </p>
EKRAN
Büyük harfe dönüşmüş küçük yazı..
Paragraf içindeki küçük harfler i boyutları değişmeden büyük harfelere dönüşürler.. HTML'de büyük yazılan ilk harfin diğer harflere göre daha büyük olduğuna dikkat edin..
FONT KISA KULLANIM
Font özelliklerini sadece FONT değeri ile aşağıdaki sırada tek satırda yazabilriiz.. Değerler aasında boşluk bırakılır..
font: font-style font-weight font-size/line-height font-family;
Örneğin aşağıdaki font özelliklerini tek satırda FONT ile yazalım...
font-weight: bold;
font-family: calibri;
font-size: 12px;
line-height: 15px;
font: normal bold 12px/15px calibri;
Görüşmek üzere..