CSS Ders 7 (Yazı Tipleri)

CSS Yazı Tipleri

Yazı tiplerini biçimlendirirken en sık kullandığımız komutlar:

• font-family
• font-size
• font-style
• font-weight

1. font-family: (Yazı Tipi Belirlemek)
   Yazı tipleri klasörümüzü açtığımızda birçok yazı tipi görürüz. Bunları HTML sayfamızda kullanmak için adını belirtmemiz gerekir. İşte bu kod yazı tipi seçmemizde bize yardımcı olacaktır.

   • h1 { font-family: Times New Roman; }
     p { font-family: Times New Roman, Arial, Helvatica; }
     a { font-family: Sans-serif; }

   Yukarıdaki birinci örnekte sadece tek yazı tipi adı belirttik (Times New Roman), ancak bir sonrakinde aralarına virgül koyarak daha fazla belirttik. Bu tarz kullanımlarda öncelikle dikkate alınan ilk verdiğimiz yazı tipi olacaktır. Eğer verdiğimiz yazı tipi o kullanıcıda yoksa bir sonraki ile görüntülenecektir.
2. font-size: (Yazının Büyüklüğü)
   Yazı büyüklüğünü font-size ile belirtiriz. Ölçü birimi olarak aşağıdakileri kullanabiliriz:
   • % : yüzde olarak belirtmek
   • in : inç olarak belirtmek
   • cm : santim olarak belirtmek
   • mm : milimetre olarak belirtmek
   • em : varsayılan yazı büyüklüğüne göre oranlamak
   • pt : punto olarak belirtmek
   • px : piksel olarak belirtmek
   Örneğin yazımızın 12 punto olması için yazmamız gereken komut:

   • h2 { font-size: 12pt; }

3. text-decoration: (Yazı Biçimi)
   Yazının biçiminde bazı değişiklikler yapmamızı sağlar. Örneğin tarayıcı varsayılanında sürekli A elementlerindeki altı çizgili dekorasyonu kaldırmak için aşağıdaki yazılabilir.

   • a { text-decoration: none; }

4. text-transform: (Yazıda Değişiklik Yap)
   Yazılan bir yazıyı otomatik olarak tüm harflerini büyük harfle yazmayı ya da tamamını küçük harfle yazmayı sağlar.
   • uppercase : tüm harfleri büyük harf yap
   • lowercase : tüm harfleri küçük harf yap

   • h1 { text-transform: upperline; }

5. text-indent: (Soldan Boşluk)
   Bir yazının başında belirtilen büyüklükte boşluk bırakmanızı sağlar. Özellikle paragraflar için kullanılır.

   •  /* 50 piksel ilk satırda boşluk bırakılacak */
           p { text-indent: 50px; }

   NOT: Piksel (px), inç (in), punto (pt), santim (cm), yüzde (%) gibi stillerin sonuna eklenen ölçüler her zaman sayıya bitişik yazılır. 50px doğru ancak 50 px yanlış.

İlgili Konular

0 Yorum