CSS’de Yazı ve Fontlarla Çalışmak

Evet şimdiye kadar bir CSS dosyasının nasıl oluşturulduğu, nasıl çalıştırıldığı ve oluşturulma yollarına dair örnekler gördük. Artık konu ile ilgili temel bilgilere sahip olduğumuzu varsayıyoruz. Bundan sonra devam edeceğimiz yazılarımızın daha kolay anlaşılabilmesi için şimdi CSS kodları kullanarak yazı ve fontlara nasıl şekil ve etkiler vereceğimizi görelim.

Önce kodlarımızı ve ne işe yaradıklarını anlatalım daha sonra basit bir örnekle pekiştirelim isterseniz.

 
Kod Örnek Kullanım Şekli Etkisi
font-family Arial, Helvetica, sans-serif Kullanılan yazı tipini belirler
font-size 5pt, 12px gibi değerler ya da xx-small, large gibi terimler kullanılır. Yazı büyüklüğünü ayarlar
font-style italic, normal, oblique Yazı stilini ayarlamak için kullanılır. (eğik ya da düz)
font-weight bold, bolder, lighter, normal Yazı kalınlığını ayarlar. İnce ya da kalın
font-variant normal, small-caps Özellikle başlıklarda çok kullanışlıdır. small-caps seçildiği takdirde yazıyı büyük harflere çevirir ve her kelimenin ilk harfinin puntosunu biraz daha büyük yapar.
text-transform none, capitalize, lovercase, uppercase Yazı harflerini büyük-küçük olarak değiştirmekte kullanılır. Capitalize seçilirse her kelimenin ilk harfi büyük harfe çevirilir. Lovercase seçilirse yazının bütün harfleri küçük olur. Uppercase seçilirse yazıdaki bütün harfler büyük olacaktır.
text-decoration blink, line-through, none, overline, underline Yazının altını, üstünü veya üzerini çizmek için kullanılabilir.
text-align left, right, center, justify Yazının sağa ya da sola hizalanması, ortalanması veya her iki yana yaslanması işlevini yönetir.
text-indent pt, px, cm değerlerinden bir ölçü Paragraf başlarının sol marjinden ne kadar uzak olacağını ayarlar
letter-spacing normal ya da pt, px, cm değerlerinden bir bir birim Harfler arasında ne kadar uzaklık bulunacağını tayin eder
word-spacing normal ya da pt, px, cm değerlerinden bir birim Kelimeler arasındaki uzaklığı belirler.
vertical-align baseline, buttom, middle, sub, super, text-buttom, text-top, top Yazının dikey hizasını kontrol etmekte kullanılır.
line-height normal ya da pt, px, cm değerlerinden bir ölçü veya yüzde cinsinden bir değer Yazıda satırlar arasındaki boşluğu ayarlamak için kullanılır.

Bundan sonra yazacağınız CSS kodlarında yukarıdaki tabloda gördüğünüz değerler size yardımcı olacaktır. İsterseniz sizi meraklandırmadan tabloda da sık sık karşılaşılan pt, px ya da cm gibi değerlerin ne anlama geldiğini açıklayayım

px: Piksel demektir ve ekran çözünürlüğüne bağlıdır yani her çözünürlükte aynı sonucu alamayabilirsiniz. Piksel bilgisayarda en sık kullanılan ölçü birimlerinden biridir.

em: Kullanılmakta olan fonttaki “m” harfinin genişliğini baz alır. Harfin genişliği ekran çözünürlüğüne bağlı olduğundan dolayı bu da göreceli bir birimdir yani ortama göre değişebilir.

pt: Punto demektir ve nokta baz alınır. Göreceli değildir ve her ortamda aynı sonucu verir. 1 Punto = 1/72 inç

cm: Santimetre

mm: Milimetre

in: İnç (1 inç = 2.54 cm)

Şimdi de dilerseniz bu kodları kullanarak örnek bir uygulama yapalım

<style type="text/css">
.poz
{
font-weight: bolder;
color: #936;
font-style: oblique;
font-family: Arial, Helvetica, sans-serif;
font-variant: small-caps;
text-transform: uppercase;
text-decoration: blink;
vertical-align: baseline;
line-height: 1cm;
text-align:justify;
text-indent: inherit;
letter-spacing: 5px;
word-spacing: 15px;
vertical-align: text-bottom;
}

</style>
<p>Ben</p>

<p class="poz">Bir başka deyişle ben... Benlik duygusu Nedir? Nasıl bir duygudur? İnsanda ya eğer içgüdüsel bir davranış değilse diğer canlı türlerinden ortaya çıkması nasıl açıklanabilir. Freud bu temel soru benden yüz yıl önce sormuştu ancak manzaraya şöyle bir göz attığımızda bir arpa boyu yol alamadığımızı esefle görüyoruz.
.</p>

Yukarıdaki örnek kodda önce tablodaki kodlardan bazılarını kullanarak bir stil kodu oluşturduk ve ardındani oluşturduğumuz bu stili bir paragrafa atadık. Eğer bu kodu alır birebir kopyalayarak çalıştırırsanız kodların etkisini görebilirsiniz ve hatta yukarıdaki tablodan da yararlanarak belli parametreleri değiştirerek farkları görebilirsiniz. Hepinize kolay gelsin


One Comments

Bir yanıt yazın