Üye Girişi Yapınız     


    E-Posta
    

    Şifreniz
    



Şifremi Unuttum


Ana Sayfa Site Hakkında İletişim Ziyaretçi Defteri Döküman İndir Makale Ekle Haber Ekle

     CSS Text(Metin) özellikleri açıklama ve örnek uygulama
     admin     28.01.2013     11:12:03

CSS ile metinler üzerinde mükemmel biçimlendirmeler yapabiliriz. Bu yazımda, css kullanarak metinler üzerinde yapılabilecek biçimlendirmelerden bazılarını örnek bir uygulama ile anlatmaya çalışacağım...



Kodlar

 
<html>
<head>
 <style type="text/css">
 body{
 background-color:aqua;/*Sayfa arka rengi */
 /*Kaydırma çubuğu renk ayarları*/
 /*Yazınız ekrana sığmadığında çalışır...*/
 scrollbar-face-color: blue;/*Yüzey rengi*/
 scrollbar-arrow-color: white;/*ok rengi*/
 scrollbar-base-color : red;/*sol ve üst kenar çizgi*/
 scrollbar-shadow-color: green;/sağ ve alt gölge rengi*/
 scrollbar-highlight-color: brown;/*sol ve üst gölge rengi*/
 }
 p {
   text-indent:200px; /* Metnin ilk satır girintisini ayarlar.*/
   /* Yüzde olarakta değer verilebilir.*/
   text-align: justify; /* Metin hizalaması*/ 
   /*sol, sağ, orta, iki yana yasla */
   /*center,left,right değerlerini de alır*/
   } 
td{
   height:50px;
   vertical-align: top;/*bottom,middle,sub,super*/
   background-color: red;
}
.alt{
     vertical-align:sub;/* alt indis yap */
     font-size:20px;
}
.ust{  
         vertical-align:super; /* üst indis yap */
         font-size:20px;
}
#bir
{
  position:absolute;/* nesne konumlandırması serbest */
  line-height:50px;/*Satırlar arası boşluk*/
  border:2px dotted red;/Kenar çizgi kalınlık çizgi_tür kırmızı */
  width:100%;/*genişlik*/
  word-spacing:50px;/*Kelimeler arası boşluk*/
  letter-spacing: 20px;/*Harfler arası boşluk*/
  text-transform: capitalize;/*uppercase, lowercase */ 
  /*capitalize : ilk harfleri büyük yapar.*/
  /*uppercase : tümü büyük, lowercase : tümü küçük */
   text-decoration: underline overline line-through blink;
   /*blink: sadece mozilla da çalışıyor. yanıp sönme efekti */
   }  
 </style>
</head>
<body>
<p>Ordu’nun tarihi, ..... </p>
<p>Ordu’nun dereleri..</p>
<table>
 <tr><td>deneme yazı</td></tr>
</table>
X<font class="alt">2</font>&nbsp;&nbsp;&nbsp;<!-- 3 karakter boşluk -->
X<font class="ust">2</font>
<div id="bir">
  Ali topu at.<br>
  Mehmet topu tut.<br>
  Ayşe ipten atla.<br>
  ali sütünü iç.
</div>
</body>
</html>
 

 

Ekran Çıktısı

Facebook'ta Paylaş    
Diğer CSS İçerikleri       Tüm Yazılar        Ana Sayfa


  =>Soru Sorun veya Yorum Yazın...

İsim Giriniz :
  

  =>Yapılan Yorumlar...