Css Yazı Ve Font Uygulamaları (Ders 4)

İlgili Yazılar

CSS Renklendirme Ve Arkaplan Uygulamaları (Ders 5)

Nisan 4, 2020

CSS Temel Yapısı ve Nitelik Seçicileri 2. Kısım (Ders 3)

Şubat 16, 2020

CSS Temel Yapısı ve Nitelik Seçicileri 1. Kısım (Ders 2)

Ocak 1, 2020

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.

length	Bu değer seçilen normal konumundan ne kadar yukarıda/aşağıda olacağını beliler. Piksel olarak değer alır.
percentage	Bu 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.
baseline	Bu değer hizalanacak içeriğin normal yazım alanındaki gösterimidir.
sub	Bu değer hizalanacak içeriğin normal yazım alanında aşağısında gösterilmesini belirtir.
super	Bu değer hizalanacak içeriğin normal yazım alanında yukarısında gösterilmesini belirtir.
top	Bu değer hizalanacak içeriğin aynı satır içerisindeki en uzun eleman seviyesinde gösterilmesini belirtir.
text-top	Bu değer hizalanacak içeriğin ebeveyn elemanın tepe noktası seviyesinde gösterilmesini belirtir.
middle	Bu değer hizalanacak içeriğin ebeveyn elemanın orta noktası seviyesinde gösterilmesini belirtir.
text-bottom	Bu 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ır	Boşluklar ve Tab	Metin Alt Satır
normal	Göz ardı edilir	Göz ardı edilir	Alt satıra geçer
nowrap	Göz ardı edilir	Göz ardı edilir	Alt satıra geçmez
pre	Korunur	Korunur	Alt satıra geçmez
pre-wrap	Korunur	Korunur	Alt satıra geçer
pre-line	Korunur	Göz ardı edilir	Alt satıra geçer

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