CSS YAPISI VE SYNTAX (SÖZDİZİMİ)
CSS söz dizimi 2 ana kısımda incelenebilir. Seçici , Bildirim Bloğu tabi burada bildirim bloğu içersinde bildirimler vardır.
Seçici : Bir gurup bildirimi(özellikler ve aldıkları değerleri) temsil eden bir addır.Tüm HTML etiketleri yada sınıf seçici yada id seçici olabilir.
Bildirim bloğu: Seçici için tüm CSS özellikleri içinde tutan yapıdır. Süslü parantezle açılır ve Bildirimler bittiğinde süslü parantezle kapanır. ” {} ” ,Bunlara bildirim bloğu kapsayıcıları denir. İçerisinde bildirimleri taşır her bildirimden sonra muhakkak ; konmalıdır.
Bildirimler: Bildirim CSS özelliği(property) ve aldığı değerden (value) oluşur. Property ve value arasında ” : ” karakteri kullanılmalıdır.
Property : value (CSS özelliği : özelliğin aldığı değer )
örneğin ;
Yukarıdaki örnekte seçici ve bildirim bloğu , bildirimler gözükmektedir.
CSS ‘de özellikler ve değerler:
CSS standart olarak size bir çok özellik ve bu özelliklerin alabileceği değerleri sunar.Hangi özelliğe hangi değeri vereceğiniz tamamen tasarımınızla ilgilidir. CSS değerler çift tırnak içine alınmaz.
SEÇİCİLER
Daha öncede söylediğim gibi seçiciler bir gurup özellik ve özelliklerin aldıkları değerlerin adıdır.Özellik gurupları bu adla temsil edilirler.
1.Etiket (xHTML ) Seçiciler:
Seçici olarak XHtml etiketleri kullanılınır.Var olan tüm etiketler Birer seçici olarak kullanılabilir.XHTML etiketlerinin görevlerini yeniden tanımlamak için kullanıldığı gibi XHTML elemanına ek özellikler katmak içinde kullanılabilir.
Bir XHTML etiketini olan <p> ( paragraf etiketi ) seçici olarak tanımlarsak ve özellikler eklersek sayfada kullanılan tüm <p> etiketlerinin içindeki nesnelere bu özellikler uygulanır.
Özet olarak bir XHTML elemanı seçici olarak kullanılırsa tüm belge boyunca ona atadığınız özellikleri barındırdıkları içeriklere(yazı, resim,tablo) uygularlar.
Burada h2 ve p elemanlarına CSS özellikleri atanmış ve sayfada görüldüğü gibi içinde taşıdıkları nesnelere bu özellikler uygulanmış.
2.Sınıf Seçicisi (Class selector)
Sınıf seçicilerini bir XHTML etiketine farklı özellikler eklemek için kullanabiliriz ki bu durumda bu sınıf seçicileri bağımlı sınıf seçicileri olarak adlandırılırlar.
Örnekte dikkat edileceği üzere <p> etiketi sınıf seçici olmadan yapılsaydı yazılan özelliklerden belgedeki tüm <p> tagları etkilenecekti ama şimdi p tagı için iki sınıf oluşturuldu ve ayrı ayrı özellikler atandı artık istenilen <p> etiketlerine istenilen class atanabilir.
Burada tanımlanan iki sınıfta <p> tagına bağımlı sınıflardır. Bu durumda sayfada sadece <p> tagına bu class’lar atanabilir
Eğer bağımlı bir sınıf seçici oluşturmak istiyorsak ;
Eğer bağımsız yani tüm imler tarafından kullanılabilecek bir sınıf seçici oluşturmak istersek bu durumda nokta ile başlayıp sınıf seçici adını yazmamız yeterli olacaktır.
Sınıf seçicinin en önemli özelliği tüm HTML elemanları tarafından kullanılabilmeleridir.Yani bağımsız sınıf seçicilerini farklı XHTML imlerine atayabiliriz.
10 views
ÖLÇÜLENDİRME
CSS özelliklerine uzunluk değerleri 2 şekilde tanımlanabilir.
Mutlak değerler (absolute values ) ve göreceli değerler (relative values)
Mutlak uzunluk birimleri:
Mutlak uzunluk birimlerinin değerleri tam ve kesin değerlerdir.Bu değerler herhangi bir nedene bağlı olarak değişmez.
in : inç (1inch=2,54cm) bir uzunluk birimidir.ör: 2,25in
cm : Santimetre ör: 2,33cm
mm: Milimetre ör: 23mm(1 mm 0,1cm eşittir)
Pt : punto baskı birimidir.Genellikle font büyüklüğü tanımlamak için kullanılınır.
1pt: 1/72 inç örneğin : 16pt
pc : Pika 1 pika 12punto değerine eşittir.Baskıda kullanılan bir ölçü birimdir.
Göreceli Uzunluk Birimleri:
Göreceli uzunluk birimleri kullanıldığı ortama göre değişir.Yani ölçü birimlerinde ölçülendirme başka bir veriye göre yapılır.Bu durumda verinin özellikleri değiştiğinde göreceli uzunluklarda değişir.
ex : kullanılan fontun x harfinin yüksekliğine göre ölçülendirme işlemi yapılır.
em : kullanılan fontun M harfinin genişliği
px : piksel yazılımsal olarak ekranı oluşturan en küçük noktadır.Bu durumda uzunluk değerleri px cinsinden verilebilir.Çözünürlüğün değişmesine bağlı olarak px cinsinden verilen uzunluk değerleri de değişir.
% (yüzde) : Değer atadığımız özelliğe bağlı başkaca bir özelliği yada kapsayıcı elemanın uzunluk değerlerini baz alarak ölçülendirme yapılır . 25%
RENK DEĞERLERİ
Programatik olarak renkleri kodlamamız gereklidir.CSS renk kodlaması için bize farklı seçenekler sunar.
#RRGGBB : Burada ilk 2 basamak kırmızı(red) diğer 2 basamak yeşil(green) ve son iki basamak mavi(blue) rengini temsil etmektedir.Burada basamaklara girilecek değerler 16 sayı tabanında(hexadecimal) olmalıdır.Girdiğiniz değerlere göre renk yoğunlukları belirlenir.
#RGB :Her renk için (red,gren,blue) bir basamak ayrılmıştır.Yine hexadecimal sayı sistemi kullanılacaktır.
Rgb(R,G,B): Bir rengin kırmızı , yeşil , mavi olmak üzere sayısal değerleri
ör : rgb(204,51,225) burada bir renk tanımlaması için 0-255 değerleri girilebilir.
Rgb(R%,G%,B%) : Bir rengin karşılığı olan red, green , blue yüzde değerleri rgb(45%,34%,23%)
Name : renk atama işlemlerinde rengin adını kullanabiliriz.ör: bgcolor: red ;
CSS3 ile beraber gelen özelliklerden bir tanesi RGBA(RGB with alpha channel) yani bir rengi tanımlarken alfa saydamlık değerini de girmemiz mümkün
16 views
Margin ÖZELLİKLERİ
Kutunun kenar dış boşluğunu ayarlamak için kullanılınır. Kutu çizgileri ile diğer elemanlar yada sayfa kenarı arasındaki mesafeyi ayarlamak için kullanılınır.margin tanımlaması yaptığınız eleman etrafındaki elemanları belirlediğiniz değer ölçüsünde öteleyecektir.
Negatif değer alabilir.
Body içerik anlamına geldiğinden web sayfasında içeriğin görüntülendiği kısmı temsil eder
Body için magrin tanımlaması yaparsak sayfa kenarlarında kullanılmayacak alanlar oluşturmamız mümkündür.
body{
margin:25px;
}
Magrin özellik gurubunun alabileceği değerler :
Uzunluk , % , inherit ,auto(otomatik değer al)
1.margin-top
üst kenar dış boşluğunu ayarlamak için kullanılınır.
2.margin-right
sağ kenar dış boşluğunu ayarlamak için kullanılınır.
3.margin-bottom
Alt kenar dış boşluğunu ayarlamak için kullanılınır.
4.margin-left :
Sol kenar dış boşluğunu ayarlamak için kullanılınır.
5.margin
tüm kenar dış boşluklarını eşit olarak ayarlamak için yada kutunun kenar dış boşluklarına aynı anda ayrı ayrı değerler atamak için kullanılınır.
Margin:50px;
Tüm kenar dış boşluklarını eşit olarak ayarladık
Kutunun tüm dış kenar boşlukları 50px olarak ayarlanmış
Margin: 23px 20px 30px 40px;
Kenar dış boşluklarına aynı satırda ayrı ayrı değerler verdik
Eğer kutunun herhangi bir kenarına kenar dış boşluğu vermek istemezsek 0 değerini yazmamız yeterli olacaktır mesala sağ kenar için kenar dış boşluğu vermek istemiyorsak ;
Margin: 12px 0 40px 60px ;
Yazmamız yeterli olacaktır.
Özelliklere değer atama sırası >>>
Margin özelliğine 4 kenar dışı boşluk içinde değer atamak için saat yön
Margin: margin- top || margin –right || margin-bottom || margin-left
NOT:Farklı kenarlara farklı kenar dış boşlukları verebiliriz.
8 views
Padding ÖZELLİKLERİ
Css içerik yani dolgu ile border arasındaki kenar içi boşluğu ayarlama imkanı sağlamaktadır. Varsayılan olarak 0 değerini alır.
Eleman için eğer padding tanımlanmamış ise bu durumda border ile pad arasında hiçbir boşluk olmayacaktır.
Padding özellikleri bir uzunluk değeri yada % cinsinden bir değer alabilir.% değerleri hesaplanırken kutunun genişliği yada yüksekliği baz alınır.
1-padding -top
Pad yani dolgu ile kutunun üst kenarı arasındaki boşluğu ayarlamak için kullanılınır. Üst kenar içi boşluğu
2-padding –right
Pad ile kutunun sağ çizgisi arasındaki boşluğu ayarlamak için kullanılınır.sağ kenar içi boşluğu
3-padding –bottom
Pad yani dolgu ile kutunun alt çizgisi arasındaki boşluğu ayarlamak için kullanılınır.alt kenar içi boşluğu
4-padding –left
Pad yani dolgu ile kutunun sol çizgisi arasındaki boşluğu ayarlamak için kullanılınır.sol kenar iç boşluğu
5-padding
Pad yani dolgu ile tüm kutu kenar çizgileri arasındaki boşluğu eşit olarak ayarlamak yada kutunun tüm kenarları için aynı anda ayrı ayrı kenar içi boşluğu tanımlaması yapabiliriz.
Padding: padding-top || padding-right || padding-bottom || padding-left ||
Burada özelliklere değerler atanırken sıranın saat yönünde olduğuna dikkat edin.
Eğer bu özelliğe 2 değer atamışsanız ilki üst ve alt kenar içi boşlukları için ikincisi sağ,sol kenar içi boşlukları için kullanılınır.
5 views
