• RSS
  • Facebook
  • Twitter
  • Linkedin

15 Mayıs 2014 Perşembe

CSS Metin (text) Özellikleri




Metin Rengi:  body tüm sayfadaki yazı rengini belirler, şayet sayfa içerisinde belirli kısımlardaki metinlere farklı renk atamak istiyorsak, metnin geçtiği etikete yeniden renk atanmalıdır, böylelikle body etiketinden bağımsız renk alır.

body {color:blue;}
h1 {color:#00ff00;}
.renk {color:rgb(255,0,0);}
#yenirenk {color:#fff;}

Metin Hızalama: center; ortalar, right; sağa yaslar, left;sola yaslar, justiry: her iki yana yaslar.

h2 {text-align:center;}
p {text-align:left;}
.hizala {text-align:right;}
#yenihizala {text-align:justify;}

Metin Dekorasyon: overline;üst kısmı çizgili, line-through;orta kısmı çizili, underline;alt kısmı çizili.

h3 {text-decoration:overline;}
h4 {text-decoration:line-through;}
h5 {text-decoration:underline;}

Metin Dönüştürme: Uppercase;atandığı etiketteki bütün karakterleri büyük harfe çevirir, Lowercase:atandı etiketteki bütün karakterleri küçük harfe çevirir,Copitalize;atandığı etiketteki bütün karakterlerin ilk harflerini büyük harfe çevirir.

.buyut {text-transform:uppercase;}
.kucult {text-transform:lowercase;}
#basharfbuyut {text-transform:capitalize;}


çalışmalara ait örnek link:

Metin Girintileme: metnin ilk satırına ne kadar girinti olacağını belirler.

.girinti {text-indent:50px;}

Dikeyde Hizalama: text-top; bulunduğu satırda üst bilgi şeklinde, text-bottom;bulunduğu satırda  alt bilgi şeklinde hızalalar.

.ust {vertical-align:text-top;}
.alt {vertical-align:text-bottom;}

Yatayda Hizalama: ltr ile sola ve rtl ile sağa hizalar.

.dikey {direction:ltr;}

Metne Gölge Verme: metne gölge verir.

h2 {text-shadow:3px 3px #000000;}

Letter-spacing:karakterler arası boşluğu belirler

h1 {letter-spacing:2px;}

line-height: satırlar arası boşluğu belirler

p {line-height:200%;}

word-spacing: kelimeler arası boşluğu belirler

h3{ word-spacing:30px;}

white-space:nowrap; metnin alt satıra geçmesini engeller, tek satır olarak gösterir.

h4 {white-space:nowrap;}

çalışmalara ait örnek link:

0 yorum:

Yorum Gönder