CSS Metinler - Text

CSS Metin Rengi - Text Color

Metinlere renk vermek için " color " özelliğini kullandığımızı daha önce örneklerde görmüştük. Şimdi burada bir kez daha tekrar etmiş oluyoruz. "color" özelliğine değer olarak renk ismi, RGB değeri veya renk kodu yazabiliriz. Renk kodlarını kullanmanız tavsiyedir.

Örnek bir kod görelim.

p {
    color:blue;
}

span {
    color:#3366CC;
}

div {
    color:rgb(255,0,0);
}

CSS Metin Hizalama - Text Alignment

Metinleri hizalamak için "text-align" özelliğini kullanacağız.

"text-align" özelliği için 4 ayrı değer bulunmaktadır.

• text-align:left; (Metini sola hizalamak için kullanılır.)
• text-align:center; (Metini ortaya hizalamak için kullanılır.)
• text-align:right; (Metini sağa hizalamak için kullanılır.)
• text-align:justify; (Metin içeriğinin sağ taraftan kalan boşluklarını tamamlar, okumayı kolaylaştırır. Gazete ve Magazin dergilerinde olduğu gibi.)

Örnek bir kod görelim.

p {
    text-align:left;;
}

span {
    text-align:center;
}

div {
    text-align:justify;
}

CSS Metin Dekorasyonu - Text Decoration

" text-decoration " özelliğini ile metinlere stil verebiliriz veya metnin stillerini kaldırabiliriz. " text-decoration " özelliği için 5 ayrı değer bulunmaktadır.

• text-decoration:none; (Örneğin, bu kodu "a" etiketi için kullandığımızda linkin alt çizgisi kaybolacaktır.)
• text-decoration:underline; (Bu kod yazıyı altı çizili yapar.)
• text-decoration:overline; (Bu kod yazının tepesini çizili yapar.)
• text-decoration:line-through; (Bu kod yazının ortasından çizgi geçirir.)
• text-decoration:blink; (Bu kod yazının bir görünüp bir görünmemesini sağlar. Ancak Internet Explorer bu özelliği desteklemez.)

Örnek bir kod görelim.

a {
    text-decoration:none;
}

span {
    text-decoration:underline;
}

h1 {
    text-decoration:line-through;
}

CSS Metin Dönüşümü - Text Transformation

" text-transform " özelliğini ile metinleri komple büyük harf ya da komple küçük harf yapabiliriz veya sadece kelimelerin ilk harflerini büyük yapabiliriz.

" text-transform " özelliği için 3 ayrı değer bulunmaktadır.

• text-transform:uppercase; (Bu kod yazıyı komple büyük harfe çevirir.)
• text-transform:lowercase; (Bu kod yazıyı komple küçük harfe çevirir.)
• text-transform:capitalize; (Bu kod sadece kelimelerin ilk harflerini büyük hale çevirir.)

Örnek bir kod görelim.

a {
    text-transform:uppercase;
}

span {
    text-transform:lowercase;
}

h1 {
    text-transform:capitalize;
}

CSS Metin Girintileme - Text Indentation

" text-indent " özelliğini ile metinlerin ilk satırında ki başlangıç girintisinin uzunluğunu ayarlabilirsiniz.

Örnek olarak görelim.

p {
    text-indent:75px;
}

CSS Diğer Metin Özellikleri

• line-height:30px; (Satır aralarında ki mesafeyi 30 piksel açar.)
• letter-spacing:10px; (Harflerin arasında ki mesafesi 10 piksel açar. Eksi (-) kullanılabilir.)
• word-spacing:20px; (Kelimelerin arasında ki mesafesi 20 piksel açar. )
• vertical-align:text-top; (Dikey hizalama için kullanılır. baseline, sub, super, top, text-top, middle, bottom, text-bottom gibi değerler alabilir ve yüzde ve piksel kullanımı vardır. )
• direction:rtl; (Metinleri sağda ve solda göstermek için kullanılır. ltr ve rtl değerlerini alır.)
• white-space:nowrap; (Metinde ki boşlukları kullanmak için ve iptal etmek için kullanılır. nowrap, pre, pre-line, pre-wrap gibi değerler alır.)