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…