CSS Dersleri 3: Font ve Text Özellikleri

Css derslerimize kaldığımız yerden devam ediyoruz, bu dersimizde CSS ile Text ve Font özelliklerini anlatmaya çalışacağım. Öncelikle bu derste sıklıkla css seçicileri kullanacağımızı belirtmek isterim. Eğer bu konuyla ilgili yeterli bilgi sahibi değilseniz …. Konulu derse göz atmanızı tavsiye ederim.

CSS ile Font ve Text Özellikleri

Burada tüm text ve font özelliklerine değinilmeyecek olup, sadece en çok ihtiyaç duyulan özelliklerden bahsedilecektir.

1-Color özelliği: color özelliği belirtilen metnin rengini değiştirmek için kullanılır. Bir metnin rengi değiştirilirken 3 farklı türde değer atanabilir.

-rengin ingilizce ismini yazarak. Örneğin “red, blue, green v.b”.

-rengin hex kodunu yazarak. Örneğin #ff45ca gibi.

-rengin rgb değerini yazarak. Örneğin rgb(255,0,113) gibi.

Yukarıda kodlar incelendiğinde sayfanın tümümde kullanılacak varsayılan yazı rengi siyah olarak, tüm h1 başlıklar ise hex kodu verilen renkte biçimlendirilecektir.

 

2-Font Size özelliği: font-size özelliği metnin yazı büyüklüğünü ayarlamak için kullanılmaktadır. Büyüklük değerleri piksel(px), punto (pt), em(em), yüzde(%) gibi değerler alabilir.

Not: font-size özelliğinin varsayılan değeri, paragraflar için 16px=1 em=12pt=100%’ dür.

Yukarıda ki örnekler incelendiğinde birimlerin her zaman verilecek değerin sonuna yazıldığı dikkat çekmektedir.

 

3-Font Family özelliği : font-family özelliği metinin yazı tipini değiştirmek için kullanılır. Font-family özelliği yazılırken tarayıcı desteğini tamamen sağlamak için 3 farklı yazı tipi aralarında virgül olacak şekilde yazılabilir. Bu bir zorunluluk değildir.

Not: Dikkat edeceğiniz üzere birden fazla kelimeden oluşan yazı tipleri çift tırnak arasına alınarak kullanılmıştır.

 

4- Text Aligment özelliği: text-aligment metni yatayda hizalamak için kullanılır. Metin sağa (right), sola (left) ve ortaya (center) hizalanabileceği gibi iki yana da yaslanabilir (justify).

 

5- Text Decoration özelliği: text-decoration özelliği metnin altı çizgili(underline), üstü çizgili gibi şekillerde biçimlendirilmesini sağlar. En çok kullanıldığı yer ise menüler yaparken <a> etiketinin varsayılan altı çizgili halini iptal etmektir.

Önemli noktaların altını çizmek için bir class yazmak istersek;

 

6-Font Style özelliği: font-style özelliği genellikle metni italik yapmak için kullanılır.

 

7-Font Weight özelliği: font-weight özelliği metni kalınlaştırmak veya inceltmek için kullanılır. Bu özellik normal, bold (kalın) gibi değer alabileceği gibi 100,200 … 900 gibi değerlerde alabilir.

Bu dersimde en çok kullanılan CSS Font ve Text özelliklerine değinmeye çalıştım. Yukarıda belirttiklerimden başka birçok özellik daha mevcuttur. Fakat başlangıç aşamasında olanlar için yukarı da ki özellikler metinleri biçimlendirmek için fazlasıyla yeterlidir. Konuyla ilgili sorularınızı yorum yazarak bana iletebilirsiniz.