CSS Metin (Text) Biçimlendirme – Tasarım Kodlama
CSS

CSS Metin (Text) Biçimlendirme

CSS ile hazırlamış olduğunuz metinlere birçok biçim özelliği verebilirsiniz. Metin rengi değiştirme, metin hizalanması, karakterler arası aralık belirlenmesi gibi bir çok özelliğin nasıl değiştirileceğini yazının devamında bulabilirsiniz.

CSS color Özelliği

“color” özelliği metnin rengini ayarlamak için kullanılır. Renk verme şu şekilde belirtilir:

Renk Adı – ‘red’
bir HEX değeri – gibi ‘#ff0000’
bir RGB değeri – ‘rgb (255,0,0)’ gibi

CSS Renklerle Çalışma Konusuna tıklayarak detaylı bilgi alabilirsiniz.

Bir sayfa için varsayılan metin rengi, body seçicisinde tanımlanır. Aşağıdaki örneği inceleyin.

 

CSS text-align Özelliği

text-align özelliği, bir metnin yatay hizalamasını ayarlamak için kullanılır.

Bir metin sola veya sağa hizalanabilir, ortalanmış veya iki yana hizalı olabilir.

Aşağıdaki örnek, merkez hizalanmış ve sol ve sağ hizalı metni gösterir (metin yönü soldan sağa ise sol hizalama varsayılan, metin yönü sağdan sola ise sağa hizalama varsayılan değerdir):

 

text-align özelliği ‘justify‘ olarak ayarlandığında, her satır genişler ve her satır eşit genişlikte olur ve sol ve sağ kenar boşlukları düzdür (dergi ve gazetelerde olduğu gibi).

 

CSS text-decoration Özelliği:

text-decoration: none; özelliği genellikle menülerde metinden alt yazıların kaldırılması için kullanılır.

 

 

Örnek:

 

CSS text-transform Özelliği:

text-transform özelliği, bir metinde büyük ve küçük harfleri belirtmek için kullanılır.

Tüm harfleri büyük veya küçük harflere dönüştürmek için kullanılabilir veya her kelimenin ilk harfini büyük harfle yazabilirsiniz.

 

CSS text-indent Özelliği:

text-indent özelliği, metnin ilk satırının girintisini belirtmek için kullanılır.

 

CSS letter-spacing Özelliği:

letter-spacing özelliği,metindeki karakterlerin arasındaki boşluğu belirtmek için kullanılır.

Aşağıdaki örnek, karakterler arasındaki boşluğun nasıl artırılacağını veya azaltacağını gösterir.

 

CSS line-height Özelliği:

line-height özelliği satırlar arasındaki yüksekliği belirlemek için kullanılır. Ayrıca bir div içindeki metni dikeyde ortalamak içinde kullanılabilir.

Aşağıdaki örnekte line-height özelliğinin kullanımı verilmiştir.

 

 

CSS direction Özelliği:

direction özelliği, bir öğenin metin yönünü değiştirmek için kullanılır.

Örnek:

 

CSS word-spacing Özelliği:

word-spacing özelliği, metindeki sözcükler arasındaki boşluğu belirtmek için kullanılır.

Aşağıdaki örnek, kelimeler arasındaki boşluğun nasıl artırılacağını veya azaltacağını gösterir.

 

CSS text-shadow Özelliği

text-shadow özelliği metne gölge ekler.

Aşağıdaki örnek kırmızı renkli bir yazıda, yatay gölgenin (3px) konumunu, dikey gölgenin (2px) konumunu ve gölgenin rengini (siyah) belirtir:

 

CSS Text Özellikleri (Tümü)

ÖzellikAçıklama
colorMetin rengini ayarlar
directionMetin yönünü ayarlar
letter-spacingMetindeki karakterler arasındaki boşluk ayarlanır.
line-heightSatır yüksekliği ayarlanır.
text-alignMetni yatayda hizalamak için kullanılır.
text-decorationMetni süslemek için kullanılır.
text-indentMetnin ilk satır girintisini ayarlar.
text-shadowMetne gölge efekti verir.
text-transformMetnin büyük/küçük harf kullanımını ayarlar.
text-overflowGösterilmeyen taşan içeriğin kullanıcıya nasıl bildirilmesi gerektiğini belirtir.
unicode-bidiAynı belgede birden çok dili desteklemek için metnin geçersiz kılınması gerekip gerekmediğini belirlemek için yön özelliği ile birlikte kullanılır.
vertical-alignBir öğenin dikey hizalamasını ayarlar.
white-spaceBir öğenin içindeki beyaz boşluğun nasıl ele alınacağını belirtir
word-spacingKelimeler arası boşluk ayarlanır.

 

Yorum bırak