CSS Metin İşlemleri

CSS'de metin işlemleri önemli bir yer tutar. Metin web sitelerinde en çok kullanılan içerik türüdür.

Bir metnin rengini, boyutunu, yazı tipini ve daha pek çok özelliğini CSS ile değiştirmek mümkündür.

Metin Rengi - CSS Color Özelliği

color özelliği metnin rengini ayarlamak için kullanılır.

CSS ile metin rengi değiştirmek için color özelliğine şu tür değerler verilebilir:

• Geçerli bir renk adı verilerek: red(kırmızı),blue (mavi), green (yeşil) gibi
• Bir RGB değeri verilerek: rgb(255,0,0) gibi
• Bir Hex değer verilerek: #ffcc44 gibi

Bir sayfadaki tüm metnin rengini belirlemek için body seçicisi içinde color tanımı yapmak yeterlidir:

body {
    color: blue;
}

h1 {
    color: green;
}

Metin Hizalama - CSS text-align Özelliği

Bir metni hizalamak isterseniz text-align özelliğini kullanabilirsiniz.

text-align özelliği metni yatayda hizalamak için kullanılır.

Bir metin sola yaslanmış, sağa yaslanmış, ortalanmış veya  sağdan ve soldan hizalanmış olabilir (justify).

Aşağıdaki örnek metin hizalamada text-align özelliğini alacağı değerleri göstermektedir:

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}
h4 {
    text-align: justify;
}

Link Altındaki Çizgiyi Kaldırma - CSS text-decoration Özelliği

CSS text-decoration özelliği metin üzerindeki bazı etkileri ordadan kaldırmak için kullanılır.

Genelde bir metne link verdiğinizde metin altı çizgili hale gelir. Genelde text-decoration:none  değeri bu alt çizgiyi kaldırmak için kullanılır.

a {
    text-decoration: none;
}

text-decoration genelde bir metnin altını, üstünü ve üzerini çizmek için kullanılır:

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

Büyük / Küçük Harf Dönüştürme - CSS text-transform Özelliği

CSS text-transform özelliği ile küçük harfle yazılmış metinleri büyük harfe, büyük harf ile yazılmış metinleri küçük harfe çevirmek mümkündür.

Aynı zamanda sadece ilk harfi büyük metin veya kelimeler oluşturmak için de kullanılır.

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

Metnin İlk Satırını İçerden Başlatmak - CSS text-indent Özelliği

CSS text-indent özelliği ile bir metnin ilk satırını daha içerden başlatmak mümkündür.

p {
    text-indent: 50px;
}

Karakterler Arasında Boşluk Bırakmak - CSS letter-spacing Özelliği

CSS letter-spacing özelliği ile metin içindeki karakterler arasında fazladan boşluk bırakabilirsiniz.

Karakterler arasındaki boşluğu arttırabildiğiniz gibi, azaltabilirsinizde:

h1 {
    letter-spacing: 10px;
}

h2 {
    letter-spacing: -3px;
}

letter-spacing değerini negatif verirseniz karakterler birbinine yakınlaşır.

Satır Yüksekliği - CSS line-height Özelliği

CSS line-height özelliği ile satır yüksekliği ayarlanır. Satır yüksekliği, satırın diğer satırlar ile olan mesafesidir.

p.kucuk {
    line-height: 0.5;
}

p.buyuk {
    line-height: 2;
}

Kelimeler Arasındaki Boşluğu Ayarlamak - CSS word-spacing Özelliği

CSS word-spacing özelliği metin içindeki kelimelerin birbirine olan mesafesini ayarlamak için kullanılır.

Aşağıdaki örnek kelimelerin birbirinden uzaklaştırılmasını ve yakınlaştırılmasını gösterir:

h1 {
    word-spacing: 10px;
}

h2 {
    word-spacing: -5px;
}

Metinlere Gölge Eklemek - CSS text-shadow Özelliği

CSS text-shadow özelliği metinlere gölge ekler.

Aşağıdaki örnekte;
3px yatayda oluşacak gölgenin pozisyonunu, 2px dikeyde oluşacak gölgenin pozisyonunu green (yeşil) ise gölgenin rengini tanımlar.

h1 {
    text-shadow: 3px 2px green;
}