CSS Dersleri 9: CSS’de Text (Metin) Özellikleri

[Torrent]

CSS’de Text (Metin) Özellikleri
Color
Direction
Line-height
Letter-spacing
Text-Align
Text-decoration
Text-indent
Text-shadow
Text-transform
Unicode-bidi
White-space
Word-spacing
Color (Renk) Özelliği

Metinlere renk vermek için color özelliği kullanılır.Renk oluşturmak için kullanılan yöntemleri CSS’de Renklerin Kullanımı konusunda öğrenmiştiniz.Dilerseniz hatırlamak için tekrar bakabilirsiniz.

Örnek Kullanımı:

Code:

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 Özelliği

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ı:

Code:

div {
  direction: rtl;
} 


Yukarıda ki örneğimizde yazdığımız yazılar soldan başlayarak değil de sağdan başlayarak yazılacaktır.

Line-Height Özelliği

Metin satırları arasında ki boşluğu ayarlamak için kullanılır.

Örnek Kullanımı:

Code:

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


Letter-spacing Özelliği

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

Örnek Kullanımı:

Code:

p {
  letter-spacing: 4px;
}
span {
  letter-spacing: -0.5px;
} 


Text-align Özelliği

Metinleri sağ, sola ya da ortaya hızalamak için kullanılan bir css özelliğidir. İngilizce yer-yön ifadelerini parametre olarak almaktadır.

Örnek Kullanımı:

Code:

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 Özelliği

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.

CSS’in text-decoration özelliği 5 tane parametre almaktadır ancak bu parametrelerden bir tanesi güncel tarayıcılar tarafından artık kabul edilmemektedir ve web standartları arasından da çıkartılmıştır. CSS3 ile de tamamen kullanımı kalkmıştır. Anlatmasam da olur yani ? Ama bilin diye göstereceğim yine de ?

Bu özelliğin alabileceği parametreler:

overline (Yazıların üstüne çizgi eklemek için kullanılır.)
underline (Yazıların altına çizgi eklemek için kullanılır.)
line-through (Yazıların üzerini çizmek için kullanılır. Örnek canlı gösterimi: böyle ? )
none (Yazıların hiçbiryerinde çizgi olmamasını sağlar. Yani altında,üstünde vb çizgileri yazının ya da linkin kaldırır.)
blink (Son olarakta blink parametresi bu artık kullanılmıyor önceden dediği gibi ancak daha önceliri kullanılırken yaptığı işlem yazıların yanıp sönmesini sağlamaktı. Böyle yazılar yanıp yanıp sönüyordu. Eski sürüm tarayıcılarda bu özelliğin halen desteklendiğini ve çalıştığını görebilirsiniz.)
Bütün bu parametrelerin örnek kullanımı:

/* Yazının üstüne çizgi ekler */
p {text-decoration: overline;}
/* Yazının altına çizgi ekler */
p1 {text-decoration: underline;}
/* Yazının üstünü çizer */
p2 {text-decoration: line-through;}
/* Yazıda ki tüm çizgileri kaldırır. */
a {text-decoration: none;}
/* Artık kullanılmayan bir özelliktir. */
/*Kullanıldığı zaman ki işlevi yazıların yanıp,sönmesini sağlamaktır.*/
p3 {text-decoration: blink;}
Text-indent Özelliği

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

Örnek kullanımı:

Code:

p {
  text-indent: 12px;
} 


Text-shadow Özelliği

Metinlere gölge vermek için text-shadow özelliği kullanılır.

Örnek kullanımı:

Code:

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


Text-transform Özelliği

Kullanıldığı elementteki tüm yazıların bütük ya da küçük olmasını ayarlamak için kullanılır. İki tane parametre almaktadır. Bunlar; uppercase (Bütün harfleri büyük yapar. BÖYLE) ve lowercase (Bütün harfleri küçük yapar. böyle)

Örnek kullanımı:

Code:

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ı:

Code:

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


White-Space Özelliği

Metinler arasında ki beyaz boşlukların kullanımını belirler.

Örnek kullanımı:

Code:

div {
white-space: pre;
} 


Word-spacing Özelliği

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

Örnek kullanımı:

Code:

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


Bitti ?