CSS Syntax

Hazırlayan: YASEMİN ALHOUSEN

_________________________________________________

CSS Yazım kuralları ( Syntax)

CSS (Cascading Style Sheets), web sayfalarının görünümünü belirlemek için kullanılan bir stil dilidir.

CSS syntax, web geliştiricilerinin kullanarak tasarım ve stil özelliklerinin tanımlanmasına olanak tanıyan bir dil yapısıdır. . 

CSS syntax, CSS kodlarını kullanarak sayfaların görünümünü değiştirebilmenizi sağlar. Bir stil sayfasındaki CSS kodu, web sayfasındaki öğelerin tasarımını etkileyebilir. Bu nedenle, CSS syntax, web sayfasının tasarımı ve kullanıcı deneyimi için kritik bir rol oynar.

CSS, Seçici ve Bildirim olarak iki ana bölümden oluşur.

 Aşağıdaki örnekteki "h1"in yazıldığı alan "Seçici" alanıdır, "{color: blue;}" yazan alan ise "Bildirim" alanıdır. "Bildirim" içinde ki "color" yazan alan "Özellik" alanıdır, "blue" yazan alan ise "Değer" alanıdır.

  h1 {

    color: blue;

}

"Seçici" alanına "HTML/XHTML etiketi", "class", "id" vs yazabiliriz.

Her "Bildirim", "Özellik" ve "Değer" içermelidir.

"Özellik", değiştirilmek istenen stil özelliğidir. "Değer" ise stil özelliklerine verilen değerlerdir. 

Bazı css özelliklerini öğrenelim :

 color : renk demekti , değer alanında tüm renkleri kullanabiliriz.

background-color : Arka plan rengini belirtmek için kullanılı.

 font : Hat demekti.

Width , Height : Genişlik ve yükseklik anlamına gelir.

Width ve Max-Width Özellikleri:

Varsayılan olarak bu etiketler bulunduğu ortamın tüm genişliğini kullanırlar. 

Display özelliği:

 sayfa yerleşimini ayarlamak için kullanılan en önemli CSS özelliklerinden biridir.

Margin özelliği:

 bildiğiniz üzere HTML elemanlarının diğer elemanlarla arasındaki mesafeyi ayarlamak için kullanılmaktadır. auto, margin-left ve margin-right değerleri alabilmektedir.

Overflow Özelliği : 

Bu özellik, genişlik ve yükseklik özellikleri belirtilen elemanların içeriğinin sığmaması, taşması durumunda nasıl davranılacağı ile ilgilidir.Bu özellik visible, hidden, scroll ve auto olmak üzere 4 değer alabilmektedir.

Float Özelliği : 

En basit kullanımı ile float özelliği kullanılarak sağ ya da sol tarafa yerleştirilen bir resmin etrafindan metnin akması sağlanabilir. None, left, right değerleri alabilmektedi

Bildirim grupları süslü parantez içinde olmalıdır ve her zaman noktalı virgülle bitmelidir.

# Bir stili istediğiniz kadar seçiciye uygulayabilirsiniz.

  Aşağıdaki örnekte gösterildiği gibi sınırlayıcıları virgülle ayırmanız yeterlidir.

  h1, h2, h3 {

   color: #36C;

   font-weight: normal;

   letter-spacing: .4em;

   margin-bottom: 1em;

   text-transform: lowercase;

}

# CSS Yorum Ekleme - Comments :

CSS'te yorumu açarken "/" karakterlerini kullanıyoruz, yorumu kapatırken ise "/" karakterlerini kullanıyoruz.

    /* Bu CSS ile her "p" etiketi içinde ki yazının rengi sarı olacak ve yazılar ortalanmış olacak.  */

p {

    color: yellow;

    text-align: center;

}

# HTML belgesine birkaç farklı şekilde dahil edilebilir. Bunlar arasında <style> etiketi, harici bir CSS dosyası ve stil özellikleri içeren HTML öğesi gibi yöntemler bulunur.