01242017Sal
Last updateÇrş, 09 Kas 2016 12pm


CSS DERSLERİ

CSS text, css align

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

1 p {
2 text-indent: 10px;
3 }
Browser Uyumu:
Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C?s CSS Level 1+
CSS Profile 1.0
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: <deger>
Aldığı Değerler : <uzunluk değeri > | <yüzde> | inherit
Başlnagıç değeri: 0
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

1 p {
2 text-align: justify;
3 }
Browser Uyumu:
Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C?s CSS Level 1+
CSS Profile 1.0
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: <deger>
Aldığı Değerler :<yüzde> | baseline | sub | super | top | text-top | middle | bottom | text-bottom
Başlnagıç değeri: baseline
Uygulanabilen elementler: inline elementler
Kalıtsallık: Yok

1 img {
2 vertical-align: baseline;
3 }
Browser Uyumu:
Internet Explorer 4+
Netscape 6+
Opera 3.6+
W3C?s CSS Level 1+
CSS Profile 1.0
line-height

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

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

1 div{
2 line-height:30px
3 }
Browser Uyumu:
Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C?s CSS Level 1+
CSS Profile 1.0
word-spacing

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

Yapısı : word-spacing: <deger>
Aldığı Değerler : normal | <uzunluk değeri >
Başlnagıç değeri: normal
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Var

1 p {
2 word-spacing: 10px;
3 }
Browser Uyumu:
Internet Explorer 4.5+(Mac); 6 (Windows)
Netscape 6+
Opera 3.6+
W3C?s CSS Level 2+
letter-spacing

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

Yapısı : letter-spacing: <deger>
Aldığı Değerler : normal | <uzunluk değeri >
Başlnagıç değeri: normal
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Var

1 p {
2 letter-spacing: 5px;
3 }
Browser Uyumu:
Internet Explorer 4+
Netscape 4+
Opera 3.6+
W3C?s CSS Level 1+
CSS Profile 1.0
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: <deger>
Aldığı Değerler : none | capitalize | uppercase | lowercase
Başlnagıç değeri: none
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Var

1 p {
2 text-transform: capitalize;
3 }
Browser Uyumu:
Internet Explorer 4+
Netscape 4+
Opera 3.6+
W3C?s CSS Level 1+
CSS Profile 1.0
text-decoration

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

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

1 a:link, a:visited, a:active {
2 text-decoration: none
3 }
Browser Uyumu:
Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C?s CSS Level 1+
CSS Profile 1.0
text-shadow

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


Kaynak : Fatih HAYRİOĞLU, CSS dersleri

Yorum ekle


Güvenlik kodu
Yenile

FACEBOOK'TA TAKİP EDİN