CSS Metin Özellikleri

14 Mart 2021 1024 kez okundu

Bu yazımızda sizlere CSS Metin özellikleri hakkında bilmeniz gereken parametreleri ve özelleştirme seçeneklerini göstereceğim. Web sitelerinde veya HTML Dokümanı üzerinde yazmış olduğunuz metinleri, CSS yardımıyla özelleştirmek mümkün.
HTML ile yazı biçimlendirmede olduğu gibi, CSS ile özelleştirme yaparken de aynı özelleştirmeler mevcuttur.

Önerilen Yazı

HTML Yazı Biçimlendirme

CSS ile metinlerimizi özelleştirirken; metinin yazı tipini, rengini, boyutunu, konumunu değiştirme gibi özelleştirme parametreleri mevcuttur. Gelin şimdi birlikte bu özelleştirmelere göz atalım.

İçindekiler

Metin hizalama (text-align)

text-align parametresi ile metinleri hizalama yapmaktayız. Metini ortalayabilir, sağa yaslı veya sola yaslı yapabiliriz.

<html>
  <head>
     <style>
      .orta {
         text-align: center;
        }

      .sag {
         text-align: right;
        }

      .sol {
         text-align: left;
        }
     </style>
  </head>

 <body>
<p class="orta">CSS Metin Özellikleri</p>
<p class="sag">CSS Metin Özellikleri</p>
<p class="sol">CSS Metin Özellikleri</p>
 </body>

</html>

<html>

<head>

<style>

.orta {

text-align: center;

}

.sag {

text-align: right;

}

.sol {

text-align: left;

}

</style>

</head>

<body>

<p class="orta">CSS Metin Özellikleri</p>

<p class="sag">CSS Metin Özellikleri</p>

<p class="sol">CSS Metin Özellikleri</p>

</body>

</html>

CSS Metin Özellikleri

Metin renklendirme (color)

colorparametresi ile, metinlerimizin renklerini isteğimize göre değiştirebiliriz. İstediğiniz rengin adını, kodunu yazarak renklendirme yapabilirsiniz. Renk adlarını ve kodlarını bilmiyorsanız BURAYA tıklayarak renk kodlarını öğrenebilirsiniz.

<html>
  <head>
     <style>
      .turuncu {
         color: orange;
        }

      .mavi {
         color: #0000FF;
        }
     </style>
  </head>

 <body>
<p class="turuncu">CSS Metin Özellikleri</p>
<p class="mavi">CSS Metin Özellikleri</p>
 </body>

</html>

<html>

<head>

<style>

.turuncu {

color: orange;

}

.mavi {

color: #0000FF;

}

</style>

</head>

<body>

<p class="turuncu">CSS Metin Özellikleri</p>

<p class="mavi">CSS Metin Özellikleri</p>

</body>

</html>

CSS Metin Özellikleri

Metin gölgelendirme (text-shadow)

Metinlerimizi özelleştirirken aynı zamanda gölgelendirme ekleyerek, görünümlerini biraz daha zenginleştirebiliriz.
text-shadow parametresi ile gölgelendirme yapmaktayız.
Gölgelendirme yaparken; parametremiz 3 farklı değer almaktadır.
1. Değer: Gölge hizasının yatay konumu
2. Değer: Gölge hizasının dikey konumu
3. Değer: Gölgenin bulanık olma değeri

<html>
  <head>
     <style>
      .golgelendirme {
         text-shadow: 3px 3px 5px;
        }
     </style>
  </head>

 <body>
<p class="golgelendirme">CSS Metin Özellikleri</p>
 </body>

</html>

<html>

<head>

<style>

.golgelendirme {

text-shadow: 3px 3px 5px;

}

</style>

</head>

<body>

<p class="golgelendirme">CSS Metin Özellikleri</p>

</body>

</html>

CSS Metin Özellikleri

Metin dekorasyonu (text-decoration)

Metinlere çeşitli dekorasyonlar ekleyerek özelleştirebiliriz. Bu özelleştirmeler; altı çizili, üstü çizili gibi çizikli dekorasyonlardır.
Dekorasyonları, text-decoration parametresi ile yapmaktayız. Bu parametrenin çeşitli özellikleri bulunmaktadır.
none : Herhangi bir dekorasyon eklemez. Metini orijinal halinde gösterir.
overline : Metine bir üst çizgi ekler.
underline : Metine bir alt çizgi ekler.
line-through : Metinin ortasından bir çizgi ekler.
overline underline : Metinin altında ve üstünde çizgi ekler.
overline underline line-through : Metine alt, üst ve orta çizgi ekler.
inherit : Dekorasyon özelliğin değerini, diğer öğenin değerinden almasını sağlar.

Aynı zamanda çizgilerin görünüşlerini özelleştirmek için, çizgilere belli parametre değerleri atayabiliriz. Örneğin çizgiyi dalgalı, noktalı veya çift çizgi gibi türlerde yapabiliriz.
solid :Düz çizgi ekler. Varsayılan değer olarak kullanılır.
wavy :Dalgalı çizgi ekler.
double :Çift çizgi ekler.
dashed :Kesikli çizgi ekler.
dotted :Noktalı çizgi ekler.

<html>
  <head>
     <style>
      .cizgi1 {
         text-decoration: overline;
        }

      .cizgi2 {
         text-decoration: underline;
        }

      .cizgi3 {
         text-decoration: line-through;
        }

      .cizgi4 {
         text-decoration: overline underline;
        }

      .cizgi5 {
         text-decoration: overline underline line-through;
        }

      .cizgi6 {
         text-decoration: underline wavy green;
        }

      .cizgi7 {
         text-decoration: overline dotted blue;
        }

      .cizgi8 {
         text-decoration: line-through dashed red;
        }
     </style>
  </head>

 <body>
<p class="cizgi1">Merhaba ! Bu yazı üst çizgili bir yazıdır.</p>
<p class="cizgi2">Merhaba ! Bu yazı alt çizgili bir yazıdır.</p>
<p class="cizgi3">Merhaba ! Bu yazı ortası çizgili bir yazıdır.</p>
<p class="cizgi4">Merhaba ! Bu yazı altından ve üstünden çizgili bir yazıdır.</p>
<p class="cizgi5">Merhaba ! Bu yazı altından, üstünden ve ortasından çizgili bir yazıdır.</p>
<p class="cizgi6">Merhaba ! Bu yazı alt çizgisi dalgalı bir yazıdır.</p>
<p class="cizgi7">Merhaba ! Bu yazı üst çizgisi noktalı bir yazıdır.</p>
<p class="cizgi8">Merhaba ! Bu yazı orta çizgisi kesikli bir yazıdır.</p>
 </body>

</html>

<html>

<head>

<style>

.cizgi1 {

text-decoration: overline;

}

.cizgi2 {

text-decoration: underline;

}

.cizgi3 {

text-decoration: line-through;

}

.cizgi4 {

text-decoration: overline underline;

}

.cizgi5 {

text-decoration: overline underline line-through;

}

.cizgi6 {

text-decoration: underline wavy green;

}

.cizgi7 {

text-decoration: overline dotted blue;

}

.cizgi8 {

text-decoration: line-through dashed red;

}

</style>

</head>

<body>

<p class="cizgi1">Merhaba ! Bu yazı üst çizgili bir yazıdır.</p>

<p class="cizgi2">Merhaba ! Bu yazı alt çizgili bir yazıdır.</p>

<p class="cizgi3">Merhaba ! Bu yazı ortası çizgili bir yazıdır.</p>

<p class="cizgi4">Merhaba ! Bu yazı altından ve üstünden çizgili bir yazıdır.</p>

<p class="cizgi5">Merhaba ! Bu yazı altından, üstünden ve ortasından çizgili bir yazıdır.</p>

<p class="cizgi6">Merhaba ! Bu yazı alt çizgisi dalgalı bir yazıdır.</p>

<p class="cizgi7">Merhaba ! Bu yazı üst çizgisi noktalı bir yazıdır.</p>

<p class="cizgi8">Merhaba ! Bu yazı orta çizgisi kesikli bir yazıdır.</p>

</body>

</html>

Merhaba ! Bu yazı üst çizgili bir yazıdır.

Merhaba ! Bu yazı alt çizgili bir yazıdır.

Merhaba ! Bu yazı ortası çizgili bir yazıdır.

Merhaba ! Bu yazı altından ve üstünden çizgili bir yazıdır.

Merhaba ! Bu yazı altından, üstünden ve ortasından çizgili bir yazıdır.

Merhaba ! Bu yazı alt çizgisi dalgalı bir yazıdır.

Merhaba ! Bu yazı üst çizgisi noktalı bir yazıdır.

Merhaba ! Bu yazı orta çizgisi kesikli bir yazıdır.

Metinlerin harflerini dönüştürme (text-transform)

text-transform parametresi ile metinlerin harflerinde değişiklikler yapabilirsiniz. Küçük harfleri büyük harfe; büyük harfleri küçük harfe dönüştürebilirsiniz.
capitalize : Metin içerisinde bulunan kelimelerin ilk harflerini büyük yapar.
lowercase : Metin içerisinde bulunan tüm kelimeleri küçük harfli yapar.
uppercase : Metin içerisinde bulunan tüm kelimeleri büyük harfli yapar.

<html>
  <head>
     <style>
      .ilkharfbuyuk {
         text-transform: capitalize;
        }

      .kucukharf {
         text-transform: lowercase;
        }

      .buyukharf {
         text-transform: uppercase;
        }
     </style>
  </head>

 <body>
<p class="ilkharfbuyuk">Merhaba, bu yazımızda sizlere CSS metin özellikleri konusunu anlatacağız.</p>
<p class="kucukharf">Merhaba, bu yazımızda sizlere CSS metin özellikleri konusunu anlatacağız.</p>
<p class="buyukharf">Merhaba, bu yazımızda sizlere CSS metin özellikleri konusunu anlatacağız.</p>
 </body>

</html>

<html>

<head>

<style>

.ilkharfbuyuk {

text-transform: capitalize;

}

.kucukharf {

text-transform: lowercase;

}

.buyukharf {

text-transform: uppercase;

}

</style>

</head>

<body>

<p class="ilkharfbuyuk">Merhaba, bu yazımızda sizlere CSS metin özellikleri konusunu anlatacağız.</p>

<p class="kucukharf">Merhaba, bu yazımızda sizlere CSS metin özellikleri konusunu anlatacağız.</p>

<p class="buyukharf">Merhaba, bu yazımızda sizlere CSS metin özellikleri konusunu anlatacağız.</p>

</body>

</html>

Merhaba, bu yazımızda sizlere CSS metin özellikleri konusunu anlatacağız.

Kelimeler arası mesafe (word-spacing)

word-spacing parametresi ile, kelimeler arası mesafenin uzaklığını ve yakınlığını ayarlayabilirsiniz.

<html>
  <head>
     <style>
      .mesafe1 {
         word-spacing: 5px;
        }

      .mesafe2 {
         word-spacing: 15x;
        }

      .mesafe3 {
         word-spacing: 25px;
        }
     </style>
  </head>

 <body>
<p class="mesafe1">CSS Metin Özellikleri</p>
<p class="mesafe2">CSS Metin Özellikleri</p>
<p class="mesafe3">CSS Metin Özellikleri</p>
 </body>

</html>

<html>

<head>

<style>

.mesafe1 {

word-spacing: 5px;

}

.mesafe2 {

word-spacing: 15x;

}

.mesafe3 {

word-spacing: 25px;

}

</style>

</head>

<body>

<p class="mesafe1">CSS Metin Özellikleri</p>

<p class="mesafe2">CSS Metin Özellikleri</p>

<p class="mesafe3">CSS Metin Özellikleri</p>

</body>

</html>

CSS Metin Özellikleri

Harfler arası mesafe (letter-spacing)

letter-spacing parametresi ile, harfler arası mesafenin uzaklığını ve yakınlığını ayarlayabilirsiniz.

<html>
  <head>
     <style>
      .mesafe1 {
         letter-spacing: 5px;
        }

      .mesafe2 {
         letter-spacing: 15x;
        }

      .mesafe3 {
         letter-spacing: 25px;
        }
     </style>
  </head>

 <body>
<p class="mesafe1">CSS Metin Özellikleri</p>
<p class="mesafe2">CSS Metin Özellikleri</p>
<p class="mesafe3">CSS Metin Özellikleri</p>
 </body>

</html>

<html>

<head>

<style>

.mesafe1 {

letter-spacing: 5px;

}

.mesafe2 {

letter-spacing: 15x;

}

.mesafe3 {

letter-spacing: 25px;

}

</style>

</head>

<body>

<p class="mesafe1">CSS Metin Özellikleri</p>

<p class="mesafe2">CSS Metin Özellikleri</p>

<p class="mesafe3">CSS Metin Özellikleri</p>

</body>

</html>

CSS Metin Özellikleri

Satırlar arası mesafe (line-height)

line-height parametresi ile, metinlerin alt alta oldukları durumlarda, satırları arasında boşluğun ne kadar olacağını ayarlayabiliriz. Satırlar arasında ki boşluğun yüksekliğini ayarlamamızda kullanılır.

<html>
  <head>
     <style>
      .satirmesafe1 {
         line-height: 60%;
        }

      .satirmesafe2 {
         line-height: 120%;
        }

      .satirmesafe3 {
         line-height: 180%;
        }
     </style>
  </head>

 <body>
<p class="satirmesafe1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Quisque suscipit tortor in nunc aliquet euismod. Duis ut finibus quam. Vivamus 
tincidunt a nisi eu Kod Kampüsü. Ut vitae erat a mi mollis tempor eu vel lectus. 
Nulla vitae interdum nunc, eget CSS Metin Özellikleri tellus. Proin aliquet suscipit, 
consectetur nibh vulputate at. Praesent sollicitudin nulla quis quam efficitur 
vulputate. Suspendisse blandit Kod Kampüsü enim, at fringilla eros vestibulum nec.</p>

<p class="satirmesafe2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Quisque suscipit tortor in nunc aliquet euismod. Duis ut finibus quam. Vivamus 
tincidunt a nisi eu Kod Kampüsü. Ut vitae erat a mi mollis tempor eu vel lectus. 
Nulla vitae interdum nunc, eget CSS Metin Özellikleri tellus. Proin aliquet suscipit, 
consectetur nibh vulputate at. Praesent sollicitudin nulla quis quam efficitur 
vulputate. Suspendisse blandit Kod Kampüsü enim, at fringilla eros vestibulum nec.</p>

<p class="satirmesafe3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Quisque suscipit tortor in nunc aliquet euismod. Duis ut finibus quam. Vivamus 
tincidunt a nisi eu Kod Kampüsü. Ut vitae erat a mi mollis tempor eu vel lectus. 
Nulla vitae interdum nunc, eget CSS Metin Özellikleri tellus. Proin aliquet suscipit, 
consectetur nibh vulputate at. Praesent sollicitudin nulla quis quam efficitur 
vulputate. Suspendisse blandit Kod Kampüsü enim, at fringilla eros vestibulum nec.</p>

 </body>

</html>

<html>

<head>

<style>

.satirmesafe1 {

line-height: 60%;

}

.satirmesafe2 {

line-height: 120%;

}

.satirmesafe3 {

line-height: 180%;

}

</style>

</head>

<body>

<p class="satirmesafe1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Quisque suscipit tortor in nunc aliquet euismod. Duis ut finibus quam. Vivamus

tincidunt a nisi eu Kod Kampüsü. Ut vitae erat a mi mollis tempor eu vel lectus.

Nulla vitae interdum nunc, eget CSS Metin Özellikleri tellus. Proin aliquet suscipit,

consectetur nibh vulputate at. Praesent sollicitudin nulla quis quam efficitur

vulputate. Suspendisse blandit Kod Kampüsü enim, at fringilla eros vestibulum nec.</p>

<p class="satirmesafe2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Quisque suscipit tortor in nunc aliquet euismod. Duis ut finibus quam. Vivamus

tincidunt a nisi eu Kod Kampüsü. Ut vitae erat a mi mollis tempor eu vel lectus.

Nulla vitae interdum nunc, eget CSS Metin Özellikleri tellus. Proin aliquet suscipit,

consectetur nibh vulputate at. Praesent sollicitudin nulla quis quam efficitur

vulputate. Suspendisse blandit Kod Kampüsü enim, at fringilla eros vestibulum nec.</p>

<p class="satirmesafe3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Quisque suscipit tortor in nunc aliquet euismod. Duis ut finibus quam. Vivamus

tincidunt a nisi eu Kod Kampüsü. Ut vitae erat a mi mollis tempor eu vel lectus.

Nulla vitae interdum nunc, eget CSS Metin Özellikleri tellus. Proin aliquet suscipit,

consectetur nibh vulputate at. Praesent sollicitudin nulla quis quam efficitur

vulputate. Suspendisse blandit Kod Kampüsü enim, at fringilla eros vestibulum nec.</p>

</body>

</html>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque suscipit tortor in nunc aliquet euismod. Duis ut finibus quam. Vivamus
tincidunt a nisi eu Kod Kampüsü. Ut vitae erat a mi mollis tempor eu vel lectus.
Nulla vitae interdum nunc, eget CSS Metin Özellikleri tellus. Proin aliquet suscipit,
consectetur nibh vulputate at. Praesent sollicitudin nulla quis quam efficitur
vulputate. Suspendisse blandit Kod Kampüsü enim, at fringilla eros vestibulum nec.