Merhaba.

CSS3 Eğitimlerimize 7. dersimizle devam ediyoruz. Bu yazımda CSS3 ölçü birimlerinden bahsedeceğim.

CSS3 de birimler 4 gruba ayrılır. Uzunluk birimleri, yüzde birimleri, renk birimleri ve URL birimleridir.

1 Uzunluk Birimleri

CSS’de 3 tanesi göreceli 5 tane de kesin uzunluk birimi vardır.

Göreceli Uzunluklar

Öncelikle neden bu uzunluk birimlerini kullanmalıyız sorusuna cevap arayalım. Web sayfalarımıza uyguladığımız uzunluk birimleri sayfa boyutu değiştiğinde sayfayla orantılı olarak değişmesini istiyorsak bu tür ölçü birimlerini kullanırız.

em:  Ana elementin font boyunun (font-size) değerine göre hesaplanarak bulunur. Yani body elemanında varsayılan yazı tipi büyüklüğünüze (font-size) bağlı büyüme-küçülme gösteren ölçülerdir. em varsayılan font büyüklüğünde ve font ailesinde (font-family) yer alan “M” harfinin genişliğini baz almasıdır.

ex: Elementin “x” harfinin yüksekliğidir. Atanmış olan fontun küçük “x” değeri yüksekliğidir.

px: piksel değeri. Eğer monitörünüze yeterince yakından bakarsanız, çok küçük kutulardan oluşmuş bir ızgaraya benzer. Burdaki her kutu bir pikseldir. Bu da her monitöre göre farklı değer demektir.

Kesin Uzunluklar

Bu uzunluklar gerçek hayatta kullanılan birimlerdir.

in: inç. 1 inçh:2,54 cm dir. 

cm: santimetre

mm: milimetre

pt: Point. Standart baskı birimidir. font-size:14pt;

pc: pika. 1 Pika 12 noktaya bölünür. font-size:2pc

Yüzde Birimleri

Kullanım İle bakalım.

2 Renk Birimleri

CSS bir renk tanımlaması 2 türlü yapılabilir. 

Birincisi İngilizce isimleri ile renk tanımlamaları yapılabilir.

2. Renk bildirme yöntemi ise RGB renk kodları ile bildirmektir.

4 çeşit kullanımı vardır.

#RRGGBB : Burada RR Kırmızı GG yeşil ve BB mavi renklerinin toplam renk içindeki yoğunluğunu bildiren hekzadesimal sayılardır. #ff0000 gibi.

#RGB: Bir önceki yöntemin kısaltmasıdır. #f00

rgb(R,G,B): RGB renklerinin 0 ile 255 arasındaki değerlerinin verilmesidir. rgb(191,127,127)

rgb(R%,G%,B%): Bu kullanımda  da renklerin bulunma yüzdesi belirtilir. rgb(75%,0%,0%)

Şimdi bunları kullanalım.

3 URL Değerleri

CSS de URL tanımlaması şu şekilde yapılır.

url ifadesinden sonra parantezler içine gidilecek olan adres yazılır. Tek tırnaklar içine yazılmış hallerini de görebilirsiniz ikisi de doğrudur.

Bugün de bu kadardı. Görüşmek üzere.