CSS Dersleri 2: Söz Dizim Kuralları ve Seçiciler

CSS Dersleri 2: Söz Dizim Kuralları ve Seçiciler

Merhabalar,

CSS nedir dersimiz de CSS’in ne olduğu, ne işe yaradığı ve nasıl eklendiği gibi başlangıç bilgilerini anlatmıştım .Bu yazımızda da yine başlangıç ta bilmeniz gereken en önemli konulardan biri olan CSS yazım kuralları yani CSS söz dizimleri (syntax) ve genel seçiciler hakkında bilgi vereceğim.

Daha önce ki CSS ders yazılarım:

  1. CSS Dersleri 1: CSS Nedir ?

CSS’de Söz Dizimi

Her web programlama 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.

[syntax type=”css”]
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.
*/[/syntax]
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.

[syntax type=”css”]h1 { color: red; font-size: 24px;}[/syntax]

CSS’de söz dizimleri ilk başta class ismiyle başlar yani belirli bir alana biçim,renk vermek istiyorsak o alana bir class yani isim atıyoruz. Örneğin bir çerçeve yapacağız bunun için HTML’de ki kod bloguna bir isim veriyoruz ve cerceve diyoruz.

CSS’de de bu ismi kullanarak söz dizimleri ile şekillendiriyoruz. Böyle:

[syntax type=”css”].cerceve {background-color: #000;font-size: 12px;color: #ddd;border: 1px solid #000;[/syntax]

Kodları az çok anlamışsınız. HTML kodlarımızda belirlediğimiz alana verdiğimiz class ismi ile CSS ile o alanı şekillendirdik. Arkaplan rengi verdik, yazı boyutunu büyüttük, yazıya renk verdik, bu alan içinde kenarlıklar ekledik.CSS’de söz dizimleri bu şekilde kullanılmaktadır.

Gel gelelim bir diğer konumuza CSS’de Seçiciler.

CSS’de Seçiciler

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

4 tane CSS seçicisi mevcuttur. Bunları tek tek örnekler ile anlatmaya çalışacağım.

1.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. <p></p> etiketi taşıyan her HTML elementinin yazı rengi mavi(blue) olur.

[syntax type=”css”]p { color: blue; }[/syntax]

2.ID Seçiciler

ID 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.

[syntax type=”html”]
<div id=“kutu”>
Bana bir adet id değeri atandı 🙂
</div>
<div>
Bende id değeri yok ben stilsiz kalıcam 🙁
</div>
[/syntax]

CSS Kodu ise bu şekilde olacak:

[syntax type=”css”]
#kutu {
  width: 200px;
  height: 200px;
  background: green;
}
[/syntax]

 3. 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 özelliğini, id özelliğinden ayıran en önemli kısımdır.
Class özelliğine sahip element veye elementleri seçmek için (.) nokta işareti koyup class ismini yazıyoruz.
Aşağıdaki örnekte iki adet div elementimize “kutu” isminde class değeri giriyoruz.Daha sonra CSS de class seçici yöntemi ile bu iki divimize stil atıyoruz.

[syntax type=”html”]
<div class=“kutu”>
Benim class değerim var, beni css ile şekillendirebilirsin.
</div>
<div class=“kutu”>
Benimde var 🙂
</div>
[/syntax]

CSS kodu ise şu şekilde olacaktır:

[syntax type=”css”]
.kutu {
  width: 200px;
  height: 200px;
  background: green;
}
[/syntax]

 

4. Grup Seçiciler

Birden çok seçiciye aynı değerleri verecekseniz gruplama yöntemini kullabilirsiniz.
Örnekte olarak h1,p ve span elementlerimizin renklerini kırmızı yapacağız.O zaman hepsini ayrı ayrı yazmak yerine örnekteki gibi yapabiliriz.

Bu şekilde birden fazla HTML elementini tek tek stil atamak yerine bir class isimlerini yan yana ve virgül ile ayırarak tek CSS satır kodu ile onların hepsini şekilendirebilirsiniz.

[syntax type=”css”]
h1,p,span {
  color: red;
}
[/syntax]

CSS’de Yorum Satırları

Her web programlama dilinde yorum satırları vardır.Bu yorum satırları tarayıcılar yada derleyiciler tarafından dikkate alınmaz.Sadece kodları yazanlar tarafından görünür.

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

CSS de yorum satırı /* */ (slash yıldız ve yıldız slash ) işaretlerinin arasında oluşturulur.Örneğe bakabilirsiniz.

[syntax type=”css”]
/*
Ben bir yorum satırıyım.
Yorum ya da açıklama satırları yazdığını CSS kodlarının ne işe yaradığını ya da ne olduğunu açıklamak için kullanırız. Hazırladığınız CSS dosyasının sizden başka biride kullanıp, düzenleyecekse bu yorum satırları o kişinin kodları rahat anlayabilmesini ve değişiklikleri rahat yapabilmesini sağlar. Bu yüzden gerekli olan yerlerde muhakkak yorum satırlarını kullanınız 🙂
*/
[/syntax]

CSS derslerin bu ikinci yazısında, bir web programlama 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.

Trackback: CSS Dersleri 2 , CSS Dersleri 2 : Seçiciler , CSS Dersleri 2 : Söz Dizim Kuralları , CSS Dersleri 2 : Yorum Satırları

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir