CSS Söz Dizim Kuralları ve Seçiciler

Giriş niteliğindeki CSS nedir yazısında, CSS hakkında ilk temel bilgileri öğrendiniz.Bu yazıda da bu dile ait yazı kuralları yani CSS söz dizim kuralları ve en çok karşılaşacağınız seçiciler hakkında bilgi edineceksiniz.

CSS Söz Dizimi

Her yazılım dilinin belirlenmiş yazım kuralları vardır ve kodlar bu kurallara göre oluşturulur.Eğer bu kurallara aykırı kod yazarsanız kod blogunuz hata verecek ve çalışmayacaktır.

body { color: blue;}

/* body seçicimiz oluyor. 
   color : blue; ifadesi bildirim bloğudur.
   color CSS özelliği(property), blue ise değeri(value) ifade eder.
*/

CSS söz dizimi oldukça basittir.Yukarıdaki kod yapısında görebileceğiniz gibi bir adet seçici(selector) ve {} süslü parantezler arasında belirtilen decleration block (bildirim blogları) yapısından oluşur.

Seçici kısmı (aşağıda detaylı anlatacağım) değişiklik yapılmak istenen yeri anlatır.Bildirim blogu ise iki kısımdan oluşur.İlk olarak CSS property (CSS özelliği) ve iki noktadan sonra bu özelliğin değeri (value) verilir. Her bildirim blogu noktalı virgül (;) ile bitirilir.Bu şekilde bir seçici için birden fazla bildirim blogu oluşturulur.

Aşağıdaki örnekte “h1” seçicimiz içimiz için iki tane özellik veriyoruz.Color özelliği ile seçicinin rengini değiştiriyoruz, font-size özelliği ile yazı boyutunu ayarlıyoruz.

h1 { color: red; font-size: 24px;}

CSS Seçicileri

CSS seçicileri, HTML elementlerini element isimleri(name), id, class, özellik(attribute) ve daha farklı şekilllerde bulmaya veya seçmeye yarar.

Element Seçiciler

Element seçicileri, HTML elementlerini element isimlerine göre seçer. Örnek olarak bir web sayfasında kullandığınız paragraf elementini şu şekilde seçersiniz. Burada bütün elementlerinin rengi mavi(blue) olur.

p { color: blue; }
ID Seçiciler

ID (kim lik) seçiciler, HTML elementinin id özelliğine (attribute) göre özel bir seçim yapar.id özelliği benzersiz olmalıdır.Yani bir HTML belgesinde bir elemente verdiğiniz id değerini, başka bir elemente veremezsiniz.

Özel bir id değerine sahip elementi seçmek için hash(#) işareti koyup daha sonra id ismini girmeniz gerekir.

Aşağıdaki örnekte HTML belgesinde iki tane <div> elementi oluşturduk ve bir tanesine “kutu” isminde  id giriyoruz. Daha sonra CSS de, kutu id değerine sahip  <div> elementini seçmek için id seçici yöntemini kullanıyoruz.HTML belgesinde birden çok <div> elementi olduğunu düşünün ve sadece bir tanesine özel bir stil uygulayacaksınız. İşte id seçici yöntemi ile sadece o id ye sahip elemente stil atayabilirsiniz.

<div id="kutu">
Benim id değerim var.
</div>

<div>
Benim id değerim yok bana stil atanmıyor.
</div>
#kutu {
  width: 200px;
  height: 200px;
  background: green;
}
Class Seçiciler

Class seçiciler, HTML elementlerinin class özelliğine göre seçim yapar.Aynı class değerine sahip birden fazla HTML elementi olabilir.Class seçicisini, id seçicisinden ayıran en önemli nokta aynı class seçicisinin birden fazla elemente verilebilmesidir.

Class özelliğine sahip element veye elementleri seçmek için verilen class isminin başına (.) nokta işareti koyuyoruz.

Aşağıdaki örnekte iki adet div elementimize kutu isminde class değeri giriyoruz.Daha sonra CSS class seçici yöntemi ile bu iki div elementine stil atıyoruz.

<div class="kutu">
Benim kutu isminde class değerim var.
</div>

<div class="kutu">
Benim de var.
</div>
.kutu {
  width: 200px;
  height: 200px;
  background: green;
}

 

Grup Seçiciler

Birden çok elemente aynı değerler verileceği zaman gruplama yöntemini kullabilirsiniz.Bu yönteme grup seçiciler denir.

Örnekte olarak h1, p ve span elementlerimizin renklerini kırmızı yapacağız.Bu nedenle hepsini ayrı ayrı yazmak yerine örnekteki gibi gruplama yapabiliriz.

h1,p,span {
  color: red;
}

 

Yorum (Açıklama) Satırı

Her yazılım dilinde yorum (açıklama) satırları vardır.Açıklama satırları tarayıcılar ya da derleyiciler tarafından dikkate alınmaz.Sadece kodlara bakıldığı zaman görünür.

Yorum satırları yazılan kodların ne için olduğunu daha sonra bakınca hatırlamak için ya da kodlara bakacak diğer geliştiriciler için bilgilendirmek amacıyla yazılır.Yorum satırları tarayıcılar tarafından ziyaretçilere gösterilmez.

CSS açıklama satırı /* */ (slash yıldız ve yıldız slash ) işaretleri ile oluşturulur.Bu işaretin arasında yazılan ifade sadece kodların olduğu editörde görünür.Örneğe bakabilirsiniz.

/*
Ben bir yorum satırıyım.
Buraya saha sonra kolay hatırlamak için bilgi girebilirsiniz.
Veya kodları kullanacak 3. sahışlar için bu kodların ne için yazıldığını 
belirtebilirsiniz.
*/

Sonsöz

CSS derslerin bu ikinci yazısında, bir yazılım dilini doğru kullanabilmek için gerekli olan söz dizim kuralları (syntax) hakkında bilgi verdim.Ayrıca CSS de genel seçicileri başlangıç bilgisi olarak detaylandırmadan anlatmaya çalıştım.Daha iyi kavramanız içn kod örneklerini de eklemeyi es geçmedim.Ayrıca yazılım dillerinin olmazsa olması yorum satırlarını kod örnekleri içerisin de gösterdim.Bundan sonra ki derslerde artık CSS’e tam giriş yapmış olacağız.

Tüm CSS Dersleri için tıklayın

Bunları da beğenebilirsin