09-01-2015, 03:28 AM
Bir CSS Koduna Bakış
Bir CSS kodu iki temel bileşenden oluşur. Biri element ve stilleri birbirinden ayıran bir seçim. Diğeri ise bir ya da daha fazla özelliği bildirdiğimiz ifade bölümü.
![yapi.jpg](http://css.sitesi.web.tr/yapi.jpg)
Seçim genel olarak stilini belirleyeceğimiz HTML elementidir, h1, a, body, p gibi.
İfadeler ise sürekli olarak özellik: değer; şeklinde { ve } işaretleri arasında sıralanırlar.
CSS Örneği
Bir css ifadesi her zaman noktalı virgül (
ile biter. İfadeler bir kıvrımlı parantez içinde yer alır. Aşağıdaki örneğe bakalım:
Kod:
Yukarıda tek satırda belirttiğimiz kodları istersek aşağıdaki şekilde de yazabiliriz. Daha anlaşılır olacaktır:
Kod:
CSS'de Açıklama Kullanmak
Her programlama dilinde ve HTML'de de olduğu gibi bazen kullanıcıların görmeyeceği ancak bizim için referans olacak açıklamalar yazmak gerekebilir. Bu durum için CSS de /* açıklama */ kullanılmaktadır:
Kod:
Bir CSS kodu iki temel bileşenden oluşur. Biri element ve stilleri birbirinden ayıran bir seçim. Diğeri ise bir ya da daha fazla özelliği bildirdiğimiz ifade bölümü.
![yapi.jpg](http://css.sitesi.web.tr/yapi.jpg)
Seçim genel olarak stilini belirleyeceğimiz HTML elementidir, h1, a, body, p gibi.
İfadeler ise sürekli olarak özellik: değer; şeklinde { ve } işaretleri arasında sıralanırlar.
CSS Örneği
Bir css ifadesi her zaman noktalı virgül (
![Wink Wink](http://mediamarjin.10tl.net/images/smilies/wink.png)
Kod:
Kod:
p { color: red; text-align: center; }
Yukarıda tek satırda belirttiğimiz kodları istersek aşağıdaki şekilde de yazabiliriz. Daha anlaşılır olacaktır:
Kod:
Kod:
p
{
color: red;
text-align: center;
}
CSS'de Açıklama Kullanmak
Her programlama dilinde ve HTML'de de olduğu gibi bazen kullanıcıların görmeyeceği ancak bizim için referans olacak açıklamalar yazmak gerekebilir. Bu durum için CSS de /* açıklama */ kullanılmaktadır:
Kod:
Kod:
/* Paragraf Stilim */
p
{
/* Renk kırmızı olacak */
color: red;
/* Ortalanmış olacak */
text-align: center;
}