Css de Yapı / seciciler sozdizimi Ders-3
Makale İçerik Başlıkları
Css Seçiciler ve Sözdizimi
Bir Css dosyası sözdizimi Genellikle 3 Bölümden oluşmaktadır. Bunlar;
seçici {özellik: değer;} Şeklindedir. Kod ile örnek verecek olursak
body {background-color: #ff0022;}
yukardaki örnekte sayfamızın arka plan rengini kırmızı olarak belirledik bu örnekte “body” seçici “background-color” özellik ve “#ff0022” hex koduyla oluşturulan kırmızı rengimizde değerimiz oluyor.
Bir örnekle css yapısının daha gelişmiş halini göstereyim. Örneğin sayfadaki paragraf etiketi içerisindeki tüm yazıları sağa ve sola yaslı yapmak istiyorsunuz:
p { text-align:justify;}
ya da sadece paragraf etiketleri için değilde bir kaç ayrı etiket için yazı renklerini tek bir renk yapmak istiyorsunuz
h1,h2,p,url { text-align:justify;}
Gördüğünüz gibi css yapısında bir özelliğe atayacağınız değeri birden fazla seçici için kullanabiliyorsunuz.
Ayrıca bir seçici için birden fazla özellik kullanabilirsiniz
p {font:14px Arial; color:#000; line-height:16px;}
Sonuç: Css te istediğiniz bir seçiciye değer atarken tek bir kurala bağlı kalmanıza gerek yok, css ; php, html ya da javaya nazaran daha yaratıcı bir dil diyebiliriz. yaratıcılık burada fonksiyonel anlamda kullanılmadı yanlış anlamayın. css diğer diller gibi her seferinde tek bir kurala bağlı değildir. örneğin;
Aşağıdaki iki uygulama da satır yüksekliklerini belirlemek için yapılır.
1. örnek:
p {font:12px/14px Tahoma;}
Yukardaki örnekte birinci seçici (12px) yazının font büyüklüğü için kullanılırken; ikinci seçici (14px) yazının satır yüksekliği için kullanılmıştır ve bunlarla birlikte Yazı font ismi de verilmiştir (Tahoma)
2. Örnek:
p {font:12px Tahoma; line-height:14px;}
1. örnekte tek bir seçici yaptığımız işlem için ikinci örnekte yeni bir seçici daha atayıp yaptık hatta yazı font adını da kaldıralım
p {font-size:12px; font-family:Tahoma; line-height:14px;}
gördüğünüz gibi yazacağımız kod satırı gittikçe artıyor ve daha karmaşık hale geliyor.
CSS GRUPLAMA
Seçiciler sadece bir html elemanına atanacak diye bir kural yoktur. Birden çok HTML elemanına da atama yapabiliriz. Bu olayın adı gruplamadır. Gruplama özelliği hem seçicilerde hemde bildirimlerde yapılabilmektedir.
p, h1, h2, h4, span {font-color:red;}
Ykarda gördüğünüz gibi p, h1, h2, h4 ve span seçicileri red yani kırmızı renk değerini almışlar bu seçicileri de aynı özelliği almaları için virgül (,) ile birbirlerine bağlamışız yani birleştirici gruplama işareti olarak kullanmışız.
Mesela Yukardaki Örneğimizi genişletebiliriz. Bildirim Bloğumuzdaki yani yukarda bulunan {font-color:red;} kısmındaki değerleri arttırabiliriz. mesela font-size (yazı fontu büyüklüğü) verebiliriz, bacgkround-color (arka plan rengi) verebiliriz
CSS’de UZUNLUK TANIMLAMALARI
Css de kullanılan toplam 8 adet uzunluk tanımlaması bulunmaktadır. Bunlardan 3 tanesi releative (göreceli) kalan 5 tanesi de absolute (kesin) uzunluk tanımlamalarıdır
Göreceli Uzunluk Tanımlamaları
Bu tür css uzunluk tanımlamaları sayfamızın çözünürlüğünün değiştiiği durumlarda ya da yazdırıldığı durumlarda bizlere ve kullanıcıya büyük avantajlar sağlayacaktır, çünkü ekran görüntüsüne / çıktısına göre sayfamıza uyum sağlayacaklardır.
bunlar nedir ?
Releative Uzunluk Tanımlamaları
em: Yazı fontu yüksekliği olarak tanımlanmaktadır. 14 pixel 1em ye eşittir.
ex: Yazı fontu elemanının x değeri yüksekliği olarak tanımlanmaktadır. etkilenmiş olan yazıtipinin küçük x değeri yüksekliği de diyebiliriz. fakat bu kullanımın pek tutulduğunu ya da kullanıldığını görmedim. en çok kullanılanlar em ve aşağıda açıklayacağım pixeldir.
px: Pixel kare kutu anlamına da gelmektedir ve bir resmi olduğundan daha çok büyüttüğünüzde kutu kutu göreceksiniz işte bu kutular o resmi veya yazıyı oluşturmaktadır. Bu kutular yani pixeller de her ekranda farklı olmaktadır. boyut anlamında.
Absolute Uzunluk Tanımlamaları
Bu uzunluk birimleri normal hayatımızda kullandığımız uzunluk birimleridir ve genelde web tasarımdan ziyade baskı lı işlerde de kullanılırlar. Bunlar in ( 1 inch = 2,54 cm), cm (santimetre), mm (milimetre), pt (point / 1pt:1/72in), pc (pika / bu da sadece baskılı işlerde kullanılır)
Yüzde (%) ölçü birimi
css de Yüzde ölçü birimleri de releative yani göreceli değerlerdir ve sayfalarımızda özellikle css3 ve html5 in de varlığıyla daha çok kullanılmaya başlanmıştır. % kullanılan durumlarda bu ölçü birimini kullandığımız element sayfamızın çözünürlüğüne göre hareket etmektedir ve bu da bize günümüzde responsive dediğimiz tasarımlarda büyük fayda sağlamaktadır.
p {width:20%} Şeklinde kullanılmaktadır.
CSS’de RENK TANIMLAMALARI
Css derenk tanımlamaları, isim ve RGB olarak tanımlanabilmektedir.
Renk İsimleri
Bu css renk tanımlamasında renklerin ingilizce isimleri ile istediğimiz materyalimize renk ataması yapabilmekteyiz.
span {backgroun-color:red;} burada span seçicimize kırmızı arka plan rengi vermiş olduk
CSS’de RGB Renk Değerleri
Hexzadesimal (hex): #RRGGBB Bu kullanımda RR (Kırmızı / red), GG (Yeşil / green), BB (Mavi / blue) Anlamını Taşımaktadır.
p {color:#ff0000} bu örneğimizde kırmızı rengimizi p (paragraph) elementimize atamış olduk
#RGB : Bu da Hex renk kodumuzun kısaltmasıdır. Burada aynı değerleri taşıyan grup değerleri birleştirilerek uygulama yapılır.
p {color:#f00} gördüğünüz gibi yukardaki hex kodumuzdaki aynı değerde bulunan diğer rakam ve harfler çıkarılmış ve sadeleştirilmiştir.
rgb (R,G,B): RGB Renk sisteminde ondalık sayma sistemine göre 0 – 250 arası değerleri vardır. bu değerlere göre renklerimiz tayin edilir.
p {color:rgb(9,195,86);} gördüğünüz gibi rakamlarımızı virgülle ayırarak ve parantez içinde rgb ye tanımlayarak atamasını yaptık. bu durumda p (paragraph) elementimizin içerisindeki yazılara renk vermiş olduk.
CSS’de Dizgeler / Strings
Dizgeler tek ya da çift tırnak içinde yer alabilirler. Dizgelerin geliştirilme amacı bir makalenin, bir yazının sonuna ya da başına atama yapabilmemizin sağlanabilmesiydi.
<div class="yazimiz">Bu Yazı Ekranda Görüntülendiğinde başında ve sonunda çift tırnak işaretleri olacak</div>
.yazimiz:before { content: '"'; } .yazimiz:after { content: '"'; }
Yukardaki örneğimizde :bofore ile dedik ki yazımız adlı css tanımlamamızın başına content’içinde bulunan tırnak değerini yerleştir. aynı şekilde :after ile de yazımız adlı css tanımlamamızın sonuna da tırnak yerleştir
çıktısı da şu şekilde olacaktır
“Bu Yazı Ekranda Görüntülendiğinde başında ve sonunda çift tırnak işaretleri olacak“
Gördüğünüz gibi kırmızı ile çift tırnakları işaretledim görebilmeniz için. Bununla ilgili bir sürü örnek uygulama yapabilirsiniz.
Umarım css-2 yi bitirdiğimizde css3 içinde eğitimlere başlayacağım ve bu sefer videolu çekmeyi düşünüyorum. iyi çalışmalar diliyorum umarım faydalı oluyordur dersler.
GÜNCELLEME: 11 Eylül 2015 Cuma – HTML-5 ve CSS-3 Videolu ve dökümmanlı Derslerimiz İçin Tıklayabilirsiniz
iyi çalışmalar.
Güzel ve anlaşılır bir ders olmuş teşekkürler.
Sade ve güzel anlatım eline sağlık