Css Metin Biçimlendirme (text formatting)

Text Color:
Metin Renk(Text Color) özelliği metnin rengini ayarlamak için kullanılır.
Not:”Text Color” özelliğini kullanıyorsanız W3C uyumlu siteler için background-color özelliğinide kullanmanız lazım.

body { color: blue; }
h1 { color: #00ff00; }
h2 { color: rgb(255,0,0); }

Metin Hizalama (Text Alignment):
Text-align özelliği bir metnin yatay hizalamasını ayarlamak için kullanılır.

h1 { text-align: center; }   /*Ortada hizalı*/
h2 { text-align: right; }   /*Sağa Hizalı*/
h3 { text-align: left; }  /*Sola Hizalı*/
h4 { text-align: justify; }  /*sağ ve sol kenarlara yaslar*/

Örnek:

//////////// Ortada hizalı ////////////

//////////// Sağa hizalı ////////////

//////////// Sola hizalı ////////////

<div style="background-color: #f7f7ff;border-color: #666666;border-radius: 3px;border: solid 1px;color: #666666;margin: auto;padding: 15px;width: 80%">
   <h3 style="text-align: center">//////////// Ortada hizalı ////////////</h3>
   <h3 style="text-align: right">//////////// Sağa hizalı ////////////</h3>
   <h3 style="text-align: left">//////////// Sola hizalı ////////////</h3>
</div>

Metin Düzenleme(Text Decoration):
Bu özellik bir metnin altını çizgili yada çizgisiz yapar. Çoğunlukla linklerin altındaki çizgiyi kaldırmak için kullanılır.

 a  { text-decoration: none;}  /* alt çizgiyi kaldırır */ 
h1 { text-decoration: underline;}  /* metnin altında çizgi çizer */
h2 { text-decoration: overline;}  /* metnin üzerinde çizgi çizer */
h3 { text-decoration: line-through;}  /* metinde harflerin ortasına çizgi çizer */

Örnek:

//////////// underline ////////////

//////////// overline ////////////

//////////// line-through ////////////

<div style="background-color: #f7f7ff;border-color: #666666;border-radius: 3px;border: solid 1px;color: #666666;margin: auto;padding: 15px;width: 80%">
   <h3 style="text-align: right;text-decoration: underline">//////////// underline ////////////</h3>
   <h3 style="text-decoration: overline">//////////// overline ////////////</h3>
   <h3 style="text-align: center;text-decoration: line-through">//////////// line-through ////////////</h3>
</div>

Metin Dönüştürme(Text Transformation):
Bu özellik bir metnin küçük harfle veya büyük harfle yazılmasını sağlar

p.uppercase { text-transform: uppercase;}  /*Metni komple büyük harfle yazar*/
p.lowercase{ text-transform: lowercase;}  /*Metni komple küçük harfle yazar*/
p.capitalize{ text-transform: capitalize;}  /*Her kelimeyi baş harfi büyük yazar*/

Örnek:

Metni komple büyük harfle yazar

Metni komple küçük harfle yazar

Her kelimeyi baş harfi büyük yazar

<div style="background-color: #f7f7ff;border-color: #666666;border-radius: 3px;border: solid 1px;color: #666666;margin: auto;padding: 15px;width: 80%">
   <h3 style="text-transform: uppercase">Metni komple büyük harfle yazar</h3>
   <h3 style="text-transform: lowercase">Metni komple küçük harfle yazar</h3>
   <h3 style="text-transform: capitalize">Her kelimeyi baş harfi büyük yazar</h3>
</div>

Satır Başı Boşluğu Bırakmak (Text Indentation):
Bu özellik bir metnin satır başında bizim belirlediğimiz oranda boşluk bırakır

 p { text-indent: 50px; }

Örnek:

Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500’lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960’larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.

<div style="background-color: #f7f7ff;border-color: #666666;border-radius: 3px;border: solid 1px;color: #666666;margin: auto;padding: 15px;width: 80%">

   <div style="text-indent: 50px">Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</div>

</div>

Metin Yönü(text direction ):
Bu özellik bir metnin sağdan sola veya soldan sağa doğru yazılmasını sağlar.Örneğin arapça metinler sağdan sola doğru yazılır.

 div { direction: rtl; }  /*Sağdan sola(right to left)*/
div { direction: ltr; }  /*Soldan sağa (left to right)*/

Örnek:

sağdan sola doğru yazı
* لاَ تَدْخُلُونَ الْجَنَّةَ حَتَّى تُؤْمِنُوا وَلاَ تُؤْمِنُوا حَتَّى تَحَابُّوا
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500’lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960’larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.

soldan sağa doğru yazı
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500’lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960’larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.

<div style="background-color: #f7f7ff;border-color: #666666;border-radius: 3px;border: solid 1px;color: #666666;margin: auto;padding: 15px;width: 80%">
<div style="direction: rtl"><b>sağdan sola doğru yazı</b><br>* لاَ تَدْخُلُونَ الْجَنَّةَ حَتَّى تُؤْمِنُوا وَلاَ تُؤْمِنُوا حَتَّى تَحَابُّوا<br>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</div>
<hr>
<div style="direction: ltr"><b>soldan sağa doğru yazı</b><br>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</div>
</div>

Harfler Arası Boşluk(letter-spacing):
Bu özellikle bir metindeki harfler arasındaki mesafeyi belirleriz

h1 { letter-spacing: 2px; }
h1 { letter-spacing: -2px; }

Örnek:

Bu metnin letter-spacing değeri 2px dir.

Bu metnin letter-spacing değeri -2px dir.

<div style="background-color: #f7f7ff;border-color: #666666;border-radius: 3px;border: solid 1px;color: #666666;margin: auto;padding: 15px;width: 80%">
   <div style="letter-spacing: 2px">Bu metnin letter-spacing değeri 2px dir. </div>
   <hr>
   <div style="letter-spacing: -2px">Bu metnin letter-spacing değeri -2px dir. </div>
</div>

Satır Yüksekliği(line-height):
Bu özellikle bir metindeki satırlar arasındaki mesafeyi belirler

p.small { line-height: 90%; }
p.big   { line-height: 200%; }

Örnek:

Bu metnin standart yukseklıktedir.

Bu metninde line-height 90%. dır

Bu metninde line-height 200%. dır

<div style="background-color: #f7f7ff;border-color: #666666;border-radius: 3px;border: solid 1px;color: #666666;margin: auto;padding: 15px;width: 80%">
   <div>Bu metnin standart yukseklıktedir.</div>
   <div>Bu metnin standart yukseklıktedir.</div>
   <div>Bu metnin standart yukseklıktedir.</div>
   <hr>
   <div style="line-height: 90%">Bu metninde line-height 90%. dır </div>
   <div style="line-height: 90%">Bu metninde line-height 90%. dır </div>
   <div style="line-height: 90%">Bu metninde line-height 90%. dır </div>
   <hr>
   <div style="line-height: 200%">Bu metninde line-height 200%. dır </div>
   <div style="line-height: 200%">Bu metninde line-height 200%. dır </div>
   <div style="line-height: 200%">Bu metninde line-height 200%. dır </div>
</div>

Dikey Hizalama(vertical-align):
Bu özellikle yüksekliği sabit bir nesnenin içindeki bir metini dikey olarak ortalayabiliriz.

img {
   vertical-align: baseline;  /*Orta(metin içeriğine göre)*/
   vertical-align: text-top;  /*Yukarıda hizalama (Metin içeriğine göre)*/
   vertical-align: text-bottom;  /*Altda hizalama(Metin içeriğine göre)*/
   vertical-align: sub ;  /*Alt Simge*/
   vertical-align: super ;  /*Üst Simge*/
   vertical-align: top ;  /*üst (Elemente göre)*/
   vertical-align: middle ;  /*orta(Elemente göre)*/ 
   vertical-align: bottom ;  /*Alt (Elemente göre)*/
}

Kelimeler Arası Mesafe(word-spacing):
Bu özellikle kelimeler arasındaki mesafeyi belirleyebiliriz.eksi değer alabilir.

 p { word-spacing: 30px; }

Örnek:

Bu metnin word-spacing değeri 30px. Dir.

<div style="background-color: #f7f7ff;border-color: #666666;border-radius: 3px;border: solid 1px;color: #666666;margin: auto;padding: 15px;width: 80%">
   <div>Bu metnin word-spacing değeri 30px. Dir.</div>
</div>

Css Metin Biçimlendirme (text formatting)

//////////// Ortada hizalı ////////////

//////////// Sağa hizalı ////////////

//////////// Sola hizalı ////////////

//////////// underline ////////////

//////////// overline ////////////

//////////// line-through ////////////

Metni komple büyük harfle yazar

Metni komple küçük harfle yazar

Her kelimeyi baş harfi büyük yazar

Yorumlar

Yorum bırakın Cevabı iptal et

Bilişim alt kategorileri

Css Metin Biçimlendirme (text formatting)

//////////// Ortada hizalı ////////////

//////////// Sağa hizalı ////////////

//////////// Sola hizalı ////////////

//////////// underline ////////////

//////////// overline ////////////

//////////// line-through ////////////

Metni komple büyük harfle yazar

Metni komple küçük harfle yazar

Her kelimeyi baş harfi büyük yazar

Burda Paylaş:

Yorumlar

Yorum bırakın Cevabı iptal et

Bilişim alt kategorileri