CSS ile küçük büyük harf biçimlendirme

Web tasarımlarınızda metin işlemlerini oldukça yoğun şekilde kullanıyoruz. Bu yazımızda CSS ile küçük büyük harf biçimlendirme işlemini inceleyeceğiz. text-transform özelliğini detaylı şekilde kullanacağız.

Tüm metni büyük yapmak için;
text-transform: uppercase;
 
Tüm metni küçük yapmak için;
text-transform: lowercase;

Sadece metnin ilk harflerini büyük yapmak için;
text-transform: capitalize;


Şimdi isterseniz bir uygulama üzerinde tüm öğrendiklerimizi uygulayıp detaylı öğrenelim.

<!DOCTYPE html>
<html>
<head>
    <title>CSS Büyük-Küçük harf</title>
    <meta charset="utf-8">
<style type="text/css">

.buyukHarf {
    text-transform: uppercase;
}
.kucukHarf {
    text-transform: lowercase;
}
.ilkHarfBuyuk {
    text-transform: capitalize;
}
</style>

</head>
<body>

    <div class="buyukHarf">
    Burada büyük harf yazılacak
</div>    

<div class="kucukHarf">
    Burada küçük harf yazılacak
</div>

<div class="ilkHarfBuyuk">
    Sadece ilk harf büyük yazılacak.
</div>

</body>
</html>

Yukarıdaki kodu bir metin editörüne yapıştırıp "html" ya da "htm" olarak kaydettikten sonra üzerine çift tıklayarak Chrome gibi bir web tarayıcısında açınız. Web tasarım sonucu aşağıdaki gibi olacaktır.




Mutlu kodlamalar,
Oğuzhan TAŞ
Mart 2018
 
Bookmark and Share
Dil Değiştir(Change Language)
Kategoriler
Kütüphane Programı
En çok Okunan 18 Makale