CSS Temel Grameri

CSS 语法

CSS kuralları, iki ana parçadan oluşur: seçici ve bir veya daha fazla tanım.

selector {declaration1; declaration2; ... declarationN }

Seçici genellikle tarzını değiştirmek istediğiniz HTML elementidir.

Her tanım, bir özellik ve bir değerden oluşur.

Özellik (property), istediğiniz tarz özellikleridir. Her özellik bir değere sahiptir. Özellik ve değer arasındaki ayrım noktası ile ayrılır.

selector {property: value}

Bu satırın amacı, h1 elementindeki metin rengini kırmızıya, yazı boyutunu 14 piksele ayarlamaktır.

Bu örnekte, h1 seçici, color ve font-size özellikleridir, red ve 14px değerleridir.

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

Aşağıdaki şematik resim, yukarıdaki kodun yapısını gösterir:

CSS 语法

İpucu:Tanımları parantez içinde sarın.

Değerlerin farklı yazımları ve birimleri

English kelimesi red'in yanı sıra, onaltılık renk değeri #ff0000 de kullanılabilir:

p { color: #ff0000; }

Bayt tasarrufu yapmak için CSS'nin kısaltılmış biçimini kullanabiliriz:

p { color: #f00; }

RGB değeri iki şekilde kullanılabilir:

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

Lütfen dikkat edin, RGB yüzdesel olarak kullanıldığında, değeri 0 olsa bile yüzde işareti yazılmalıdır. Ancak, diğer durumlarda bu yapılmaz. Örneğin, boyut 0 piksel olduğunda, 0'nın ardından px birimi kullanılmaz, çünkü 0 herhangi bir birimle 0'dır.

Tırnakları unutmayın

İpucu:Değer birden fazla kelime ise, değeri tırnak içinde yazın:

p {font-family: "sans-serif";}

Çoklu tanım:

İpucu:birden fazla tanım tanımlamak istiyorsanız, her tanım arasında semicolon kullanmanız gerekir. Aşağıdaki örnek, bir kırmızı metinli merkezi paragrafın nasıl tanımlanacağını gösterir. Son kurallar arasında semicolon eklenmemesi gerekir, çünkü semicolon İngilizcede bir ayırıcı işaret değil, bir sonlandırıcı işaret'tir. Ancak, deneyimli çoğu tasarımcı her tanımın sonunda semicolon ekler, bu da mevcut kurallardan tanım eklemek veya çıkarmak durumunda olduğunuzda hata yapma olasılığını en aza indirir. İşte böyle:

merkezde metin hiza; color:red;}

Her satırda sadece bir özellik tanımlamalısınız, bu da stil tanımlarının okunabilirliğini artırır, örneğin:

p {
  text-align: center;
  color: black;
  font-family: arial;
}

Boşluk ve Büyük/Küçük Harf

Çoğu stil tablosu birden fazla kural içerir ve çoğu kural birden fazla bildiri içerir. Çoklu bildiriler ve boşluk kullanımı, stil tablolarının daha kolay düzenlenmesini sağlar:

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

Boşluk içerir içermez, CSS'nin tarayıcıda çalışma etkisi ağırlıklı değildir. Aynı şekilde, XHTML ile farklı olarak, CSS büyük/küçük harfe duyarlı değildir. Ancak, bir istisna vardır: HTML belgesi ile birlikte çalışırken, class ve id adları büyük/küçük harfe duyarlıdır.