CSS Text Özellikleri
Öncelikle uzun zamandır CSS ile ilgili bir makale yazmamıştım ve dolayısıyla bunca zaman sonra yeni bir başlangıç yaparak css text özellikleri hakkında bilgi vermek istedim.
HTML sayfanızda CSS yardımı ile metinlere tanımlayabileceğiniz renk, hizalama, kalınlaştırma, karakter boşluğu vb. atamalar yaparak biçimlendirebilirsiniz. Bu yazıda öğreneceğiniz css metin özellikleri şunlar:
- color
- text-align
- text-decoration
- text-transform
- text-indent
- line-height
- letter-spacing
- word-spacing
color: Metin rengi için kullanılır.
Örnek1:
[css]
p { color: blue; }
[/css]
Örnek 2:
[css]
p { color: #DDCC34; }
[/css]
text-align: Metin hizalama için kullanılır. Kullanılan hizalama tanımlamaları ise şunlardır:
- left : sol
- right : sağ
- center : ortalanmış
- justify : iki yana yasla
Örnek:
[css]
p { text-align: justify; }
[/css]
text-decoration: yazı biçim için kullanılır. Varsayılan olarak linkler altı çizilidir, fakat bu özellik ile altı çizili biçimini kaldırabiliriz.
Örnek:
[css]
a { text-decoration: none; }
[/css]
text-transform: Metin dönüştürme için kullanılır. Yani yazıların tümünü büyük harfe ya da tam tersi tümünü küçük harfe dönüştürebiliriz. Tanımlamalar:
- uppercase : tüm harfleri büyük harf yapar
- lowercase : tüm harfleri küçük harf yapar
Örnek:
[css]
H1 { text-transform: uppercase; }
[/css]
text-indent: Metin girintisi için kullanılır. Özellikle paragraflar için yazının başında belirtilen büyüklükte boşluk bırakmanızı sağlar.
Örnek:
[css]
p { text-indent: 50px; }
[/css]
line-height: Satır yüksekliğini belirtmemizi sağlar.
Örnek:
[css]
.ilkparag { line-height: 20px; }
[/css]
letter-spacing: Harfler arasında belirtilen değerde boşluk koyar.
Örnek:
[css]
p { letter-spacing: 5px; }
[/css]
word-spacing: Kelimeler arasında belirtilen değerde boşluk koyar.
Örnek:
[css]
p { word-spacing: 10px; }
[/css]
