CSS Metinler – Text

CSS Metinler bir web sitenin yada sayfasının daha okunabilir ve daha da anlaşılabilir olmasını sağlar. Bir Web sayfasının büyük bir çoğunluğunu Metinler oluşturur gerek bilgi verme amaçlı gerek te tanıtmak amaçlı yazılan bu metinler çok işe yaramaktadır. Tabi bu metinlerin her yerde aynı şekilde kullanılması yanlıştır. Mesela beyaz bir arkaplan üzerinde beyaz yazı yazmak hiç akıl karı değildir. İşte tam bunun için devreye CSS Metinler girmekte. Yani metinler için CSS yazmak gerekmekte. Gelin hep beraber inceliyelim.

CSS Metinler

CSS Metinler özellik bakımından 5 adet başlık altında inceliyeceğiz. Bu özellikler başlıca kullanılan başlıklar olacak bu başlıklar ile Metinlere yani HTML dilindeki Text’lere dilediğiniz CSS’i uygulayabileceksiniz.

1. CSS Metin Rengi – Text Color

Bu başlık altında CSS Metinler Rengi yani diğer adı ile Text Color özelliğini inceliyecez. Daha önceki makalelerimizde renkler konusuna değinmiştik bu başlık altında hem tekrar etmiş olur hemde “color” özelliğinin metinler üzerinde nasıl kullanıldığını öğrenmiş oluruz.

p {
    color: white;
}

#legalyazilim {
    color: #fff;
}

.legalyazilim {
    color: rgb(255, 255, 255);
}

2. CSS Metin Hizalama – Text Alignment

Bu başlık altında ise beraber CSS Metin Hizalama yani diğer adı ile Text Alignment özelliğini inceliyecez. Bu özellik sayesinde Metinleri istediğimiz şekilde hizalayıp bir düzene sokabiliyoruz. Metinleri hizalamak için “text-align” özelliğini kullanıyoruz bu özellik için kullandığımız 4 değer bulunmaktadır;

text-align: left; (Metini sola hizalar.)
text-align: center; (Metini ortaya hizalar.)
text-align: right; (Metini sağa hizalar.)
text-align: justify; (Metin içeriğinin sağ taraftan kalan boşluklarını tamamlar, okumayı kolaylaştırır.)

p {
    text-align: center;
}

#legalyazilim {
    text-align: left;
}

.legalyazilim {
    text-align: right;
}

3. CSS Metin Dekorasyonu – Text Decoration

CSS Metin Dekorasyonu yani “text-decoration” özelliği ile bir metine stil verebilir yada var olan stili kaldırabiliriz. Bu özelliğimiz için 5 ayrı değer bulunmaktadır.

text-decoration: none; (Var olan stili yok eder).
text-decoration: underline; (Yazıyı altı çizili yapar).
text-decoration: overline; (Yazının tepesini çizili yapar).
text-decoration: line-through; (Yazının ortasından çizgi geçirir).
text-decoration: blink; (Yazının bir görünüp bir görünmemesini sağlar).

a {
    text-decoration: none;
}

p {
    text-decoration: underline;
}

#legalyazilim {
    text-decoration: overline;
}

.legalyazilim {
    text-decoration: blink;
}

4. CSS Metin Dönüşümü – Text Transformation

CSS Metin Dönüşümü yani “text-transform” özelliği metinin tamamı yada baş harflerinin büyük-küçük harf olmasını belirler. Bu özellik ile tüm metin tek kod ile düzenlenebilir. Bu özelliğin 3 değeri bulunmaktadır.

text-transform: uppercase; (Yazıyı komple büyük harfe çevirir).
text-transform: lowercase; (Yazıyı komple küçük harfe çevirir).
text-transform: capitalize; (Sadece kelimelerin ilk harflerini büyük hale çevirir).

p {
    text-transform: uppercase;
}

div {
    text-transform: lowercase;
}

h2 {
    text-transform: capitalize;
}

5. CSS Metin Girintileme – Text Indentation

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

p {
    text-indent: 75px;
}

CSS Diğer Metin Özellikleri

line-height: 45px; (Satır aralarında ki mesafeyi 45 piksel açar).
letter-spacing: 8px; (Harflerin arasında ki mesafesi 8 piksel açar).
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, 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).