CSS Büyük ve Küçük Harf Dönüştürme

Text-transform özellik metnin tümünü büyük ve küçük harf yapmak isteyebiliriz veya Her kelimenin ilk harfini büyük harfe dönüştürmek için kullanılır.


.buyuk_harf {
 text-transform: uppercase;
}

text-transform’un özelliğinin alabileceği değerler:

uppercase :Uygulanan metindeki tüm harfler büyük harfe çevirir.
lowercase :Uygulanan metindeki tüm harfleri küçük harfe çevirir.
capitalize :Uygulanan metindeki her kelimenin ilk harfini büyük harfe çevirir.
none :Uygulanan metindeki küçük-büyük harfleri aynı girildiği gibi bırakır.
inherit :Uygulanan metindeki küçük-büyük harfleri, ebeveyn öğenin küçük büyük harf kurallarına göre ayarlar

Metnimizi tümünü, büyük harfe çevirelim:

HTML:


<p class="test">Bu gün hava çok güzel</p>

CSS:


.test{
    text-transform: uppercase;
}

ÇIKTI:

BU GÜN HAVA ÇOK GÜZEL

Bazı tarayıcılarda hata çıkarsa tarayıcı hangi dilde büyütme yapacağını bilsin. HTML başlangıç etiketinin dil ayarını "tr" olarak değiştirelim.


<html lang="en">   <--!yerine-->

<html lang="tr">   <--!yazın-->

Metnimizi tümünü, küçük harfe çevirelim:

HTML:


<p class="test">BU GÜN HAVA ÇOK GÜZEL</p>

CSS:


.test{
    text-transform: lowercase;
}

ÇIKTI:

bu gün hava çok güzel

Her kelimenin ilk harfi büyük harf yapalım:

HTML:


<p class="test">Bu gün hava çok güzel</p>

CSS:


.test{
    text-transform: capitalize;
}

ÇIKTI:

Bu Gün Hava Çok Güzel

FATİH BURHAN 06/10/2022

Çok teşekkürler. https://www.herseyilanimda.com/ ilan platformumda kayıt sayfasında ad soyad alanları üye olanlar küçük büyük harfe dikkat etmeden bilgilerini giriyordu. Bunları düzeltmek için hayli zahmetli oluyordu. Bundan sonra böyle bir sorun olmayacak. Bir de satır başlarında ve noktadan sonra büyük harfle başlama kodu var mı? Mesela bu mesaj alanı büyük harfle başlayabilir ve noktadan sonra büyük harfle devam edebilirdi.

yönetici 07/10/2022

Malsef yok bunu PHP dili ile yababilirsin.

ebru 10/10/2023

BU GÜN HAVA ÇOK GÜZEL bu şekilde olanı Bu Gün Hava Çok Güzel bu şekilde çevirmek için ne yapmalı diğer komutlar işlemiyor.

yönetici 14/10/2023

Kelimelerin ilk harfi büyük diğerlerin küçük olması için text-transform: capitalize; özelliği ver.

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

KATEGORİ

HTML
CSS
PHP
JQUERY
PHOTOSHOP
JavaScript
Web Dünyası
Linux
MİTHRİL FRAMEWORK
Laravel
Git
React

POPÜLER MAKALE

HTML LİNK(Bağlantı)EKLEME - LİNK VERME
HTML YAZI VE RESİM ORTALAMA
HTML RESME LİNK VERME
HTML FORM OLUŞTURMA
CSS YATAY MENÜ YAPIMI
HTML RESİM EKLEME
CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
HTML DİV ve SPAN NEDİR?
HTML ARKAPLANA MÜZİK EKLEME
KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME

ETİKET