CSS Font Aileleri
Bir metnin font ailesi, font-family özelliği ile atanır. Bu özellik aynı anda birden fazla değer alabilir; eğer tarayıcı ilk fontu desteklemiyorsa ikinci fontu dener. Dolayısıyla kullanmak istediğin özel bir font ile başlayıp her yerde geçerli bir fontla bitirmek tercih edilebilir. Çoklu font ailelerini virgülle ayrılacak şekilde yazabilirsin. Eğer kullandığın font bir kelimden fazlaysa tırnak içine alman gerekir : “Arial Black” gibi CSS içierisine aşağıdaki şekilde tanımlayıp makaleFontu class ismi ile bu font ailelerini kullanabilirsin.
p.makaleFontu { font-family:Calibri, "Arial Black", sans-serif; }
Font Stili
font-style özelliği en çok metinleri italic yapmak için kullanılır. Yada stil değiştirilerek metin italikden normale dönüştürülebilir. Aşağıdaki örnekte <p> elementi için yazılan 2 ayrı class seçicisi ile metinlere normal ve italik font stili
verilişini görebilirsin :
<html>
<head>
<style type="text/css">
p.duz {font-style:normal;}
p.italik {font-style:italic;}
</style>
</head>
<body>
<p class="duz">Bu normal yazıdır.</p>
<p class="italik">Bu ise italik bir yazıdır.</p>
</body>
</html>
Font stili için yazdığın css ve html için ekran çıktısı aşağıdaki gibi olacaktır :
css-font
Faydalanabileceğin diğer önemli font özellikleri şöyle sıralanabilir :
font -> Tek bir tanım ile bütün font özellikleri belirlenebilir.
fontsize ->20px şeklinde kesin yada 2em gibi göreceli olarak yazı boyutu belirlenebilir
fontvariant -> Metnin büyük harflerle baş harfi daha büyük olacak şekilde stillendirilmesini sağlar.
fontweight ->Metnin kalınlığını ayarlar (bold gibi)
CSS Listeleri
CSS ile kullanabileceğin liste özellikleri sana sıralı ve sırasız liste kalemi işaretçicisi atamanı sağlar. Bunun yanında liste kalemi işaretçisi olarak imaj kullanma imkanı sunar. HTML ile 2 tip liste yapabilirsin :
Sırasız (Unordered) : Listedeki elemanlar için madde işaretleri kullanılır.
Sıralı (Ordered) : Listedeki elemanlar için numara yada harf kullanılır.
CSS kullarak bu yetenek genişletilebilir ve liste elemanı için işaretçi olarak imaj kullanılabilir.
Farklı Liste Elemanı İşaretleri
İçi dolu daire, kare gibi sırasız (ul), roman rakamları, küçük harfler gibi sıralı (ol) işaretçiler kullanılabilir. Bunları bir örnek üzerinde görebilirsin:
<html>
<head>
<style type="text/css">
ul.kare {list-style-type:square;}
ul.daire {list-style-type:disc;}
ol.roman {list-style-type:lower-roman;}
ol.sayi {list-style-type:decimal;}
</style>
</head>
<body>
<p>Sırasız liste için örnekler</p>
<ul class="kare">
<li>Bellek</li>
<li>Ana kart</li>
<li>İşlemci</li>
</ul>
<ul class="daire"> <li>Bellek</li> <li>Ana kart</li> <li>İşlemci</li> </ul> <p>Sıralı liste için örnekler</p> <ol class="roman"> <li>Bellek</li> <li>Ana kart</li> <li>İşlemci</li> </ol> <ol class="sayi"> <li>Bellek</li> <li>Ana kart</li> <li>İşlemci</li> </ol> </body> </html>
Ekran çıktısı aşağıdaki gibi olacaktır :
css-liste-stil
CSS Background
CSS background özelliği, bir element için arka plan tanımlamak için kullanılır. Arka plan efektleri için kullanılan farklı özellikler bulunmaktadır.
Arka Plan Resmi
background-image özelliği ile bir elementin arka planında kullanılmak istenen resim belirtilebilir. Örneğin body elementine verilen bir arka plan resmi ile bütün sayfanın sitenen bir imaj ile kaplanmasını sağlayabilirsin. Bu örnekte <table> elementine verilen arka plan imajı için gerekli stili görüyorsun :
<html>
<head>
<style type="text/css">
table {background-image:url('MaviGokyuzu.jpg');}
</style>
</head>
<body>
<table>
<tr>
<td>Burada arka plan resmi var...</td>
</tr>
</table>
</body>
</html>
Ekran çıktısı aşağıdaki gibidir :
css-arkaplan
Arka Plan Rengi
background-color özelliği ile bir elementin arka plan rengi belirtilebilir. body seçicisi ile komple bir
sayfanın arka plan rengi tanımlanabilir.
<html>
<head>
<style type="text/css">
body
{
background-color:#ff0000;
}
</style>
</head>
<body>
<p>Merhaba CSS</p>
<h2>CSS, Açık Akademi'de öğrenilir.</h2>
</body>
</html>
Ekran çıktısı aşağıdaki gibidir :
css-arka-renk
CSS ile renk farklı şekillerde verilebilir. Bunların arasında fonksiyonalite açısından bir fark yoktur.
Adı ile : red
HEX değeri ile : #ff0000
RGB değeri ile : rgb(255,0,0)
Sağlıcakla kalın !
Konular: arkaplan, background, css, font, font ailesi, font stili, fontlar, imaj, işaret, liste, listeleme, örnek, örnekler, özellikler, renk, resim, resimli, sıralı, sırasız, stil
Yorum yok
Bu yazı için Yorum Beslemesi
Geri izleme bağlantısı http://www.kodhane.com/css-font-list-arkaplan.html/trackback