Css Ölçü birimleri ve renkler

 

Css Ölçü 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: 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.

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

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

RGB kod sistemine dayalı renk belirleme.

Ø Uzun RGB Kodu ile Renk Belirleme(#RRGGBB)

 

Kırmızı (R), Yeşil (G) ve Mavi (B) renkler ayrı ayrı 0..FF arası heksadesimal değer alabilirler.RGB kodunun başında heksadesimal olduğunu göstermek üzere # işareti olmalıdır. #000000 ile #FFFFFF arasında renk değerleri alabilir. Örnek olarak { background-color: #449BDB; }

Ø Kısa RGB Kodu ile Renk Belirleme (#RGB)

 

Uzun RGB kodu ile renk belirleme işinin kısaltılmış halidir. Kırmızı (R), Yeşil (G) ve Mavi (B) renkler ayrı ayrı 0..F arası heksadesimal değer alabilirler. #000 ile #FFF arasında renk değerleri alabilir.

Ø Tam Sayı Değer ile Renk Belirleme

 

Gerek uzun RGB kodu ile olsun gerekse kısa RGB kodu ile renk belirlerken heksadesimal kod kullandığımızı biliyoruz, işte bu kod içindeki kırmızı (R), yeşil (G) ve mavi (B) olarak belirttiğimiz her kısmın onluk sistemdeki karşılığının rgb (R, G, B) biçiminde belirtilmesi tam sayı değeri ile renk belirleme işidir.

Bu da demek oluyor ki R,G,B kısımları kendi içlerinde 0-255 arasında değer alabilmektedir.

 Örnek olarak;

 rgb (0,0,0) è siyah

rgb(255,255,255) è beyaz rengi ifade etmektedir.

 

Ø Yüzde Değer ile Renk Belirleme

RGB kodunda her rengin tanımını yüzdesel olarak % 0 - % 100 şeklinde belirtme işidir.

Örnek olarak rgb (0%, 0%, 0%),  siyah rgb (100%, 100%, 100%) ,beyaz rengi ifade etmektedir.

Saydamlık verme

Hex renkler  3(RGB) kanallı gösterime sahiptir. Tüm renkler opaktır. Sona eklenen 4. alpha kanalı (RGBA) ile saydamlık verilebilir.

          RGBA(RED GREEN BLUE ALPHA)

Örnek: #ff000088 (yarı saydam kırmızı renk)

Örnek:#f008(yarı saydam kırmızı renk)

Rgb onluk renklerde saydamlık verme: alpha kanalı eklenerek saydamlık verilir. 1 opak 0 saydamdır.1 ile 0 arasında değer alır.

Örnek: rgba(255,0,0,0.5);  yarı saydam kırmızı renk