Css Text Biçimlendirme Nasıl Yapılır ?

nhtctn nhtctn

Sayfalarımızın en önemli içeriklerinden olan yazılarımızın görüntüsünü nasıl değiştirebiliriz ya da nasıl daha okunaklı bir hale getirebiliriz ona bakalım.

Css text özelliklerimiz neler bunları öğrenelim.

Color

Yazılılarımıza renk vermek için kullanığımız özelliktir.

<h1>Color özelliği</h1>
<p>Yazı rengi</p>
        h1{
            color: red;
        }
        p {
            color: green;
        }

Text-decoration

a etiketlerimizin tarayıcı varsayılanı olarak linklerimiz altı çizili olarak gelir bunu kaldırmak için text-decoration özelliğine ihtiyaç duyarız.

 <a href="#">Anasayfa</a>
 <a href="#">İletişim</a>
a{
    text-decoration: none;
 }

bu özelliğimizin aldığı diğer değerler şunlardır

overline: Yazının üstünü çizer

line-through: Yazının ortasını çizer.

underline: Yazının altını çizer.

 <p class="ust">Yazı Üstü</p>
 <p class="orta">Yazı Ortası</p>
 <p class="alt">Yazı Altı</p>
        p{
            color: red;
        }
        .ust{
            text-decoration: overline;
        }
         .orta{
            text-decoration: line-through;
        }
         .alt{
            text-decoration: underline;
        }

Text-transform

Bu özellik yazılarımız büyük yapma, küçük yapma,baş harfleri büyük yapma gibi kolaylıklar sağlar.

Aldığı değerler; uppercase, lowercase, capitalize

text-transform:uppercase;Yazılarımı büyük harf yapar.

text-transform:lowercase; Yazılılarımız küçük harf yapar.

text-transform: capitalize; Yazılarımızın baş harflerini büyük yapar.

 <p class="buyuk">yazıları büyük yap</p>
 <p class="kucuk">YAZILARI KÜÇÜK YAP</p>
 <p class="bharf">baş harfleri büyük yap</p>
    
       p{
            color: red;
        }
        .buyuk{
           text-transform: uppercase;
        }
         .kucuk{
            text-transform: lowercase;
        }
         .bharf{
            text-transform: capitalize;
        }

Text indent 

Bu özellik ise satır başı yapmayı sağlar.

 <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quibusdam culpa eaque illo distinctio iste doloribus veniam quasi, provident porro deleniti ullam praesentium minus non, aspernatur ipsum. Quae, voluptates quam!
  </p>

     p{
            text-indent: 60px;
      }

letter spacing

Bu özelliğimiz ise her harf arasındaki aralığı belirtmek için kullanılır.

<p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quibusdam culpa eaque illo distinctio iste doloribus veniam quasi, provident porro deleniti ullam praesentium minus non, aspernatur ipsum. Quae, voluptates quam!
  </p>
 p{
            letter-spacing: 1.5px;
  }

Line-height

Bu özelliğimiz satırlar arası mesafeyi belirtir. Dikkat px olarak değer vermeyiniz.

 <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quibusdam culpa eaque illo distinctio iste doloribus veniam quasi, provident porro deleniti ullam praesentium minus non, aspernatur ipsum. Quae, voluptates quam!
  </p>
p{
            line-height: 2;
        }

Word-spacing 

Bu özelliğimiz ise kelimeler arasındaki mesafeyi belirlemek için kullanılır.

  <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quibusdam culpa eaque illo distinctio iste doloribus veniam quasi, provident porro deleniti ullam praesentium minus non, aspernatur ipsum. Quae, voluptates quam!
  </p>
 p{
            word-spacing: 15px;
        }

Yorum yazın

BENZER YAZILAR

Css Renk Kullanımı

Html sayfalarımıza renk vermenin birden fazla yöntemi bulunmaktadır. Birincisi, ingilizce renk isimlerini yazarak renk verebiliriz. Orange, Yellow, Blue,…

12 Haziran 2020