CSS [ 04 – Yazılar ]

CSS Yazilar

CSS yazı tipi özellikleri yazı tipi ailesi, cesaret, boyut, ve bir metnin stilini tanımlar.

Serif ve Sans-serif yazı tipleri Arasındaki Fark

serif

CSS Yazı Aileleri

CSS, yazı tipi ailesi isimlerinin iki türü vardır:

  • genel aile – (“Şerif” veya “Monospace” gibi) benzer bir görünüm ile font aileleri bir grup
  • yazı tipi ailesi – Belirli bir yazı tipi ailesi (“Times New Roman” veya “Arial” gibi)
Aile Yazi Bireyi Aciklama
Serif Times New Roman
Georgia
Serif yazi sekli bazi karakterlerde kucuk cizgilere sahiptir
Sans-serif Arial
Verdana
Karakterlerde cizgiler yoktur duzdurler
Monospace Courier New
Lucida Console
Butun karakterler ayni genisliktedir.

Yazı Tipi Ailesi

Bir metnin yazı tipi ailesi font-family özelliği ile ayarlanır.

Font-family özelliği “son çare” sistemi gibi birçok yazı tipi adlarını tutmak gerekir. Tarayıcı ilk yazı desteklemiyorsa, bir sonraki yazı tipi çalışır.

Not : Bir yazı tipi ailesi adı bir kelimeden daha fazla ise, tırnak içinde olmalıdır: “Times New Roman”.

Birden fazla yazı tipi ailesi virgülle ayrilarak belirtilir:

Yazı Tipi Stili

Font-style özelliği çoğunlukla italik yazı belirtmek için kullanılır.

Bu özelligin üç değeri vardır:

  • Normal – metin normal gösterilir
  • italik – Metin italik olarak gösterilmiştir
  • eğik – Metin (eğik italik çok benzer, ama daha az desteklenir) “eğilerek” gosterilir

Yazı Tipi Boyutu

Font-size özelliği metnin boyutunu ayarlar.

Her zaman <h1> gibi, uygun HTML etiketleri kullanabilirsiniz – <h6>  başlıklar, paragraflar icin <p>

Font-size değeri mutlak veya göreceli büyüklüğü ayarlar.

Mutlak boyutu:

  • Belirli bir boyutta metni ayarlar
  • Çıktı ,fiziksel boyutun mutlak boyutundan yararlanir

Bağıl boyutu:

  • Çevre elemanlarına göre boyutunu belirler
  • Bir kullanıcı tarayıcılarda metin boyutunu değiştirmenizi sağlar

Bir yazı tipi boyutu belirtmezseniz, normal bir metin için varsayılan boyut, paragraflar gibi, 16px (16px = 1em) ‘dir.

Piksel ile Yazı Boyutu Ayarlama

Piksel ile metin boyutunu ayarlama metin boyutunu üzerinde tam kontrol sağlar:

Yukarıdaki örnekte metin yeniden boyutlandırmak için Internet Explorer 9+, Firefox, Chrome, Opera ve Safari tarayicilari destek sağlar.

Not: Yukarıdaki örnekte, IE, önceki 9 dan onceki surumlerde calismaz.

Em ile Yazı Boyutu Ayarlama

Internet Explorer’ın eski sürümleri ile yeniden boyutlandırma sorunu önlemek için, pek çok geliştirici piksel yerine em kullanır.

Em boyutu birimi W3C tarafından tavsiye edilir.

1em geçerli yazı tipi boyutuna eşittir. Tarayıcılarda varsayılan metin boyutu 16px olduğunu. Yani, 1em, varsayılan boyutu 16px dir.

Boyut bu formül kullanilarak piksel / em hesaplanabilir: piksel / 16 = em

Tüm tarayıcılarda çalışabilmesi icin cözüm, <body> elemanı için yüzde bir varsayılan font-size ayarlamaktır:

Tüm CSS Yazı Tipi Özellikleri

Komut Aciklama
font tek bir komutta butun yazi ayarlarini yazmak icin
font-family yazi ailesi
font-size yazi boyutu
font-style yazi sekli stili
font-variant
font-weight yazi kalinlik agirligi

CSS Metinler

Metin Rengi

Color özelliği metnin rengini ayarlamak için kullanılır.

CSS ile,

  • Bir HEX değeri – “# ff0000” gibi
  • bir RGB değeri – “rgb (255,0,0)” gibi
  • bir renk adı – “kırmızı” gibi

sekillerde belirtilir.

Bir sayfa için varsayılan renk vücutta seçici tanımlanmıştır.

Metin Hizalama

Text-align özelliği, bir metnin yatay hizalamasını ayarlamak için kullanılır.

Metin merkezli, ya sol ya da sağ, seklinde düzenlenebilir.

Text-align “haklı” olarak ayarlandığında, her satırı her satır eşit genişlikte sahip olacak şekilde gerilir ve sol ve sağ kenar (dergi ve gazete gibi) düzdür.

Yazı Dekorasyonu

Text-decoration özelliğini metine dekorasyon ayarlamak veya kaldırmak için kullanılır.

Text-decoration özelliğini çoğunlukla kaldırmak için kullanılan :

a {text-decoration:none;}

Ayrıca, metin dekore etmek için kullanılabilir:

Yazı Dönüşüm

Metin-transform özelliğine bir metin içinde büyük ve küçük harfler belirtmek için kullanılır.

Yazı Girinti

Metin-girinti özelliği metnin ilk satırının girinti belirtmek için kullanılır.

Tüm CSS Metin Özellikleri

Komut Aciklama
color metin rengi
direction metin yazi yonu
letter-spacing karakterler arasi bosluk
line-height yazi yuksekligi
text-align metnin yatay konumu
text-decoration metin dekorasyonu
text-indent metin girintisi
text-shadow metin golge efekti
text-transform metin BUYUK kucuk kontrolu
unicode-bidi
vertical-align dikey metin konumu
white-space elemanlardaki beyaz alanlarin kontrolu
word-spacing kelimeler arasi bosluk

Referans;

http://www.w3schools.com/css/css_text.asp

http://www.w3schools.com/css/css_font.asp

Leave a Reply

Your email address will not be published. Required fields are marked *