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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Project Zeta</title> <style> h4{ line-height: 150%; } </style> </head> <body> <h4>Industryolog Akademi</h4> </body> </html></span> |
2 Renk Birimleri
CSS bir renk tanımlaması 2 türlü yapılabilir.
Birincisi İngilizce isimleri ile renk tanımlamaları yapılabilir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Project Zeta</title> <style> h4{ line-height: 150%; color:brown; } </style> </head> <body> <h4>Industryolog Akademi</h4> </body> </html></span> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Project Zeta</title> <style> h1{ color:blue; } h2{ color:#ff0000; } h3{ color:rgb(134,230,123); } h4{ line-height: 150%; color:brown; } h5{ color: rgb(10%,30%,20%); } </style> </head> <body> <h1>Industryolog Akademi</h1> <h2>Industryolog Akademi</h2> <h3>Industryolog Akademi</h3> <h4>Industryolog Akademi</h4> <h5>Industryolog Akademi</h5> </body> </html></span> |
3 URL Değerleri
CSS de URL tanımlaması şu şekilde yapılır.
|
1 |
<span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;">url(/images/industryolog.png)</span> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: 12pt;"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Project Zeta</title> <style> h1{ color:blue; } h2{ color:#ff0000; } h3{ color:rgb(134,230,123); } h4{ line-height: 150%; color:brown; } h5{ color: rgb(10%,30%,20%); } body{ background-image: url(http://dna.industryolog.com/wp-content/uploads/2018/02/05-2-Hafta-1-Yazilim-CSS3-768x432.png); } </style> </head> <body> <h1>Industryolog Akademi</h1> <h2>Industryolog Akademi</h2> <h3>Industryolog Akademi</h3> <h4>Industryolog Akademi</h4> <h5>Industryolog Akademi</h5> </body> </html></span> |
Bugün de bu kadardı. Görüşmek üzere.