CSS Text Özelliği – Metin Biçimlendirme

CSS Text özellikleri, metinlere özel stil tanımlaması yapmak için kullanılır.CSS içerisinde metinlere etki etmek için tanımlı 13 tane css text özelliği vardır.

Color

Metinlere renk vermek için color özelliği kullanılır.CSS’de renk oluşturmak için kullanılan yöntemleri CSS renk kodları yazımda detaylı bir şekilde anlattım.Dilerseniz hatırlamak için tekrar bakabilirsiniz.
Örnek Kullanım:

body {
 color: green;
}

h1 {
 color: #ff0000;
}

Body elementimize yeşil rengi verdik.Başlık etiketimize (h1) kırmızı rengi verdik.Artık sayfanın varsayılan yazı rengi yeşil, başlık rengi kırmızdır.

Direction

Yazının yazım yönünü belirlemek için direction kullanılır.Özel olarak ltr ve rtl diye iki değeri vardır.Varsayılan değeri ltr dir.Yani metinler soldan başlayarak yazılır.Özellikle Arapça gibi yazıma sağdan başlanan diller için bu özellik kullanılır.
Örnek Kullanım:

div {
  direction: rtl;
}

Örnekte metnimizi sağdan başlayarak yazıyoruz.

Line-height

Satırlar arasındaki boşluğu ayarlamak için line-height özelliği kullanılır.
Örnek Kullanım:

span {
  line-height: 12px;
}

p {
/* Yukardakine göre satırlar arasını daha fazla açar*/
  line-height: 18px; 
}

Letter-spacing

Harfler ve sözcükler arasındaki boşluğu ayarlamak için letter-spacing özelliği kullanılır.
Örnek Kullanım:

p {
  letter-spacing: 4px;
}

span {
  letter-spacing: -0.5px;
}

Text-align

Metinler sağ-sol yada ortaya hizalamak için text-align özelliği kullanılır.
Örnek Kullanım:

p {
 /*Yazıları sola yaslar*/
  text-align: left;
}
span {
 /*Yazıları sağa yaslar*/
  text-align: right;
}
h1 {
 /*Yazıları ortalar*/
  text-align: center;
}

Text-decoration

Metinlere çizgi eklemek ya da var olan çizgileri kaldırmak için text-decoration özelliği kullanılır.Varsayılan olarak linkler altı çizgili olarak gelir.Bu çizgiyi kaldırmak için text-decoration kullanılır.
Örnek Kullanım:

a {
 /* Linklerin altından çizgiyi kaldırmak*/
  text-decoration: none;
}

span {
 /* Yazıların altına çizgi oluşturmak*/
 text-decoration: underline;
}

Text-indent

Metinlerin ilk satırına istenilen girintiyi vermek için text-indent özelliği kullanılır.
Örnek Kullanım:

p {
  text-indent: 12px;
}

Text-shadow

Metinlere gölge vermek için text-shadow özelliği kullanılır.
Örnek Kullanım:

p {
  text-shadow: 3px 3px red;
}

Text-transform

Metnin harf boyutunu(büyük-küçük) ayarlamak için text-transform zeööliği kullanılır.
Örnek Kullanım:

h1 {
  /*Bütün harfleri büyük yapar*/
  text-transform: uppercase;
}

span {
 /*Btün harfleri küçük yapar*/
 text-transform: lowercase;
}

Unicode-bidi

Arapça gibi ters yönde yazılan metinler için direction özelliği ile birlikte kullanılan tanımlama özelliğidir.
Örnek Kullanım:

div {
 direction: rtl;
 unicode-bidi: bidi-override;
}

White-space

White-space özelliği html elementlerinin editörlerde yazım dolayı oluşan boşlukları ayarlamaya yarar.
Örnek Kullanım:

div {
 white-space: pre;
}

Word-spacing

Kelimeler arasındaki boşlukları ayarlamak için word-spacing özelliği kullanılır.
Örnek Kullanım:

p {
  word-spacing: 20px;
}
span {
 word-spacing: -4px;
}

 

Bu dersimizde metinlere stil tanımalamak için kullanılan CSS Text özelliklerini öğrendik.Özellikle metin ağırlıklı içeriklere sahip web siteleri için önemli bir konu olduğunu belirtmek isterim.

Aklınıza takılan merak ettiğiniz her hangi bir şey olursa yorum kısmından iletişim kurmayı unutmayın.

Tüm CSS Dersleri için tıklayın

Bunları da beğenebilirsin