css text-transform nedir? nasıl kullanılır?

css text-transform, metnin büyük-küçük harf olarak belirlemek için kullanılır. Bu özellik çok kullandığımız bir özelliktir.

Aldığı parametreler:
none : Herhangi bir değişiklik yapmaz. Metin yazıldığı kalır.
capitalize : Kelimelerin ilk harfini büyük yapar
uppercase : Bütün harfleri büyük yapar.
lowercase : Bütün harfleri küçük yapar.
inherit : Bir üstteki elementten miras alır.
initial : Varsayılan değere çevirir.

Örnek :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style> 
        div    { text-transform: capitalize; margin-bottom: 10px;}     
        .one   { text-transform: none; }
        .two   { text-transform: capitalize }
        .three { text-transform: uppercase; }
        .four  { text-transform: lowercase; }
        .five  { text-transform: initial; }
        .six   { text-transform: capitalize; }
        .six-child  { text-transform: inherit; }
    </style>
<body>
    <div class="one">
        Tasarım ve yazılım
   </div>
    <div class="two">
        Tasarım ve yazılım
    </div>
    <div class="three">
        Tasarım ve yazılım
    </div>  
    <div class="four">
        Tasarım ve yazılım
    </div>  
    <div class="five">
        Tasarım ve yazılım
    </div>  
    <div class="six">
        Tasarım ve yazılım
        <div class="six-child">
            html ve css
        </div>
    </div>  
</body>
</html>

Html Çıktısı:

css text-transform

Başka bir yazımızda görüşmek üzere…

Leave a Reply