Metinleri Biçimlendirmek
Bu bölümde başlık, paragraf, liste, bağlantılar vb. tüm metin temelli HTML etiketlerini CSS ile nasıl biçimlendirebileceğinizi öğreneceksiniz.
HTML'yi öğrenirken incelediğiniz gibi tüm web metinleri h1, p, ol, ul, div gibi metin etiketleri kullanılarak farklı amaçlar doğrultusunda etiketlenir.
Bir web sayfasındaki içerik akışı, varsayılan olarak soldan sağa ve yukarıdan aşağıda doğru oluşturulur. Arapça gibi sağdan sola doğru akan metinler için ekstra düzenlemeler yapmak gerekir.
Hadi, hiç vakit kaybetmeden HTML metinlerini biçimlendirmek için kullanabileceğiniz CSS özelliklerini incelemeye başlayalım!
color
CSS'te bir metnin rengini değiştirmek için color özelliğini kullanmanız gerekir. Color özelliği dört farklı türde renk değeri alabilir:
- Renk Adı: White, Black, Red, Blue, Purple vb.
- Hexadecimal Renk Kodu: 16'lık sayı tabanında bir RGB renk kodu.
- RGB() ve RGBA() Fonksiyonları: 0-256 arasında sayı değerleri belirterek RGB (Red, Green, Blue) renkler tanımlamanıza olanak sağlarlar. RGBA() fonksiyonunu kullanarak hem rengi hem de rengin görünürlüğünü (alpha) ayarlayabilirsiniz.
- HSL() ve HSLA() Fonksiyonları: HSL (Hue: 0-300 arası sayı değeri, Saturation: Yüzde, Lightness: Yüzde) renkler tanımlamanıza olanak sağlarlar. HSLA() fonksiyonunu kullanarak hem rengi hem de rengin görünürlüğünü (alpha) ayarlayabilirsiniz.
CSS'te kullanabileceğiniz renk değerleri ile ilgili daha detaylı bilgi almak için buraya tıklayınız.
font-family
Metin yazı tipini değiştirmek için kullanılır.
Birden fazla font adı belirtilebilir. İlk yazılan font adı önce uygulanır. Eğer kullanıcının bilgisayarında belirtilen font yok ise bir sonraki denenir. Belirtilen hiçbir font bulunamaz ise tarayıcının varsayılan fontu metne uygulanır.
p {
font-family: Arial, Verdana, sans-serif;
}
CSS'te farklı font türlerini tanımlamak için beş farklı genel font adı kullanılır: serif, sans-serif, monospace, cursive ve fantasy.
font-size
Metnin boyutunu değiştirmek için kullanılır. px, em, rem, ve % türünde değerler alabilir. Bir HTML ögesinin varsayılan font-size değeri onu içeren ebeveyn (parent) ögeden devralınır. Örneğin; body etiketinin font-size'ını değiştirdiğinizde bu sayfadaki tüm HTML ögeleri tarafından devralınır.
CSS'te kullanabileceğiniz ölçü birimleri ile ilgili daha detaylı bilgi almak için buraya tıklayınız.
font-style
Font biçimini değiştirmek için kullanılır. Alabileceğini değerler:
- normal: Varsayılan değerdir.
- italic: Font biçimini yana yaslı olarak değiştirir. Bunu yaparken kullanılan font tipindeki eğik karakter tasarımlarını baz alır.
- oblique: Font tipinden bağımsız olarak metni yana yaslar.
font-weight
Metnin ağırlığını, bir diğer deyişle kalınlığını ayarlamak için kullanılır. Alabileceğini değerler:
- normal: Varsayılan değerdir.
- bold: Metni kalınlaştırır.
- lighter: Göreceli olarak metnin kalınlığını azaltır.
- bolder: Göreceli olarak metnin kalınlığını arttırır.
- 100-900: 100 ile 900 arasında bir sayıyla, fontta tanımlı bir kalınlık değeri belirtilebilir.
text-transform
Metnin yazım formatını değiştirmenizi sağlar. Alabileceğini değerler:
- none: Varsayılan değerdir.
- uppercase: TÜM HARFLERİ BÜYÜK yapar.
- lowercase: tüm harfleri küçük yapar.
- capitalize: Her Kelimenin İlk Harfini Büyük Yapar.
- full-width: Tüm harfleri belirli bir genişliğe sabitler.
text-decoration
Metni, çizgiyle dekore etmek için kullanılır. Alabileceğini değerler:
- none: Varsayılan değerdir.
- underline: Metnin altına çizgi ekler.
- overline: Metnin üzerine çizgi ekler.
- line-through: Metnin üzerini çizer.
text-shadow
Metnin altına gölge eklemek için kullanılır. Yatay uzunluk, dikey uzunluk, bulanıklık ve renk olmak üzere dörtlü bir değer setiyle tanımlanır.
text-align
Metnin nasıl hizalanacağını kontrol etmek için kullanılır. Alabileceği değerler:
- left: Varsayılan değerdir. Metni sola hizalar.
- right: Metni sağa hizalar.
- center: Metni ortaya hizalar.
- justify: Kelimeler arasındaki boşlukları değiştirerek tüm metin satırlarının aynı genişlikte olmasını sağlar.
line-height
Metnin satır yüksekliği ayarlamak için kullanılır. px, em, rem ve % cinsinden bir uzunluk değeri alır.
letter-spacing
Harfler arasındaki boşluğu ayarlamak için kullanılır. px, em, rem ve % cinsinden bir uzunluk değeri alır.
word-spacing
Kelimeler arasındaki boşluğu ayarlamak için kullanılır. px, em, rem ve % cinsinden bir uzunluk değeri alır.