Css sözdimi üç parçadan oluşur. Bir seçici, bir parametre ve bir değer:
KOD:Seçici {
parametre: değer
}
Seçiciler html etiketleridir. Parametre değiştirmek-şekillendirmek istediğimiz niteliktir ve nitelik bir değer alır. Belirttiğimiz parametre ve değer birbirinden: (iki nokta üst üste) ile, her parametre birbirinden ; (noktalı virgül) ile ayrılır.
KOD:body {
background: #000000
}
Eğer değerimiz birden fazla kelime içeriyorsa çift tırnak içerisine alınmalıdır:
KOD:body {
font-family: "sans serif"
}
Her parametrenin noktalı virgül ile ayrılması gerektiğini söylemiştik:
KOD:body {
font-family: "sans serif"; color: #000000
}
Gruplama Yapmak
Gruplama yaparak birden çok seçiciyi yani html etiketini değiştirebiliriz. Her bir seçici virgül ile ayrılarak belirtilir.
KOD:h1, h2, h3, h4 {
color: red
}
Bu şekilde her <h1>, <h2>, <h3> ve <h4> etiketi arasına yazılan yazılar kırmızı renkte olacaktır.
Sınıf Seçiciler
Sınıf seçiciler ile aynı html etiketine farklı özellikler atayabiliriz. Sayfamızda birden fazla katman yani div etiketi kullanacağımızı düşünelim. Katmanlardan birinde yazılarımız sağa dayalı diğerinde ise sola dayalı olması gerekebilir:
KOD:div.yazisaga {
text-align: right
}
div.yazisola {
text-align: left
}
Css seçicilerini html etiketlerine uygulamak için class parametresini kullanırız.
KOD:<div class="yazisaga">
Bu katmandaki yazılar sağa dayalı olacaktır.
</div>
<div class="yazisola">
Bu katmandaki yazılar sola dayalı olacaktır.
</div>
Bir html etiketine birden fazla seçici uygulayabiliriz. Bunun için seçicileri boşluk ile ayırırız. İki tane seçicimiz olduğunu varsayalım. Katmandaki yazı hem kalın olsun hemde sağa dayalı.
KOD:<div class="yazisaga kalinyazi">
Bu katmana iki adet seçici uygulanmıştır.
</div>
Bir css sınıfını sadece bir etikete, yani yukarıda olduğu gibi sadece div etiketine değil, sayfanızdaki herhengi bir etikete uygulamak isteyebilirsiniz. Bunun için sınıf adınından önce . (nokta) koyarak sınıf adını yazarız. Herhangi bir etiket belirtmeyiz.
KOD:.kirmiziyazi {
color: red
}
<p class="kirmiziyazi">Bu paragraftaki yazılar kızmızı</p>
<span class="kirmiziyazi">Buradaki yazılar kırmızı</span>
Id seçiciler
id seçiciler sınıf seçicilerden farklı olarak . (nokta) yerine # işareti ile tanımlanırlar.
KOD:#yesil {
color: green
}
id seçicileri html etiketlerimize eklerken id parametresini kullanırız.
KOD:<span id="yesil">Buradaki yazılar yeşil renkte.</span>
Eğer belirli bir etikete id seçici ile değer atamak istersek:
KOD:div#yesil {
color: green
}
KOD:<div id="yesil">Bu katmandaki yazılar yeşil renkte.</div>
Sınıf ve id tanımlarken dikkat etmeniz gereken 2 nokta vardır. Sınıflar ve id'ler rakam ile başlamamalıdır. Sınıflar ve id'ler büyük küçük harfe duyarlıdır. Yesil ile yesil aynı değildir.
Satır aralarına yorum ekleme
Kod yazarken satır aralarına hatırlatıcı, açıklayıcı yorumlar eklemek güzel bir alışkanlıktır. Kodunuzu daha sonra tekrar kullanmak istediğinizde size yol gösterirler. Cssde kodlar arasına yorum eklerken programlama dillerinde de geçerli olan slash ve yıldız işaretini kullanırız.
KOD:/* aşağıdaki kodlar yazıları kırmızı yapmak için yazılmıştır */
.kirmizi {
color: red
}
/* aşağıdaki kodlar yazıları mavi yapmak için kullanılmıştır. */
.mavi {
color: blue
}
Yorum satırları /* ile başlar ve */ ile biterler. Birden çok satır ve kod parçacıkları yorum olarak kullanılabilir. Tarayıcılar bu satırları dikkate almazlar.
Cssnin sözdizimini anlamak için bu kadar açıklama yeter sanırım. Hepinize kolay gelsin.
Html ( 15 )
