CSS’de Birimler

10 Ağustos, 2008 | 178 Okunma | Kategori: CSS |

CSS’de birimleri 4 gruba ayırabiliriz.

Uzunluk Birimleri

Yüzde Birimleri

Renk Birimleri

Url Birimleri

Uzunluk Birimlerinden Başlayalım.
CSS’de 8 farklı uzunluk birimi vardır.Bunların 3′ü relative (göreceli) 5′i ise absolute (kesin) uzunluklardır.
Sayfa ölçeğinin değişmesi veya çıktısının alınması gibi durumlarda göreceli uzunluk birimleri avantaj sağlar.Her kullanıcının bilgisayarı özellik olarak farklılıklar gösterebilir.Özellikle kullanılan monitörlerin farklı ebatlarda-özelliklerde olması bu birimleri kullanışsız kılmaktadır.Misal, 15inc’lik bir monitörde gayet hoş görünen bir metin, 19inc bir monitörde kötü görünebilir.

Göreceli uzunluk birimlerini tanıyalım.

em: Elementin fontunun yüksekliğidir.1 em, 16 pixele karşılık gelmektedir.
CSS’de “em” uzunluk birimini kullanmak isteyenler için pixel olarak dönüşüm yapmak oldukça zordur.Bunun için kullandığım siteyi tavsiye edeyim size.Kullanışlı bir pixel-em dönüştürücü var burada.
http://riddle.pl/emcalc/

ex: Metnin küçük “x” harfinin yükseklik değeridir.Ortalama olarak 1ex, 8 pixele karşılık gelmektedir.Her fontun “x” karakteri farklı boyutlarda olduğundan, her font için bu uzunluk birimi farklı sonuçlar çıkaracaktır.

px: Pek yabancı olmadığımız, sıklıkla kullanılan bir ölçü birimidir.Bir resmi yeterince büyütürseniz, çok küçük kutucuklardan oluştuğunu görürsünüz.İşte bu kutuların her biri 1 pixele karşılık gelmektedir.Aynı mantık monitörlerde de vardır.Eğer monitörünüze çok takından bakarsanız ızgara şeklinde kutuculardan oluştuğunu görürsünüz.Bu kutucukların da her biri 1pixeldir.Bu da her monitöre göre farklı değerler demektir.

PLAIN TEXT

CSS:

#deneme {
font-size: 22px;}

Kesin uzunluklar ise, gerçek hayatta kullanılan kati ölçü birimleridir.

in (inch): 1in, 2,54cm’e karşılık gelmektedir.TopStyle Lite programında 1in, 96px e karşılık gelmektedir.Bu dönüşümleri Photoshop ile de test edebilirsiniz.Ancak 1in=72px’e karşılık gelecektir.CSS ile uğraştığımıza göre TopStyle Lite’daki değeri kullanabiliriz.

cm (santimetre): Günlük hayatta kullandığımız değerdir. TopStyle Lite’da 1cm, 38px’e karşılık gelmektedir.

mm (milimetre): Yine günlük hayattan tanıdığımız bir ölçü birimi.Bilindiği üzere 10mm, 1cm’e karşılık gelmektedir.Bu da 10mm=38px demektir.

pt (point): Standart baskı birimidir.100pt, 133pixele karşılık gelmektedir.Ufak bir bilgi, Photoshop programında 1px=1pt alınmıştır.

pc (pica): Bu da bir baskı ölçü birimidir.1pc, 16px’e karşılık gelmektedir.

Yüzde Birimleri :
Yüzde değerleri her zaman diğer elementlere göre göreceli değerlerdir.
Misal,

PLAIN TEXT

CSS:

h4 { line-height: 150% }

böyle bir kod, metnin font büyüklüğünün %150 kadarı bir satır yüksekliğini ifade eder.
Veya,

PLAIN TEXT

CSS:

p { text-indent: 10% }

böyle bir kod ise metnin soldan satır genişliğinin %10'u kadar içerden başlayacağını ifade eder.

Renk Birimleri :
CSS'de renklerin İngilizce isimleri kullanılarak tanımlama yapılır.Design ile ilgilenen arkadaşlarımız varsa, RGB kavramı pek yabancı gelmeyecektir onlara.Bu mod Red(Kırmızı), Green(Yeşil), Blue(Mavi) renklerinin başharfleri ile tanımlanmaktadır.

5 Çeşit renk belirleme özelliği vardır.
1- İlgili renk özelliğine HTML tablosundaki renklerden birinin isminin direk olarak atanması yöntemi.Misal, Aşağıdaki kodlar 12px font büyüklüğünde açıkyeşil renkte bir yazıyı karşılamaktadır.

PLAIN TEXT

CSS:

#deneme {
font-size: 14px;
color: LightGreen;
}

gibi.

2-Kısa RGB kodu ile renk atama yöntemi :
Kırmızı (R), Yeşil (G) ve Mavi (B) renkler ayrı ayrı 0,...,F arası tek basamaklı heksadesimal değer alabilirler.
En fazla renk değeri : #FFF (Önceki yöntemlere göre = White) 'dir.
Aşağıdaki kodlar 12px font büyüklüğünde beyaz renkte bir yazıyı karşılamaktadır.

PLAIN TEXT

CSS:

#deneme {
font-size: 12px;
color: #FFF;
}

3-RGB kodu ile renk atama yöntemi :
Kırmızı (R), Yeşil (G) ve Mavi (B) renkler ayrı ayrı 00,...,FF arası iki basamaklı heksadesimal değer alabilirler.
En fazla renk değeri : #FFFFFF (Önceki yöntemlere göre = #FFF = White)
Aşağıdaki kodlar 12px font büyüklüğünde yeşil renkte bir yazıyı karşılamaktadır.

PLAIN TEXT

CSS:

#deneme {
font-size: 12px;
color: #9ACD32;
}

4-Tam sayı değer ile renk atama yöntemi :
Kırmızı (R), Yeşil (G) ve Mavi (B) renkler ayrı ayrı 000,...,255 arası 3 basamaklı tam sayı değerleri alarak aşağıdaki örnekteki gibi belirtilirler.
En fazla renk değeri : rgb(255, 255, 255) (Önceki yöntemlere göre = #FFFFFF = #FFF = White)
Aşağıdaki kodlar 12px font büyüklüğünde beyaz renkte bir yazıyı karşılamaktadır.

PLAIN TEXT

CSS:

#deneme {
font-size: 12px;
color: rgb(255,255,255);
}

5-Yüzde değeri ile renk atama yöntemi :
Kırmızı (R), Yeşil (G) ve Mavi (B) renkler ayrı ayrı 000,...,100 arası kayar noktalı sayı değeri alarak gösterilir.
En fazla renk değeri : rgb(100%, 100%, 100%) (Önceki yöntemlere göre = rgb(255,255,255) = #FFFFFF = #FFF = White)
Aşağıdaki kodlar 12px font büyüklüğünde beyaz renkte bir yazıyı karşılamaktadır.

PLAIN TEXT

CSS:

#deneme {
font-size: 12px;
color: rgb(100%, 100%, 100%)
}

URL Birimleri :
Herhangi bir metnin,belirli bir alanın, arkaplanına veya etrafına yerleştirilen resmin gösteriliş şeklidir.Misal;
Aşağıdaki kodlar 12px font büyüklüğünde beyaz renkte, arkaplanına benim atadığım style.css ile aynı dizinde olan images klasöründeki deneme.gif dosyasının gösterileceğini söyler.

PLAIN TEXT

CSS: