Yazar: merhaba değerli arkadaşlar.
html komutları içerisinde font etiketini sizlere anlatmıştım. bu yazımda sizlere css font özelliklerini ve css’de font kullanımını anlatacağım.
kısaca font etiketinin ne işe yaradığına bakalım.
font etiketi sayfamızdaki yazı tipi, yazı boyutu ve yazının rengini ayarlamamızı sağlayan bir etikettir.
şimdi bu yazıda font kavramını css içerisinde kullanacağız.
css font özelliklerinde font etiketinin almış olduğu parametreler şu şekildedir.
font-family
font-family : Font tipini belirler.
Arial, Courier, Verdana gibi font isimlerini alabilir.
font-size
font-size değirini iki türlü belirtebilirsiniz.
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)
istersenizde pt değeri ile punto olarak belirtebilirsiniz.
font-weight
font-weight özelliği ile yazıların kalınlık, incelik durumlarını belirtebilirsiniz.
bold : Fontu kalın yapar. normal : Fontun normal halde olmasını sağlar.
Bu özellik yazılmadığında normal özellik alınır.
font-stile
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 belirtmek için kullanılır.
Blue, red,green gibi renklerin ingilizce karşılıklarını alabilir.
dilersenizde renklerin rakamsal değerlerini belirtebilirsiniz.
şimdi bu özelliklerin hepsini kullanarak bir örnek yapalım.
font.html adında bir dosya oluşturun.
html ve css kodlarını tek bir sayfada yazacağız çünkü.
örnek:
<html>
<head>
<title> css font özellikleri </title>
<style type=”text/css”>
<!–
p
{
font-size : 12pt;
font-family : Arial;
font-weight : bold;
font-style : italic;
color : #00FFFF;
}
–>
</style>
</head>
<body>
<p>
css font özellikleri
</p>
</body>
</html>
tüm font özelliklerini bir örnekte kullanmış olduk.
şimdi ise bağlantılı css türünü kullarak aynı örneği oluşturalım.
font.css adında bir dosya oluşturalım ve şu kodları yazalım.
p
{
font-size : 12pt;
font-family : Arial;
font-weight : bold;
font-style : italic;
color : #00FFFF;
}
şimdi ise html dosyamız için bir dosya oluşturalım.
font2.html isminde bir dosya olsun.
html komutlarımızı yazılım ve bu dosya içerisinde css sayfasını çağıralım.
<html>
<head>
<title> css font özellikleri </title>
<link rel=”stylesheet” type=”text/css” href=”font.css”>
</head>
<body>
<p>
css font özellikleri.
</p>
</body>
</html>
bu şekilde html dosyasını kayıt edin ve html dosyasını açın css font özelliklerin etkili olduğunu göreceksiniz.
sizlerde css kodlarınızı yazarken bu şekilde kullanabilirsiniz.
başka bir css yazısında görüşmek üzre.
iyi bloglamalar herkese.
Bir önceki yazımız olan css türleri başlıklı makalemizde css şablonu, css türleri ve daili css hakkında bilgiler verilmektedir.