CSS Yazıtipi Özellikleri Nasıl Ayarlanır?
CSS yazıtipi özellikleri sayfalarımızdaki metinlerin yazıtipi ailesini, kalınlık ayarlarını, boyutunu, büyük-küçük harf olmasını ve stilini değiştirmemizi sağlar. CSS yazıtipleri üzerinde tam hâkim olmamızı sağlar. Şimdi css yazıtipi özelliklerini tek tek inceleyelim.
Renk (color) Özelliği
Renk tanımlaması metinlerimizin rengini belirlemek için kullanılır.
Yapısı: color: <deger>
Aldığı Değerler: <renk>
Başlangıç Değeri: web tarayıcısı belirler
Uygulanabilen elemanlar: tüm elemanlar
Kalıtsallık: Var
p
{
color:red;
}
CSS3 ile birlikte 147 renk tanımı gelmektedir. Tüm tarayıcılar bu renkleri desteklemektedir. CSS3 ile birlikte RGBA (RGB with Alpha channel) renk tanımı da eklenmiştir. Renk tanımı ile birlikte alfa kanal saydamlık değeri de atanabilecek.
Yazıtipi Ailesi (font-family)
Metinlerin kullanılacağı yazıtipi ailesini belirlemek için kullanılır. Birden fazla yazıtipi ailesi kullanılacaksa aralarına virgül (,) koyulur. Birden fazla yazılmasının nedeni birinci yazıtipi ailesi eğer kullanıcının bilgisayarında yok ise alternatif bir yazıtipi sunmaktır.
Yapısı: font family: <yazıtipi aile ismi >
Aldığı Değerler: <yazıtipi aile ismi>
Başlangıç Değeri: web tarayıcısı belirler
Uygulanabilen elemanlar: tüm elemanlar
Kalıtsallık: Var
p
{
font-family:serif,arial;
}
Genelde birden fazla aile tipi yazılır ve son yazılan aile tipi mutlaka sosyal aile tiplerinden biri olur. Çünkü sosyal aile tiplerini tüm tarayıcılar destekler.
| Sosyal yazı tipi aileleri | Benzeyenler |
| Serif | Times, Times New Roman |
| San-serif | Helvetica, Arial |
| Cursive | Zapf-Chancery |
| fantasy | Western |
Eğer yazı tipi ismi bir den fazla kelimeden oluşuyorsa çift tırnak içine alınır.
Yazıtipi Boyutu (font-size)
CSS, yazı tipi boyutlandırmada daha esnek tanımlama yapmamızı olanak sağlar. CSS’de yazı tipi boyutunu belirlemek için birçok birim kullanılır. Örn: px, em, pt, in, cm vb.
Yapısı: font-size: <kesin degerler > | <göreceli degerler > | <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 | smaller79
· <uzunluk>
· <yüzde> (üst elemanlara(ebeveyn) bağlı olarak)
Başlangıç Değeri: medium
Uygulanabilen elemanlar: tüm elemanlar
Kalıtsallık: Var
p
{
font-size:18px;
}
! Windows ortamındaki Internet Explorer 5.5 ve alt sürümlerinde başlangıç değeri medium yerine small’dır.
Yazıtipi Kalınlığı (font-weight)
Yazıtipinin kalınlık incelik durumunu belirler. 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 alır.
Yapısı: font-weight: <deger>
Aldığı Değerler: normal | bold | bolder | lighter | 100 | 200 | … |900|
Başlangıç Değeri: normal
Uygulanabilen elemanlar: tüm elemanlar81
Kalıtsallık: Yok
p
{
font-weight:bold;
}
Yazıtipi Biçimi (font-style)
Yazıtipinin eğik (italiktik) olup olmamasını belirler.
Yapısı: font-style: <deger>
Aldığı Değerler: normal | italic | oblique | inherit
Başlangıç Değeri: normal
Uygulanabilen elemanlar: tüm elemanlar
Kalıtsallık: Var
p
{
font-style:italic;
}
Yazıtipi Farklılıkları (font-variant)
Metnin küçük-büyük harf ile gösterilmesini belirler. İki değer alır. Normal | small-caps.
Yapısı: font-variant: <deger>
Aldığı Değerler: normal | small-caps | inherit
Başlangıç Değeri: normal
Uygulanabilen elemanlar: tüm elemanlar
Kalıtsallık: Var
p
{
font-variant:normal;
}
Yazıtipi (font)
Yukarda anlatılan yazıtipi özellik değerlerini tek seferde tanımlamak için kullanılır.
Yapısı: font: <deger>
Aldığı Değerler: [ <font-style> || <font-variant> || <font-weight>]? <font-size> [ / <line-height> ]? <font-family>
Başlangıç Değeri: tanımsız
Uygulanabilen elemanlar: tüm elemanlar
Kalıtsallık: Var
p
{
font: san-serif bold italic 18px;
}
CSS yazıtipi özellikleri konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/css/
Sosyal Medya Hesaplarımız
