Büyük Harf Metni Başlık Durumuna Dönüştürmek için CSS Nasıl Kullanılır?

Buyuk Harf Metni Baslik Durumuna Donusturmek Icin Css Nasil Kullanilir



büyük harf ”, çünkü adı, hedeflenen metnin tüm karakterlerini büyük harf biçimine ayarlar ve “ başlık durumu ”, hedeflenen metindeki her kelimenin başlangıç ​​karakterini büyük yapar. Daha çok web sayfalarında başlık, alt başlık ve başlıkları biçimlendirmede kullanılır. Kullanıcılar, menü öğelerinin veya ürün listelerinin okunabilirliğini artırmak için de kullanılabilir. Ayrıca, web sayfasının genel görünümünü ve tanınmasını da artırır.

Bu makale, büyük harfli metni başlık durumuna dönüştürmek için adım adım prosedürü göstermektedir.

Büyük Harf Metni Başlık Durumuna Nasıl Dönüştürülür?

CSS özellikleri ve JavaScript'in yardımıyla, büyük harfli metin büyük/küçük harfe dönüştürülebilir. Bu dönüştürme, metnin okunabilirliğini ve görünümünü iyileştirmeye yardımcı olur. Ayrıca, tutarlı biçimlendirme sağlar ve kullanıcı deneyimini geliştirir.







Büyük harften büyük harfe dönüştürme için aşağıdaki adım adım kılavuzu izleyin:



1. Adım: Hedeflenen Bir Öğe Oluşturun
Bu ilk adımda, ' içinde hedeflenen/seçilen bir öğe oluşturun. Başlık durumuna dönüştürülen ” etiketi. Örneğin, “ P ” element verileri hedeflenir:



< merkez >
< P İD = 'dönüştürücü' > BU METİN, CSS KULLANARAK BÜYÜK HARFTEN BAŞLIK HARFİNE DÖNÜŞTÜRÜLÜR < / P >
< merkez >

Yukarıdaki kod bloğunda:





  • İlk olarak, bir “

    Metni web sayfasının ortasında görüntülemek için ' etiketi ' ' etiket. Ayrıca, sahte verileri büyük harf biçiminde sağlayın.

  • Sonra, bir 'ekleyin İD ” öznitelik ve ona bir değer sağlayın “ dönüştürücü ”. Bu ' İD ”,

    etiketinin referansını JavaScript etiketi içinde saklamak için kullanılacaktır.

Derleme aşamasının bitiminden sonra:



Web sayfasının yukarıdaki anlık görüntüsü, metnin başarıyla görüntülendiğini gösteriyor.

2. Adım: Büyük Harfi Başlığa Dönüştürme
Bir dönüştürücü oluşturmak için JavaScript özellikleri ve yöntemleri kullanılır. Aşağıdaki kodu izleyin, açıklaması aşağıda belirtilmiştir:

< senaryo >
öyleydi hedef = Document.getElementById ( 'dönüştürücü' ) .textContent.toLowerCase ( ) ;
hedef = hedef .yer değiştirmek ( / \b\w / G,
işlev ( daha düşük ) { lower.toUpperCase'e dön ( ) ; } ) ;
Document.getElementById ( 'dönüştürücü' ) .Metin içeriği = hedef ;
< / senaryo >

Yukarıdaki kod parçacığında:

  • İlk olarak, “adında bir değişken oluşturun. hedef ' içinde ' ' etiket.
  • Ardından, “ Metin içeriği Yalnızca boşluk bırakan metni ve diğer etiketleri seçmek için ” özelliği. “ toLowerCase() ” işlevi, “hedef” değişkene bir değer depolayan bir “dönüştürücü” kimliğine sahiptir.
  • Sonra ' yer değiştirmek() “hedef” değişkenin değerini değiştirmek için ” yöntemi kullanılır. “” kullanarak her kelimenin ilk karakterini seçer. \b\w ” ifadesini kullanır ve ardından “ toUpperCase() ' işlev. Metin biçimini büyük harfe değiştirir.
  • Sonunda, “hedef” değişkeninin yeni değeri, “id” değerine sahip ekranda görüntülenir. dönüştürücü ”.

Kod parçacığının yürütülmesinden sonra:

Çıktı, büyük harfli metnin başlık durumu biçimine dönüştürüldüğünü gösterir.

Çözüm

Büyük harfi büyük harfe çevirmek için “ toLowerCase() ” işlevi seçili öğede. Bundan sonra, “ yer değiştirmek() kullanarak her kelimenin ilk karakterini seçmek için ” işlevini kullanın. \b\w ' ifade. Sonunda, seçilen karakter “ kullanılarak büyük harfe dönüştürülür. toUpperCase() ' işlev. Bu makale, seçilen öğelerin büyük harfli metnini başlık durumuna dönüştürme prosedürünü göstermiştir.