CSS

Css de Yapı / seciciler sozdizimi Ders-3

cssicimage - Css de Yapı / seciciler sozdizimi Ders-3

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.

İlgili Makaleler

2 Yorum

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.

Başa dön tuşu