CSS Metin İşlemleri – Web Tasarım & Programlama
CSS Web Tasarım

CSS Metin İşlemleri

html sayfalarına eklenilen metinlere CSS kullanarak biçimlendirme uygulanabilir. Bu yazımızda CSS ile sayfalarınıza eklediğiniz metinlere ne tür biçimler verebileceğinizi göreceksiniz.

color:

color” özelliği kullanılarak sayfalarınıza eklediğiniz yazıları renklendirebilirsiniz. Bir sayfanın varsayılan metin rengini değiştirmek için color özelliği body etiketine uygulanmalıdır. Aşağıdaki örnekte sayfaya eklenmiş olan başlık ve paragrafın renklendirilmesini göreceksiniz.

Kodlar:

Ekran Çıktısı:

text-align :

 

Sayfaya eklenen metnin yatayda hizalanması amacıyla kullanılır. text-align özelliği aşağıdaki değerleri alabilir.

  • center : Ortala
  • left : Sola hizala
  • right : Sağa hizala
  • justify : Her iki yana yasla
  • inherit : Üst kapsayıcıdan devral.

Aşağıdaki örnekte sayfaya eklenen dört paragrafa yukarıdaki özelliklerin uygulanması görülmektedir.

Kodlar:

Ekran Çıktısı:

 

text-decoration :

text-decoration özelliği metin süslemeleri yapmak ya da kaldırmak için kullanılmaktadır. Alabileceği özellikleri inceleyelim.

  • overline : Metnin üstünü çiz.
  • line-through : Metnin ortasını çiz
  • underline : Metnin altını çiz
  • none : Hiç bir dekorasyon uygulanmaz

Linkler sayfaya eklendiği zaman standart olarak altı çizili olarak gelir. Menü oluştururken bu durumun ortadan kaldırılması için text-decoration özelliği none olarak ayarlanır.

Örnek:

Ekran Çıktısı:

 

text-transform:

text-transform Özelliği ile bir metnin harflerinde küçük büyük karakter dönüşümü gerçekleştirebilirsiniz. Alabileceği farklı değerler

  • uppercase : Metni büyük harlere dönüştürür.
  • lowercase : Metni küçük harflere dönüştürür.
  • capitalize : Metnin ilk harflerini büyük karakterine dönüştürür.

Örnek:

Ekran Çıktısı:

 

 

text-indent :

text-indent Özelliği bir elemanın içindeki metnin ilk satırına girinti için kullanılabilir. Bu özellik için, piksel, nokta, yüzdeler ve benzeri dahil tüm ortak uzunluk değerleri kullanılabilir. Pozitif değerler metni içeri doğru, negatif değerler ise metni dışa doğru girer. text-indent özelliğinin kullanımıyla ilgili aşağıdaki örneği inceleyebilirsiniz.

Örnek:

Ekran Çıktısı:

 

letter-spacing :

 

letter-spacing özelliği kullanarak, bir sayfada harfler arasındaki boşluklar ayarlanır. Pozitif bir uzunluk değeri harfleri birbirinden uzaklaştıracak, negatif uzunluk değeri ise harfleri birbirine daha yakın çekecektir.

Örnek:

Ekran Çıktısı:

 

line-heigth :

line-heigth özelliği kullanılarak satırlar arasındaki boşluk ayarlanır. Örneğimizde 3 adet paragrafa 3 farklı satır boşluğu değeri verilmiştir.

Örnek:

Ekran Çıktısı:

 

word-spacing :

word-spacing özelliği ile kelimeler arası boşluk ayarlanır. Pozitif değerler kelimeler arası boşluğu açarken, negatif değerler kelimeleri birbirine yaklaştırır.

Örnek:

Ekran Çıktısı:

 

 

text-shadow :

text-shadow Özelliği metne gölge uygulamak için kullanılır. text-shadow dört farklı değer almaktadır. İlk değer gölgenin yatay kaydırmasını, ikinci değer gölgenin dikey kaydırmasını ve opsiyonel olan üçüncü değer gölgenin bulanıklık yarıçapını belirler. Dördüncü ve son değer ise gölge için kullanılan renk değerleri belirtilir.

Örnek:

Ekran Çıktısı:

Yorum yap

Sayfamızı YouTube'da da takip etmek ister misiniz?
Holler Box