ONBİNRENK - Bilgi Arşivi

css3

Font Biçimi 

 

 
Yukarıdaki anlatımda metin özelliklerini CSS ile tanımlamayı görmüştük. Şimdiki
dersimizde ise yazı fontlarının özellikleri ile oynayacağız.. 
 

Font Türü 

 
Önce font seçmeyi öğrenelim. HTMLden <font> kodu ve face="..." parametresi ile
yazı fontunu belirliyorduk. CSS'de ise bu işi font-family özelliği ile yaparız: 
 
Kod:
h1 
font-family:Arial 
h2 
font-family:Courier 
h3 
font-family:Comic Sans MS 
h4 
font-family:Verdana 
 
 
 

Font Büyüklüğü 

 
HTMLde fontların büyüklüğünü belirlemek için <font> kodunu ve size="..."
parametresini kullanıyorduk. CSS'de ise font-size özelliğine değerler veririz.
Verilen değer yüzde oranı (%şeklinde olabilir veya pt (point) birimi cinsinden
olabilir. Bunların yanı sıra xx-large, x-large, large, medium, small, x-small, xx-small
gibi gömlek ölçülerini de kullanabiliyoruz. Veya smaller
(yürürlükteki değerden bir küçük), larger (yürürlükteki değerden bir büyük) gibi
değerler de kullanabiliyoruz: 
 
Kod:
h1 
font-size:xxlarge 
h2 
font-size:160% 
h3 
font-size:larger 
h4 
font-size:10pt 
 
 
 

Font Eğikliği 

 
Fontların dik stilde mi, yoksa yana eğik stilde mi görüntüleneceğini font-style
özelliğine değerler vererek belirleriz. Eğer fontların normal (dik stilde) olmasını
istiyorsak normal değerini, eğik olmasını istiyorsak italic veya oblique değerini veririz: 
 
Kod:
h1 
font-style:normal 
h2 
font-style:italic 
h3 
font-style:oblique 
 
 
 

Büyük Harf, Küçük Harf 

 
Eğer fontların tamamının büyük harflerle yazılmasını istiyorsak (BÜYÜK HARF;
boyutça büyük değil) font-variant: small-caps özellik ve değerini kullanırız. Eğer
bunu istemiyorsak normal değerini veririz: 
 
Kod:
h1 
font-variant:small-caps 
font-variant:normal 
 
 
 

Font Kalınlığı 

 
Eğer fontlarımızın kalın (bold) olmasını istiyorsak, font-weight özelliğinden
yararlanırız. Bunun için font-weight özelliğine normal, bold (kalın), bolder
(yürürlükteki kalınlıktan bir değer daha kalın), lighter
(yürürlükteki kalınlıktan bir değer ince) gibi standart değerler verebiliriz.
Veya 100, 200,...,800,900 gibi sayısal değerler de verebiliriz. 400 sayısal
değeri, normal font değerini verir. 700 sayısal değeri ise kalın (bold) font
değerini verecektir. 
 
Kod:
h1 
font-size:14pt; 
font-weight:900 
h2 
font-size:14pt; 
font-weight:bold 
h3 
font-size:14pt; 
font-weight:500 
h4 
font-size:14pt; 
font-weight:normal 
h5 
font-size:14pt; 
font-weight:lighter 
h6 
font-size:14pt; 
font-weight:200 
 
 
 

Font Özelliklerini Tek Kodla Tanımlama 

 
Font formatı konumuzda öğreneceğimiz son özellik: font. Bu özellik
fontların tüm özelliklerini aynı anda belirtmeye yarıyor. font özelliği üç
standart tip değer alıyor: 
 
font: (font-style değeri) (font-weight değeri) 
font: (font-style değeri) (font-variant değeri) (font-weight değeri) (font-size değeri) (font-family değeri) 
font: (font-style değeri) (font-variant değeri) (font-weight değeri) (font-size değeri)/(line-height değeri) (font-family değeri) 
 
Not: line-height özelliğini metin formatı sayfasında görmüştük. 
 
Kod:
code 
font: italic bolder 
p, h3, td, pre 
font: italic normal bold 12px arial 
blockquote, sub, sup, strong 
font: oblique small-caps 900 10px/12px courier 
 
 
 
Font formatı konumuz da bu kadar. Bu konudaki özelliklerin CSS formatında
nasıl yer alacağını gösterdim ama örnek çözmedim. Çünkü HTML'de işlenen
konuyla paralel gidildiği için, okuyucuların yazılanları kolaylıkla anladığını
düşünüyorum. Tabi sizlerin birkaç örnek çözmenizde fayda var. Benim verdiğim
yazım şekillerinde h1-h6, p gibi kodları kullandım ama siz yapacağınız örneklerde
çeşitli kodların özellikleri üzerinde oynayabilirsiniz. 
 
 
 

Arkaplan Biçimi 

 
HTMLde sayfanın arkaplanını değiştirmek için <body> komutuna bgcolor="..."
parametresini atanıyor. Bu parametre tablolar veya diğer kodlar (h1-h6, marquee,vb...)
için de geçerliydi. 
 

Arkaplan Rengi 

 
CSS'de ise bu kodların background-color özelliğine renk değerleri veriyoruz. 
 
Kod:
body 
background-color: yellow 
td 
background-color: #ffffcc 
h1 
background-color: rgb(100%,100%,85%) 
div 
background-color: rgb(255, 255, 217) 
 
 
 

Arkaplan Resmi 

 
HTML'de arkaplana resim koymak için background="..." parametresinden
yararlanıyorduk. CSS'de arkaplan resmi yerleştirmek için background-image
(arkaplan görüntüsü) özelliğine url(...) şeklinde adres değeri veririz. Eğer arkaplana
resim koymak istemiyorsak none değeri veririz. 
Not:Arkaplan resmi istemezseniz, hiç bu özelliği yazmazsınız, olur biter. Wink 
 
Kod:
body 
background-image: url(duvar.gif) 
td 
background-image: url(c:\kaplamalar\tiles.gif) 
div 
background-image: url(http://geocities.com/selnur/resimler/newworld.jpg) 
span 
background-image: none 
 
 
 

Arkaplan Resmini Döşeme 

 
HTML'de arkaplan resimleri kendisini tekrarlıyordu. Oysa biz arkaplan
resimlerinin her zaman döşenmesini (kendisini tekrar etmesini) istemeyiz.
CSS'de bunun için çok güzel bir özellik var: background-repeat. Bu özelliğin
alacağı değerler şöyle: 
 
repeat Arkaplan resmini hem yatay hem de düşey olarak döşer (tekrarlar). 
background-repeat: repeat 
 
repeat-x Arkaplan resmini sadece yatay olarak döşer. 
background-repeat: repeat-x 
 
repeat-y Arkaplan resmini sadece düşey olarak döşer. 
background-repeat: repeat-y 
 
no-repeat Arkaplan resmini döşemeden, tek bir resim halinde gösterir. 
background-repeat:no-repeat 
 
 
Kod:
body 
background-image: url(duvar.gif); 
background-repeat: repeat 
td 
background-image: url(c:\kaplamalar\tiles.gif); 
background-repeat: repeat-x 
div 
background-image: url(http://geocities.com/selnur/resimler/newworld.jpg); 
background-repeat: repeat-y 
span 
background-image: url(manzara.bmp); 
background-repeat: no-repeat 
 
 
 

Arkaplan Resminin Konumu 

 
Sayfamızın arkaplanında tek bir resim yer alacaksa, bu resmin sayfa üzerindeki
konumunu belirlemeliyiz. Bunun için CSS'nin background-position özelliğinden
yararlanırız. Bu özellik iki değer birden alır, ilk değer resmin sayfaya göre düşey
konumunu, ikinci değer ise resmin sayfaya göre yatay konumunu ifade eder.
background-position: (düşey konum değeri) (yatay konum değeri). Bu değerleri
aşağıdaki biçimlerde yazabiliriz. 
Not: Bu özelliği NN gözatıcıları (browser) desteklemiyor. 
 
background-position: top left 
background-position: top center 
background-position: top right 
background-position: center left 
background-position: center center 
background-position: center right 
background-position: bottom left 
background-position: bottom center 
background-position: bottom right 
background-position: (yüzde değer) (yüzde değer) 
background-position: (birim değer) (birim değer) 
 
Kod:
body 
background-image: url(monalisa.jbg); 
background-repeat: no-repeat; 
background-position: 100px 60px 
td 
background-image: url(c:\kaplamalar\tiles.gif); 
background-repeat: no-repeat; 
background-position: top left 
div 
background-image: url(http://geocities.com/selnur/resimler/newworld.jpg); 
background-repeat: no-repeat; 
background-position: center center 
span 
background-image: url(manzara.bmp); 
background-repeat: no-repeat; 
background-position: 35% 35% 
 
 
 

Arkaplan Resmini Sabitleme 

 
Netscape gözatıcılarının tanımadığı bir diğer özellik de background-attachment.
Bu özellikle arkaplan resminin sayfayla beraber kayıp kaymayacağını belirliyoruz.
Eğer bu özelliğe scroll değerini verirsek, sayfamızla beraber arkaplan resmi de
scrollbar ile beraber kayar. Eğer fixed değerini verirsek arkaplan resminin konumu
scrollbara göre değişmez, sabit kalır. 
 
Kod:
body 
background-image: url(monalisa.jbg); 
background-repeat: no-repeat; 
background-position: 100px 60px; 
background-attachment: fixed 
td 
background-image: url(c:\kaplamalar\tiles.gif); 
background-repeat: no-repeat; 
background-position: top left; 
background-attachment: scroll 
div 
background-image: url(http://geocities.com/selnur/resimler/newworld.jpg); 
background-repeat: no-repeat; 
background-position: center center; 
background-attachment: fixed 
span 
background-image: url(manzara.bmp); 
background-repeat: no-repeat; 
background-position: 35% 35%; 
background-attachment: scroll 
 
 
 

 




  


=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=