Herhangi bir makale veya belge yazarken, belirli durumlarda olması için genellikle bazı karakterlere ihtiyaç duyarız. Bir web sayfasında, metninin dönüştürülmesi gereken HTML öğesi, “ CSS özelliği ile uygulanır. metin dönüşümü ”. Bu özellik aynı zamanda, tüm karakterleri ekledikten sonra karakterlerin durumu bir kerede dönüştürülebilecek şekilde zaman kazandırır.

Bu gönderi size CSS ile metin durumlarını nasıl değiştirebileceğimizi öğretecek. Haydi başlayalım!

CSS Kullanarak Metin Nasıl Büyük ve Küçük Harf Yapılır?

CSS'de “ metin dönüşümü ” özelliği, metnin büyük harf kullanımını kontrol eder. Metni büyük veya küçük harfe dönüştürmek için de kullanılır.

text-transform Özellik Değerleri

CSS text-transform özelliğinin olası değerleri aşağıda listelenmiştir:

• • “ büyük harf ”: Bu değer, öğenin metnindeki tüm karakterleri büyük harfle yapar.
  • “ küçük harf ”: Bu değer, öğenin metnini küçük harfe dönüştürür.
  • “ büyük harfle yazmak ”: Bu değer, her kelimenin ilk harfinin büyük yazılmasını değiştirir.
  • “ Yok ”: Bu değer, öğenin metnini değişiklik için kısıtlar.
  • “ ilk ”: Bu değer varsayılan değeri ayarlar.
  • “ miras alırsın ”: Bu değer, değerini üst öğesinden ayarlar.

Aşağıdaki örneği inceleyin!

Örnek: Metni Büyük ve Küçük Harfe Dönüştürme

İlk olarak, “ sınıf adına sahip bir div öğesi ekleyin. Kutu ”. Gövdenin içine üç başlık etiketi

,

ve

ekleyin; burada

başlığının metni tamamen büyük,

küçük harf ve üçüncüsü de küçük harf olsun.

HTML kodu aşağıdadır:

< div sınıf = 'Kutu' >
< h1 > küçük harf: LINUXHINT'E HOŞ GELDİNİZ h1 >
< h2 > büyük harf: linuxhint'e hoş geldiniz h2 >
< h3 > büyük harfle: linuxhint'e hoş geldiniz h3 >
div >

Stil kutusu div'i

.Kutu {
yükseklik: 200 piksel;
Genişlik: 80 % ;
kenarlık: 4 piksel katı #e4cfcf;
arka plan rengi: cadetblue;
kenar boşluğu: 1px otomatik;
dolgu: 10 piksel;
}

Yukarıdaki HTML dosyasında oluşturulan div, aşağıda açıklanan CSS özellikleriyle stillendirilmiştir:

• • “ boy uzunluğu ” div yüksekliğini ayarlamak için kullanılır.
  • “ Genişlik ” div genişliğini ayarlamak için kullanılır.
  • “ sınır ” özelliği, 4 piksel genişliğinde, düz çizgi tipinde ve #e4cfcf renginde olan öğenin etrafına kenarlık uygulamak için kullanılır.
  • “ arka plan rengi ”, öğenin arka plan rengini belirtir.
  • “ marj ” özelliği, öğenin her tarafındaki boşluğu ayarlar.
  • “ dolgu malzemesi ” özelliği, div öğesinin içeriği etrafında veya öğenin kenarlığı içinde boşluk oluşturmak için kullanılır.

Aşağıdaki kod blokları, tüm başlık öğelerinin text-transform özelliklerinin farklı değerleri ile stillendirildiğini gösterir.

öğesi, text-transform özelliğiyle uygulanır ve değer ' olarak ayarlanır küçük harf ”:

h1 {
metin dönüşümü: küçük harf;
}

öğesi, text-transform özelliğiyle uygulanır ve değer ' olarak ayarlanır büyük harf ”:

h2 {
metin dönüşümü: büyük harf;
}

elemanı için text-transform özelliğinin değeri “ olarak ayarlanır. büyük harfle yazmak ”:

h3 {
metin dönüşümü: büyük harfle;
}

Yukarıda belirtilen kod sağlanarak birinci başlık metninin tamamı küçük harfe, ikinci başlık büyük harfe dönüştürülür. Üçüncü başlıkta ise her kelimenin ilk harfi büyük yazılır:

Harika! Metni büyük harfe, küçük harfe ve tamamı büyük harfe dönüştürmeyi başarıyla öğrendik.

Çözüm

CSS'nin text-transform özelliği, metnin büyük harf kullanımını kontrol eder ve belge metninin büyük/küçük harf durumunu değiştirmek için kullanılır. Bu özellik, bu özelliğin değerlerinin büyük harf, küçük harf, büyük harf veya hiçbiri olabileceği tüm öğeler için geçerlidir. Bu blog, CSS text-transform özelliğini kullanarak metni büyük ve küçük harfe dönüştürme prosedürünü açıkladı.