Font ile Metin(Text) arasında ne fark var ikiside aynı diyorsanız yanılıyorsunuz.

Font özellikleri metni oluşturan karakterlerini nasıl olacağını belirlerken, Metin(Text) özellikleri sayfadaki metinlerin düzenini kontrol eder. Metin özellikleri metin düzeni için çok avantajlı özellikler getirmiştir.

text-indent

Paragrafların ilk cümlelerin soldan içeriye kaydırılması için kullanılan bir özelliktir.

Yapısı : text-indent: (deger) Aldığı Değerler : (uzunluk değeri) | (yüzde) Başlnagıç değeri: 0 Uygulanabilen elementler: Blok-level elementler Kalıtsallık: Var

p {
text-indent: 10px;
}

Tarayıcı Desteği

Chrome explorer Firefox
+ + +

Mobil Tarayıcılar

Android Mobil Safari Chrome
+ + +

text-align

Bir elemntin diğerlerine göre hizasını berlilemek için kullanılır. Sadece metinler için kullanılmaz, diğer elementler içinde kullanılır.

Yapısı : text-align: (değer) Aldığı Değerler : [ start | end | left | center | right | justify | match-parent ] || (sözdizimi) Başlnagıç değeri: 0 Uygulanabilen elementler: tüm elementler Kalıtsallık: Yok

p {
text-align: justify;
}

Tarayıcı Desteği

Chrome explorer Firefox
+ + +

Mobil Tarayıcılar

Android Mobil Safari Chrome
+ + +

vertical-align

Bir elementin içeriğinin dikey hizalaması için kullanılır.

  • baseline : Orta(metin içeriğine göre)
  • sub : Altsimge
  • super : Üstsimge
  • top : Yukarı(elemente göre)
  • text-top: Yukarı (Metin içeriğine göre)
  • middle : Orta (Elemente göre)
  • bottom : Alt (Elemente göre)
  • text-bottom : Alt(Metin içeriğine göre)

Yapısı : vertical-align: (değer) Aldığı Değerler : baseline | sub | super | top | text-top | middle | bottom | text- bottom | (yüzde) | [uzunluk değeri] Başlnagıç değeri: baseline Uygulanabilen elementler: inline elementler ve tablo hücreleri Kalıtsallık: Yok

img {
vertical-align: baseline;
}

Tarayıcı Desteği

Chrome explorer Firefox
+ + +

Mobil Tarayıcılar

Android Mobil Safari Chrome
+ + +

line-height

Satırlar arasındaki yüksekliği belirler. normal, pixel veya yüzdedeğerlerin den birini alabilir.

Yapısı : line-height: (değer) Aldığı Değerler : (uzunluk değeri) | (yüzde değeri) | (sayı değeri) | normal | none Başlnagıç değeri: normal Uygulanabilen elementler: tüm elementler Kalıtsallık: Var

div{
line-height:30px
}

Tarayıcı Desteği

Chrome explorer Firefox
+ + +

Mobil Tarayıcılar

Android Mobil Safari Chrome
+ + +

word-spacing

Kelimeler arasındaki boşluk değerini belirler. Eksi değer alabilir.

Yapısı : word-spacing: (değer) Aldığı Değerler : [ normal | (uzunluk değeri) | (yüzde değeri) ]{1,3} Başlnagıç değeri: normal Uygulanabilen elementler: tüm elementler Kalıtsallık: Var

p {
word-spacing: 10px;
}

Tarayıcı Desteği

Chrome explorer Firefox
+ + +

Mobil Tarayıcılar

Android Mobil Safari Chrome
+ + +

letter-spacing

Harfler arasındaki boşluk değerini belirler. Eksi değer alabilir.

Yapısı : letter-spacing: (değer) Aldığı Değerler : [ normal | (uzunluk değeri) | (yüzde değeri) ]{1,3} Başlnagıç değeri: normal Uygulanabilen elementler: tüm elementler Kalıtsallık: Var

p {
letter-spacing: 5px;
}

Tarayıcı Desteği

Chrome explorer Firefox
+ + +

Mobil Tarayıcılar

Android Mobil Safari Chrome
+ + +

text-transform

Metnin Büyük-Küçük harf çevirmek için kullanılır.

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

Yapısı : text-transform: (değer) Aldığı Değerler : uppercase | lowercase | capitalize | none Başlnagıç değeri: none Uygulanabilen elementler: tüm elementler Kalıtsallık: Var

p {
text-transform: capitalize;
}

Tarayıcı Desteği

Chrome explorer Firefox
+ + +

Mobil Tarayıcılar

Android Mobil Safari Chrome
+ + +

text-decoration

Bu özellik metinlerimize özel işaretler koymamızı sağlar. Örneğin metinlerizinaltını çizmek gibi.

Yapısı : text-decoration: (değer) Aldığı Değerler : none | [ underline || overline || line-through || blink ] Başlnagıç değeri: none Uygulanabilen elementler: tüm elementler Kalıtsallık: Yok

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

Tarayıcı Desteği

Chrome explorer Firefox
+ + +

Mobil Tarayıcılar

Android Mobil Safari Chrome
+ + +

text-shadow

Bu özellik CSS2 ile birlikte geldi ancak internet tarayıcıları bu özelliği desteklemeyince CSS2.1 kaldırıldı. CSS3 ile birlikte tekrar geldi.

http://fatihhayrioglu.com/css-ile-metinlere-golge-vermek/

Bower'ı kaldırdık

Arayüz geliştiricileri (Front-end) dünyası çok hızlı bir şekilde güncelleniyor. Her gün birçok kütüphane ve araç çıkıyor ve bazıları kend...… Devamını oku

HTML Öznitelikleri ve DOM özellikleri

22 November 2017 tarihinde yayınlandı.

CSS3 ile resimleri oranını koruyarak sığdırma

20 November 2017 tarihinde yayınlandı.