CSS İle Yazı Şekillendirme İşlemleri

CSS İle Yazı Şekillendirme İşlemleri

Önceki yazımızda yazı şekillendirme konusuna giriş yaptık. Daha çok font özellikleri üzerinde durduk. Bu yazıda ise yazılar için kullanılan text decoration, spacing, alignment ve indent özelliklerinden bahsedeceğiz.

Text-Decoration

text-decoration özelliğini kullanarak yazıları altı çizili, üstü çizili hale getirebiliriz.  Alabileceği özellikler aşağıda sıralanmıştır.

  • none: Normal yazı tanımlar. Varsayılan olarak gelir.
  • underline: Altı çizili hale getirir.
  • overline: Yazıyı üstü çizgili hale getirir.
  • line-through: Kelime veya cümlenin üstünü çizer.

Kullanımı ise aşağıdaki gibi olur.

Ayrıca CSS3 ile birlikte gelen text-decoration-color, text-decoration-style ve text-decoration-line özellikleri şu an sadece Firefox tarafından desteklendiği için fazla kullanım alanı bulmamaktadır.

Yazı Aralığı (Spacing)

Yazıların satır, kelime ve harf aralıklarını belirlemek için farklı özellikler kullanıyoruz. Örneğin paragraflar için satır yüksekliğini %25 daha büyük hale getirebilir, kelime aralığını 30px olarak ayarlayabilir ve harf aralığı için 3px değerini verebiliriz.

Yukarıda belirttiğimiz durumun CSS kodu aşağıdaki gibi olur.

  • line-height: Satır yüksekliğini belirler.
  • word-spacing: Kelimeler arasındaki boşluğu arttırır veya azaltır.
  • letter-spacing: İki karakter arasındaki boşluğu belirler.

Yazı Hizalama (Text-Align)

Yazılar için dört farklı şekilde hizalama yapabiliriz.

  1. left: Yazıları sola doğru hizalar.
  2. right: Sağa doğru hizalama yapar.
  3. center: Yazıları ortalar.
  4. justify: Satırları uzatarak her satırı eşit genişliğe getirir. Bir üst satır ne kadar genişlik değerine sahipse altındaki satır da aynı değere sahip olur.

Örneğin paragraflar için justify değerini atayalım.

Yazı Dönüşümü (Text-Transform)

Dört farklı CSS özelliği ile yazıları dönüştürebiliriz. Bu özellikler ile yazıdaki harflerin tümünü büyük veya küçük hale getirebilir ya da sadece ilk harfi büyük olacak şekilde ayarlayabiliriz.

  • none: Yazıları olduğu gibi ekrana yazdırır. Herhangi bir dönüşüm yapmaz.
  • capitalize: Her kelimenin ilk karakterini büyük harfe dönüştürür.
  • uppercase: Tüm harfleri büyük harfe dönüştürür.
  • lowercase: Tüm harfleri küçük harfe dönüştürür.

Örneğin capitalize özelliğini kullanmak için bir sınıf oluşturabilir ve bu sınıfı elementlere dahil edebiliriz.

Satır başı (Text-indent)

Herhangi bir yazı bloğunun ilk satırında satır başı kullanmak istersek text-indent özelliğinden yararlanıyoruz. Örneğin paragraflar için 20px değeri atayalım. Bu durumda her paragrafın ilk satırında 20px içe kayarak satır başı yapılır.

css ile yazı şekillendirme

 

Yorum Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

error: