CSS ile Metinlere Özellikler Verme

13.04.2017

Font özellikleri metni olusturan karakterlerini nasil olacagini belirlerken, Metin(Text) özellikleri sayfadaki metinlerin düzenini kontrol eder. Metin özellikleri metin düzeni için çok avantajli özellikler getirmistir.

text-indent

Paragraflarin ilk cümlelerin soldan içeriye kaydirilmasi için kullanilan bir özelliktir.

Yapisi : text-indent: (deger) Aldigi Degerler : (uzunluk degeri) | (yüzde) Baslnagiç degeri: 0 Uygulanabilen elementler: Blok-level elementler Kalitsallik: Var

p {
  text-indent: 10px;
}

Tarayici Destegi

+	+	+

Mobil Tarayicilar

+	+	+

text-align

Bir elemntin digerlerine göre hizasini berlilemek için kullanilir. Sadece metinler için kullanilmaz, diger elementler içinde kullanilir.

Yapisi : text-align: (deger) Aldigi Degerler : [ start | end | left | center | right | justify | match-parent ] || (sözdizimi) Baslnagiç degeri: 0 Uygulanabilen elementler: tüm elementler Kalitsallik: Yok

p {
  text-align: justify;
}

Tarayici Destegi

+	+	+

Mobil Tarayicilar

+	+	+

vertical-align

Bir elementin içeriginin dikey hizalamasi için kullanilir.

• baseline : Orta(metin içerigine göre)
• sub : Altsimge
• super : Üstsimge
• top : Yukari(elemente göre)
• text-top: Yukari (Metin içerigine göre)
• middle : Orta (Elemente göre)
• bottom : Alt (Elemente göre)
• text-bottom : Alt(Metin içerigine göre)

Yapisi : vertical-align: (deger) Aldigi Degerler : baseline | sub | super | top | text-top | middle | bottom | text- bottom | (yüzde) | [uzunluk degeri] Baslnagiç degeri: baseline Uygulanabilen elementler: inline elementler ve tablo hücreleri Kalitsallik: Yok

img {
  vertical-align: baseline;
}

Tarayici Destegi

+	+	+

Mobil Tarayicilar

+	+	+

line-height

Satirlar arasindaki yüksekligi belirler. normal, pixel veya yüzdedegerlerin den birini alabilir.

Yapisi : line-height: (deger) Aldigi Degerler : (uzunluk degeri) | (yüzde degeri) | (sayi degeri) | normal | noneBaslnagiç degeri: normal Uygulanabilen elementler: tüm elementler Kalitsallik: Var

div{
  line-height:30px
}

Tarayici Destegi

+	+	+

Mobil Tarayicilar

+	+	+

word-spacing

Kelimeler arasindaki bosluk degerini belirler. Eksi deger alabilir.

Yapisi : word-spacing: (deger) Aldigi Degerler : [ normal | (uzunluk degeri) | (yüzde degeri) ]{1,3} Baslnagiç degeri: normal Uygulanabilen elementler: tüm elementler Kalitsallik: Var

p {
  word-spacing: 10px;
}

Tarayici Destegi

+	+	+

Mobil Tarayicilar

+	+	+

letter-spacing

Harfler arasindaki bosluk degerini belirler. Eksi deger alabilir.

Yapisi : letter-spacing: (deger) Aldigi Degerler : [ normal | (uzunluk degeri) | (yüzde degeri) ]{1,3} Baslnagiç degeri: normal Uygulanabilen elementler: tüm elementler Kalitsallik: Var

p {
  letter-spacing: 5px;
}

Tarayici Destegi

+	+	+

Mobil Tarayicilar

+	+	+

text-transform

Metnin Büyük-Küçük harf çevirmek için kullanilir.

• uppercase(hepsini büyük harf yap)
• lowercase(hepsini küçük harf yap)
• capitalize(sadece bas harfleri büyük yap)

Yapisi : text-transform: (deger) Aldigi Degerler : uppercase | lowercase | capitalize | none Baslnagiç degeri: none Uygulanabilen elementler: tüm elementler Kalitsallik: Var

p {
  text-transform: capitalize;
}

Tarayici Destegi

+	+	+

Mobil Tarayicilar

+	+	+

text-decoration

Bu özellik metinlerimize özel isaretler koymamizi saglar. Örnegin metinlerizinaltini çizmek gibi.

Yapisi : text-decoration: (deger) Aldigi Degerler : none | [ underline || overline || line-through || blink ]Baslnagiç degeri: none Uygulanabilen elementler: tüm elementler Kalitsallik: Yok

a:link, a:visited, a:active {
  text-decoration: none
}

Tarayici Destegi

+	+	+

Mobil Tarayicilar

+	+	+

text-shadow

Bu özellik CSS2 ile birlikte geldi ancak internet tarayicilari bu özelligi desteklemeyince CSS2.1 kaldirildi. CSS3 ile birlikte tekrar geldi.

kaynak:http://fatihhayrioglu.com