Font Özellikleri
Adı üzerinde Font özelliklerini değiştirmeye yarayan bir stil şablon özelliğidir. Nasıl kullanıldığına hemen bir bakalım.
<html>
<body>
<head>
<title>Css</title>
<style type=”text/css”>
<!–
p
{
font-size : 12pt;
font-family : Arial;
font-weight : bold;
font-style : italic;
color : #00FFFF;
}
–>
</style>
<body>
<p>Web Teknikleri</p>
</body>
</html>
Alt özellikleri tanıyalım.
font-size : Font büyüklüğünü belirtir.
İsterseniz aşağıdaki gibi standart değerleri seçersiniz;
xx-large (en büyük )
x-large (biraz büyük)
large (büyük)
medium (orta)
small (küçük)
x-small (biraz küçük)
xx-small (en küçük)
isterseniz direkt olarak punto(pt) değerini verebilirsiniz.
font-family : Font tipini belirler.
Arial, Courier, Verdana gibi font isimlerini alabilir.
font-weight : Fontun kalınlı incelik durumunu belirler.
bold : Fontu kalın yapar.
normal : Fontun normal halde olmasını sağlar.
Bu özellik yazılmadığında normal özellik alınır.
font-style : Fontun yatık olup olmamasını sağlar.
italic : Yazının sağa doğru yatık olmasını sağlar.
normal : Fontu normal halde olmasını sağlar.
Bu özellik yazılmadığında normal özellik alınır.
color : Fontun rengini belirler.
Blue, red,green gibi renklerin ingilizce karşılıklarını alabilir.
Text Özellikleri
Text özelliği ile de font özelliğinin sahip olmadığı bazı özellikleri etiketimize ekleriz.
Örnek ile açıklayalım.
<html>
<body>
<head>
<title>Css</title>
<style type=”text/css”>
<!–
p {
text-transform : lowercase;
text-decoration : underline;
text-align : left;
line-height : 20px;
text-indent : 15px;
}
–>
</style>
<body>
<p>Web Teknikleri</p>
</body>
</html>
Alt özellikleri tanıyalım.
text-transform :
lowercase : Yazının tümünün küçük harf olmasını sağlar.
uppercase : Yazının tümünün büyük harf olmasını sağlar.
capitalize : Yazının istenilen şekilde kalmasını sağlar.
text-decoration :
underline : Yazının altının çizili olmasını sağlar.
overline : Yazının üstünün çizili olmasının sağlar.
line-through : Yazının üstünün çizili olmasını sağlar.
none : Yazının herhangi bir yerine çizgi çekilmemesini sağlar.
text-align:
left: Yazının sola bitişik olmasını sağlar.
center : Yazının ortada olmasının sağlar.
right : Yazının sağa bitişik olmasını sağlar.
line-height :Yazının normal satırdan çizgi yüksekliğini belirler. 3px, 5px gibi değerler alır.
text-ident : Yazının soldan ne kadar boşlukla içeriden başlayacağını belirler. 5px, 10px gibi değerler alır.