Ali Emre
👑Efsanevi Grafiker👑
Web sitelerinde yer alan fontların (yazı tipleri) değişik stillerde yer aldığını görürüz.Bunlar tabiki günümüzün en çok kullanılan stil şablonu CSS tarafından sağlanmaktadır.Şimdi CSS ile fontlarımıza ne gibi özellikler kazandırabileceğimizi görelim...
İlk önce HTML kodumuzu yazalım ve seçicimizi (class evya id) belirleyelim.Ben söz konusu metinler olduğu için Class seçicisi kullanacağım.Çünkü bildiğimiz gibi class ile birden çok nesneye değer verebiliyorduk.
HTML Kodu:
<div class="metinler"> Merhaba Dünya!!! </div>
CSS Kodu:
.metinler {
color:#FFFFFF;
font-family:Verdana, Arial, Helvetica;
font-size:16px;
font-weight:bold;
font-style:italic;
}
Yazıtipi Renkleri: (color)
Yapısı: color: <değeri>
Kullanılışı: color:#FFFFFF;
"FFFFFF" kısmını değiştirerek istediğiniz rengi elde edebilirsinz.
Yazıtipi Ailesi: (font-family)
Yapısı: font-family: <1.Font> | <2.Font> | <3.Font>
Kullanılışı: font-family:Verdana, Arial, Helvetica;
Birden fazla yazıtipi ailesi kullanılacaksa aralarına virgül (,) koyulur. Birden fazla yazılmasının nedeni birinci yazıtipi ailesi eger kullanıcının bilgisayarında yok ise alternatif bir yazıtipi sunmak içindir.
Yazıtipi Boyutu: (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
Kullanılışı:
font-size : 16px;
font-size : 150%;
font-size : small;
font-size : x-large;
CSS’de yazı tipi boyutunu belirlemek için birçok birim kullanılır. Örn: px, em, pt,in, cm..
Yazıtipi Kalınlığı: (font-weight)
Yapısı: font-weight: <değer>
Aldığı Değerler: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Kullanılışı: font-weight:bold;
Bu kod ile azıtipinin incelik kalınlık durumunu belirlenir.Font; 100(ince)-900(kalın) arasında bir değer alabildiği gibi kalın(bold), çok kalın(bolder) ve normal değerlerini de alabilmektedir.
Yazıtipi Biçimi: (font-style)
Yapısı: font-style: <değer>
Aldığı Değerler: normal | italic | oblique | inherit
Kullanılışı: font-style:italic;
Bu kod ile yazı tipinin naısl görüneceğini belirler.Düz-Eğri yazıları tanımlamak için kullanılır..
Yazıtipi Büyüklük-Küçüklük Ayarı: (font-variant)
Yapısı: font-style: <değer>
Aldığı Değerler: normal | small-caps| inherit
Kullanılışı: font-variant:small-caps;
Bu kodlarda dikkatinizi çeken bir özellik var.."inherit" özelliği.Neredeyse çoğu kodun aldığı değerlerde mevcut.Amacı ise kalıtsallık sağlamaktır.Biraz daha açarsak Kalıtsallık; CSS ile web sayfası kodlarken tüm elemanlara tek tek atama yapabildiği gibi birde bir elemana atama yaparız ve bu özellik tüm alt elemanlarada uygulanır buna kalıtsallık denir.Bir kodla da açıklayalım:
#kalıtsallık {text-align: center;}
<div id="kalıtsallık">Buradaki içerik ortalanacaktır <p>text-align özelliginin
kalıtsallığı oldugu için buradaki içerikte ortalanacaktır </p></div>
Hazırlayan Ali Emre
İlk önce HTML kodumuzu yazalım ve seçicimizi (class evya id) belirleyelim.Ben söz konusu metinler olduğu için Class seçicisi kullanacağım.Çünkü bildiğimiz gibi class ile birden çok nesneye değer verebiliyorduk.
HTML Kodu:
<div class="metinler"> Merhaba Dünya!!! </div>
CSS Kodu:
.metinler {
color:#FFFFFF;
font-family:Verdana, Arial, Helvetica;
font-size:16px;
font-weight:bold;
font-style:italic;
}
Yazıtipi Renkleri: (color)
Yapısı: color: <değeri>
Kullanılışı: color:#FFFFFF;
"FFFFFF" kısmını değiştirerek istediğiniz rengi elde edebilirsinz.
Yazıtipi Ailesi: (font-family)
Yapısı: font-family: <1.Font> | <2.Font> | <3.Font>
Kullanılışı: font-family:Verdana, Arial, Helvetica;
Birden fazla yazıtipi ailesi kullanılacaksa aralarına virgül (,) koyulur. Birden fazla yazılmasının nedeni birinci yazıtipi ailesi eger kullanıcının bilgisayarında yok ise alternatif bir yazıtipi sunmak içindir.
Yazıtipi Boyutu: (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
Kullanılışı:
font-size : 16px;
font-size : 150%;
font-size : small;
font-size : x-large;
CSS’de yazı tipi boyutunu belirlemek için birçok birim kullanılır. Örn: px, em, pt,in, cm..
Yazıtipi Kalınlığı: (font-weight)
Yapısı: font-weight: <değer>
Aldığı Değerler: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Kullanılışı: font-weight:bold;
Bu kod ile azıtipinin incelik kalınlık durumunu belirlenir.Font; 100(ince)-900(kalın) arasında bir değer alabildiği gibi kalın(bold), çok kalın(bolder) ve normal değerlerini de alabilmektedir.
Yazıtipi Biçimi: (font-style)
Yapısı: font-style: <değer>
Aldığı Değerler: normal | italic | oblique | inherit
Kullanılışı: font-style:italic;
Bu kod ile yazı tipinin naısl görüneceğini belirler.Düz-Eğri yazıları tanımlamak için kullanılır..
Yazıtipi Büyüklük-Küçüklük Ayarı: (font-variant)
Yapısı: font-style: <değer>
Aldığı Değerler: normal | small-caps| inherit
Kullanılışı: font-variant:small-caps;
Bu kodlarda dikkatinizi çeken bir özellik var.."inherit" özelliği.Neredeyse çoğu kodun aldığı değerlerde mevcut.Amacı ise kalıtsallık sağlamaktır.Biraz daha açarsak Kalıtsallık; CSS ile web sayfası kodlarken tüm elemanlara tek tek atama yapabildiği gibi birde bir elemana atama yaparız ve bu özellik tüm alt elemanlarada uygulanır buna kalıtsallık denir.Bir kodla da açıklayalım:
#kalıtsallık {text-align: center;}
<div id="kalıtsallık">Buradaki içerik ortalanacaktır <p>text-align özelliginin
kalıtsallığı oldugu için buradaki içerikte ortalanacaktır </p></div>
Hazırlayan Ali Emre