Web Programlama

CSS Metin İşlemleri

Lisans: Creative Commons 11.12.2020 tarihinde güncellendi

Bakabileceğiniz Etiketler: Eğitmen: Geleceği Yazanlar Ekibi

#css-metin #metin-islemleri #metin-rengi #text-align #text-decoration #uppercase #lowecase #case #indentation #align-center #web-programlama

Metinlerin özellikleri CSS kullanılarak değiştirilebilir.

Metin rengi (Text Color)

Renk özelliği, bir metnin rengini atamak için kullanılır. CSS'te renk atama,

bir HEX değerle: "#ff0ee0",
bir RGB (red-green-blue, kırmızı-yeşil-mavi) değerle: "rgb(200,10,50)",
ya da bir renk adı belirtilerek gerçekleştirilebilir.

Bir sayfa için varsayılan renk, body seçicisi ile tanımlanır.

body {
    color: green;
}

h1 {
    color: #00ffec;
}

h2 {
    color: rgb(255,110,210);
}

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                color: pink;
            }

        h1 {
            color: #0effcd;
        }

        p.ex {
            color: rgb(110,220,155);
        }

        </style>
    </head>

    <body>
        <h1>ILGINC BIR RENK, HEXADECIMAL ATANMIS</h1>
        <p>RGB KARMASI BIR RENK</p>
        <p class="ex">BAKALIM HANGI RENK</p>
       
    </body>
</html>

Metnin yerleştirilmesi

Text-align özelliği, metnin yatay yerleşimi için kullanılır. Metin ortalanabilir (centered), sola ya da sağa yanaşık olabilir veya ayrılan yere göre kendini ayarlayabilir.

h1 {
    text-align: center;
}

p.date {
    text-align: left;
}

p.main {
    text-align: justify;
}

<!DOCTYPE html>
<html>
    <head>
        <style>
            h1 {
                text-align: center;
            }

        p.date {
            text-align: left;
        }

        p.main {
            text-align: justify;
        }

        </style>
    </head>

    <body>
        <h1>CSS METIN YERLESTIRME</h1>
        <p class="date">EYLUL, 2014</p>
        <p class="main">YUMUSAK YONETILEN ULKENIN HALKI YALINDIR
        SERT YONETIM HALKI KURNAZLASTIRIR</p>
        <p><b>Not</b> KONFUCYUS'UN BU UNLU SOZU BUGUN DE GECERLI DEGIL MI?'</p>
    </body>
</html>

Metin dekorasyonu

Text-decoration özelliği, metin içine bir dekorasyon ekleme ya da metinden bir dekorasyonu uzaklaştırma amacıyla kullanılır. text-decoration özelliği, genelde tasarım amacıyla bağlantılardan alt çizgileri uzaklaştırmak için kullanılır.

a {
    text-decoration: none;
}

Ayrıca metni dekore etmek için de kullanılabilir:

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

<!DOCTYPE html>
<html>
    <head>
        <style>

        h1 {
            text-decoration: overline;
        }

        h2 {
            text-decoration: line-through;
        }

        h3 {
            text-decoration: underline;
        }
        </style>
    </head>

    <body>

        <h1>MOBIL TEKNOLOJILER</h1>
        <h2>iOS</h2>
        <h3>iPad ile uygulama geliştirme</h3>
    </body>

</html>

Metin dönüşümü

Metin dönüşüm (text-transform) özelliği, metin içinde büyük harf ve küçük harf karakterleri belirlemek için kullanılır. Ya karakterler büyük harfe veya küçük harfe çevrilir ya da her kelimenin ilk harfi büyük harf yapılır.

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}


p.capitalize {
    text-transform: capitalize;
}

<!DOCTYPE html>
<html>
    <head>
        <style>
        p.uppercase {
           text-transform: uppercase;
        }

        p.lowercase {
            text-transform: lowercase;
        }

        p.capitalize {
            text-transform: capitalize;
        }
        </style>
    </head>

    <body>
        <p class="uppercase">ankara</p>
        <p class="lowercase">ANKARA</p>
        <p class="capitalize">ankara</p>
    </body>
</html>

Metin girintileme (Text Indentation)

Text-indent özelliği, metnin ilk satırının ne kadar içeriden yazılacağını belirler.

p {
    text-indent: 40px;
}

<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                text-indent: 50px;
            }

        </style>

    </head>

    <body>

        <p>Stefan Zweig. Musevi kökenli Avusturyalı yazar. 20. yüzyıl başında </br>Avrupa entelektuel dünyasının önemli isimlerinden. Avusturya aşığı bu büyük edebiyatçı Hitler zulmünden kaçtı; </br>Güney Amerika'ya sığındı. 1. Dünya Savaşı sona ermeden intihar etti.</p>

    </body>

</html>

Metin özellikleri

Özellik	Anlamı
color	Metnin rengini atama işlemini gerçekleştirir.
direction	Metnin yazma yönünü belirler.
letter-spacing	Metindeki karakterler arasındaki boşlukları artırır ya da azaltır.
line-height	Satır yüksekliğini atama işlemini gerçekleştirir.
text-align	Metnin yatay konumlandırılmasını belirler.
text-decoration	Metne eklenecek dekorasyonu belirler.
text-indent	Bir metin bloğundaki ilk satırın ne kadar içerden başlayacağını belirler.
text-shadow	Metne eklenecek gölge etkisini belirler.
text-transform	Metnin büyük-küçük harf durumunu belirler.
vertical-align	Bir elemanın düşey yerleşimini belirler.
white-space	Eleman içinde alfabe dışı karakterlerin nasıl işlem göreceğini belirler.
word-spacing	Bir metinde kelimeler arasında bulunan boşluk sayısını artırır ya da azaltır.

Sınava Gir