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

instagram logo
twitter logo

Son Eklenen Yazılar

Bir Cevap Yazın

%d blogcu bunu beğendi: