Anasayfa / Web Tasarım / Css / Css Yazı Ve Font Uygulamaları (Ders 4)

Css Yazı Ve Font Uygulamaları (Ders 4)

Web sayfalarındaki yazıların tiplerini ve fontlarını ayarlamak html üzerinden yapılabildiği gibi css ile de yapılabiliyor. Tabi farklı olan uygulamalar da var.

font-family

Seçilen yazının yazılacağı yazı tipi ailesini belirtir.

<style>
   p{
      font-family: "Times New Roman", Times, serif;
   }
</style>

font-size

Bu komut seçtiğimiz yazının büyüklüğünü ayarlar. Yazının büyüklüğünü belirtmenin birçok yolu vardır.

<style>
   .sayi{font-size: 10px;}
   .yuzde{font-size: 150%;}
   .kucult{font-size: smaller;}
   .cok_cok_kucuk{font-size: xx-small;}
   .cok_kucuk{font-size: x-small;}
   .kucuk{font-size: small;}
   .orta{font-size: medium:}
   .buyult{font-size: larger;}
   .cok_cok_buyuk{font-size: xx-large;}
   .cok_buyuk{font-size: x-large;}
   .buyuk{font-size: large;}
</style>
   

font-weight

Bu komut seçilen yazının kalınlığını ayarlar.

<style>
   .sayi{font-weight: 200}
   .normal{font-weight: normal;}
   .ince{font-weight: lighter;}
   .kalin{font-weight: bold;}
</style>

font-style

Seçilen yazının italik olma durumunu belirtir.

<style>
   .normal{font-style: normal;}
   .italic{font-style: italic;}
   .oblique{font-style: oblique;}
</style>

line-height

Seçilen kısımda bulunan satırların yüksekliğini belirler.

<style>
   .sayi{line-height: 3.5;}
   .yuzde{line-height: 130%;}
</style>

letter-spacing

Bu komut seçilen metin içerisindeki harflerin arasındaki mesafeyi ayarlar.

<style>
   .pixel{letter-spacing: 5px;}
   .em{letter-spacing: 1em;}
</style>

word-spacing

Bu komut seçilen metin içerisindeki kelimelerin arasındaki boşlukları ayarlar. Kullanımı alabildiği değerler letter-spacing ile aynıdır.

text-align

Bu komut seçilen metnin nereye hizalanacağını ayarlar.

<style>
   .sol{text-align: left;}
   .sag{text-align: right;}
   .merkez{text-align: center;}
   .yayilmis{text-align: justify;}
</style>

vertical-align

Bu komut seçilen içeriğin dikey olarak hizalanmasını sağlar. verrtical-align komutu aşağıdaki değerleri alır.

lengthBu değer seçilen normal konumundan ne kadar yukarıda/aşağıda olacağını beliler. Piksel olarak değer alır.
percentageBu değer hizalanacak içeriğin normal konumundan ne kadar yukarıda/aşağıda olacağını beliler. Yüzde olarak değer alır.
baselineBu değer hizalanacak içeriğin normal yazım alanındaki gösterimidir.
subBu değer hizalanacak içeriğin normal yazım alanında aşağısında gösterilmesini belirtir.
superBu değer hizalanacak içeriğin normal yazım alanında yukarısında gösterilmesini belirtir.
topBu değer hizalanacak içeriğin aynı satır içerisindeki en uzun eleman seviyesinde gösterilmesini belirtir.
text-topBu değer hizalanacak içeriğin ebeveyn elemanın tepe noktası seviyesinde gösterilmesini belirtir.
middleBu değer hizalanacak içeriğin ebeveyn elemanın orta noktası seviyesinde gösterilmesini belirtir.
text-bottomBu değer hizalanacak içeriğin ebeveyn elemanın taban noktası seviyesinde gösterilmesini belirtir.

text-decoration

Bu komut yazılarda çizgi uygulamalarını belirtir.

<style>
   p[name="ust"]{text-decoration: underline;}
   p[name="orta"]{text-decoration: linr-through;}
   p[name="alt"]{text-decoration: overline;}
   p[name="cizgisiz"]{text-decoration: none;} 
 </style>

text-indent

Bu komut paragrafların ilk satırını belirlenen miktarda geriden başlatarak daha güzel bir görüntü elde etmemizi sağlar. Alabildiği değerler pixel ve yüzde(%) cinsindendir.

text-transform

Bu komut seçilen yazının büyük veya küçük yazılmasının sağlar.

<style>
  p[name="buyuk"]{text-transform: uppercase;}
  p[name="kucuk"]{text-transform: lowercase;}
  p[name="ilk_harf_buyuk"]{text-transform: capitalize;}
</style> 

white-space

Bu komut ile boşluk (space), tab, yeni satıra geçme işlemlerinin nasıl işlem göreceğini belirlememizi sağlar. Alabildiği değerler aşağıdaki gibidir.

Yeni SatırBoşluklar ve TabMetin Alt Satır
normalGöz ardı edilirGöz ardı edilirAlt satıra geçer
nowrapGöz ardı edilir Göz ardı edilir Alt satıra geçmez
preKorunurKorunur Alt satıra geçmez
pre-wrapKorunur Korunur Alt satıra geçer
pre-lineKorunur Göz ardı edilir Alt satıra geçer

Bir sonraki yazımızda görüşmek üzere…

Hakkında Furkan Yağmur

Check Also

web-gemisi

CSS’e Giriş (Ders 1)

CSS(Cascading Style Sheets) HTML sayfaları içine gömülebilen bir dildir. CSS dilinin ana amacı belirtilen etiketlerinin …

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir