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..
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:
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:
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:
ö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:
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
}
p
{
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.
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:
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.
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.
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.
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:
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.
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.
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
}
