Hancı Eğitim

Bu makalede CSS’de
kullanılan tüm birimleri göreceğiz. Birimler genelde mesafe ve
renkleri tanımlamak için kullanılır. Birimleri dört gruba ayıra
biliriz. uzunluk birimleri, yüzde
birimleri, renk birimleri ve URL
birimleri

Uzunluk Birimleri

CSS’de tanımlanan 8
uzunluk birimi vardır. Bunların üç tanesi göreceli(relative)
uzunluklar ve kalan beş tanesi kesin(absolute)uzunluklardır.

Göreceli
Uzunluklar

Bu birimler diğer uzunluk
birimlerine göre görecelidir. Sayfalarımızın ölçeğinin değiştiği ve
çıktısının alındığı durumlarda bu uzunluk birimlerini kullanmamız
bize avantaj sağlayacaktır.

em:
Elementin fontunun yüksekliğidir. Mesela font-size değeri 14 px
olarak atanmış ise 1em 14piksel eşit demektir.

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 inch=2,54 cm’dir. Örn: line-height:0.5in

cm:
Santimetre. Bizim gerçek hayatta kullandığımız santimetere
değeridir. Örnek: margin:2cm

mm:
Milimetre. Bizim gerçek hayatta kullandığımız milimetere değeridir.
Örnek: letter-spacing:1mm

pt:
Point. Standart baskı birimidir. (1pt = 1/72in) Örn: font-size:14pt

pc: Pika.
Bir inçin altıda birine eşit olan bir baskı ölçü birimi. Bir pika 12
noktaya bölünür. Örnek: font-size:2pc

Yüzde Birimleri

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

1. 
   

   
   /* elementin font-size
   değerinin %150 si dir */
   
   

2. 
   

   
   h4 { line-height: 150%
   }
   

3. 
   

   
   /* satır genişliğinin
   10% nu */
   
   

4. 
   

   
   p { text-indent: 10% }
   
   

Renk Birimleri

CSS’de renk değerleri
isim olarak ve RGB değeri olarak tanımlanabilir. RGB tanımlamasıda
dört çeşittir.

Renk İsimleri

Renklerin ingilizce
isimleri kullanılarak tanımlama yapılabilir.

1. 
   

   
   p {color:black; } /*
   renk tanımı siyah olarak yapılıyor*/
   

2. 
   

   
   h1{ background-color:
   red;} /* h1 başlığının ardalanı kırmızı tanımlanıyor */
   
   

RGB Renk
Değerleri

CSS’de renk tanımlamak
için kullanılan asıl yöntem budur. RGB tanımlamanında dört çeşidi
vardır.

#RRGGBB :
Burada, RR, GG, ve BB,
sırasıyla kırmızı (red), yeşil (green) ve
mavi (blue) renklerin toplam renk içindeki yoğunluğunu gösteren
hekzadesimal sayılardır. Örnek: color:#ff0000; (kırmızı)

#RGB:
Yukardaki yöntemin kısaltmasıdır. Aynı değerleri taşıyan grup
değerleri birleştirilir. Örnek: color:f00; (kırmızı)

rgb(R,G,B):
Bu RGB renklerinin ondalık sayma düzeninde 0 ile 255
arasında bir tanımı vardır. Buna göre tanımlama yapılabilir. Örnek
h1 {color: #BF7F7F;}

rgb(R%,G%,B%):
Bu RGB renklerinin yüzdesel olarak %0 ile %100 arasında bir
tanımı vardır. Buna göre tanımlama yapılır. Örnek: h1 {color: rgb(75%,0%,0%);}

URL Değerleri

URL tanımlaması için
aşağıdaki gib bir tanımlama yapılır.

1. 
   

   
   url("https://www.hanci.org/images/kucuk.gif")
   
   

Burada tırnaksız ve tek
tırnaklı kullanımları da standarda uygundur.

Not :
Birde bunların dışında CSS2.0 ile birlikte gelen ekstra birimlerde
mevcuttur. Ancak bunlar kullanımda değildir.

Açı Değerleri :
deg(derece), grad(gradyen) ve
rad(radyan) Örnek: -90deg, 100grad ve 1.57rad

Zaman Değerleri:
milisaniye (ms) ve saniye (s)
Örnek : 100ms ve 0.1s

Frekans Değerleri
: Herz(Hz) ve MegaHerz(mHz) Örnek:
10mHz