Css Yazı Tipi ve Özellikleri Ders 8
·
1 dakika okuma
·
11
Merhabalar,
Bu dersimizde Css ile yazı karakterlerinin sık kullanılan özelliklerine giriş yapacağız. Bunlar ;
Yazı Büyüklüğü : { font-size : 14px; }
Css kodlaması yaparken kullanabileceğimiz bir çok uzunluk birimi vardır bunlar ;
%, mm, cm, inc, pixel, punto, oran dir. Ancak bunlardan %, pixel ve oran (em) en çok kullanılanlarıdır.
Yazı Tipi (Font) : { font-family : verdana , arial ; }
Css kodu içerisinde belirttiğiniz font istemci bilgisayarda bulunmuyor ise o font çalışmayacaktır. Bu tarz durumlar için font-family kodunda olduğu gibi birden fazla font belirtebiliriz. Yukarıdaki kodda olduğu gibi ilk olarak verdana eğer o bilgisayarda bulunmuyor ise arial fontu çalışacaktır. Burada dilediğimiz kadar font ekleyebiliriz unutmamamız gereken aralarına “,” koymayı atlamamak.
Kalın / Normal : { font-weigth : bold; }
Yazı yazarken bazen bazı kelimelerin ya da cümlelerin kalın olması gerekir. Örn: Başlıklar gibi. Bu işlemide yukarıdaki blok yardımı ile yapıyoruz.
İtalik : { font-style : italic ; }
Hepmizin bildiği italik yazı sitilinide elementimize üstteki satır yardımıyla ekliyoruz.
Small Caps : { font-variant : small-caps; }
Pek çok kullanıcının bilmediği ve bunu fonta ait bir özellik gibi görmeleri nedeni ile bu bilgiyide burada paylaşmak istedim.
Small caps ; harflerin hepsini büyük yapar.Ancak kelimenin içerisindeki orjinalinde büyük olan harflerin size larını büyütüp hoş bir efekt oluşturmaktadır.
Şimdi yukarıda yazdıklarımız ile ilgili bir örnek yapalım.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-variant:small-caps;
color : red;
font-family : arial;
}
p {
font-style: italic;
font-weight : bold;
font-size : 12px;
color:orange; }
body
{
background-color : #ffffff;
}
</style>
</head>
<body>
<h1>Merhaba Burası Başlık Alanı</h1>
<p>Burası açıklama alanı.</p>
</body>
</html>
Çıktımız şu şekilde olacaktır.
Merhaba Burası Baslık Alanı
Burasi açiklama alani.
İyi Günler Dilerim,
Bu yazıyı paylaş: