CSS/Yazım Kuralları

< CSS

CSS'de yazım kuralları toplam olarak 3 kısımdan oluşur

  • Seçici
  • Özellik
  • Argüman
Seçici{
  özellik: argüman;
  özellik-özellik: argüman argüman;
  özellik-özellik-özellik: argüman;
  özellik: argüman argüman argüman
}

Bu gibi yazım kurallarından oluşur.

Seçici, HTML'deki elementleri(etiketleri, tagları vb.) hedef alır. Hedef alınan elementlere, özellik ve argüman yardımıyla şekil(stil) verilir.

Özellik

değiştir

Özellik, HTML'deki elementlerin özelliklerini belirtir. Her özellik minimum 1 argüman almak zorundadır.

Argüman

değiştir

Argüman, HTML'deki elementlere verilen özelliklerin değeridir. Argüman yazmak için mutlaka özellik olması gerekmektedir.

Scope(Süslü parantezler)

değiştir

CSS'deki özellikler ve argümanlar, Scope denilen {} (süslü parantezler) içerisine yazılır.

Yorum satırları

değiştir

Her bilgisayar dilinde olduğu gibi CSS'de de yorum satırları vardır. Yorum satırları /* ile başlar ve */ ile biter.


Aşağıdaki örnekte

  • h1 bir seçicidir. HTML'deki <h1></h1> etiketlerini hedef alır.
  • font-family bir özellikdir. HTML'deki <h1></h1> etiketleri içerisine yazılan metinin yazı tipini belirler.
  • Arial, Helvetica, serif bir argümandır. HTML'deki <h1></h1> etiketlerinin içerisine yazılan metinin yazı tipini Arial olarak belirler. Eğer Sayfayı görüntüleyen bilgisayarda Arial yazı fontu yüklü değil ise Helvetica yazı fontunu belirle demiş olduk ve son olarak serif bu da yazı tipi ailesini belirtir.

Eğer az bir miktar dahi olsa İngilizce bilginiz varsa, aşağıdaki özellikleri anlamış olmanız gerekir. Özellikleri ve argümanları daha sonra anlatacağız. Bu örneklerde bilmeniz gereken CSS'in yazım kuralları. Dikkat ettiyseniz argümanların sonunda ; (noktalı virgül) kullandık. Bir çok dilde olduğu gibi CSS'de de noktalı virgül kuralın bittiğini gösterir. Eğer scope içinde yazacağınız argüman son ise noktalı virgül koymanıza gerek yoktur. Aşağıdaki color özelliğine bakabilirsiniz

h1{
  font-family: Arial, Helvetica, serif;
  font-size:21px;
  color: #00F
}

/*CSS'de yazılan farklı bir stil okunabilir olması nedeniyle bu yazım stili tercih edilir*/
h2{font-family: Arial, Helvetica, serif; font-size:18px; color:#00F}